JavaScript程序库jQuery学习笔记分享(二)jQuery选择器(1)

 

       什么是选择器?

       选择器是jQuery的根基，在jQuery中，所有的操作，例如事件处理，遍历DOM和Ajax操作都依赖于选择器。因为只有先选中我们需要操作的元素，才能够进行相应的操作，下面就给大家介绍一下jQuery选择器，后面还有一个实例，帮助大家理解。

 

一：jQuery选择器简介和优势

      1.简介

         jQuery中的选择器完全继承了CSS风格。但与CSS不同的是，CSS选择器是找到元素后添加样式，jQuery选择器是找到元素后添加行为。利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。

      2.优势

      (1)写法简单

           $()函数在许多javaScript函数库中都被作为一个选择器函数来使用，在jQuery也是。在jQuery中，$("#ID")用来替代document.getElementById()函数，通过ID获取元素;；$("tagName")用来代替document.getElementsByTagName()函数，通过标签名获取html元素。。

      (2)支持CSS1到CSS3选择器

          jQuery选择器支持CSS1到CSS2的全部和CSS3的部分选择器，同时也有少量独有的选择器。并且无需考虑浏览器兼容性问题。

      (3)完善的处理机制

          jQuery在一些问题上的处理是非常不错的，即使用jQuery获取网页中不存在的元素也不会报错。但要注意的是，$()获取的是jQuery对象，因此要检查某个元素在网页上是否存在时，应该获取到元素的长度或者转化为DOM对象来判断。

 

二：jQuery选择器分类

       jQuery选择器分为基本选择器，层次选择器，过滤选择器和表单选择器

      1.基本选择器       

         内容：基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过id,class和标签名等来查找DOM元素，每一个id名称只能使用一次，class允许重复使用。

       用法：

选择器	作用	返回值	示例
#id	根据给定的id匹配一个元素	单个元素	$("#a")选取id="a"的元素
.class	根据给定的类名匹配元素	集合元素	$(".b")选取所有class="b"的元素
element	根据给定的元素名匹配元素	集合元素	$("my")选取所有的<my>元素
*	匹配所有的元素	集合元素	$("*")选取所有的元素
selector,selector, ......selectorN	将每一个选择器匹配到的元素合并后一起返回	集合元素	$(a,b,#c,.my)选取所有的<a>,<b>和拥有id="c"元素下的所有的class为my的元素

 

        2.层次选择器

               如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素和同辈元素，那就要用到层次选择器。

选择器	描述	返回	示例
$("a b")	选取a元素里的所有b(后代)元素	集合元素	$("a b")选取<a>
$("a > b")	选取a元素下的b(子)元素，与$("a b")有区别	集合元素	$("a > b")选取<a>元素下元素名是<b>的子元素
$("a + b")	选取紧接在a元素后的b元素	集合元素	$("a + b")选取<a>元素的下一个<b>同辈元素
$("a ~ b")	选取a元素之后的所有<b>元素	集合元素	$("a ~ b")选取<a>元素后面的所有<b>同辈元素

   在层次选择器中，第一个和第二个选择器比较常用。可以用next()方法替代$("a + b")选择器，用nextAll()方法替代$("a ~ b")选择器。

 

        3.过滤选择器

             过滤选择器通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器。

（1）基本过滤选择器

选择器	描述	返回	示例
:first	选取第一个元素	单个元素	$("a:first")选取所有<a>元素中第一个<a>元素
:last	选取最后一个元素	单个元素	$("a:last")选取所有<a>元素中最后一个<a>元素
:not(selector)	去除所有与给定元素匹配的元素	集合元素	$("input:not(.b)")选取所有class不是b的<input>元素
:even	选取索引是偶数的所有元素(从0开始)	集合元素	$("input:even")选取索引是偶数的<input>元素
:odd	选取索引是奇数的所有元素(从0开始)	集合元素	$("input:odd")选取索引是奇数的<input>元素
:eq(index)	选取索引等于index的元素(从0开始)	单个元素	$("input:eq(1)")选取索引等于1的<input>元素
:gt(index)	选取索引大于index的元素(从0开始)	集合元素	$("input:gt(1)")选取索引大于1的<input>元素
:lt(index)	选取索引小于index的元素(从0开始)	集合元素	$("input:lt(1)")选取索引小于1的<input>元素
:header	选取所有的标题元素	集合元素	$(":header")选取网页中的所有的<h1>,<h2>,<h3>......标题元素
:animated	选取当前正在执行动画的所有元素	集合元素	$("div:animated")选取正在执行动画的<div>元素
:focus	选取当前获取焦点的元素	集合元素	$(":focus")选取当前获取焦点的元素

 

(2)内容过滤选择器

选择器	描述	返回	示例
:contains(text)	选取含有文本内容为"text"的元素	集合元素	$("div:contains('什么')")选取含有文本'什么'的<div>元素
:empty	选取不包含子元素或者文本的空元素	集合元素	$("div:empty")选取不包含子元素(以及文本元素)的<div>空元素
:has(selector)	选取含有选择器匹配的元素的元素	集合元素	$("div:has(p)")选取含有<p>元素的<div>元素
:parent	选取含有子元素或者文本的元素	集合元素	$("div:parent")选取拥有子元素(以及文本元素)的<div>元素

 

(3)可见性过滤选择器

 

选择器	描述	返回	示例
:hidden	选取所有不可见的元素	集合元素	$(":hidden")选取所有不可见的元素，$("input:hidden")选取所有<input>元素中的不可见的元素
:visible	选取所有可见的元素	集合元素	$("div:visible")选取所有可见的<div>元素

 

(4)属性过滤选择器

选择器	描述	返回	示例
[attribute]	选取拥有此属性的元素	集合元素	$("div[id]")选取拥有属性id的元素
[attribute=value]	选取属性值为value的元素	集合元素	$("div[class=my]")选取属性class为"my"的<div>元素
[attribute!=value]	选取属性值不等于value的元素	集合元素	$("div[class!=my]")选取属性class不等于"my"的<div>元素(没有属性class的<div>元素也会被选取)
[attribute^=value]	选取属性值以value开始的元素	集合元素	$("div[class^=my]")选取属性class以"my"开始的<div>元素
[attribute$=value]	选取属性值以value结束的元素	集合元素	$("div[class$=my]")选取属性class以"my"结束的<div>元素
[attribute*=value]	选取属性值含有value的元素	集合元素	$("div[class*=my]")选取属性class含有"my"的<div>元素
[attribute|=value]	选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符"-")的元素	集合元素	$("div[b!="my"]")选取属性b等于my或以my为前缀(该字符串后跟一个连字符'-')的元素
[attribute~=value]	选取属性用空格分隔的值中包含一个给定值的元素	集合元素	$("div[class~="my"]")选取属性class用空格分隔的值中包含字符my的元素
[attribute1][attribute2][attribute3]	用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小范围	集合元素	$("div[class][id][a^='my']")选取拥有属性class。并且属性a以"my"开始的<div>元素

 

