zoukankan      html  css  js  c++  java
  • jquery选择器

    1.基本选择器

       基本选择器是jquery中常用的,也是最简单的。它通过元素id、class和标签名等来查找DOM元素。在网页中,每个id名称只能使用一次,class允许使用多次。

       #id:根据给定的id匹配一个元素 例如:$('#test') 选取id为test的元素。

       .class:根据给定的类名匹配元素 例如:$('.test') 选取所有class为test的元素。

       element:根据给定的元素名匹配元素  例如:$('p') 选取所有的<p>元素。

       *:匹配所有的元素 例如:$('*') 选取所有的元素

        selector1,selector2,...:将每一个选择器匹配到的元素凑合并后一起返回 例如:$('div,span,p.myClass')选取所有的<div>,<span>,和拥有class为myClass的                                                                                                               <p>标签的一组元素。

    2.层次选择器

       如果想通过DOM之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和兄弟元素等,那么层次选择器是一个非常好的选择。

       $("ancstor descendant") 选取ancstor 元素里的所有descendant(后代)元素 例如:$("div span") 选取<div>里的所有<span>元素。

       $("parent>child") 选取parent元素下面的child(子)元素,与$("ancstor descendant")有区别 例如:$("div>span") 选取<div>元素下元素名为<span>的                                                                                                                                             子元素。

       $('prev+next') 选取紧接在prev元素后的next元素 例如:$('.one+div')选取class为one的下一个<div>元素。

       $('prev~siblings') 选取prev元素之后的所有siblings元素 例如:$('#two~div') 选取id为two的元素后面的所有<div>兄弟元素。

    3.过滤选择器

       过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器以一个冒号开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

       1)基本过滤选择器

       :first  选取第一个元素 例如:$("div:first") 选取所有<div>元素中第一个<div>元素

       :last 选取最后一个元素 例如: $("div:last") 选取所有<div>元素中最后一个<div>元素

       :not(selector)  去除所有与给定选择器匹配的元素 例如:$("input:not(.myClass)")选取class不是myClass的<input>元素

       :even  选取索引是偶数的所有元素,索引从0开始 例如:$("input:even")选取索引是偶数的<input>元素

       :odd  选取索引是奇数的所有元素,索引从0开始 例如:$("input:odd")选取索引是奇数的<input>元素

       :eq(index)  选取索引等于index的元素(index从0开始) 例如:$("input:eq(1)")选取索引等于1的<input>元素

       :gt(index)  选取索引大于index的元素(index从0开始) 例如:$("input:gt(1)")选取索引大于1的<input>元素

       :lt(index)  选取索引小于index的元素(index从0开始) 例如:$("input:lt(1)")选取索引小于1的<input>元素

       :header  选取所有的标题元素,例如h1,h2,h3等等 例如:$(":header") 获取网页中所有的<h1>,<h2>,<h3>...

       :aniimated 选取当前正在执行动画的所有元素 例如:$("div:animated") 选取正在执行动画的<div>元素

       2)内容过滤选择器

       内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

       :contains(text)  选取含有文本"test"的元素 例如:$("div:contains('我')")选取含有文本“我”的<div>元素

       :empty  选取不包含子元素或者文本的空元素 例如:$("div:empty")选取不包含子元素或文本元素的<div>空元素

       :has(selector)   选取含有选择器所匹配的元素的元素 例如:$("div:has(p)")选取含有<p>元素的<div>元素

       :parent  选取含有子元素或者文本的元素 例如:$("div:parent")选取拥有子元素或文本元素的<div>元素

       3)可见性过滤选择器

       可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

       :hidden  选取所有不可见的元素 例如:$(":hidden") 选取所有不可见的元素。包括<input type="hidden">、<div style="display:none">和<div                                                               style="visibility:hidden">等元素。如果只想选取<input>元素,可使用$("input:hidden")

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

       4)属性过滤选择器

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

       [attribute]  选取拥有此属性的元素 例如:$("div[id]")选取拥有属性id的元素

       [attribute=value]  选取属性值为value的元素 例如:$("div[title=test]")选取属性title为"test"的<div>元素

       [attribute!=value]  选取属性值不等于value的元素 例如:$("div[title!=test]")选取属性title不等于"test"的<div>元素(注意:没有属性title的<div>元素也会被选取)

       [attribute^=value]  选取属性值以value开始的元素 例如:$("div[title^=test]")选取属性title以"test"开始的<div>元素

       [attribute$=value]  选取属性值以value结束的元素 例如:$("div[title$=test]")选取属性title以"test"结束的<div>元素

       [attribute*=value]  选取属性值含有value的元素 例如:$("div[title*=test]")选取属性title含有"test"的<div>元素

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

                                                            例如:$("div[id][title$='test']")选取拥有属性id,并且属性title以"test"结束的<div>标签

       5)子元素过滤选择器

       子元素过滤选择器的过滤规则相对于其他的选择器稍微有些复杂,不过没关系,只要将元素的父元素和子元素区分清楚,使用起来也非常简单。另外还要注意它与普通的过滤选择器的区别。

       :nth-child(index/even/odd/eauation)  选取每个父元素下的第index个子元素或者奇偶元素(index从1算起) 例如::eq(index)只匹配一个元素,而:nth-child将为每一个父元素配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0开始的

       :first-child  选取每个父元素的第一个子元素 例如::first只返回单个元素,而:first-child选择符将为每个父元素匹配第一个子元素。

                                                                     $("ul li:first-child") 选取每个<ul> 中第一个<li>元素

       :last-child  选取每个父元素的最后一个子元素 例如::last只返回单个元素,而:last-child选择符将为每个父元素匹配最后一个子元素。

                                                                     $("ul last-child") 选取每个<ul> 中最后一个<li>元素

       :only-child  如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配  例如:$("ul li:only-child")在<ul>中选取                                                                                                                                                             是唯一子元素的<li>元素

       :nth-child()选择器是很常用的子元素过滤选择器:

       :nth-child(even)能选取每个父元素下的索引是偶数的元素。

       :nth-child(odd)能选取每个父元素下的索引是奇数的元素。

       :nth-child(2)能选取每个父元素下的索引值等于2的元素。

       :nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素,n从0开始。

       :nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素,n从0开始。

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

       此选择器主要是对所选择的表单元素进行过滤,例如选择被选中的下拉框,多选框等等。

       :enabled  选取所有可用的元素 例如:$("#form1 :enabled")选取id为"form"的表单内的所有可用元素

       :disabled  选取所有不可用的元素 例如:$("#form1 :disabled  ")选取id为"form"的表单内的所有不可用元素  

       :checked  选取所有被选中的元素(单选框,复选框) 例如:$("input:checked")选取所有被选中的<input>元素

       :selected  选取所有被选中的选项元素(下拉列表) 例如:$("select :selected")选取所有被选中的选项元素

    4.表单选择器

       为了使用户能够更加灵活地操纵表单,jQuery中专门加入了表单选择器。利用这个选择器,能极其方便地获取到表单的某个或某类型的元素。

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

       :text  选取所有的单行文本框 例如:$(":text")选取所有的单行文本框

       :password 选取所有的密码框 例如:$(":password")选取所有的密码框

       :radio  选取所有的单选框 例如:$(":radio")选取所有的单选框

       :submit  选取所有的提交按钮 例如:$(":submit")选取所有的提交按钮

       :image  选取所有的图像按钮 例如:$(":image")选取所有的图像按钮

       :reset  选取所有的重置按钮 例如:$(":reset")选取所有的重置按钮

       :button  选取所有的按钮 例如:$(":button")选取所有的按钮

       :file  选取所有的上传域 例如:$(":file") 选取所有的上传域

       :hidden  选取所有不可见元素 例如:$(":hidden")选取所有不可见元素

      

  • 相关阅读:
    NOI2021游记-记最后一段日子
    7.20 ZROI-Day7模拟赛
    7.19 ZROI-Day6模拟赛
    7.18 ZROI-Day5模拟赛
    7.17 ZROI-Day4模拟赛
    7.16 ZROI-DAY3 模拟赛
    7.15 ZROI-DAY2 模拟赛
    7.13 ZROI-DAY1赛后总结
    7.9模拟赛赛后总结
    7.7模拟赛赛后总结
  • 原文地址:https://www.cnblogs.com/cherious/p/6731818.html
Copyright © 2011-2022 走看看