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');
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 父元素停止