阿坝州网站建设公司

（JQuery学习笔记）我对jQuery选择器的总结-创新互联

jquery选择器与css选择器的风格类似，但是jquery涉及到的功能更为强大，利用jquery选择器，可以很快的找出特定的DOM元素，并且对其进行操作，无需担心浏览器是否支持这一选择器。

站在用户的角度思考问题，与客户深入沟通，找到站前网站设计与站前网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广、域名注册、雅安服务器托管、企业邮箱。业务覆盖站前地区。

    根据选择器行为特点划分，jquery选择器主要有以下几种分类：

    （1）基本选择器

    （2）层次选择器

    （3）过滤选择器

    （4）表单选择器

1.基本选择器

  特点：最常用、最简单。

选择器描述返回示例
＃id（id选择器）根据给定的id匹配一个元素单个元素$("#test")选择id为test的元素
.class（类选择器）根据给定的class名称匹配多个元素集合元素$(".test")选择类名为test的所有元素
element（元素选择器）根据给定的元素名匹配多个元素集合元素$("div")选择所有
元素
＊（全部选择器）
匹配所有元素集合元素$("*")选择所有元素
sele1,sele2,seleN有效选择器将每一个选择器匹配到的元素合并后一起返回集合元素$("div,p.test")选择所有的
和拥有class为test的

元素合并的集合

    注：在网页中，每个id名称只能使用一次，class名称可重复使用。

2.层次选择器

    特点：利用DOM元素间的层次关系。

选择器描述返回示例
$("a b") 后代选择器选择a元素中所有的b（后代）元素集合元素$("div span")选择
后代元素中的所有的元素
$("parent>child") 子选择器选择parent元素下的child（子）元素。集合元素$("div>span")选择
下的所有子元素
$("prev+next")相邻同辈元素选择器选择紧接在prev元素后的next元素单个元素$(".test+p")选择紧接在class为test的元素后的第一个

同辈元素

$("prev~siblings")一般同辈元素选择器选择器prev元素后的所有同辈元素集合元素$("#test~div")选择id为test的元素后面的所有
同辈元素

    注：

    （1）子选择器与后代选择器的区别：后代选择器包括孙元素。


    

        

            
        

      
      
    

如代码所示，当我们使用$("div span")后代元素选择器时，可以匹配到

中后代为的元素，所以匹配结果为3个；当我们使用$("div>span")子元素选择器时，可以匹配到
中子元素为的元素，所以匹配结果为2个（因为p标签中的span元素不是div的子元素）。

    （2）可以用next()方法代替$("prev+next")选择器；用nextAll()方法代替$("prev~siblings")选择器。同时，有一个方法可选择所有的同辈节点元素，即siblings()方法。

3.过滤选择器

    特点：通过过滤规则选择所需的DOM元素。按照不同的过滤规则，过滤选择器可分为：基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤。

基本过滤选择器

选择器描述返回示例
:first选择第一个元素单个元素$("div:first")选择所有
元素中第1个
元素
:last选择最后一个元素单个元素同上反推
:not(selector)去除所有与给定选择器匹配的元素集合元素$("div:not(.test)")选择class不是test的div元素
:even从一个元素集合中选择索引是偶数的所有元素集合元素$("div:even")选择索引是偶数的div元素
:odd从一个元素集合中选择索引是奇数的所有元素集合元素同上原理
:eq(index)
从一个元素集合中选择索引等于index的元素单个元素$("div:eq(1)")选择索引等于1的
元素
:gt(index)从一个元素集合中选择索引大于index的元素集合元素$("div:gt(1)")选择索引大于1的
元素
:lt(index)从一个元素集合中选择索引小于index的元素集合元素同上反推
:header选择所有的标题元素集合元素$(":header")选择网页中所有的

,

...元素

:animated选择当前正在执行动画的所有元素集合元素$("div:animated")选择正在执行动画的
元素
:focus选择当前获取焦点的元素集合元素$("focus")选择当前获取焦点的元素

内容过滤选择器

选择器描述返回示例
:contains(text)选取含有文本内容为"text"的元素集合元素$("div:contains('test')")选择含有文本test的
元素
:empty选取不包含子元素或者文本的元素（即空元素）集合元素$("div:empty")选取不包含子元素的
元素
:has(selector)选取含有选择器所匹配的元素的元素集合元素$("div:has(p)")选取含有

元素的

元素
:parent选择拥有子元素（包括文本）的元素集合元素$("div:parent")选择含有子元素的
元素

内容过滤选择器的过滤规则主要以标签所包含的子元素来进行筛选过滤，其中子元素也包括了文本信息。

可见性过滤选择器

选择器描述返回示例
:hidden选择所有不可见的元素集合元素$(":hidden")
:visible选择所有可见的元素集合元素$("visible")

隐藏元素包括：、

、
，如果需要确定元素类型，在前方加上元素名即可。例如，$("input:hidden")。

属性过滤选择器

选择器描述返回示例
[attribute]选择拥有此属性的元素集合元素$("div[id]")选择拥有属性id的元素
[attribute=value]选择属性的值为value的元素集合元素$("div[class=test]")选择属性class为“test”的
元素
[attribute!=value]选择属性的值不等于value的元素集合元素同上反推
[attribute^=value]选择属性的值以value开始的元素集合元素$("div[class=te]")将选择到例如class为"test"的
元素
[attribute$=value]选择属性的值以value结束的元素集合元素同上反推
[attribute*=value]选择属性的值含有value的元素集合元素$("div[class=es]")将选择到例如class为"test"的
元素
[attribute|=value]选择属性等于给定字符串或以该字符串为前缀集合元素
$("div[class|='te']")选择属性title等于te或者以te为前缀的元素
[attribute~=value]选择属性用空格分隔的值中包含一个给定值的元素集合元素$("div[class~='te']")将选择到例如class为"te abc"的
元素
[attribute1]...[attributeN]多个属性选择器合并成一个复合属性选择器集合元素$("div[id][title$='test']")选择同时拥有id，并且title以test结束的
元素

属性过滤选择器主要是通过元素的属性来获取相应的元素。

子元素过滤选择器

选择器描述返回示例
:nth-child(index/odd/even/equation)选择每个父元素下的第index个子元素或者奇偶元素(index)从1开始计算集合元素$("div.test :nth-child(2)")选择class为"test"的
父元素下的第二个子元素
:first-child选择每个父元素的第一个子元素集合元素$("ul:first-child")将选择每个
    元素中第一个
  • 元素
:last-child选择每个父元素的最后一个子元素集合元素同上反推
:only-child如果某个元素是它父元素中唯一的子元素，那将会被匹配集合元素$("ul li:only-child")在
    中选择唯一子元素

需要注意的是，“每个父元素”与“父元素”的区别，前者是多个元素的集合，后者是单个元素。:nth-child(3n)可以选择到每个父元素下索引值是3的倍数的元素。

表单对象属性过滤选择器

选择器描述返回示例
:enabled选择所有可用元素集合元素$("#form :enabled")选择id为form的表单内的所有可用元素
:disabled选择所有不可用元素集合元素同上反推
:checked选择所有被选中的元素集合元素$("input:checked")选择所有被选中的元素
:selected选择所有被选中的选项元素集合元素$("select option:selected")

表单对象属性过滤选择器主要是针对表单元素进行过滤。

4.表单选择器

选择器描述返回示例
:input选择所有的、