jQuery---节点操作(下)
2019-01-18 19:12
435 查看
遍历节点(同辈)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery.min.js"></script> </head> <body> <ul> <li>我是一个li标签1</li> <li class="txt">我是一个li标签2</li> <li>我是一个li标签3</li> <li>我是一个li标签4</li> <li>我是一个li标签5</li> <li id="box" class="box">我是一个li标签6</li> <li class="txt">我是一个li标签7</li> <li>我是一个li标签8</li> <li class="txt">我是一个li标签9</li> <li>我是一个li标签10</li> </ul> <script> /** * 节点遍历操作: * 1.节点遍历-父元素 * -- 找直接父元素 * 语法:子元素.parent() * -- 找祖先元素 * 语法: 子元素.parents() 找到全部的父辈元素 * 语法: 子元素.parents("CSS选择器") 找到指定的父辈元素 * 2.节点操作-后代 * -- 找直接子元素(可以有多个) * 语法:父元素.children() 找到全部的亲儿子 * 语法:父元素.children("CSS选择器") 找到指定的亲儿子 * -- 找后代元素 * 语法:父元素.find("*") 找到全部的后代元素 * 语法:父元素.find("CSS选择器") 找到指定的后代元素 * 3.节点操作-同辈 * -- 找参照元素【后面】的兄弟元素 * 语法:参照元素.next() 找到参照元素后面的那一个兄弟,只返回1个元素 * 语法:参照元素.nextAll() 找到参照元素后面的所有兄弟 * 语法:参照元素.nextAll("CSS选择器") 找到参照元素后面的指定的兄弟 * -- 找参照元素【前面】的兄弟元素 * 语法:参照元素.prev() 找到参照元素前面的那一个兄弟 * 语法:参照元素.prevAll() 找到参照元素前面的所有兄弟 * 语法:参照元素.prevAll("CSS选择器") 找到参照元素前面的指定的兄弟 * -- 找参照元素【所有】的兄弟元素 * 语法:参照元素.siblings() 找到参照元素所有的兄弟(前面的兄弟+后面的兄弟) * 语法:参照元素.siblings("CSS选择器") 找到参照元素符合条件的兄弟 */ // $("#box").siblings().css("background-color","yellow"); // $("#box").siblings(".txt").css("background-color","yellow"); //$("#box").nextAll(".txt").css("background-color","yellow"); $("#box").prevAll(".txt").css("background-color","yellow"); </script> </body> </html>
遍历节点(过滤)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery.min.js"></script> <script> /** * 节点遍历操作: * 1.节点遍历-父元素 * -- 找直接父元素 * 语法:子元素.parent() * -- 找祖先元素 * 语法: 子元素.parents() 找到全部的父辈元素 * 语法: 子元素.parents("CSS选择器") 找到指定的父辈元素 * 2.节点操作-后代 * -- 找直接子元素(可以有多个) * 语法:父元素.children() 找到全部的亲儿子 * 语法:父元素.children("CSS选择器") 找到指定的亲儿子 * -- 找后代元素 * 语法:父元素.find("*") 找到全部的后代元素 * 语法:父元素.find("CSS选择器") 找到指定的后代元素 * 3.节点操作-同辈 * -- 找参照元素【后面】的兄弟元素 * 语法:参照元素.next() 找到参照元素后面的那一个兄弟 * 语法:参照元素.nextAll() 找到参照元素后面的所有兄弟 * 语法:参照元素.nextAll("CSS选择器") 找到参照元素后面的指定的兄弟 * -- 找参照元素【前面】的兄弟元素 * 语法:参照元素.prev() 找到参照元素前面的那一个兄弟 * 语法:参照元素.prevAll() 找到参照元素前面的所有兄弟 * 语法:参照元素.prevAll("CSS选择器") 找到参照元素前面的指定的兄弟 * -- 找参照元素【所有】的兄弟元素 * 语法:参照元素.siblings() 找到参照元素所有的兄弟 * 语法:参照元素.siblings("CSS选择器") 找到参照元素符合条件的兄弟 * 4.节点操作-过滤 * -- 找符合条件的第一个元素,对应过滤选择器:first * 语法:jQuery对象.first() * -- 找符合条件的最后一个元素,对应过滤选择器:last * 语法:jQuery对象.last() * -- 找指定索引位置的元素,对应过滤选择器:eq(index) * 语法:jQuery对象.eq(索引) 索引从0开始 * -- 找符合筛选条件的元素 * 语法:jQuery对象.filter("CSS选择器") * -- 找出不符合筛选条件的元素,对应过滤选择器:not() * 语法:jQuery对象.not("CSS选择器") */ $(function(){ // $("ul>li").last().css("background-color","yellow"); // $("ul>li").eq(4).css("background-color","yellow"); //$("ul>li").filter(".txt").css("background-color","yellow"); $("ul>li").not(".txt").css("background-color","yellow"); }) </script> </head> <body> <ul id="list"> <li>我是一个li标签1</li> <li>我是一个li标签2</li> <li>我是一个li标签3</li> <li>我是一个li标签4</li> <li>我是一个li标签5</li> <li class="txt">我是一个li标签6</li> <li>我是一个li标签7</li> <li class="txt">我是一个li标签8</li> <li>我是一个li标签9</li> <li>我是一个li标签10</li> </ul> </body> </html>```
相关文章推荐
- jQuery的DOM操作之遍历节点
- jQuery节点操作
- 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操作
- 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 节点操作