这里介绍一些jQuery关于html的一些操作。
一般获取内容，有三个方法。
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
下面看个实例
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn3").click(function(){
alert("Value: " + $("#test1").val()); //输出表单text的值 val()设置值则替换其中的内容
});
$("#btn1").click(function(){
alert("Text: " + $("#test").text()); //输出文本 text() 设置值则替换其中内容
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html()); //输出p中的文本还有html标记 HTML（）设置值则替换其中的内容
});
});
</script>
</head>
<body>
<p>姓名：<input type="text" id="test1" value="rain"></p>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<button id="btn3">显示值</button>
</body>
</html>
关于文档的处理操作还有很多。
1 $("p").append("<i>test</i>"); //append 在p的尾部添加
2
3 $("p").appendTo("div") //append 将P追加到所有div中
4
5 $("p").prepend("<i>test</i>"); //在P的开头位置添加
6
7 $("p").prependTo("div"); //将P添加到div的头部
8
9 $("p:first").after("<b>after</b>"); //在第一个P后面插入元素，注意不在p元素体内
10
11 $("p:first").before("<b>before</b>"); //在第一个P元素前插入元素，不在p元素体内
12
13 $("<b>before</b>").insertAfter("p:first") //这个效果跟之前after一样，只是调换位置
14
15 $("<b>after</b>").insertBefore("p:first") //这个效果跟之前before一样，只是调换位置
16
17 $("p:first").wrap("<div class=‘test‘></div>"); //第一个p元素外部加套一个div
18
19 $("p:first").unwrap(); //移除p元素的父元素
20
21 $("p:first").wrapInner("<b></b>"); //将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
22
23 $("p").replaceWith("<b>this is replacewith</b>"); //将所有匹配的元素替换成指定的HTML或DOM元素。
24
25 $("<b>this is replacewith</b>").replaceAll("p"); //用匹配的元素替换掉所有 selector匹配到的元素。
26
27 $("p").empty(); //清空p元素内部内容
28
29 $("p").remove(".text1") //删除所有类是text1的P元素
30
31 $("p:first").clone().appendTo("div"); //将p复制一个放入所有div中
32
33 $("button").clone(true).insertAfter("button"); //将按钮复制一个，放在自己的后面，clone(true),同样复制了button所具有的事件
下面介绍一些对文档的查找的。
1 $("div").children().css("background", "red"); //设置所有div的子元素 背景为红色
2
3 $("div").find("p").css("background","green") //设置div后代元素p背景色为绿色
4
5 $("li:first").next().css("background", "red"); //设置第一个LI元素紧邻的后面一个LI元素，背景色为红色。
6
7 $("li:first").nextAll().css("background", "blue"); //设置第一个li后面的所有li元素，背景色为蓝色。
8
9 $("li:first").nextUntil("li[id=‘li4‘]").text("nextUntil"); //查找li后面的元素，满足条件的元素时停止，不包括满足条件的元素
10
11 $("p").offsetParent().css("background", "red"); //查找p元素用于定位的父节点，就是返回父元素中第一个position设置为relative或者absolute元素。
12
13 $("li").parent().css("background", "gray"); //设置所有li元素的直接父元素背景色为gray
14
15 $("li").parents().css("border", "1px solid red"); //设置li元素的所有父元素边框 //不含根元素html
16
17 $("li").parentsUntil("body").css("color", "red"); //查找li元素的父节点，直到找到body停止，不包括body,父元素颜色设置为红色。
18
19 $("li[id=‘li4‘]").prev().css("color", "black"); //设置id=li4的同辈的前一个元素，颜色为黑色。
20
21 $("li[id=‘li4‘]").prevAll().css("color", "black"); //设置id=li4的所有同辈元素 ，颜色为黑色。
22
23 $("li:last").prevUntil("li[id=‘li4‘]").css("color", "gray"); //从最后一个li元素位置开始查找，直到找到id=li4的li元素，结果不包括最后一个li与id=li4的元素
24
25 $("li").siblings().css("background", "pink"); //li 的所有同辈元素， 设置背景色
在查找之后我们还有对元素进行筛选的方法。
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
1 $("div").eq(3).css({ "width": 100, "height": 100, "background": "blue" }); // 指定第4个div ，设置css
2 $("div").first().css("background", "red"); //第一个div设置css
3 $("div").last().css("background", "gray"); //最后一个div设置css
4 $("div").filter(".test").css("color", "green"); //过滤含有test类的div
5 $("div").not(".test").css("color", "yellow"); //设置不是类test的div
全部的代码：
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <script src="jquery/jquery-1.11.1.js"></script>
6 <script>
7 $(document).ready(function () {
8 $("<div>", { //创建一个div
9 "class": "test",
10 "text": "click me",
11 click: function () {
12 $(this).text("hahahha");
13 }
14
15 }).appendTo("body");
16
17 $("li").each(function (index, domEle) { //遍历li元素 ，index是序号 ,domEle==this
18 alert(index + " " + $(domEle).text());
19 })
20 $("button").click(function () {
21 $("div").each(function (index, domEle) {
22 // domEle == this
23 $(domEle).css("backgroundColor", "yellow");
24 if ($(this).is("#stop")) {
25 $("span").text("Stopped at div index #" + index);
26 return false;
27 }
28 });
29 });
30
31
32 // $("li").get(1).textContent = "aaaaaaaaaaaa";
33
34 $("div").data("name", "rain");
35 alert($("div").data("name"));
36
37 $("p").html("<b>dsada</b>");
38
39
40
41 $("p").append("<i>test</i>"); //append
42
43 $("p").appendTo("div") //append 将P追加到所有div中
44
45 $("p").prepend("<i>test</i>");
46
47 $("p").prependTo("div");
48
49 $("p:first").after("<b>after</b>"); //在第一个P后面插入元素，注意不在p元素体内
50
51 $("p:first").before("<b>before</b>"); //在第一个P元素前插入元素，不在p元素体内
52
53 $("<b>before</b>").insertAfter("p:first") //这个效果跟之前after一样，只是调换位置
54
55 $("<b>after</b>").insertBefore("p:first") //这个效果跟之前before一样，只是调换位置
56
57 $("p:first").wrap("<div class=‘test‘></div>"); //第一个p元素外部加套一个div
58
59 $("p:first").unwrap(); //移除p元素的父元素
60
61 $("p:first").wrapInner("<b></b>"); //将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
62
63 $("p").replaceWith("<b>this is replacewith</b>"); //将所有匹配的元素替换成指定的HTML或DOM元素。
64
65 $("<b>this is replacewith</b>").replaceAll("p"); //用匹配的元素替换掉所有 selector匹配到的元素。
66
67 $("p").empty(); //清空p元素内部内容
68
69 $("p").remove(".text1") //删除所有类是text1的P元素
70
71 $("p:first").clone().appendTo("div"); //将p复制一个放入所有div中
72
73 $("button").clone(true).insertAfter("button"); //将按钮复制一个，放在自己的后面，clone(true),同样复制了button所具有的事件
74
75
76 $("div").children().css("background", "red"); //设置所有div的子元素 背景为红色
77
78 $("div").find("p").css("background","green") //设置div后代元素p背景色为绿色
79
80 $("li:first").next().css("background", "red"); //设置第一个LI元素紧邻的后面一个LI元素，背景色为红色。
81
82 $("li:first").nextAll().css("background", "blue"); //设置第一个li后面的所有li元素，背景色为蓝色。
83
84 $("li:first").nextUntil("li[id=‘li4‘]").text("nextUntil"); //查找li后面的元素，满足条件的元素时停止，不包括满足条件的元素
85
86 $("p").offsetParent().css("background", "red"); //查找p元素用于定位的父节点，就是返回父元素中第一个position设置为relative或者absolute元素。
87
88 $("li").parent().css("background", "gray"); //设置所有li元素的直接父元素背景色为gray
89
90 $("li").parents().css("border", "1px solid red"); //设置li元素的所有父元素边框 //不含根元素html
91
92 $("li").parentsUntil("body").css("color", "red"); //查找li元素的父节点，直到找到body停止，不包括body,父元素颜色设置为红色。
93
94 $("li[id=‘li4‘]").prev().css("color", "black"); //设置id=li4的同辈的前一个元素，颜色为黑色。
95
96 $("li[id=‘li4‘]").prevAll().css("color", "black"); //设置id=li4的所有同辈元素 ，颜色为黑色。
97
98 $("li:last").prevUntil("li[id=‘li4‘]").css("color", "gray"); //从最后一个li元素位置开始查找，直到找到id=li4的li元素，结果不包括最后一个li与id=li4的元素
99
100 $("li").siblings().css("background", "pink"); //li 的所有同辈元素， 设置背景色
101
102 $("div").eq(3).css({ "width": 100, "height": 100, "background": "blue" }); // 指定第4个div ，设置css
103 $("div").first().css("background", "red"); //第一个div设置css
104 $("div").last().css("background", "gray"); //最后一个div设置css
105 $("div").filter(".test").css("color", "green"); //过滤含有test类的div
106 $("div").not(".test").css("color", "yellow"); //设置不是类test的div
107
108
109 alert("left" + $("div:first").offset().left);
110 alert("top" + $("div:first").offset().top);
111 })
112 </script>
113
114 <style>
115 .test {
116 border: 1px solid red;
117 }
118 </style>
119 </head>
120 <body>
121 <p id="p1">aa</p>
122 <ul>
123 <li>as</li>
124 <li>aa</li>
125 <li>ww</li>
126 <li id="li4">ee</li>
127 <li>dddd</li>
128 <li>rr</li>
129 </ul>
130 <button>Change colors</button>
131 <span></span>
132 <div></div>
133 <div></div>
134
135 <div></div>
136 <div></div>
137 <div id="stop">Stop here</div>
138 <div></div>
139
140 <div></div>
141 <div></div>
142 </body>
143 </html>
时间： 2024-08-02 19:00:44