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>
View Code

 

 

 

jQuery 关于文档处理,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。