如何在jQuery中使用层次选择器-创新互联

如何在jQuery中使用层次选择器？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联建站主要从事网站建设、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务印台,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

DOM元素之间的层次关系主要包括元素的子元素、后代元素、相邻元素和兄弟元素等，我们可以通过DOM元素之间的层次关系来获取想要的元素。为了更好的学习，我们先列出一段HTML代码：


  
    id=one，class=aaa的div
    
    class=mini

id=two，class=aaa的div class=mini的div

$(document).ready(function(){ //【写法1】写法1与写法2等价 $("#one + span").css("background","#ffbbaa"); //【写法2】 $("#one").next("span").css("background","#ffbbaa"); //【写法3】写法3、写法4与写法5等价 $("#one").nextAll("span:first").css("background","#ffbbaa"); //【写法4】 $("#one").nextAll("span:eq(0)").css("background","#ffbbaa"); //【写法5】 $("#one").nextAll("span").eq(0).css("background","#ffbbaa"); });

$(document).ready(function(){ //【写法1】写法1与写法2等价 $("#two ~ div").css("border","1px solid #ffbbaa"); $(".mini:eq(1) ~ div").css("border","1px solid #ffbbaa"); //【写法2】 $("#two").nextAll("div").css("border","1px solid #ffbbaa"); $(".mini:eq(1)").nextAll("div").css("border","1px solid #ffbbaa"); });

$(document).ready(function(){ //【写法1】 $("span:first").prev(".bbb").css("background", "#ffbbaa"); //【写法2】写法2、写法3和写法4等价 $("span:first).prevAll(".bbb:first").css("background", "#ffbbaa"); //【写法3】 $("span:first).prevAll(".bbb:eq(0)").css("background", "#ffbbaa"); //【写法4】 $("span:first).prevAll(".bbb").eq(0).css("background", "#ffbbaa"); });

重庆分公司，新征程启航

如何在jQuery中使用层次选择器-创新互联

jquery是什么

其他资讯