您的位置:首页 > Web前端 > JQuery

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>```

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: