jQuery 关于文档处理
这里介绍一些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>
