jQuery 选择器

转载 2015年07月10日 19:38:57

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
















Jquery 选择器整理

  • 2015年12月23日 11:27
  • 1.23MB
  • 下载

jquery 选择器 描述

  • 2012年03月09日 11:47
  • 2KB
  • 下载

jquery 选择器一些总结

1.获取点击事件对象$(this)//获取image src路径$(".userImg").click(function(){var imgsrc = $(this).attr("src");aler...

jquery 选择器(name,属性,元素)大全

基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色。(id选择器返单个元素) $(document).ready(function () {    ...

jquery 选择器的使用探讨

在jQuery中,当用户把选择器表达式作为参数传递给$()函数时,jQery的Sizzle先对这个选择器表达式进行语法分析,然后再决定如何获得表达式所代表的这些元素。在框架底层,Sizzle应用了浏览...

jquery 选择器(name,属性,元素)大全

jquery 选择器是jquery中非常重要的一个功能了,正是因为有了jquery选择器所有jquery才如此简单了,下面小编来给各位同学介绍jquery 选择器用法,希望对各位同学会有所帮助。 ...

jQuery 选择器 学习笔记

w3school上的说明: jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname...

Jquery 选择器列举

1, 星号选择器: $("*") $("#test").find("*") 注意:在选择后,既使在此选择之后添加元素也会被执行              2, 选择所有正在执行动画效果的元素...

JQuery 选择器和事件

PS、//不是所有浏览器都支持 console.log 解决办法定义一个输出函数 调用即可 若出错则注释掉function conlog(event){ console.log(even...

JQuery 选择器总结

主要分为一下几类 一、基本选择器 (1)#id $("#id") 返回单个元素 (2).class $(".demo") 返回集合元素 (3)element $("p") 返回集合...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery 选择器
举报原因:
原因补充:

(最多只允许输入30个字)