首页 > 代码库 > jQuery高级选择器和其等价方法
jQuery高级选择器和其等价方法
jQuery选择器和css一样,但兼容性更好
<body> <p>p1</p> <p>p1</p> <p>p1</p> <div id="box"> <p>p2</p> <p>p2</p> <p>p2</p> <div> <p>p3</p> <p>p3</p> <p>p4</p> </div> </div> <p>p4</p> <p>p4</p> <p>p4</p> </body>
层次选择器:
$(function(){ //后代选择器 $(‘#box p‘).css(‘color‘,‘red‘); $(‘#box‘).find(‘p‘).css(‘color‘,‘blue‘); //子选择器 $(‘#box > p‘).css(‘color‘,‘red‘); $(‘#box‘).children(‘p‘).css(‘color‘,‘blue‘); //next选择器,获取节点后一个同级DOM对象,如果不是所指定的没有效果 $(‘#box + p‘).css(‘color‘,‘red‘); $(‘#box‘).next(‘p‘).css(‘color‘,‘blue‘); //nextAll,获取节点后所有同级DOM对象 $(‘#box ~ p‘).css(‘color‘,‘red‘); $(‘#box‘).nextAll(‘p‘).css(‘color‘,‘blue‘); });
jQuery方法对选择器的补充:
//jQuery对高级选择器的补充,提供的几种方法 //同级上指定元素:一个或所有个 $(‘#box‘).prev(‘p‘).css(‘color‘,‘red‘); $(‘#box‘).prevAll(‘p‘).css(‘color‘,‘blue‘); //同级非指定元素:上或下 $(‘#box‘).prevUntil(‘p‘).css(‘color‘,‘red‘); $(‘#box‘).nextUntil(‘p‘).css(‘color‘,‘blue‘); //同级指定元素:上和下 $(‘#box‘).siblings(‘p‘).css(‘color‘,‘red‘);
注:1 方法如果不传参相当于*,表示任意,不建议使用
2 方法相对高级选择器写法好一些:find()最快,可以拆分组合使用
var box = $(‘#box‘); var p = box.find(‘p‘);
----------------------------------------------------------------------------------------------------------------------------------------------------------
属性选择器:
<a sss="x" title="num1 aaa bbb">num1</a> <a>num2</a> <a>num3</a> <a>num4</a> <a sss="s" title="num5">num5</a> <a title="num-6">num6</a> <a title="nsdfnumsdf">num7</a>
//属性浏览器 $(‘a[title]‘).css(‘color‘,‘red‘); $(‘a[title=num1]‘).css(‘color‘,‘blue‘); $(‘a[title^=num]‘).css(‘color‘,‘red‘); $(‘a[title$=1]‘).css(‘color‘,‘blue‘); $(‘a[title|=num]‘).css(‘color‘,‘red‘); $(‘a[title!=num5]‘).css(‘color‘,‘blue‘); $(‘a[title~=aaa]‘).css(‘color‘,‘red‘); $(‘a[title*=num]‘).css(‘color‘,‘blue‘); $(‘a[sss][title=num5]‘).css(‘color‘,‘red‘);
jQuery高级选择器和其等价方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。