zoukankan      html  css  js  c++  java
  • 锋利的jQuery--jQuery选择器

          jQuery选择器分为:基本选择器、层次选择器、过滤选择器和表单选择器。

        1、基本选择器

          #id    根据给定的id匹配一个元素 返回单个元素 $('#test')

          .class  根据给定的类名匹配元素 返回集合元素  $('.test')

          element 根据给定的元素名匹配元素 返回集合元素 $('p')

          *  匹配所有元素 返回集合元素 $('*')

          selector1,selector2,....,selectorN  将每一个选择器匹配到的元素合并后一起返回 返回集合元素

            $("div,span,p,myClass")

        2、层次选择器(通过DOM元素之间的层次关系来获取特定的元素)

          $("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素 返回集合元素 $("div span")

          $("parent>child") 选取parent元素下的child(子元素) 返回集合元素 $("div>span")

          $("prev+next") 选取紧跟在prev元素后的next元素 返回集合元素  //可用next()方法替换 $(".one+div")

          $("prev~siblings") 选取prev元素后的所有siblings元素 返回集合元素 //可用nextAll()方法替换 $("#two~div")

        3、过滤选择器

          分为:基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单属性过滤选择器。

         3.1基本过滤选择器

          :first 选取第一个元素 返回单个元素 $("div:first")

          :last 选取最后一个元素 返回单个元素 $("div:last")

          :not(selector)去除所有与给定选择器匹配的元素 返回集合元素 $("div:not(.myClass)")

          :even 选取索引是偶数的所有元素,索引从0开始 返回集合元素 $("input:even")

          :odd 选取索引是奇数的所有元素,索引从0开始 返回集合元素$("input:odd")

          :eq(index)选取索引等于index的元素,index从0开始 返回单个元素 $("input:eq(1)")

          :gt(index) 选取索引大于index的元素,返回集合元素 $("input:gt(1)")

          :lt(index) 选取索引小于index的元素,返回集合元素 $("input:lt(1)")

          :header 选取所有标题元素,例如h1 h2等等 返回集合元素 $(":header")

          :animated 选取当前正在执行动画的所有元素 返回集合元素 $("div:animated")

         3.2 内容过滤选择器

          :contains('text') 选取含有文本内容为“text”的元素 返回集合元素 $("div:contains('hello')")

          :empty选取不包含子元素和文本的空元素 返回集合元素 $("div:empty")

          :has(selector)选取含有选择器所匹配的元素的元素 返回集合元素 $("div:has(p)")

          :parent 选取含有子元素或者文本的元素 返回集合元素 $("div:parent")

         3.3 可见性过滤选择器

          :hidden 选取所哟不可见的元素 返回集合元素 (包括样式属性display为none的元素、文本隐藏域<input type="hidden"         />和visibility:hidden之类的元素 )$("div:hidden")

          :visible 选取所有可见元素 返回集合元素 $("div:visible")

         3.4 属性过滤选择器

          [attribute] 选取拥有此属性的元素 返回集合元素 $("div[id]")

          [attribute=value] 选取属性值为value的元素 返回集合元素 $("div[title='test']")

          [attribute!=value] 选取属性值不等于value或没有该属性的元素 返回集合元素 $("div[title!='test']")

          [attribute^=value] 选取属性值以value开始的元素 返回集合元素$("div[title^='test']")

          [attribute$=value] 选取属性值以value结束的元素 返回集合元素 $("div[title$='test']")

          [attribute*=value] 选取属性值含有value的元素 返回集合元素 $("div[title*='test']")

          [selector1][selector2][selectorN] 用属性选择合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围。

              $("div[id][title='test']")

         3.5 子元素过滤选择器

          :nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素,index从1开始 返回集合元素

          :first-child 选取每个父元素的第一个子元素 返回集合元素

          :last-child 选取每个父元素的最后一个子元素 返回集合元素

          :only-child 匹配某个元素是他父元素中唯一的子元素 返回集合元素

         3.6 表单对象属性选择器

          :enabled 选取所有可用元素 返回集合元素 $("#form1 :enabled")

          :disabled 选取所有不可用元素 返回集合元素 $("#form1 :disabled")

          :checked 选取所有被选中元素(单选框 复选框) 返回集合元素 $("input:checked")

          :selected 选取所有被选中的选项元素(下拉菜单) 返回集合元素 $("select :selected") 

         4、表单选择器

            :input 选取所有的<input><textarea><select><button>元素 $(":input")

            :text 选取所有单行文本框 返回集合元素 $(":text")

            :password 选取所有密码框 返回集合元素 $(":password")

    :radio 选取所有单选框 返回集合元素 $(":radio")

    :checkbox 选取所有复选框 返回集合元素 $(:checkbox")

    :submit 选取所有提交按钮 返回集合元素 $(":submit")

    :image 选取所有图像按钮 返回集合元素 $(":image")

    :reset 选取所有重置按钮 返回集合元素 $(":reset")

    :button 选取所有按钮 返回集合元素 $(":button")

    :file 选取所有上传域 返回集合元素 $(":file")

    :hidden 选取所有不可见元素 返回集合元素 $(":hidden")

          

  • 相关阅读:
    链表问题
    有关动态规划的LeetCode
    正则表达式匹配与自动机
    基于数据库范式的一点点想法
    html5 API
    Web鼠标事件
    webpack模块化原理
    Jquery数据缓存
    图片懒加载
    MySql存储过程的调试
  • 原文地址:https://www.cnblogs.com/wuqin/p/6499037.html
Copyright © 2011-2022 走看看