jQuery中的关系查找方法是什么
这篇文章主要介绍了jQuery中的关系查找方法是什么，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
一、jQuery关系查找方法
$(this):在原生的DOM操作中,事件函数内部都有一个this关键字指向的就是触发事件的事件源;在jQuery中将this关键字传递给$()方法,得到的就是指向自己的jQuery对象,这样就可以使用jQuery方法了.parent()父级:jQuery对象都有一个
parent()方法,得到的是自己的父级,父级得到的也是一个jQuery对象,可以直接继续打点调用jQuery方法和属性children()子级:可以得到自己的所有子级元素组成的jQuery对象;得到的子级组成的jQuery对象可以继续调用jQuery方法和属性
children()可以传递参数,参数是字符串格式的选择器,在选中所有子级的情况下,保留满足选择器的部分,进行二次选择.
siblings()兄弟:jQuery对象通过调用siblings()方法可以得到除了自己以外的所有同级元素(兄弟)组成的jQuery对象,找到的只能是亲的兄弟,不能是旁系(叔叔家)的兄弟siblings()方法的到的
jQuery对象可以进行二次选择,通过给参数传递字符串格式得到选择器
<head> <style> *{ margin: 0; padding: 0; } .box{ width: 400px; height: 60px; border: 1px solid #000; margin-top: 2px; } .box p,.box h3{ float: left; width: 60px; height: 60px; margin-right: 20px; background-color: rgb(164, 247, 233); } </style></head><body> <div class="box"> <p></p> <p></p> <p></p> <p></p> <h3>h3</h3> </div> <div class="box"> <p></p> <p></p> <p></p> <p></p> <h3>h3</h3> </div> <div class="box"> <p></p> <p></p> <p></p> <p></p> <h3>h3</h3> </div> <div class="box"> <p></p> <p></p> <p></p> <p></p> <h3>h3</h3> </div> <script class="lazy" data-src="../jq/jquery-1.12.4.min.js"></script> <script> var $p = $("p"); var $box = $(".box") $p.click(function(){ //点击自己，发生颜色改变 //使用$()包裹this，this由指向触发事件的原生js对象，变成指向jQuery对象自己 $(this).css("background-color","pink"); // $(this).parent() 找到事件源的父级元素 $(this).parent().css("background-color","skyblue"); //siblings() // $(this).siblings().css("background-color","purple"); //除了点击的以外，它的兄弟都变成了紫色 // 添加参数后，会按照指定的选择器在子级中进行二次选择 $(this).siblings("h3").css("background", "purple"); //兄弟元素同时是好标签 }) //通过点击div 获取它的子级元素 $box.click(function(){ //获取子级 // $(this).children().css("background","pink"); // 添加参数后，会按照指定的选择器在子级中进行二次选择 $(this).children("h3").css("background", "orange"); }) //查找兄弟元素 sinblings（） // 写在$P方法中 </script></body>二、jQuery其他关系查找方法
find()后代元素:传递一个规定的选择器作为参数,查找范围是jQuery对象的所有后代
兄弟元素
紧邻的兄弟元素方法:
next()下一个兄弟
prev()前一个兄弟
多选方法：
nextAll()后面所有兄弟
preAll()前面所有兄弟
<style> *{ margin: 0; padding: 0; } .box{ border: 1px solid #000; background-color: white; width: 500px; height: 50px; margin-left: 4px; margin-top: 4px; } p{ width: 50px; height: 50px; background-color: rgb(185, 185, 185); float: left; margin-right: 8px; } span{ float: left; width: 50px; height: 50px; margin-right: 8px; background-color: pink; }</style> <body> <div class="box"> <p></p> <p></p> <p></p> <span></span> <span></span> <span></span> </div> <div class="box"> <p></p> <p></p> <p></p> <span></span> <span></span> <span></span> </div> <div class="box"> <p></p> <p></p> <p></p> <span></span> <span></span> <span></span> </div> <script class="lazy" data-src="../jq/jquery-1.12.4.min.js"></script><script> var $box = $(".box") var $p = $("p") //实现点击一个子级标签，让它自己变成红色，使它的前面的兄弟变紫色，后面的兄弟变橘色 var $child = $box.children(); $child.click(function(){ $(this).css("background-color","red") .prevAll().css("background-color","purple") $(this).css("background-color","red") .nextAll().css("background-color","orange") </script></body>通过传递参数可以进行二次选择，参数是字符串格式的选择器，在前面或后面兄弟中选中符合选择器规定的部分。
parents()祖先级
通过该方法得到的是指定对象的包含body在内的所有祖先级元素组成的jQuery对象
通过传参进行二次选择，参数位置是字符串格式的选择器
代码示例：
//实现点击一个子级标签，自己变红色，使它的祖先级变成蓝色 // parents（） 查找包含body在内的祖先级 // $(this).css("background-color","red") // .parents().css("background-color","skyblue") // parents()传参数，可以筛选去掉不是div的元素 $(this).css("background-color", "red") .parents("div").css("background-color", "skyblue")})感谢你能够认真阅读完这篇文章，希望小编分享的“jQuery中的关系查找方法是什么”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
