jQuery---节点操作(上)
2019-01-18 19:07
239 查看
节点操作(上)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #txt { color: #FF0000; } </style> <script src="../js/jquery.min.js"></script> </head> <body> <!-- 节点操作: * 1.创建节点 * DOM:document.createElement("标签名"); * jQuery:$("<h1 title='标题'>我是一个h1标签</h1>"); * 2.添加节点 * DOM: * 父元素节点.appendChild(子元素节点); 在父元素内部末尾追加一个节点 * 父元素节点.insertBefore(子元素节点, 参照节点) 在父元素中的参照节点前面添加一个节点 * jQuery: * 在内部添加节点: 参照了父元素节点 * -- 在内部父节点末尾插入节点 * 父节点.append(需要添加的子节点); * 需要添加的子节点.appendTo(父节点); * -- 在内部父节点开头添加节点 * 父节点.prepend(需要添加的子节点); * 需要添加的子节点.prependTo(父节点); * 在外部添加节点:不需要参照父节点 * -- 在参照元素前面添加节点 * 参照节点.before(需要添加的节点); * 需要添加的节点.insertBefore(参照节点); * -- 在参照元素后面添加节点 * 参照节点.after(需要添加的节点); * 需要添加的节点.insertAfter(参照节点); * 3.删除节点 * 和DOM的删除节点不同,jQuery删除节点直接用节点本身.remove()方法 * -- jQuery对象.remove(); 删除这个“jQuery对象” * -- jQuery对象.remove("筛选(CSS选择器)"); 删除符合筛选条件的“jQuery对象” * 例如:$("#box>h3").remove(".cont"); * 4.清空节点:清空该节点的文本内容和子节点 * -- jQuery对象.empty(); * 不建议使用empty方法来清空节点,因为js引擎会遍历所有匹配的元素,再依次调用remove()删除 * 例如$("#box>span"),先要找到所有的span,再遍历这些span元素,然后依次调用remove()方法 * 一个个的删 * 建议使用html("")代替empty() --> <div id="box"> 我是普通文本<br/> <span>我是第一个span标签</span> <span id="second">我是第二个span标签</span> <div id="txt">我是div标签</div> <h3 class="cont">我是第1个h3元素</h3> <h3>我是第2个h3元素</h3> <h3 class="cont">我是第3个h3元素</h3> <p> <div>我是p内部的div</div> </p> </div> <button id="btn1">末尾追加一个元素[内部]</button> <button id="btn2">开头添加一个元素[内部]</button> <button id="btn3">在参照元素前插入一个元素[外部]</button> <button id="btn4">在参照元素后插入一个元素[外部]</button> <button id="btn5">删除节点</button> <button id="btn6">清空节点(删除文本和后代节点)</button> <button id="btn7">删除ul里的li节点</button> <hr> 畅销手机品牌 <ul style="background-color: yellow;"> <li>苹果</li> <li class="phone">三星</li> <li>小米</li> <li class="phone">魅族</li> <li>华为</li> </ul> <script> $("#btn7").click(function(){ //$("ul>li").remove(); $("ul>li").remove(".phone"); }); $("#btn1").click(function(){ //创建一个元素,使用$(html字符串) var $h2=$("<h2>我是h2元素</h2>"); //$("#box").append($h2); //子节点.appendTo(父元素) $h2.appendTo( $("#box")); }) $("#btn2").click(function(){ //创建一个元素,使用$(html字符串) var $h1=$("<h1>我是h1元素</h1>"); // 开头添加:父节点. prepend(子节点) // $("#box").prepend($h1); //子节点,prependTo(父节点) $h1.prependTo($("#box")); }) $("#btn3").click(function(){ //在 id="txt"的div前面插入一个span元素 var $span=$("<span style='color:red'>我是第3个span</span>") $("#txt").before($span); }) $("#btn4").click(function(){ //在 id="txt"的div后面插入一个p元素 var $p=$("<p style='color:blue'>我是1个段落</p>") $("#txt").after($p); }) $("#btn5").click(function(){ //删除id=second的span元素 // $("span#second").remove(); //删除div中的class="cont"的h3元素 $("#box>h3").remove(".cont"); }) $("#btn6").click(function(){ // /删除id=box的div里面所有的span $("#box>span").empty(); }) </script> </body> </html>
节点操作(下)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background-color: yellow; } #des { width: 200px; background-color: blue; } </style> <script src="../js/jquery.min.js"></script> <script> $(function () { /** * 复制节点: * 语法:需要复制的节点.clone(); * 返回一个复制好的jQuery对象(副本),包含了子节点。 * 如果clone(true)携带参数为true,那么代表把节点的事件一起复制。 * 如果没有带参数,那么不会复制节点的事件 */ $("#btn").click(function(){ // 复制节点 var $copy= $("#src").clone(); //将复制好的jQUery对象添加到des元素中 $("#des").append($copy); }) $("#src").click(function(){ console.log("src元素的单击"); }) }) </script> </head> <body> <div id="src"> <p>我是一个p标签</p> </div> <hr> <div id="des"> </div> <button id="btn">复制节点</button> </body> </html>
遍历节点(祖先)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #parent { width: 400px; height: 400px; border:1px solid yellow; } #parent_2 { width: 200px; height: 200px; border:1px solid green; } #child { width: 100px; height: 100px; background-color: red; } </style> <script src="../js/jquery.min.js"></script> </head> <body> <div id="parent"> <div id="parent_2"> <div id="child">我是child</div> </div> </div> <script> /** * 节点遍历操作: * 1.节点遍历-父元素 * -- 找直接父元素 * 语法:子元素.parent() * -- 找祖先元素 * 语法: 子元素.parents() 找到全部的父辈元素 * 语法: 子元素.parents("CSS选择器"): 找到指定的父辈元素 */ $("#child").parent().css("background-color","yellow"); </script> </body> </html>
遍历节点(后代)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #parent { width: 400px; height: 400px; background-color: yellow; } #child { width: 250px; height: 250px; background-color: red; } </style> <script src="../js/jquery.min.js"></script> </head> <body> <div id="parent"> <div id="child"> <p>我是一个p标签</p> <h1>strong</h1> </div> <p>我是一个p标签</p> </div> <script> /** * 节点遍历操作: * 1.节点遍历-父元素 * -- 找直接父元素 * 语法:子元素.parent() * -- 找祖先元素 * 语法: 子元素.parents() 找到全部的父辈元素 * 语法: 子元素.parents("CSS选择器") 找到指定的父辈元素 * 2.节点操作-后代 * -- 找直接子元素(可以有多个) * 语法:父元素.children() 找到全部的亲儿子 * 语法:父元素.children("CSS选择器") 找到指定的亲儿子 * -- 找后代元素 * 语法:父元素.find("*") 找到全部的后代元素 * 语法:父元素.find("CSS选择器") 找到指定的后代元素 * */ // console.log($("#child").children("p")); console.log($("#parent").find("p")); </script> </body> </html>
相关文章推荐
- jQuery的DOM操作之遍历节点
- 3.2.5: jQuery的DOM操作之复制节点
- jquery dom 节点操作
- jQuery的DOM操作之删除节点示例
- jquery中DOM节点操作(二)
- jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
- jQuery对节点进行操作
- Jquery学习笔记:删除节点的操作
- jquery 节点操作.删除和取值
- jQuery中each()、find()和filter()等节点操作方法详解(推荐)
- Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
- jQuery节点操作
- 3.2.6: jQuery的DOM操作之替换节点
- jquery节点操作+运算符
- JQuery 节点元素的属性操作
- 用jQuery实现asp.net 2.0 treeview控件完全无刷新操作实例(AJAX的增、删、改、选择以及展开收缩节点)
- jQuery学习笔记(二)——css与节点操作
- Jquery中的DOM操作 (五.包裹节点和属性操作)
- 3.2.7: jQuery的DOM操作之包裹节点
- jquery dom 节点操作