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

     

    分类 方法名称 示例 说明 返回值
    基本 #id $('#test'):选取id为test的元素 根据给定的id匹配相应元素  Array<Element>
    element $('div'):选取所有的div元素 根据给定的元素名匹配相应的元素 Array<Element(S)>
    .class $('.test'):选取class为test的元素 根据给定的元素class匹配相应的元素 Array<Element(S)>
    * $('*'):选取所有的元素 匹配所有元素  Array<Element(S)>
    selector1,selector2,selector3... $('div,span,p.myClass'):选取所有div,span以及p元素中class为myClass的元素并且合并后一起返回 将每一个选择器匹配到的元素合并到一起并返回  Array<Element(S)> 
        
    层级  ancestor descendant $("div span"):选取<div>里的所有的<span>元素  在给定的祖先元素下匹配所有的后代元素  Array<Element(S)>
     parent>child

    $("div > span"):选取<div>元素下元素名是<span>的子元素

    两者区别在于前者检索出所有后代,后者只是检索儿子

     在给定的父元素下匹配所有子元素  Array<Element(S)>
    prev+next   $(".one + div"):选取class为one的下一个<div>同辈元素  匹配紧接在prev元素后的next元素  Array<Element(S)>
    prev~siblings   $("#two~div"):选取id为two的元素后面的所有<div>同辈元素  匹配prev元素之后的所有siblings元素  Array<Element(S)>
         
    基本过滤器             :first  $("div:first")选取所有<div>元素中第一个<div>元素  匹配找到的第一个元素  Array<Element>
     :last  $("div:last")选取所有<div>元素中最后一个<div>元素  匹配找到的最后一个元素  Array<Element>
     :not(selector)  $("input:not(myClass)")选取class不是myClass的<input>元素  去除所有与给定选择器匹配的元素  Array<Element(S)>
     :even  $("input:even")选取索引是偶数的<input>元素 0算偶数 匹配所有索引为偶数的元素,从0开始计数   Array<Element(S)>
     :odd  $("input:odd")选取索引是奇数的<input>元素  匹配所有索引为奇数的元素,从0开始计数   Array<Element(S)>
     :eq(index)  $("input:eq(1)")选取索引等于1的<input>元素  匹配一个给定索引的元素  Array<Element>
     :gt(indfex)  $("input:gt(1)")选取索引大于1的<input>元素  匹配所有大于给定索引值的元素  Array<Element(S)>
     :lt(index)   $("input:lt(1)")选取索引小于1的<input>元素   匹配所有小于给定索引值的元素  Array<Element(S)>
     :header   $(":header")选取网页中所有的<h1>,<h2>,<h3>...  匹配如h1,h2,h3之类的标题元素  Array<Element(S)>
     :animated  $("div:animated")选取正在执行动画的<div>元素  匹配所有正在执行动画的元素  Array<Element(S)>
     :focus  $(":focus")选取当前获取焦点的元素  匹配当前获取焦点的元素  Array<Element(S)>
         
    内容过滤器      :contains(text)   $("div:contains("我")") 选取含有文本”我“的<div>元素  匹配包含给定文本的元素  Array<Element(S)>
     :empty  $("div:empty")选取不包含子元素(包括文本元素)的<div>空元素  匹配所有不包含子元素或文本的空元素 Array<Element(S)> 
     :has(selector)   $("div:has(p)")选取含有<p>元素的<div>元素 匹配含有选择器所匹配的元素的元素  Array<Element(S)> 
     :parent  $("div:parent")选取拥有子元素(包括文本元素)的<div>元素  匹配含有子元素或者文本的元素  Array<Element(S)>
         
    可见过滤器    :hidden  $(":hidden")选取所有不可见的元素。包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;">.如果只想选取               <input>元素,可以使用$("input:hidden");  匹配所有的不可见元素,如果<input>元素的type属性为hidden也会被匹配到  Array<Element(S)>
    :visible $("div:visible")选取所有可见的<div>元素 匹配所有的可见元素 Array<Element(S)>
     
    属性过滤器 [attribute] $("div[id]")选取拥有属性id的元素 匹配包含给定属性的元素 Array<Element(S)>
    [attribute=value] $("div[title=test]")选取属性title为”test“的<div>元素 匹配给定的属性是某一个特定值的元素 Array<Element(S)>
    [attribute!=value] $("div[title!=test]")选取属性title不等于"test"的<div>元素(没有属性title的<div>元素也会被选取) 匹配给定属性是不包含某个特定值的元素 Array<Element(S)>
    [attribute^=value] $("div[title^=test]")选取属性title以”test“开始的<div>元素 匹配给定的属性是以某个值开始的元素 Array<Element(S)>
    [attribute$=value] $("div[title$=test]")选取属性title以”test“结束的<div>元素 匹配给定的属性是以某个值结尾的元素 Array<Element(S)>
    [attribute*=value] $("div[title*=test]")选取属性title含有”test“的<div>元素 匹配给定的属性是含有某个值的元素 Array<Element(S)>
    [attribute=value] $("div[title|='en']")选取属性title等于en或以en为前缀(该字符串后跟一个连字符‘-’)的<div>元素 匹配给定的属性是以某个值为前缀的元素 Array<Element(S)>
    [attribute~=value] $("div[title~='uk']")选取属性title用空格分隔的值中包含字符uk的<div>元素   Array<Element(S)>
    [attribute1][attribute2]...[attributeN] $("div[id][title$='test']")选取拥有属性id,并且属性title以"test"结束的<div>元素   Array<Element(S)>
     
    子元素过滤器 :nth-child

    :eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)有index从1开始,而eq(index)是从0开始的

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

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

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

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

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

    匹配其父类元素下的第N个子元素或奇偶等元素 Array<Element(S)>
    :first-child :first只返回单个元素,而first-child选择符将为每一个父元素匹配第一个子元素,例如$("ul li:first-child");选取每个<ul>中第一个<li>元素 匹配所有父类元素的第一个子元素 Array<Element(S)>
    :last-child :同样,:last只返回单个元素,而:last-child选择符将为每个父元素匹配最后一个子元素,例如$("ul li:last-child")选取每个<ul>中最后一个<li>元素 匹配所有父类元素的最后一个元素 Array<Element(S)>
    :only-child $("ulli:only-child")在<ul>中选取是惟一子元素的<li>元素 匹配所有父类元素的唯一一个子元素。如果某个元素是父类元素中唯一的子元素,则将会被匹配 Array<Element(S)>
     
    表单过滤器 :enabled $("#form1 :enabled")选取id为"form1"的表单内的所有元素可用的元素   Array<Element(S)>
    :disabled $("#form2 :disabled")选取id为“form2”的表单内的所有不可用元素   Array<Element(S)>
    :checked $("input :checked")选取所有被选中的<input>元素(单选框,复选框)   Array<Element(S)>
    :selected $("select option :selected")选取所有被选中的选项元素(下拉列表)   Array<Element(S)>
     
    表单选择器 :input $(":input")选取所有<input>、<textarea>、<select>、<button> 匹配所有的<input><textarea><select><button>的元素 Array<Element(S)>
    :text $(":text")选取所有的单行文本框 匹配所有单行文本框 Array<Element(S)>
    :password $(":password")选取所有的密码框 匹配所有密码框 Array<Element(S)>
    :radio $(":radio")选取所有的单选框 匹配所有单选框 Array<Element(S)>
    :checkbox $(":checkbox")选取所有的复选框 匹配所有复选框 Array<Element(S)>
    :submit $(":submit")选取所有提交的按钮 匹配所有提交按钮 Array<Element(S)>
    :image $(":image")选取所有的图像域 匹配所有图像域 Array<Element(S)>
    :reset $(":reset")选取所有的重置按钮 匹配所有重置按钮 Array<Element(S)>
    :button $("button")选取所有的按钮 匹配所有按钮 Array<Element(S)>
    :file $(":file")选取所有的上传域 匹配所有文件域 Array<Element(S)>
    :hidden $(":hidden")选取所有不可见元素 匹配所有不可见元素,包括type为hidden的<input>元素 Array<Element(S)>
  • 相关阅读:
    【Gitbook】实用配置及插件介绍
    【Git】学习记录
    【Ubuntu】使用记录
    intellij idea
    【应用】信息短时存储
    leetcode pow(x,n)实现
    SSM框架-----------SpringMVC+Spring+Mybatis框架整合详细教程
    《平凡的世界》之我看
    垃圾收集器与内存分配策略(三)
    垃圾收集器与内存分配策略(二)
  • 原文地址:https://www.cnblogs.com/thenear/p/4041100.html
Copyright © 2011-2022 走看看