jQuery使用(四):DOM操作之查找兄弟元素和父级元素

查找兄弟元素

向下查找兄弟元素

  • next()
  • nextAll()
  • nextUntil()

向上查找兄弟元素

  • prev()
  • prevAll()
  • prevUntil()

查找所有兄弟元素

  • siblings()

 1.1.1.next()方法用来查找下一个兄弟元素,可以传参也可以不传参。参数可以是任意jQuery选择器,表示如果下一个元素如果是指定的元素就选定。当没有选中指定的元素时,jQuery链式调用还是保持原来的jQuery对象。

<!-- next -->
<button>点我</button>
<span class="demo">duyi-cst</span>
<p class="demo">duyi-cst</p>

html代码

  示例:

$('button').click(function(){
$(this).next().css({fontSize:'20px',color:'orange'});
console.log( $(this).next('span') );//可以选中元素span
console.log( $(this).next('p') );//不能选中元素p,jQuery链式调用还是保持button的jQuery对象
});

1.1.2nextAll()方法用来查找下面所有兄弟元素,可以传参也可以不传参。参数可以是任意jQuery选择器,表示如果同级后面的元素如果是指定的元素就选定。当没有选中指定元素时,jQuery链式调用还是保持原来的jQuery对象。

<div class="wrapper">
全选:<input type="checkbox"></input>
banana:<input type="checkbox" name="">
apple:<input type="checkbox" name="">
orange:<input type="checkbox" name="">
<input type="submit" value="login" name=""></input>
</div>

  示例:使用nextAll()通过全选按钮获取后面的所有复选框,并实现全选和全部撤销功能

$('input[type="checkbox"]').eq(0).click(function(){
if( $(this).prop('checked') ){
$(this).nextAll('input[type="checkbox"]').prop('checked',true);
}else{
$(this).nextAll('input[type="checkbox"]').prop('checked',false);
}
});

 1.1.3.nextUntil()方法用来查找下面所有兄弟元素,可以传入两个参数,第一个参数指定结束位置,第二个参数指定选择的元素;参数可以是任意jQuery选择器。

//html代码
<div class="wrapper1">
<h1>水果</h1>
全选:<input type="checkbox"></input>
banana:<input type="checkbox">
apple:<input type="checkbox">
orange:<input type="checkbox">
<h1>nba</h1>
全选:<input type="checkbox"></input>
Rose:<input type="checkbox">
Curry:<input type="checkbox">
James:<input type="checkbox">
<input type="button" value="submit">
</div> //js代码
$('.wrapper1 h1').next().click(function(){
if( $(this).prop('checked') ){
$(this).nextUntil('h1','input[type="checkbox"]').prop('checked',true);
}else{
$(this).nextUntil('h1','input[type="checkbox"]').prop('checked',false);
}
});

1.2.1.prev()方法用来查找上一个兄弟元素,可以传参也可以不传参。参数可以是任意jQuery选择器,表示如果上一个元素如果是指定的元素就选定。当没有选中指定的元素时,jQuery链式调用还是保持原来的jQuery对象。

<span class="demo">duyi-cst</span>
<p class="demo">duyi-cst</p>
<button>点我</button>

html代码

  示例:

$(this).prev().css({fontSize:'20px',color:'blu'});
console.log( $(this).prev('p') );//可以选中元素p
console.log( $(this).prev('span') );//不能选中元素p,jQuery链式调用还是保持button的jQuery对象

1.2.2.prevAll()方法用来查找上面的所有兄弟元素,可以传参也可以不传参。参数可以是任意的jQuery选择器,表示如果同级前面的兄弟元素如果是被指定的元素就选定。当没有选定指定元素时,jQuery链式调用还是保持原来的jQuery对象。

//html
banana:<input type="checkbox" name="">
apple:<input type="checkbox" name="">
orange:<input type="checkbox" name="">
全选:<input type="checkbox"></input> //js
$('input[type="checkbox"]').eq(3).click(function(){
if( $(this).prop('checked') ){
alert();
$(this).prevAll('input[type="checkbox"]').prop('checked',true);
}else{
$(this).prevAll('input[type="checkbox"]').prop('checked',false);
}
});

prevAll与nextAll异曲同工

1.2.3.prevUntil()方法与nextUntil()方法的机制是一样的,nextUntil向下指定结束查找位置和查找元素,prevUntil向上指定结束查找位置和查找元素。

