jq兄弟选择器及节点

什么是兄弟元素？

<ul id="list">
<li class="li-1">web前端</li>
<li class="li-2">web前端</li>
<li class="li-3">web前端</li>
<li class="li-4">web前端</li>
<li class="li-5">web前端</li>
</ul>

1、$(selector).prevAll( selector )

功能描述：获得集合中每个匹配元素的所有前面的兄弟元素，选择性筛选的选择器。

$(".li-3").prevAll("li"); // ['li-1','li-2']

2、$(selector).nextAll( selector )

功能描述：获得每个匹配元素集合中所有下面的同辈元素，选择性筛选的选择器。

$(".li-3").nextAll("li"); // ['li-4','li-5']

3、$(selector).siblings( selector )

功能描述：获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器。

$(".li-3").siblings("li"); // ['li-1','li-2','li-4','li-5']

案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li {list-style: none;}body {background-color: black;}div {width: 700px;border: 1px solid white;margin: 0 auto;padding-right: 50px;}ul {width: 680px;height: 100%;display: flex;flex-wrap: wrap;}li {padding: 10px;}</style><script src="../jq/jquery.min.js"></script>
</head><body><div class="wrap"><ul><li><a href="#"><img src="../img/01.jpg" alt=""></a></li><li><a href="#"><img src="../img/02.jpg" alt=""></a></li><li><a href="#"><img src="../img/03.jpg" alt=""></a></li><li><a href="#"><img src="../img/04.jpg" alt=""></a></li><li><a href="#"><img src="../img/05.jpg" alt=""></a></li><li><a href="#"><img src="../img/06.jpg" alt=""></a></li></ul></div><script>$(function() {//给li标签绑定鼠标移入事件$("ul li").mousemove(function() {//如何获取到当前鼠标移入的li标签 this$(this).css("opacity", 1).siblings().css("opacity", 0.5)})//给鼠标移入的li标签的opacity设置为1，将其他兄弟标签li设置为0.5})//鼠标移出$("ul li").mouseout(function() {$("ul li").css("opacity", 1)})</script>
</body></html>

选项卡案例

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../jq/jquery.min.js"></script><style>* {margin: 0;padding: 0;}ul li {list-style: none;}#box {width: 300px;border: 1px solid #ccc;margin: 30px;}#box ul li {font-size: 20px;font-weight: bold;float: left;color: white;width: 100px;padding: 10px 0;text-align: center;background-color: rgb(255, 0, 0);}.active {background: rgb(165, 42, 42) !important;}.content div {font-size: 30px;font-weight: bold;display: none;height: 150px;}.show {display: block !important;}</style>
</head><body><div id="box"><ul><li class="active">Home</li><li>About</li><li>Login</li></ul><div class="content"><div class="show" style="background-color: green;">Home</div><div style="background-color: greenyellow;">About</div><div style="background-color: yellow;">Login</div></div></div><script>$(function() {$("ul li").click(function() {$(this).addClass("active").siblings().removeClass("active")var index = $(this).index()$(".content div").eq(index).addClass("show").siblings().removeClass("show")})})</script>
</body></html>

节点

1、append()方法的作用是向每一个匹配的元素内部追加内容。它的表达式是append(content|fn)。
2、append操作和对指定的元素执行appendChild方法从而把它们添加到文档中的情况相类似。
3、appendTo()方法的作用是把所有匹配的元素追加到另一个指定的元素集合中。它的表达式是appendTo(content)。

4、after()方法的作用是在每个匹配的元素之后插入内容。它的表达式是after(content|fn)。
5、before()方法的作用是在每个匹配的元素之前插入内容。表达式是before(content|fn)。

6、empty()方法的作用是删除匹配的元素集合中所有的子节点。
7、remove() 方法的作用是从DOM中删除所有匹配的元素。它的表达式是remove([expr])。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul {list-style: none;line-height: 30px;width: 600px;}ul li:nth-child(even) {background-color: green;}ul li:nth-child(odd) {background-color: aqua;}span {color: red;font-size: 12px;}</style><script src="../jq/jquery.min.js"></script>
</head><body><button id="btn1">append添加</button><button id="btn2">appendTo添加</button><button id="btn3">prepend添加</button><button id="btn4">prependTo添加</button><button id="btn5">before添加</button><button id="btn6">after添加</button><button id="btn7">remove移除</button><button id="btn8">empty移除</button><button id="btn9">replacewith替换</button><button id="btn10">replaceAll替换</button><button id="btn11">clone复制</button><ul><li>香蕉</li><li class="aa">苹果</li><li>菠萝</li></ul><script>$("#btn1").click(function() {$("ul").append("<li>榴莲</li>")})$("#btn2").click(function() {$("<li>西瓜</li>").appendTo("ul")})$("#btn3").click(function() {$("ul").prepend("<li>荔枝</li>")})$("#btn4").click(function() {$("<li>哈密瓜</li>").prependTo("ul")})$("#btn5").click(function() {$("ul").before("<h1>水果清单</h1>")})$("#btn6").click(function() {$("ul").after("<span>水果清单</span>")})</script>
</body></html>

jq兄弟选择器及节点相关推荐

jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器
jQuery简介: jQuery是一个高效.精简并且功能丰富的javascript库,它提供的API简单易学,且兼容众多浏览器,极大地简化了javascript代码开发,包含内容:HTML 元素选取. ...
python定位相邻节点_Python selenium —— 父子、兄弟、相邻节点定位方式详解
今天跟大家分享下selenium中根据父子.兄弟.相邻节点定位的方法,很多人在实际应用中会遇到想定位的节点无法直接定位,需要通过附近节点来相对定位的问题,但从父节点定位子节点容易,从子节点定位父节点. ...
python定位相邻节点_Python selenium 父子、兄弟、相邻节点定位方式详解
今天跟大家分享下selenium中根据父子.兄弟.相邻节点定位的方法,很多人在实际应用中会遇到想定位的节点无法直接定位,需要通过附近节点来相对定位的问题,但从父节点定位子节点容易,从子节点定位父节点. ...
css设置兄弟元素样式-兄弟选择器
有一种选择器就叫兄弟元素选择器,分为临近兄弟和普通兄弟. 临近兄弟(相邻):用 + 表示,只匹配该元素后边的第一个同级元素. 普通兄弟:用 - 表示,匹配该元素后边的所有同级元素. 1.相邻兄弟元素 ...
html相邻兄弟选择器,CSS CSS 相邻兄弟选择器 - 闪电教程JSRUN
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
013_CSS兄弟选择器
1.1. element1~element2选择器element1之后出现的所有element2. 1.2. 两种元素必须拥有相同的父元素, 但是element2不必直接紧随element1. 2. ...
012_CSS相邻兄弟选择器
1. 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素, 且二者有相同父元素. 2. 选择相邻兄弟 2.1. 如果需要选择紧接在另一个元素后的元素, 而 ...
html兄弟选择器怎么用,CSS的相邻兄弟选择器用法示例讲解
对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解: 可选择紧接在另一个元素后的元素,且二者有相同的父级元素下面代码中,it ...
相邻兄弟选择器（+）、子选择器（）、兄弟选择器（~）等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(& ...

jq兄弟选择器及节点

jq兄弟选择器及节点相关推荐

最新文章

热门文章