- 查找节点
- 查找元素节点
- var $usernameElement = $("#username");
- alert("jquery "+$usernameElement.val());
- 查找元素节点
- 查找属性节点
- jQuery查找到需要的元素节点后，使用attr()方法来获取它的各种属性的值。
- $usernameElement.attr("value");
- 查找文本节点
- jQuery查找到需要的元素节点后，使用text()方法来获取它的文本内容。
- $usernameElement.text();
原生的dom 操作：3种方法
怎么去记忆jquery dom 操作，对比元素的dom 操作
jquery 的第一个，如何查找节点
三种节点：
1：元素节点
2：文本节点
3：属性节点
节点与元素的区别
元素：html 的页面的标签内容，元素（标签）的属性，元素的文本内容
节点：dom 将html 页面的内容分成了：元素节点，属性节点，文本节点
用元素解析html ，只有元素，而属性与文本都是元素的内容
而变成节点之后：元素，节点，文本属于并列的内容
创建节点
- 创建元素节点
使用 jQuery 的工厂函数 $(HTML) 。该工厂函数会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回。
当创建单个元素时, 需注意闭合标签。
var $option = $("<option></option>");
- 创建文本节点
- 创建元素节点后，使用text()方法来设置其节点的文本内容。
$option.text("北京");
-
- 创建元素节点时，直接将其节点的文本内容插入其中。
var $option = $("<option>北京</option>");
- 创建属性节点
- 创建元素节点后，使用attr()方法来设置其节点的属性。
$option.attr("value","北京");
-
- 创建元素节点时，直接将其节点的属性插入其中。
var $option = $("<option value="北京">北京</option>");
插入节点
- 内部插入节点
append(content) :向每个匹配的元素的内部的结尾处追加内容
appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
prepend(content):向每个匹配的元素的内部的开始处插入内容
prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
- 外部插入节点
after(content) :在每个匹配的元素之后插入内容
before(content):在每个匹配的元素之前插入内容
insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
删除节点
- remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用。
- empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点)。
复制节点
clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
clone(true): 复制元素的同时也复制元素中的的事件
<button>保存</button> <p>段落</p> $("button").click(function(){ alert("点击按钮"); }); //克隆节点，不克隆事件 $("button").clone().appendTo("p"); //克隆节点，克隆事件 $("button").clone(true).appendTo("p"
替换节点
replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
replaceAll(): 颠倒了的 replaceWith() 方法.
注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
//<p>段落</p> //方式一 $("p").replaceWith("<button>登陆</button>"); //方式二 $("<button>登陆</button>").replaceAll("p");
属性操作
attr(): 获取属性和设置属性。
当为该方法传递一个参数时, 即为某元素的获取指定属性。
当为该方法传递两个参数时, 即为某元素设置指定属性的值。
jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等。
removeAttr(“属性名”): 删除指定元素的指定属性
样式操作
- 获取 class 和设置 class ：class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成。
- 追加样式：addClass()
- 移除样式：removeClass() --- 从匹配的元素中删除全部或指定的 class
- 切换样式：toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它。
- 判断是否含有某个样式：hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false。
遍历节点
- 取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.
- 取得匹配元素后面紧邻的同辈元素下一个元素:next();
- 取得匹配元素前面紧邻的同辈元素上一个元素:prev()
- 取得匹配元素前后所有的同辈元素: siblings()
- 在jQuery中还有很多遍历节点的方法，具体参看API帮助文档。
包裹节点
wrap()
<strong title="jQuery">jQuery</strong> <strong title="jQuery">jQuery</strong> //jQuery代码如下： $("strong").wrap("<b></b>"); //得到的结果如下 <b><strong title="jQuery">jQuery</strong></b> <b><strong title="jQuery">jQuery</strong></b>
wrapAll()
<strong title="jQuery">jQuery</strong> <strong title="jQuery">jQuery</strong> //jQuery代码如下： $("strong").wrapAll("<b></b>"); //得到的结果如下 <b> <strong title="jQuery">jQuery</strong> <strong title="jQuery">jQuery</strong> </b>
wrapInner()
<strong title="jQuery">jQuery</strong> //jQuery代码如下： $("strong"). wrapInner("<b></b>"); //得到的结果如下 <strong title="jQuery"><b>jQuery</b></strong>
01_查找节点
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>01_查找节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 <body> 9 <ul> 10 <li id="bj">dsaf</li> 11 <li id="tj" name="tianjin">天津</li> 12 </ul> 13 </body> 14 <script type="text/javascript"> 15 /** 16 * 1: 元素节点 //选择器 17 * 2： 属性节点 18 * 3：文本节点. 19 */ 20 //属性节点的查找 21 // alert($("#tj").attr("name")); 22 //text(); 23 // alert($("#tj").text()); 24 // html() 25 $("#tj").html("cstd"); 26 //修改属性节点: 27 $("#tj").attr("name","nanjin") 28 alert($("#tj").attr("name")); 29 30 </script> 31 32 </html>
02_创建节点
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>02_创建节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 <body> 9 <ul id="city"> 10 <li id="bj" name="beijing">北京</li> 11 </ul> 12 </body> 13 <script type="text/javascript"> 14 // /通过jquery dom 创建<li id="tj" name="tianjin">天津</li> 15 16 var $li=$("<li></li>"); //元素节点 创建 17 $li.attr("id","tj"); //属性节点 创建 18 $li.attr("name","tianjin"); //文本节点创建 19 $li.text("天津"); 20 //往city 节点的末尾添加元素 21 $("#city").append($li); 22 </script> 23 24 </html>
03_内部插入节点
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>03_内部插入节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 9 <body> 10 <ul id="city"> 11 <li id="bj" name="beijing">北京 12 </li> 13 14 <li id="cq" name="chongqing"> 15 重庆 16 </li> 17 </ul> 18 <ul id="love"> 19 <li id="fk" name="fankong"> 20 反恐 21 </li> 22 <li id="xj" name="xingji"> 23 星际 </li> 24 </ul> 25 26 <div id="foo1"> 27 Hello1</div> 28 </body> 29 <script type="text/javascript"> 30 /** 31 * 四种添加方式：向每个匹配的元素的内部的结尾处追加内容 32 * 33 */ 34 var $li=$("<li id='zhumadian'>驻马店</li>") 35 //append 向每个匹配的元素的内部的结尾处追加内容 36 // $("#xj").append($li); 37 38 //appendTo 将每个匹配的元素追加到指定的元素中的内部结尾处 39 // $("#xj").appendTo($("#cq")) 40 41 42 //向每个匹配的元素的内部的开始处插入内容 prepend 43 // $("#foo1").prepend($li); 44 //将每个匹配的元素插入到指定的元素内部的开始处 45 // $("#foo1").prependTo($("#xj")); 46 47 </script> 48 49 </html>
04_外部插入节点
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>04_外部插入节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 <body> 9 <ul id="city"> 10 <li id="bj" name="beijing">北京</li> 11 <li id="tj" name="tianjin">天津</li> 12 <li id="cq" name="chongqing">重庆</li> 13 </ul> 14 <p id="p3"> 15 I would like to say: p3 16 </p> 17 <p id="p2">I would like to say: p2</p> 18 <p id="p1">I would like to say: p1</p> 19 </body> 20 <script type="text/javascript"> 21 //外部插入节点 22 //after(content) :在每个匹配的元素之后插入内容 23 // var $div=$("<div>屌丝</div>") 24 // $("#p2").after($div); 25 //before(content):在每个匹配的元素之前插入内容\ 26 var $div=$("<div>屌丝</div>") 27 $("#p2").before($div); 28 //insertAfter(content):把所有匹配的元素插入到另一个指定的元素元素集合的后面 29 $("p").insertAfter($("#tj")); 30 //insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面 31 $("p").insertBefore($("#tj")); 32 </script> 33 </html>
05_删除节点
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>05_删除节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 9 <body> 10 <ul id="city"> 11 <li id="bj" name="beijing">北京<p>海淀区</p></li> 12 <li id="tj" name="tianjin">天津<p>河西区</p></li> 13 <li id="cq" name="chongqing">重庆</li> 14 </ul> 15 <p class="hello">Hello</p> how are <p>you?</p> 16 </body> 17 <script type="text/javascript"> 18 19 //删除节点.. 20 //$("#cq").remove(); 21 22 //清空节点.. 23 $("#city").empty(); 24 </script> 25 26 </html>
06_复制节点
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>06_复制节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 <body> 9 <button>保存</button><br> 10 <p>段落</p> 11 </body> 12 <script type="text/javascript"> 13 //button增加事件 14 $("button").click(function(){ 15 var $clonep=$("p").clone(); 16 $("body").append($clonep); 17 }); 18 </script> 19 </html>
07_替换节点
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>07_替换节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 <html> 9 <p>段落</p> 10 <p>段落</p> 11 <p>段落</p> 12 13 <button>保存</button> 14 </html> 15 <script type="text/javascript"> 16 // 将所有匹配的元素都替换成指定的 HTML 或 DOM 元素 17 var $p=$("<div>itcast</div>") 18 19 //$("button").replaceWith($p); 20 21 //把button 替换 获取到p 元素 22 $("button").replaceAll($("p")) 23 </script> 24 </html>
08_样式操作
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>08_样式操作.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 <style type="text/css"> 8 .one{ 9 width: 200px; 10 height: 140px; 11 margin: 40px; 12 background: red; 13 border: #000 1px solid; 14 float:left; 15 font-size: 17px; 16 font-family:Roman; 17 } 18 19 div,span{ 20 width: 140px; 21 height: 140px; 22 margin: 20px; 23 background: #9999CC; 24 border: #000 1px solid; 25 float:left; 26 font-size: 17px; 27 font-family:Roman; 28 } 29 30 div.mini{ 31 width: 30px; 32 height: 30px; 33 background: #CC66FF; 34 border: #000 1px solid; 35 font-size: 12px; 36 font-family:Roman; 37 } 38 39 .itcastMove{ 40 41 width:400px; 42 height:500px; 43 44 } 45 </style> 46 47 48 </head> 49 <body> 50 <input type="button" value="采用属性增加样式" id="b1"/> 51 <input type="button" value=" addClass" id="b2"/> 52 <input type="button" value="removeClass" id="b3"/> 53 <input type="button" value=" 切换样式" id="b4"/> 54 <input type="button" value=" hasClass" id="b5"/> 55 56 57 <h1>天气冷了</h1> 58 <h2>天气又冷了</h2> 59 60 61 62 <br> 63 <div id="mover"> 64 动画 65 </div> 66 <br> 67 <span id="itcastit" class="spanone"> 68 span 69 <div></div> 70 71 </span> 72 73 </body> 74 <style type="text/css"> 75 .spanone1{ 76 font-size:40px; 77 } 78 79 </style> 80 81 <script type="text/javascript"> 82 //<input type="button" value="采用属性增加样式" id="b1"/> 83 $("#b1").click(function(){ 84 $("#mover").css("font-size","30px"); 85 86 }); 87 88 //<input type="button" value="addClass" id="b2"/> 89 $("#b2").click(function(){ 90 //因为我们的样式分三种主要的选择器 id,标签，class 91 // 92 $("#itcastit").addClass("spanone1") 93 // addClass 批量操作样式 94 // css 一次操作一个样式.. 95 96 97 }); 98 99 //<input type="button" value="removeClass" id="b3"/> 100 $("#b3").click(function(){ 101 //删除样式.. 102 /** 103 * 1：如果没有指定样式，则会删除所有的样式(class) 104 * 2：有参数，删除指定的样式 (class) 105 * 106 */ 107 $("#itcastit").removeClass(); 108 109 110 }); 111 112 //<input type="button" value=" 切换样式" id="b4"/> 113 $("#b4").click(function(){ 114 //show() hide() 115 /** 116 * 1:如果指定了参数，在原来的基础上添加一个class 第二次点击，把之前添加的class 删除掉.. 117 * 2：如果没有指定参数，则会删除掉原来的class,删掉了样式，再次调用toggleClass 不会添加原来的class 118 */ 119 //显示，隐藏的意思 120 //隐藏，显示 121 //调用这个方法，它首先会判断当前元素是否为隐藏状态，如果为隐藏状态，则调用show(),如果为显示状态，则调用hide 隐藏 122 // $("#itcastit").toggle(); 123 $("#itcastit").toggleClass("spanone1"); 124 125 }); 126 127 //<input type="button" value=" hasClass" id="b5"/> 128 $("#b5").click(function(){ 129 //hasClass():判断某个元素是否含有某个指定样式 130 // $("") 131 var flag=$("#itcastit").hasClass("spanone1"); 132 alert(flag); 133 }); 134 </script> 135 </html>
09_遍历节点
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>09_遍历节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 9 <body> 10 <ul id="city"> 11 <li id="bj" name="beijing">北京 12 </li> 13 <li id="tj" name="tianjin">天津</li> 14 <li id="nj" name="nanjing">南京</li> 15 </ul> 16 </body> 17 <script type="text/javascript"> 18 //该方法只考虑子元素而不考虑任何后代元素. 19 // alert($("#city").children().length); 20 //匹配到元素的下一个同辈元素 21 // var nanj=$("#tj").next().text(); 22 // alert(nanj); 23 24 25 // 取得匹配元素前面紧邻的同辈元素上一个元素:prev() 26 // var bj=$("#tj").prev().text(); 27 // alert(bj); 28 29 //取得匹配元素前后所有的同辈元素 30 $("#tj").siblings().each(function(index,doc){ 31 //dom 获取 32 // var domattr=doc.getAttribute("name"); 33 // alert(domattr); 34 35 //jquery 获取... 36 }) 37 </script> 38 </html>
10_包裹节点
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>10_包裹节点.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 7 </head> 8 <body> 9 <strong title="jQuery"><b>jQuery</b></strong> 10 <strong title="jQuery"><b>jQuery</b></strong> 11 </body> 12 <script type="text/javascript"> 13 //jQuery代码如下： 14 //对匹配到的元素一个一个的进行包裹.. 15 // $("strong").wrap("<b></b>"); 16 //把匹配到的内容用指定的标签进行包裹... 17 // $("strong").wrapAll("<b></b>"); 18 $("strong").wrapInner("<b></b>"); 19 </script> 20 </html>
本文转自SummerChill博客园博客，原文链接：http://www.cnblogs.com/DreamDrive/p/5780273.html，如需转载请自行联系原作者
