jQuery选择器类型

    jQuery选择器应该是学习jQuery的最基本的知识了,下面介绍一下各个类型的选择器的怎么写。

    1、基本选择器:这是最常用的选择器
       #id:根基给定的id匹配一个元素
       .class:根据类名匹配元素
       element:直接写出标签名,根据给定的元素名匹配元素
       *:通配符
       selector1,selector2,...,selectorN:将每一个选择器匹配的元素合并后一起返回

    2、层次选择器:根据层次之间的特定关系来获取元素
       $("ancestor descendant"):选取ancestor元素里的所有descendant 后代元素
       $("parent>child"):选取parent元素下的child (子)元素
       $("pre+next"):选取紧接在pre后的next (下一个)元素
       $("prev~siblings"):选取prev元素之后的 所有siblings (同辈)元素

    3、过滤选择器:基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤,表单对象属性过滤
       基本过滤选择器:
                  :first :选择第一元素
                  :last:最后一个元素
                  :not(selector):去除所有与给定选择器匹配的元素
                  :even:偶数
                  :odd:奇数
                  :eq(index):选取索引等于index的元素(index从0开始)
                  :gt(index):索引大于index
                  :lt(index):索引小于index
                  :hender:选取所有标题元素
                  :animated:选取当前正在执行动画的元素
                  :focus:选取当前获取焦点的元素
       内容过滤选择器:
                  :contains(text):选取含有文本内容为“text”的元素
                  :empty:选取不包含子元素或者文本的空元素
                  :has(selector):选取含有选择器所匹配的元素的元素
                  :parent:选取含有子元素或者文本的元素
       可见性过滤选择器:
                  :hidden:选取所有不可见的元素
                  :visible:选取所有可见的元素
       属性过滤选取器:
                  [attribute]:选取拥有此属性的元素
                  [attribute=value]:属性值为value的元素
                  [attribute!=value]:属性值不等于value的元素
                  [attribute^=value]:属性值以value开头的元素
                  [attribute$=value]:属性值以value结尾的元素
                  [attribute*=value]:属性值含有value的元素
                  [attribute|=value]:属性等于给定字符串或以该字符串为前缀的元素(如果为前缀的话,该字符串之后要有“-”连字符)
                  [attribute~=value]:属性用空格分隔的值中包含有一个给定值的元素
                  [attribute1][attribute2][attributeN]:几个条件同时符合的元素
       子元素过滤选择器:
                  :nth-child(index/even/odd/equation):选取每个父元素下的第index个子元素或者奇偶元素(index从1开始)
                  :first-child:父元素中第一个子元素
                  :last-child:父元素中最后一个子元素
                  :only-child:如果某个元素是它父元素的唯一子类将会匹配
       表单对象属性过滤器:
                  :enabled:选取所有可用元素
                  :disabled:选取所有不可用元素
                  :checked:选取所有被选中的元素(单选框、复选框)
                  :select:选取所有被选中的选项元素(下拉列表)
   
    4、表单选择器
       :input:选取所有<input><textarea><select><button>元素
       :text:所有单行文本框元素
       :password:所有密码框
       :radio:所有单选框
       :checkbox:所有多选框
       :submit:所有提交按钮
       :image:所有图像按钮
       :reset:所有重置按钮
       :button:所有的按钮
       :file:所有的上传域
       :hidden:所有不可见元素


    选择器中有好多前边都带有冒号,使用的时候千万注意是否要加空格,例如:
             $("div :input")   指的是在div下的所有<input><textatea><select><button>元素
             $("div:input")    指的是在div下的为input标签的元素


     在jQuery中还有一些特使的字符,如$、[、{ 等,如果在选择器中没法识别应该用转译字符“\\”将其转译再使用。


    选择器的灵活应用可以使代码干净整洁,掌握好选择器是一个开发人员的基本素质。大家一起努力啦!fighting!
    

猜你喜欢

转载自flj643213995.iteye.com/blog/2306993