设置某个元素的标签内容、设置元素的样式、层次选择器、总结选择器

点击按钮设置某个元素的标签内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;height: 200px;background: green;}</style><script src="jquery-1.12.1.js"></script><script>// 案例:点击按钮在div中添加一个p标签/*** .val();----设置或者获取标签标签的value属性值* .text();----设置或者是获取标签中的文本内容----就相当于DOM中的innerText* .css();----设置元素的css样式属性值* .html();----设置或者是获取标签中的html内容----就相当于DOM中的innerHTML*/$(function(){// 点击按钮$("#btn").click(function(){$("#dv").html("<p>这是一个p标签</p>");});});</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv"></div></body>
</html>

设置元素的样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>// 点击按钮,设置div的宽,高,背景颜色,边框$(function(){$("#btn").click(function(){$("#dv").css("width","200px");$("#dv").css("height","200px");$("#dv").css("backgroundColor","red");$("#dv").css("border","1px solid green");});});</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv"></div></body>
</html>

层次选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 500px;height: 400px;border: 2px solid green;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// 点击按钮,设置div中span的样式// 层次选择器----后代选择器(直接子元素,孙子元素)$("#btn").click(function(){ // 获取的是div这个父级元素中所有span标签// $("#dv span").css("backgroundColor","red");// 获取的是div这个父级元素中直接的子元素// $("#dv>span").css("backgroundColor","red");// 获取的是div这个父级元素后面的所有的兄弟元素----span// $("#dv~span").css("backgroundColor","red");// 获取的是div后面直接的兄弟元素// $("#dv+span").css("backgroundColor","red");});});</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<span>这是div前面的兄弟元素span</span>
<div id="dv"><span>这是第一个span标签</span><ul><li>第一个li</li><li>第二个li<span>第二个li中的span</span></li><li>第三个li</li></ul><span>这是第二个span标签</span><span>这是第三个span标签</span>
</div>
<!-- <p>这是p</p> -->
<span>这是div后面的兄弟元素span</span>
<span>这是div后面的兄弟元素span</span>
<span>这是div后面的兄弟元素span</span>
<span>这是div后面的兄弟元素span</span></body>
</html>

总结选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>// id选择器// $("#id属性值")// 标签选择器// $("#标签名字")// 类选择器// $(".类样式的名字")// 交集选择器----标签+类选择器// $("标签名.类样式名字")// 并集选择器----多条件选择器// $("标签名字,类样式名字,#id选择器")// 层次选择器// $("选择器 选择器");====>$("#dv span")// $("选择器>选择器");====>$("#dv span")// $("选择器~选择器");====>$("#dv span")// $("选择器+选择器");====>$("#dv span")</script>
</head>
<body></body>
</html>

设置某个元素的标签内容、设置元素的样式、层次选择器、总结选择器相关推荐

Dom基础特殊的节点获取元素节点的内容获取元素的属性 css属性 Dom获取元素的方法
1.Dom基础 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
js父元素获取子元素img_css,前端_父标签div中包含一个子元素img标签，子元素div标签，为什么img要加上浮动，子元素div才会处于正常位置？，css,前端 - phpStudy...
父标签div中包含一个子元素img标签,子元素div标签,为什么img要加上浮动,子元素div才会处于正常位置? dom结构如图img加上float 子元素div显示正常. 不加float div显 ...
解决 pyecharts 折线图数字标签设置 formatter 参数后标签内容有问题
解决问题 pyecharts 做折线图的时候,当我们对每个点的数值标签进行设置后,他自动带上了x轴的信息. 问题呈现:pyecharts 折线图下面代码由于对标签进行了的格式化设置,导致出来的图中把 ...
【Groovy】xml 序列化 ( 使用 MarkupBuilder 生成 xml 数据 | 设置 xml 标签内容 | 设置 xml 标签属性 )
文章目录一.使用 MarkupBuilder 生成 xml 数据二.完整代码示例一.使用 MarkupBuilder 生成 xml 数据生成 <student><name c ...
html a标签怎样设置宽高,a标签如何设置高度和宽度
我们直接设置html代码中的a标签高度和宽度是不会起作用的,这是因为a标签属于内联元素标签,而内联元素不支持设置宽度(width)和高度(height),那么, a 标签如何设置宽度和高度. 为什么设 ...
html中鼠标移走的伪元素,a标签的伪元素的应用——link，hover，visited，active
a标签应用中,一般有四个状态: 鼠标未移入前(link),鼠标移入时(hover), 鼠标点击时(active),鼠标点击后(visited). body{ padding: 200px 0; } a ...
html中a标签是不是块元素,a标签是不是块元素,a标签是块级元素吗
对比起XHTML来说,HTML5通过更简单的元素引起了一系列的思考,坦诚地讲,这真的是急需的简化. 这些简化之一就是能够通过a标签包装像div,h标签(h1...h6),和段落标记P 这些块级元素. ...
Python可视化中Matplotlib(4.三种设置样式方法、设置坐标刻度以及标签、设置显示出特殊字符)
1.三种设置方式 (1)向方法传入关键字参数上一节已经总结过,一直在使用 (2)对实例使用一系列的setter方法具体的方法直接看代码 import matplotlib.pyplot as pl ...
js设置和获取html和文本,JS---DOM---设置和获取---标签内容和文本内容
设置和获取---标签内容和文本内容总结---设置: 使用innerText主要是设置文本的, 设置标签内容, 是没有标签的效果的 innerHTML是可以设置文本内容 innerHTML主要的作用是 ...

设置某个元素的标签内容、设置元素的样式、层次选择器、总结选择器

设置某个元素的标签内容、设置元素的样式、层次选择器、总结选择器相关推荐

最新文章

热门文章