1.3.1.siblings()方法用来获取所有兄弟元素,也可以传入一个参数(jQuery选择器)作为筛选条件。

//html
<ul>
<li>1</li>
<li class="a">2</li>
<li>3</li>
<li>4</li>
<li class="a">5</li>
</ul> //js
$('ul li').eq(2)
.css('backgroundColor','red')
.siblings()
.css('backgroundColor','orange')
.end()
.siblings('.a')
.css('backgroundColor','yellow');

注:一个关于兄弟元素查找的小demo

//html代码
<div class="wrapper2">
all:<input type="checkbox"></input> <h1>吃货清单</h1>
all:<input type="checkbox"></input> <h2>水果</h2>
全选:<input type="checkbox">
banana:<input type="checkbox">
apple:<input type="checkbox">
orange:<input type="checkbox">
<h2>蔬菜</h2>
全选:<input type="checkbox">
tomato:<input type="checkbox">
egg:<input type="checkbox">
potao:<input type="checkbox"> <h1>明星清单</h1>
all:<input type="checkbox" name=""> <h2>NBA</h2>
全选:<input type="checkbox">
Rose:<input type="checkbox">
Curry:<input type="checkbox">
James:<input type="checkbox">
</div> //js代码
//案例实现
$('.wrapper2 input[type="checkbox"]').eq(0).click(function(){
if( $(this).prop('checked') ){
$(this).nextAll().prop('checked',true);
}else{
$(this).nextAll().prop('checked',false);
}
});
$('.wrapper2 h1').next().click(function(){
if($(this).prop('checked')){
$(this).nextUntil('h1','input[type="checkbox"]').prop('checked',true);
}else{
$(this).nextUntil('h1','input[type="checkbox"]').prop('checked',false);
}
});
$('.wrapper2 h2').next().click(function(){
if($(this).prop('checked')){
$(this).nextUntil('h2','input[type="checkbox"]').prop('checked',true);
}else{
$(this).nextUntil('h2','input[type="checkbox"]').prop('checked',false);
} });

demo

查找父级元素

  • parent()
  • parents()
  • closest()
  • offsetParent()
  • slice()

 2.1.1.parent()--方法用来获取直接父级元素,可以传入参数(jQuery选择器)匹配指定父元素,如果不是指定的则不匹配,返回一个空的jQuery对象。

//div
<div class="shop" data-id='101'>
<p>basketball-nike</p>
<button>add</button>
</div> //js
console.log( $('button').parent() );//获取到div
console.log( $('button').parent('.aaa') );//没有获取到,返回空的jQuery对象

2.1.2.parents()--方法用来获取所有祖先元素,也可以传入参数(jQuery选择器)筛选,多个符合筛选条件的都会被匹配到。没有符合条件的,返回空的jQuery对象。

//html同上

//js
console.log( $('button').parents() );//div-body-html
console.log( $('button').parents('body') );//body
console.log( $('button').parents('.aaa') );//没有获取到,返回空的jQuery对象

2.2.1.closest()--方法用来获取符合条件的最近的一个父级元素,并且可以获取本身;不传入参数或参数没有匹配的祖先元素就返回一个空的jQuery对象;

console.log( $('.shop button').closest() );//空对象
console.log( $('.shop button').closest('.shop') );//div
console.log( $('.shop button').closest('button') );//自己本省
console.log( $('.shop button').closest('.aaa') );//空对象

2.2.2.offsetParent()--方法用来获取最近的有设定定位的父级元素。

//html
<div class="wrapper" style="position: relative">
<div class="box">
<span>123</span>
</div>
</div> //js
console.log( $('.wrapper span').offsetParent() );//选取到了<div class="wrapper" style="position: relative">

2.2.3slice()--通过指定索引范围来截取jQuery对象中DOM的部分,索引范围采用左闭右开,第一个索引的元素可以获取,第二个索引的元素不能获取。

//html
<ul>
<li>1</li>
<li class="a">2</li>
<li>3</li>
<li class="a">4</li>
<li class="a">5</li>
</ul> //js
console.log( $('ul li').slice(1,4) );//获取到索引为1,2,3的li元素
上一篇:el-tree点击获取直接父级的属性


下一篇:mysql oracle sql获取树 父级 子级 及自己