关闭

jQuery 选择器

标签: javascriptjquery
247人阅读 评论(0) 收藏 举报
分类:

http://edu.51cto.com/lesson/id-14460.html


jQuery最核心的组成部分:选择器引擎。它继承了CSS语法,可以对DOM元素的标签名、属性名、状态灯进行快速准确的选择,

最重要的是无需担心浏览器的兼容性。

使用方法:

1、使用$()函数来包装CSS规则,如$("#box")返回ID为box的DOM节点对象

2、对DOM节点对象进行CSS操作,$("#box").css('color','red');



注意:在页面中ID只允许出现一次,class和标签没有次数限制,如果有多个ID时,使用CSS样式,多个ID元素都可以获得CSS的样式,当使用jQuery时,就只有第一个ID元素可以得到相应处理。


jQuery 兼容性问题

注:

1、CSS子选择器在IE6下不支持:#myId > div {}

2、jQuery子选择器兼容IE6:$('#myId > div'}).css('color', 'red');


jQuery容错功能:

1、jQuery:$('#myId').css('color', 'red');  //如果myId元素不存在,则该语句不会报错,因为jQuery内存进行了判断。

2、CSS:document.getElementById('myId').style.color='red';//如果myId元素不存在,该语句会报错;


对于不存在的元素,jQuery如何判断?

方法:if($('#myId').get(0)) {} 或者if($('#myId')[0]) {}


进阶选择器:


群组选择器:span,em,a,.className,#myId {}获取以,分割的所有DOM元素的集合

后代选择器:ul li a{} 按照从左到右顺序作为层级关系选择DOM元素集合

通配选择器:*{} 获取所有DOM元素


还有一种选择器,在ID和类名之前指定元素前缀。如$('div.className')表示类名为className的div元素。


层级选择器



后代选择器:(全兼容)

$('#box p').css('color','red');//等价于

$('#box').find('p').css('color','red');


子选择器:

$('#box > p').css('color','red');//等价于

$('#box').children('p').css('color','red');


next选择器:(获取下一个同一节点)

$('#box + p').css('color','red');//等价于

$('#box').next('p').css('color','red');

注意

1、如果#box下一个同级DOM元素如果不是p,则该语句失效。

2、如果next()没有参数,则相当于不匹配下一个元素的类型,直接获取下一个位置的元素。


nextAll选择器:(获取后面所有同级节点)

$('#box ~ p').css('color','red');//等价于

$('#box').nextAll('p').css('color','red');


补充高级选择器:
1、$('#box').prev('p').css('color','red');//同一级上一个相邻的元素
2、$('#box').prevAll('p').css('color','red');//同一级前面的所有元素
3、$('#box').prevUntil('p').css('color','red');//同一级前面所有不是p类型的元素,如果遇到p元素则停止搜索。

4、$('#box').nextUntil('p').css('color','red');//同一级后面所有不是p类型的元素,如果遇到p元素则停止搜索。

5、$('#box').siblings('p').css('color','red');//获取同级中前后所有p类型的元素


选择器速度:

理论上将, find()、next()、nextAll()和 children()方法运行速度要快于高级选择器,推荐使用这些方法,而尽量少用高级选择器



属性选择器



$('a[title]').css('color', 'red');//包含title属性的所有a标签,如<a title="a"></a>

$('a[title=num1]').css('color', 'red');//匹配<a title="num1"></a>

$('a[title^=num1]').css('color', 'red');//匹配<a title="num1"></a>或<a title="num1xxx"></a>

$('a[title$=num1]').css('color', 'red');//匹配<a title="num1"></a><a title="xxxnum1"></a>

$('a[title|=num1]').css('color', 'red');//匹配<a title="num1"></a>或<a title="num1-xxx"></a>

$('a[title!=num1]').css('color', 'red');//匹配<a title="非num1"></a>

$('a[title~=num1]').css('color', 'red');//匹配<a title="num1 aaa"></a>或<a title="num1 bbb ccc"></a>

$('a[title*=num1]').css('color', 'red');//匹配<a title="prefixnum1"></a>或<a title="num1subfix"></a>

$('a[bbb][title=num1]').css('color', 'red');//匹配<a title="num1" bbb="bbb"></a>




过滤选择器


jQuery 为最常用的过滤器提供了专用的方法,已达到提到性能和效率的作用:
$('li').eq(2).css('background', '#ccc'); //元素 li 的第三个元素,负数从后开始
$('li').first().css('background', '#ccc'); //元素 li 的第一个元素
$('li').last().css('background', '#ccc'); //元素 li 的最后一个元素
$('li').not('.red').css('background', '#ccc'); //元素 li 不含 class 为 red 的元素


内容过滤器:



jQuery 提供了一个 has()方法来提高:has 过滤器的性能:
$('ul').has('.red').css('background', '#ccc'); //选择子元素含有 class 是 red 的元素


jQuery 提供了一个名称和:parent 相似的方法, 但这个方法并不是选取含有子元素或文本的元素,而是获取当前元素的父元素,返回的是元素集合。
$('li').parent().css('background', '#ccc'); //选择当前元素的父元素
$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素
$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到 div 父元素停止
















0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:439340次
    • 积分:5962
    • 等级:
    • 排名:第4223名
    • 原创:121篇
    • 转载:356篇
    • 译文:6篇
    • 评论:17条
    文章分类
    最新评论