精华内容
下载资源
问答
  • jquery选择器大全

    2013-08-07 10:02:39
    jquery选择器大全
  • jQuery 选择器大全

    2019-10-03 17:09:09
    jQuery 选择器大全 在 Dom 编程中我们只能使用有限的函数根据 id 或者 TagName 获取 Dom 对象. 然而在jQuery中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以...

    jQuery 选择器大全

     

     

    在 Dom 编程中我们只能使用有限的函数根据 id 或者 TagName 获取 Dom 对象. 然而在 jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以 jQuery 包装集的形式返回。本文主要对常用的 jQuery 选择器进行一个介绍及归类。

      jQuery 选择器大体上可分为 4 类:基本选择器、层次选择器、过滤选择器、表单选择器。 其中过滤选择器可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。

    基本选择器:

    • $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
    • $("div")                     选择所有的div标签元素,返回div元素数组
    • $(".myClass")           选择使用myClass类的css的所有元素
    • $("*")                        选择文档中的所有的元素
    • 可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")

    层叠选择器:

    • $("form input")         选择所有的form元素中的input元素
    • $("#main > *")          选择id值为main的所有的子元素
    • $("label + input")     选择所有的label元素的下一个input元素节点
    • 经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
    • $("#prev ~ div")       同胞选择器
    • 该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

    基本过滤选择器:

    • $("tr:first")               选择所有tr元素的第一个
    • $("tr:last")                选择所有tr元素的最后一个
    • $("input:not(:checked) + span")   
    • 过滤掉:checked的选择器的所有的input元素
    • $("tr:even")               选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
    • $("tr:odd")                选择所有的tr元素的第1,3,5... ...个元素
    • $("td:eq(2)")             选择所有的td元素中序号为2的那个td元素   
    • $("td:gt(4)")             选择td元素中序号大于4的所有td元素
    • $("td:ll(4)")              选择td元素中序号小于4的所有的td元素
    • $(":header")
    • $("div:animated")

    内容过滤选择器:

    • $("div:contains('John')")  选择所有div中含有John文本的元素
    • $("td:empty")           选择所有的为空(也不包括文本节点)的td元素的数组
    • $("div:has(p)")        选择所有含有p标签的div元素
    • $("td:parent")          选择所有的以td为父节点的元素数组

    可视化过滤选择器:

    • $("div:hidden")        选择所有的被hidden的div元素
    • $("div:visible")        选择所有的可视化的div元素

    属性过滤选择器:

    • $("div[id]")              选择所有含有id属性的div元素
    • $("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素
    • $("input[name!='newsletter']")  选择所有的name属性不等于'newsletter'的input元素
    • $("input[name^='news']")         选择所有的name属性以'news'开头的input元素
    • $("input[name$='news']")         选择所有的name属性以'news'结尾的input元素
    • $("input[name*='man']")          选择所有的name属性包含'news'的input元素
    • $("input[id][name$='man']")    可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

    子元素过滤选择器:

    • $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
    • $("div span:first-child")          返回所有的div元素的第一个子节点的数组
    • $("div span:last-child")           返回所有的div元素的最后一个节点的数组
    • $("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组

    表单元素选择器:

    • $(":input")                  选择所有的表单输入元素,包括input, textarea, select 和 button
    • $(":text")                     选择所有的text input元素
    • $(":password")           选择所有的password input元素
    • $(":radio")                   选择所有的radio input元素
    • $(":checkbox")            选择所有的checkbox input元素
    • $(":submit")               选择所有的submit input元素
    • $(":image")                 选择所有的image input元素
    • $(":reset")                   选择所有的reset input元素
    • $(":button")                选择所有的button input元素
    • $(":file")                     选择所有的file input元素
    • $(":hidden")               选择所有类型为hidden的input元素或表单的隐藏域

    表单元素过滤选择器:

    • $(":enabled")             选择所有的可操作的表单元素
    • $(":disabled")            选择所有的不可操作的表单元素
    • $(":checked")            选择所有的被checked的表单元素
    • $("select option:selected")  选择所有的select 的子元素中被selected的元素

     

    ---------------------------------------------------

     

    转载于:https://www.cnblogs.com/DSC1991/p/7908677.html

    展开全文
  • jQuery选择器大全

    2012-06-09 19:20:59
    jQuery选择器大全(48个代码片段+21幅图演示)
  • jquery 选择器 大全

    2009-04-12 00:24:41
    jquery 选择器 大全 里面记载了所有的选择器的说明以及实例
  • JQuery选择器大全

    2016-12-28 11:25:23
    作为一位后端开发工程师,常用的前端知识,还是要掌握的,下面给出JQuery的一些相关知识 JQuery选择器大全


    作为一位后端开发工程师,常用的前端知识,还是要掌握的,下面给出JQuery的一些相关知识


    JQuery选择器大全

    展开全文
  • Jquery选择器大全

    2011-02-11 09:50:00
    Jquery选择器,Jquery选择器Jquery选择器Jquery选择器Jquery选择器Jquery选择器
  • Jquery 选择器大全

    2019-09-29 22:21:47
    jQuery 选择器简介  jQuery 选择器允许对 HTML 元素组或单个元素进行操作。  jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的CSS 选择器,除此之外,它还有...

    jQuery 选择器简介

          jQuery 选择器允许对 HTML 元素组或单个元素进行操作。

        jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

        jQuery 中所有选择器都以美元符号开头:$()。

    1 .基本选择器

    复制代码
        $("#test")                    选择id值为test的元素,id值是唯一的所以返回单个元素。
        $(
    "div")      选择所有的div标签元素,返回div元素数组
        $(
    ".myclass")      选择使用myclass类的css的所有元素
        $(
    "*")      选取所有元素。
        $(
    "#test,div,.myclass")    选取多个元素。
    复制代码

    2.层次选择器

    复制代码
        $("div span")             选取<div>里的所有<span>元素
    
        $("div >span")             选取<div>元素下元素名是<span>的子元素
    
        $("#one +div")             选取id为one的元素的下一个<div>同辈元素        等同于$("#one").next("div")
    
        $("#one~div")              选取id为one的元素的元素后面的所有<div>同辈元素    等同于$("#one").nextAll("div")
      
        $("#one").siblings("div")      获取id为one的元素的所有<div>同辈元素(不管前后)
    
        $("#one").prev("div")        获取id为one的元素的前面紧邻的同辈<div>元素
    
        所以 获取元素范围大小顺序依次为:
    
        $("#one").siblings("div")>$("#one~div")>$("#one +div")  或是
    
        $("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")
    复制代码

    3.基本过滤选择器

    复制代码
        $("div:first")                 选取所有<div>元素中第1个<div>元素
        $(
    "div:last") 选取所有<div>元素中最后一个<div>元素
        $(
    "input:not(.myClass)") 选取class不是myClass的<input>元素
        $(
    "input:even") 选取索引是偶数的<input>元素(索引从0开始)
        $(
    "input:odd") 选取索引是基数的<input>元素(索引从0开始)
        $(
    "input:eq(2)") 选取索引等于2的<input>元素
        $(
    "input:gt(4)") 选取索引大于4的<input>元素
        $(
    "input:lt(4)") 选取索引小于4的<input>元素
        $(
    ":header") 过滤掉所有标题元素,例如:h1、h2、h3等
        $(
    "div:animated") 选取正在执行动画的<div>元素
        $(
    ":focus") 选取当前获取焦点的元素
    复制代码

    4.内容过滤选择器

    复制代码
        $("div:contains('Name')")       选取所有<div>中含有'Name'文本的元素 
      
        $("div:empty")                  选取不包含子元素(包括文本元素)的<div>空元素 
    
        $("div:has(p)")                 选取所有含有<p>元素的<div>元素 
    
        $("div:parent")                 选取拥有子元素的(包括文本元素)<div>元素 
    复制代码

    5.可见性过滤选择器

        $("div:hidden")                 选取所有不可见的<div>元素 
    
        $("div:visible")                选取所有可见的<div>元素     

    6.属性过滤选择器

    复制代码
        $("div[id]")                  选取所有拥有属性id的元素
        $(
    "input[name='test']")    选取所有的name属性等于'test'的<input>元素     $("input[name!='test']")     选取所有的name属性不等于'test'的<input>元素     $("input[name^='news']") 选取所有的name属性以'news'开头的<input>元素
        $(
    "input[name$='news']") 选取所有的name属性以'news'结尾的<input>元素
        $(
    "input[name*='news']") 选取所有的name属性包含'news'的<input>元素
        $(
    "div[title|='en']") 选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素
        $(
    "div[title~='en']") 选取属性title用空格分隔的值中包含字符en的<div>元素     $("div[id][title$='test']") 选取拥有属性id,并且属性title以'test'结束的<div>元素
    复制代码

    7.子元素过滤选择器

    复制代码
        $("div .one:nth-child(2)")       选取class为'one'的<div>父元素下的第2个子元素
    
        $("div span:first-child")        选取每个<div>中的第1个<span>元素 
    
        $("div span:last-child")         选取每个<div>中的最后一个<span>元素 
    
        $("div button:only-child")       在<div>中选取是唯一子元素的<button>元素
    复制代码

    8.表单对象属性过滤选择器

    复制代码
        $("#form1 :enabled")             选取id为'form1'的表单内所有可用元素
        $(
    "#form2 :disabled") 选取id为'form2'的表单内所有不可用元素
        $(
    "input :checked") 选取所有被选中的<input>元素
           $(
    "select option:selected") 选取所有的select 的子元素中被选中的元素
    复制代码

    9.表单选择器

    复制代码
        $(":input")                      选取所有<input>,<textarea>,<select> 和 <button>元素 
        $(
    ":text")   选取所有的单行文本框
        $(
    ":password") 选取所有的密码框
        $(
    ":radio") 选取所有单的选框
        $(
    ":checkbox") 选取所有的多选框
        $(
    ":submit") 选取所有的提交按钮
        $(
    ":image") 选取所有的图像按钮
        $(
    ":reset") 选取所有的重置按钮
        $(
    ":button") 选取所有的按钮
        $(
    ":file") 选取所有的上传域
        $(
    ":hidden") 选取所有不可见元素
    复制代码

     注:如果有遗漏或错误请读者留言,方便管理员及时更改!~

    转载于:https://www.cnblogs.com/jpfss/p/9517656.html

    展开全文
  • jquery 选择器大全

    2019-09-30 19:17:11
    jquery 选择器大体上可分为4 类: 1、基本选择器 2、层次选择器 3、过滤选择器 4、表单选择器 其中过滤选择器可以分为: 1、简单过滤选择器 2、内容过滤选择器 3、可见性过滤选择器 4、属性过滤选择器 5...

    jquery 选择器大体上可分为4 类:

    1、基本选择器

    2、层次选择器

    3、过滤选择器

    4、表单选择器

     

    其中过滤选择器可以分为:

    1、简单过滤选择器

    2、内容过滤选择器

    3、可见性过滤选择器

    4、属性过滤选择器

    5、子元素过滤选择器

    6、表单对象属性过滤选择器。

     

    基本选择器:

    1. $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
    2. $("div") 选择所有的div标签元素,返回div元素数组
    3. $(".myClass") 选择使用myClass类的css的所有元素
    4. $("*") 选择文档中的所有的元素
    5. 可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")

     

    层叠选择器:

    1. $("form input") 选择所有的form元素中的input元素
    2. $("#main > *") 选择id值为main的所有的子元素
    3. $("label + input") 选择所有的label元素的下一个input元素节点
    4. 经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
    5. $("#prev ~ div") 同胞选择器
    6. 该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

     

    基本过滤选择器

    1. $("tr:first") 选择所有tr元素的第一个
    2. $("tr:last") 选择所有tr元素的最后一个
    3. $("input:not(:checked) + span")
    4. 过滤掉:checked的选择器的所有的input元素
    5. $("tr:even") 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
    6. $("tr:odd") 选择所有的tr元素的第1,3,5... ...个元素
    7. $("td:eq(2)") 选择所有的td元素中序号为2的那个td元素
    8. $("td:gt(4)") 选择td元素中序号大于4的所有td元素
    9. $("td:ll(4)") 选择td元素中序号小于4的所有的td元素
    10. $(":header")
    11. $("div:animated")

     

    内容过滤选择器:

    1. $("div:contains('John')") 选择所有div中含有John文本的元素
    2. $("td:empty") 选择所有的为空(也不包括文本节点)的td元素的数组
    3. $("div:has(p)") 选择所有含有p标签的div元素
    4. $("td:parent") 选择所有的以td为父节点的元素数组

     

    可视化过滤选择器:

    1. $("div:hidden") 选择所有的被hidden的div元素
    2. $("div:visible") 选择所有的可视化的div元素

     

    属性过滤选择器:

    1. $("div[id]") 选择所有含有id属性的div元素
    2. $("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素
    3. $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
    4. $("input[name^='news']") 选择所有的name属性以'news'开头的input元素
    5. $("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
    6. $("input[name*='man']") 选择所有的name属性包含'news'的input元素
    7. $("input[id][name$='man']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

     

    子元素过滤选择器:

    1. $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
    2. $("div span:first-child") 返回所有的div元素的第一个子节点的数组
    3. $("div span:last-child") 返回所有的div元素的最后一个节点的数组
    4. $("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组

     

    表单元素选择器:

    1. $(":input") 选择所有的表单输入元素,包括input, textarea,select 和 button
    2. $(":text") 选择所有的text input元素
    3. $(":password") 选择所有的password input元素
    4. $(":radio") 选择所有的radio input元素
    5. $(":checkbox") 选择所有的checkbox input元素
    6. $(":submit") 选择所有的submit input元素
    7. $(":image") 选择所有的image input元素
    8. $(":reset") 选择所有的reset input元素
    9. $(":button") 选择所有的button input元素
    10. $(":file") 选择所有的file input元素
    11. $(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域

     

    表单元素过滤选择器:

    1. $(":enabled") 选择所有的可操作的表单元素
    2. $(":disabled") 选择所有的不可操作的表单元素
    3. $(":checked") 选择所有的被checked的表单元素
    4. $("select option:selected") 选择所有的select 的子元素中被selected的元素

     

    转载于:https://www.cnblogs.com/huanhuan1989/p/3238370.html

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 536
精华内容 214
关键字:

jquery选择器大全