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') );//可以选中元素spanconsole.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元素
转载于:https://www.cnblogs.com/ZheOneAndOnly/p/10332420.html
jQuery使用(四):DOM操作之查找兄弟元素和父级元素相关推荐
- 三、jQuery 中的 DOM 操作(超详细)
文章目录 前言 一. DOM 介绍 二. 查找节点 2.1查找元素节点 2.2查找属性节点 三. 创建节点 3.1.创建元素节点 3.2.创建文本节点 3.3.创建属性节点 四.插入节点 4.1 DO ...
- jQuery基础二DOM操作
DOM:Document Object Model的缩写,中文是文档对象模型,根据W3C DOM规范(htttp://www.w3.org/DOM ),它是一种与浏览器.平台.语言无关的接口,该接口可 ...
- jQuery库的简单使用:jQuery中的 DOM 操作,增删改查,复制,替换,包裹,属性和样式操作
jQuery中的 DOM 操作 查 查找属性节点: 通过 jQuery 选择器完成. 操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 ...
- jQuery 基础教程 (四)之jQuery中的DOM操作
一.jQuery 中的 DOM 操作 (1)DOM(Document Object Model-文档对象模型):一 种与浏览器, 平台, 语言无关的接口, 使用该接口可以 轻松地访问页面中所有的标准组 ...
- Jquery基础之DOM操作
Jquery基础之DOM操作 Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DO ...
- jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
- 原生js和jquery常用的DOM操作
前言 将原生JS和jquery里面的DOM操作进行了一下整理,方便以后温习. 创建元素节点 1.原生: document.createElement("div") 2.jquery ...
- jquery中的DOM操作集锦
1,查找节点: 1 2 var $li = $("ul li:eq(1)");//查找元素 $li.attr("title"); //查找元素的属性值 2,创建 ...
- jquery获取元素(父级的兄弟元素的子元素)
一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(t ...
- jQuery——给元素添加父级的方法
.wrap() 作用:在每个匹配的元素外层包上一个html元素 [例]给两个span标签分别添加父级 方法一:传标签 <!DOCTYPE html> <html lang=" ...
最新文章
- python精要(81)-collections容器类型(1)-统计相同的值
- 2018学校计算机 远程教学工作总结,2018年远程教育工作总结范文
- 【转】ORACLE中的子查询 ---OCP--047--46
- high-speed A/D performance metrics and Amplifie...
- 优秀的代码原来是这样分层的
- 反射可以使用lambda吗_必读干货帖|车载对讲机使用地网天线可以降低驻波吗?...
- WIN32:参考文章
- 用html做网页作品,HTML5实例:用HTML5制作的网页的15个优秀案例
- 前端设备通过Ehome协议接入EasyCVR平台无法播放问题解决
- 大华摄像机调试以及保存视频
- 微信小程序tabbar消失_微信小程序tabbar不显示解决办法
- js实现商城特效---鼠标移入图片放大
- 蓝牙软件测试指标,手机软件测试蓝牙.pdf
- Java从零打造企业级电商项目实战 项目初始化
- pycharm离线安装中文插件
- OpenSSH: 通过 LDAP 做认证
- 工控系统设计(八)组态功能开发
- MindMapper中的主题该怎样进行修改
- 谈谈互联网推广:从了解用户开始
- 华为服务器1u系列,服务器 1u