jQuery选择器

一、jQuery选择器的概述

优势

  01、jQuery选择器,良好的继承了CSS选择器,获取页面元素便捷高效。

  02、与CSS不同,jQuery获取元素后,为元素添加行为,交互性更强。

  03、jQuery选择器有良好的浏览器兼容性

  04、jQuery拥有自己特有的自定义选择器

  05、简介的写法:

  06、完善的处理机制:可以避免某些错误

类型

  01、通过CSS选择器选取元素(基本选择器、层次选择器、属性选择器)

  02、通过过滤性选择器选择元素(基本过滤选择器、可见性过滤选择器)

二、通过CSS选择器选取元素

  01、基本选择器

      标签选择器:element

      类选择器:  .class

      id选择器:   #id

      并集选择器:,分割  

      全局选择器: *  匹配所有元素

  02、层次选择器

      后代选择器:  root offspring  root元素之中的所有offspring元素

      子代选择器:  parent>chid   parent元素下的child(子)元素

      紧邻元素选择器:prev+next    紧邻prev元素之后的next元素(一个)

      同辈元素选择器:prev~siblings  prev之后的所有sibling(同辈)元素

  03、属性选择器

      [attribute]      选取包含指定属性的元素

      [attribute=value]   选取含有指定属性,且属性值为指定值的元素  

          例:选择每个 id="choose" 的元素:$("[id=choose]")$("[id=‘choose’]")

      [attribute!=value]   选取含有指定属性,但属性值不等于指定值的元素

      [attribute^=value]   选择含有指定属性,且属性值以指定值开头的元素

      [attribute$=value]  选择含有指定属性,且属性值以指定值结尾的元素

      [attribute*=value]  选择含有指定属性,且属性值包含有指定值的元素

 三、通过条件过滤选取元素

  01、基本过滤选择器

    :first    选取第一个元素

    :last    选取最后一个元素

    :not(selector)  选取所有与selector选择器不匹配的元素

    :even    选取索引是偶数的所有元素,index从0开始

    :odd    选取索引是奇数的所有元素

    :eq(index)  选取索引等于index的元素

    :gt(index)  选取所有索引大于index的元素,不包含index

    :lt(index)  选取所有索引小于index的元素,不包含index

    :header  选取所有标题元素,如h1~h6

    :focus    选取当前获得焦点的元素

    :animated  选取所有动画元素

  02、可见性过滤选择器

    :visible  选取所有可见的元素

    :hidden  选取所有隐藏的元素

  03、表单选择器

    :input    匹配所有inout、textarea、select、button元素

    :text    匹配所有单行文本框

    :password  匹配所有密码框

    :radio    匹配所有单项按钮

    :checkbox  匹配所有复选框

    :submit    匹配所有提交按钮

    :image    匹配所有图像域

    :reset    匹配所有重置按钮

    :button   匹配所有按钮

    :file    匹配所有文件域

    :hidden   匹配所有不可见元素,或者type为hidden的元素    (style="display:none"和type="hidden"的都可以)

    :enabled  匹配所有可用元素    $("form :enabled")匹配form内部除编号输入框外的所有元素

    :disabled  匹配所有不可用元素   $("form :disabled")匹配 编号输入框

    :checked  匹配所有被选中元素   (复选框、单项按钮、select中的option) 

    :selected  匹配所有选中的option元素  

四、jQuery选择器的注意事项

  01、含有特殊符号“#”、“.”、“[”、“]”等等

    使用转义符“\”转义

      <div id="id#a">aa</div>    $("#id\#a");

      <div id="id[2]">bb</div>    $("#id\[2\]");

  02、选择器中含有空格的注意事项

    有空格:后代选择器

    无空格:交集选择器

原文地址:https://www.cnblogs.com/vic_/p/7846705.html