JQuery入门贴:五种基本选择器
2015-02-05 21:35
633 查看
JQuery的选择器是很强大,很灵活的。基本选择器是我们平时编程中用的最多的,虽然JQuery版本现在已经发展到了2.x版本,但是基本选择器没有发生改变,就是只有5种。
1、ID选择器,格式 #id
根据给定元素的id属性值,选中元素。如果id属性值含有特殊字符,那么将不能选中想要的元素,可以通过2个斜杠字符进行转义。一般来说,元素的id值是唯一的。如果页面出现了重复的id,那么id选择器只会选中dom文档中的最靠前的元素。特殊字符问题可以参考这篇文章。
$("#first")
2、元素选择器,格式 element
根据给定的元素标签名匹配所有元素。这里值得注意的是:不是html中的标准元素,一样可以通过该选择器选中。
$("testtag")
3、类选择器,格式 .class
根据给定的css类名,选中匹配的元素。一个元素的可以有多个类名(类名直接用空格分隔),只要有一个符合就能被匹配到。
$(".myClass")
4、*选择器,格式 *
选中所有元素,这个选择器效率比较低,慎用。如果想选中holder之下的所有元素,可以使用*选择器。
$("#holder *")
5、并集选择器,格式selector1,selector2,selectorN
将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。
$(".demo, #buttonId, p")
1、ID选择器,格式 #id
根据给定元素的id属性值,选中元素。如果id属性值含有特殊字符,那么将不能选中想要的元素,可以通过2个斜杠字符进行转义。一般来说,元素的id值是唯一的。如果页面出现了重复的id,那么id选择器只会选中dom文档中的最靠前的元素。特殊字符问题可以参考这篇文章。
$("#first")
<div id="first"></div> <div id="first"></div>
2、元素选择器,格式 element
根据给定的元素标签名匹配所有元素。这里值得注意的是:不是html中的标准元素,一样可以通过该选择器选中。
$("testtag")
<testtag id="aty"></testtag> <testtag id="hehe"></testtag>
3、类选择器,格式 .class
根据给定的css类名,选中匹配的元素。一个元素的可以有多个类名(类名直接用空格分隔),只要有一个符合就能被匹配到。
$(".myClass")
<div class="myClass heclass"></div> <span class="myClass"></span>
4、*选择器,格式 *
选中所有元素,这个选择器效率比较低,慎用。如果想选中holder之下的所有元素,可以使用*选择器。
$("#holder *")
<div id="holder"> <span>1</span> <div><span>2</span></div> <input type="button" value="1"/> </div>
5、并集选择器,格式selector1,selector2,selectorN
将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。
$(".demo, #buttonId, p")
<div id="holder"> <div class="demo"></div> <input type="button" value="1" id="buttonId"/> <p>ww</p> </div>
相关文章推荐
- 【5】jQuery学习——入门jQuery选择器之过滤选择器-基本过滤选择器
- 网站前端_jQuery-基础入门.玩转jQuery基本/层次/过滤/表单选择器?
- 【3】jQuery学习——入门jQuery选择器之基本选择器
- Java乔晓松-jQuery介绍入门和对象转换、以及基本选择器和层次选择器
- Jquery入门和九种选择器的基本使用
- jQuery——入门(一)JQuery的简介与基本选择器的使用
- JQuery入门(三)-选择器1
- jquery 基本选择器的使用
- jQuery入门[2]-选择器
- jQuery:入门学习之选择器and jQuery性能优化的小建议
- jQuery入门[2]-选择器
- class_01:基本选择器|zend实验室jquery系列教程
- jQuery入门-选择器-2.初识jQuery选择器
- jquery基本入门
- jQuery的选择器—基本过滤选择器
- jQuery选择器 – 基本(Basics)
- [转载]jquery.validate.js的基本用法入门
- jQuery入门[2]-选择器
- jQuery入门(3):DOM(选择器,属性,筛选,文档处理)
- jQuery新手入门(二) 万能的选择器