首页 > 代码库 > jQuery 关于文档处理
jQuery 关于文档处理
这里介绍一些jQuery关于html的一些操作。
一般获取内容，有三个方法。
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
下面看个实例
<!DOCTYPE html><html><head><script src="http://www.mamicode.com/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="http://www.mamicode.com/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元素外部加套一个div18 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元素的直接父元素背景色为gray14 15 $("li").parents().css("border", "1px solid red"); //设置li元素的所有父元素边框 //不含根元素html16 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 ，设置css2 $("div").first().css("background", "red"); //第一个div设置css3 $("div").last().css("background", "gray"); //最后一个div设置css4 $("div").filter(".test").css("color", "green"); //过滤含有test类的div5 $("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="http://www.mamicode.com/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 ，设置css103 $("div").first().css("background", "red"); //第一个div设置css104 $("div").last().css("background", "gray"); //最后一个div设置css105 $("div").filter(".test").css("color", "green"); //过滤含有test类的div106 $("div").not(".test").css("color", "yellow"); //设置不是类test的div107 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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。