(5)子元素过滤选择器

选择器	描述	返回	示例
:nth-child(index/even/odd/equation)	选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)	集合元素	与:eq()index有所区别，:nth_child将为每一个父元素匹配子元素，并且是从1开始的
:first-child.	选取每个父元素的第一个子元素	集合元素	:first只返回单个元素，而:first-child选择器将为每个父元素匹配第一个子元素
:last-child	选取每个父元素的最后一个子元素	集合元素	:last只返回单个元素，而:last-child选择器将为每个父元素匹配第一个子元素
:only-child	如果某个元素是它父元素中唯一的元素，那么将会匹配，如果父元素中含有其他元素，则不会匹配	集合元素	$("a b:only-child")在<a>中选取是惟一子元素的<b>元素

 

(6)表单对象属性过滤选择器

选择器	描述	返回	示例
:enabled	选取所有可用元素	集合元素	$("#my:enabled")选取id为"my"的表单内的所有可用元素
:disabled	选取所有不可用元素	集合元素	$("#my:disabled")选取id为"my"的表单内的所有不可用元素
:checked	选取所有被选中的元素(单选框，复选框)	集合元素	$("input:checked")选取所有被选中的<input>元素
:selected	选取所有被选中的选项元素(下拉列表)	集合元素	$("select option:selected")选取所有被选中的选项元素

 

4.表单选择器

   当然，jQuery还提供了表单选择器，使用户能够更加灵活地操作表单。

选择器	描述	返回
:input	选取所有的<input>,<textarea>,<select>和<button>元素	集合元素
:text	选取所有的单行文本框	集合元素
:password	选取所有的密码框	集合元素
:radio	选取所有的单选框	集合元素
:checkbox	选取所有的多选框	集合元素
:submit	选取所有的提交按钮	集合元素
:image	选取所有的图像按钮	集合元素
:reset	选取所有的重置按钮	集合元素
:button	选取所有的按钮	集合元素
:file	选取所有的上传域	集合元素
:hidden	选取所有不可见元素	集合元素

 

选择器基本上就是这么多了，还有一些其他的选择器，这里就不一一介绍了，在下一个文章中，将展示一些选择器的使用和在实际问题中如何使用这些选择器。