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

    1. #id

    html 代码:

    <div id="notMe"><p>id="notMe"</p></div>
    <div id="myDiv"><p>id="myDidv"</p></div>

    jQuery代码:

    $("#myDiv");

    结果:

    <div id="myDiv">id="myDiv"</div>

    2.element

    html 代码:

    <div>DIV1</div>
    <div>DIV2</div>
    <span>SPAN</span>

    jQuery代码:

    $("div");

    结果:

    <div>DIV1</div>, <div>DIV2</div>

    3. .class

    html 代码:

    <div class="div1"><p>div class="div1"</p></div>
    <div class="myclss"><p>div class="myclass"</p></div>
    <span class="myclass">span class="myclass"</span>

    jQuery代码:

    $(".myclass");

    结果:

    <div class="myclass">div class="myclass"</div>, <span class="myclass">span class="myclass"</span>

    4.*(匹配所有元素)

    html 代码:

    <div>DIV</div>
    <span>SPAN</span>
    <p>P</p>

    jQuery代码:

    $("*")

    结果:

    <div>DIV</div>,<span>SPAN</span>,<p>P</p>;

    5.selector1,selector2,selectorN

    html 代码:

    <div>div</div>
    <p class="myClass">p class="myClass"</p>
    <span>span</span>
    <p class="notMyClass">p class="myClass"</p>

    jQuery代码:

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

    结果:

    [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

    6.ancestor descendant

    html 代码:

    <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />

    jQuery代码:

    $("form input");

    结果:

    [ <input name="name" />, <input name="newsletter" /> ]

    7.parent>child

    html 代码:

    <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />

    jQuery代码:

    $("form>input")

    结果:

    [<input name="name" />]

    8.prev+next

    html 代码:

    <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />

    jQuery代码:

    &("lable + input");

    结果:

    [ <input name="name" />, <input name="newsletter" /> ]

    9.prev~siblings

    html 代码:

    <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />

    jQuery代码:

    $("form ~ input");

    结果:

    [<input name="none" />]

    10. :first

    html 代码:

    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>

    jQuery代码:

    $("li:first");

    结果:

    [<li>list item 1</li>]

    11.:not(selector)

    html 代码:

    <input name="apple" />
    <input name="flower" checked="checked" />

    jQuery代码:

    $("input:not(:checked)");

    结果:

    [<input name="apple" />]

    12.:even(匹配所有索引值为偶数的元素,从 0 开始计数)

    html 代码:

    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>

    jQuery代码:

    $("li:even");

    结果:

    [<li>list item 1</li>, <li>list item 3</li>,<li>list item 5</li>]

    13.:odd(匹配所有索引值为奇数的元素,从 0 开始计数)

    html 代码:

    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>

    jQuery代码:

    $("li:odd");

    结果:

    [<li>list item 2</li>,<li>list item 4</li>]

    14.:eq(index)(匹配一个给定索引值的元素)

    html 代码:

    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>

    jQuery代码:

    $("li:eq(1)"); 

    结果:

    [<li>list item 2</li>]

    15.:ge(index)(匹配所有大于给定索引值的元素)

    html 代码:

    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>

    jQuery代码:

    $("li:gt(1)");

    结果:

    [ <li>list item 3</li>, <li>list item 4</li>, <li>list item 5</li>]

    16.:lang(language)(选择指定语言的所有元素)

    html 代码:

    jQuery代码:

    $("p:lang(it)");

    结果:

    17.:last(获取最后个元素)

    html 代码:

    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>

    jQuery代码:

    $("li:last");

    结果:

    [<li>list item 5</li>]

    18.:lt(index)(匹配所有小于给定索引值的元素)

    html 代码:

    <ul>
        
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>

    jQuery代码:

    $("li:lt(3)");

    结果:

    [<li>list item 1</li>, <li>list item 2</li>, <li>list item 3</li>]

    19.:header(匹配如 h1, h2, h3之类的标题元素)

    html 代码:

    <h1>Header 1</h1>
    <p>Contents 1</p>
    <h2>Header 2</h2>
    <p>Contents 2</p>

    jQuery代码:

    $(":header");

    结果:

    [<h1>Header 1</h1>,<h2>Header 2</h2>]

    20.:animated(匹配所有正在执行动画效果的元素)

    html 代码:

    <button id="run">Run</button><div><div>

    jQuery代码:

    $("#run").click(funtion(){
        $("div:not(:animated)").animate({ left: "+=20" }, 1000);
    })

    结果:

    21.:focus(匹配当前获取焦点的元素)

    html 代码:

    <input tabIndex="1">
    <input tabIndex="2">

    jQuery代码:

    $("input:focus").css("background","#f00");

    结果:

    22.:root(选择该文档的根元素)

    html 代码:

    jQuery代码:

    $("root").css("background","#00f");

    结果:

    23.:target(选择由文档URI的格式化识别码表示的目标元素)

    URI http://example.com/#foo

    html 代码:

    jQuery代码:

    $(p:target);

    结果:

    <p id="foo">

    24.:contains(text)(匹配包含给定文本的元素)

    html 代码:

    <h1>Header 1</h1>
    <p>Contents 1</p>
    <h2>Header 2</h2>
    <p>Contents 2</p>

    jQuery代码:

    $("p:contains('1')");

    结果:

    [<p>Contents 1</p>]

    25.:empty(匹配所有不包含子元素或者文本的空元素)

    html 代码:

    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li></li>
        <li></li>
    </ul>

    jQuery代码:

    $("li:empty");

    结果:

    [<li></li>,<li></li>]

    26.:has(seletor)(匹配含有选择器所匹配的元素的元素)

    html 代码:

    <div><p>wtf</p></div>
    <div>fk</div>

    jQuery代码:

    $("div:has(p)").addclass("wtfkk");

    结果:

    [<div class="wtfkk"><p>wtf</p></div>]

    27.:parent(匹配含有子元素或者文本的元素)

    html 代码:

    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    jQuery代码:

    $("li:parent")

    结果:

    [<li>list item 1</li>, <li>list item 2</li>]

    28.:hidden(匹配所有不可见元素,或者type为hidden的元素)

    html 代码:

    <table>
      <tr style="display:none"><td>Value 1</td></tr>
      <tr><td>Value 2</td></tr>
    </table>

    jQuery代码:

    $("tr:hidden")

    结果:

    [<tr style="display:none"><td>Value 1</td></tr>]

    29.:visible(匹配所有的可见元素)

    html 代码:

    <table>
      <tr style="display:none"><td>Value 1</td></tr>
      <tr><td>Value 2</td></tr>
    </table>

    jQuery代码:

    $("tr:visible")

    结果:

    [<tr><td>Value 2<td><tr>]

    30.[attrbute](匹配包含给定属性的元素)

    html 代码:

    <ul>
        <li class="wth">list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>

    jQuery代码:

    $("li[class]")

    结果:

    [<li class="wth">list item 1</li>]

    31.[attrbute=value](匹配给定的属性是某个特定值的元素)

    html 代码:

    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li class="he">list item 4</li>
        <li class="he">list item 5</li>
    </ul>

    jQuery代码:

    $("li[class='he']")

    结果:

    [<li class="he">list item 4</li>, <li class="he">list item 5</li>]

    32.[attrbute!=value](匹配所有不含有指定的属性,或者属性不等于特定值的元素)

    html 代码:

    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li class="he">list item 4</li>
        <li class="he">list item 5</li>
    </ul>

    jQuery代码:

    $("li[class!='he']")

    结果:

    [li>list item 1</li>, <li>list item 2</li>,<li>list item 3</li>]

    33.[attrbute^=value](匹配给定的属性是以某些值开始的元素)

    html 代码:

    <ul>
        <li>list item 1</li>
        <li class="newfood">list item 2</li>
        <li>list item 3</li>
        <li class="newbox">list item 4</li>
        <li class="he">list item 5</li>
    </ul>

    jQuery代码:

    $("li[class^='new']")

    结果:

    [<li class="newfood">list item 2</li>, <li class="newbox">list item 4</li>]

    34.[attrbute$=value](匹配给定的属性是以某些值结尾的元素)

    html 代码:

    <ul>
        <li>list item 1</li>
        <li class="newfood">list item 2</li>
        <li>list item 3</li>
        <li class="newbox">list item 4</li>
        <li class="he">list item 5</li>
    </ul>

    jQuery代码:

    $("li[class$='box']")

    结果:

    [<li class="newbox">list item 4</li>]

    35.[attrbute*=value](匹配给定的属性是以包含某些值的元素)

    html 代码:

    <ul>
        <li>list item 1</li>
        <li class="newfood">list item 2</li>
        <li>list item 3</li>
        <li class="newbox">list item 4</li>
        <li class="he">list item 5</li>
    </ul>

    jQuery代码:

    $("li[class*='oo']")

    结果:

    [<li class="newfood">list item 2</li>]

    36.[attrSel1][attrSel2][attrSelN](复合属性选择器,需要同时满足多个条件时使用)

    html 代码:

    <ul>
        <li>list item 1</li>
        <li class="newfood" id="attr">list item 2</li>
        <li>list item 3</li>
        <li class="newbox" id="box">list item 4</li>
        <li class="he">list item 5</li>
    </ul>

    jQuery代码:

    $("li[class,id='box']")

    结果:

    [<li class="newbox" id="box">list item 4</li>]

    37.:first-child(匹配第一个子元素)

    html 代码:

    <ul>
      <li>John</li>
      <li>Karl</li>
      <li>Brandon</li>
    </ul>
    <ul>
      <li>Glen</li>
      <li>Tane</li>
      <li>Ralph</li>
    </ul>

    jQuery代码:

    $("li:first-child")

    结果:

    [<li>John</li>,<li>Glen</li>]

    38.first-of-type(结构化伪类,匹配E的父元素的第一个E类型的孩子)

    html 代码:

    <ul>
      <p>mumu</p>
      <li>John</li>
      <li>Karl</li>
      <li>Brandon</li>
    </ul>
    <ul>
      <li>Glen</li>
      <li>Tane</li>
      <li>Ralph</li>
    </ul>

    jQuery代码:

    $("li:first-of-type")

    结果:

    [<li>John</li>]

    39.:last-child(匹配最后一个子元素)

    html 代码:

    <ul>
      <li>John</li>
      <li>Karl</li>
      <li>Brandon</li>
    </ul>
    <ul>
      <li>Glen</li>
      <li>Tane</li>
      <li>Ralph</li>
    </ul>

    jQuery代码:

    $("li:last-child")

    结果:

    [<li>Brandon</li>,<li>Ralph</li>]

    40.:last-of-type(结构化伪类,匹配E的父元素的最后一个E类型的孩子)

    html 代码:

    <ul>
      <li>John</li>
      <li>Karl</li>
      <li>Brandon</li>
    </ul>
    <ul>
      <li>Glen</li>
      <li>Tane</li>
      <li>Ralph</li>
    </ul>

    jQuery代码:

    $("li:last-of-type")

    结果:

    [<li>Ralph</li>]

    41.:nth-child(number)(匹配其父元素下的第N个子或奇偶元素(从1开始))

    html 代码:

    <ul>
      <li>John</li>
      <li>Karl</li>
      <li>Brandon</li>
    </ul>
    <ul>
      <li>Glen</li>
      <li>Tane</li>
      <li>Ralph</li>
    </ul>

    jQuery代码:

    $("li:nth-chlid(2)")

    结果:

    [<li>Karl</li>,<li>Tane</li>]

    42.:nth-last-chlid(选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素,从最后一个子元素开始计数)

    html 代码:

    <ul>
      <li>John</li>
      <li>Karl</li>
      <li>Brandon</li>
    </ul>
    <ul>
      <li>Glen</li>
      <li>Tane</li>
      <li>Ralph</li>
    </ul>

    jQuery代码:

    $("li:nth-last-chlid(1)")

    结果:

    [<li>Ralph</li>]

    43.:nth-last-of-type(选择器选取属于其父元素的特定类型的第 n 个子元素的所有元素,从最后一个子元素开始计数)

    html 代码:

    <ul>
      <li>John</li>
      <li>Karl</li>
      <li>Brandon</li>
    </ul>
    <ul>
      <li>Glen</li>
      <li>Tane</li>
      <li>Ralph</li>
    </ul>

    jQuery代码:

    $("ul li:nth-last-of-type")

    结果:

    [<li>Brandon</li>,<li>Ralph</li>]

    44.nth-of-type(选择器选取属于其父元素的特定类型的第 n 个子元素的所有元素)

    html 代码:

    <ul>
      <li>John</li>
      <li>Karl</li>
      <li>Brandon</li>
    </ul>
    <ul>
      <li>Glen</li>
      <li>Tane</li>
      <li>Ralph</li>
    </ul>

    jQuery代码:

    $("li:nth-of-type(2)")

    结果:

    [<li>Karl</li>,<li>Tane</li>]

    45.only-child(如果某个元素是父元素中唯一的子元素,那将会被匹配)

    html 代码:

    <ul>
      <li>John</li>
      <li>Karl</li>
      <li>Brandon</li>
    </ul>
    <ul>
      <li>Glen</li>
    </ul>

    jQuery代码:

    $("li:only-child")

    结果:

    [<li>Glen</li>]

    46.only-of-type(选择所有没有兄弟元素,且具有相同的元素名称的元素)

    html 代码:

    <ul>
      <li>John</li>
      <li>Karl</li>
      <li>Brandon</li>
    </ul>
    <ul>
      <li>Glen</li>
    </ul>
    <ul>
      <li>Mumu<li>
      <p>Yarn</p>
    </ul>

    jQuery代码:

    $("li:only-of-type")

    结果:

    [<li>Glen</li>,<li>Mumu</li>]

    47.:input(匹配所有 input, textarea, select 和 button 元素)

    html 代码:

    <form>
      <input type="text" />
      <input type="button" value="mumu大人"/>
      <textarea></textarea>
      <button>Button</button>
      <select><option>Option</option></select>
      <p>哪个家伙说要写这个作业的,出来,保证不打你</p>
    </form>

    jQuery代码:

    $(":input")

    结果:

    [
      <input type="text" />
      <input type="button" value="mumu大人"/>
      <textarea></textarea>
      <button>Button</button>
      <select><option>Option</option></select>
    ]

    48.:text(匹配所有的单行文本框)

    html 代码:

    <form>
      <input type="text" />
      <input type="button" value="mumu大人"/>
      <textarea></textarea>
      <button>Button</button>
      <select><option>Option</option></select>
    </form>

    jQuery代码:

    $(":text")

    结果:

    [<input type="text" />]

    49.:password(匹配所有密码框)

    html 代码:

    <form>
      <input type="text" />
      <input type="password"/>
      <input type="button" value="mumu大人"/>
      <textarea></textarea>
      <button>Button</button>
      <select><option>Option</option></select>
    </form>

    jQuery代码:

    $(":password")

    结果:

    [<input type="password"/>]

    50.:radio(匹配所有单选按钮)

    html 代码:

    <form>
      <input type="text" />
      <input type="password"/>
      <input type="radio"/>
      <input type="button" value="mumu大人"/>
      <textarea></textarea>
      <button>Button</button>
      <select><option>Option</option></select>
    </form>

    jQuery代码:

    $(":radio")

    结果:

    [<input type="radio"/>]

    51.:checkbox(匹配所有复选框)

    html 代码:

    <form>
      <input type="text" />
      <input type="password"/>
      <input type="radio"/>
      <input type="checkbox"/>
      <input type="button" value="mumu大人"/>
      <textarea></textarea>
      <button>Button</button>
      <select><option>Option</option></select>
    </form>

    jQuery代码:

    $(":checkbox")

    结果:

    [<input type="checkbox"/>]

    52.:submit(匹配所有提交按钮)

    html 代码:

    <form>
      <input type="text" />
      <input type="password"/>
      <input type="radio"/>
      <input type="checkbox"/>
      <input type="submit"/>
      <input type="button" value="mumu大人"/>
      <textarea></textarea>
      <button>Button</button>
      <select><option>Option</option></select>
    </form>

    jQuery代码:

    $(":submit")

    结果:

    [<input type="submit"/>]

    53.:image(匹配所有图像域)

    html 代码:

    <form>
      <input type="text" />
      <input type="password"/>
      <input type="radio"/>
      <input type="checkbox"/>
      <input type="submit"/>
      <input type="image"/>
      <input type="button" value="mumu大人"/>
      <textarea></textarea>
      <button>Button</button>
      <select><option>Option</option></select>
    </form>

    jQuery代码:

    $(":image")

    结果:

    [<input type="image"/>]

    54.:reset(匹配所有重置按钮)

    html 代码:

    <form>
      <input type="text" />
      <input type="password"/>
      <input type="radio"/>
      <input type="checkbox"/>
      <input type="submit"/>
      <input type="image"/>
      <input type="reset"/>
      <input type="button" value="mumu大人"/>
      <textarea></textarea>
      <button>Button</button>
      <select><option>Option</option></select>
    </form>

    jQuery代码:

    $(":reset")

    结果:

    [<input type="reset"/>]

    55.:button(匹配所有按钮)

    html 代码:

    <form>
      <input type="text" />
      <input type="password"/>
      <input type="radio"/>
      <input type="checkbox"/>
      <input type="submit"/>
      <input type="image"/>
      <input type="reset"/>
      <input type="button" value="mumu大人"/>
      <textarea></textarea>
      <button>Button</button>
      <select><option>Option</option></select>
    </form>

    jQuery代码:

    $(":button")

    结果:

    [<input type="button" value="mumu大人"/>,<button>Button</button>]

    56.:file(匹配所有文件域)

    html 代码:

    <form>
      <input type="text" />
      <input type="password"/>
      <input type="radio"/>
      <input type="checkbox"/>
      <input type="submit"/>
      <input type="image"/>
      <input type="reset"/>
      <input type="file"/>
      <input type="button" value="mumu大人"/>
      <textarea></textarea>
      <button>Button</button>
      <select><option>Option</option></select>
    </form>

    jQuery代码:

    $(":file")

    结果:

    [<input type="file"/>]

    57.:enabled(匹配所有可用元素)

    html 代码:

    <form>
      <input name="email" disabled="disabled" />
      <input name="id" />
    </form>

    jQuery代码:

    $("input:enabled")

    结果:

    [<input name="id" />]

    58.:disabled(匹配所有不可用元素)

    html 代码:

    <form>
      <input name="email" disabled="disabled" />
      <input name="id" />
    </form>

    jQuery代码:

    $("input:disabled")

    结果:

    [<input name="email" disabled="disabled" />]

    59.:checked(匹配所有选中的被选中元素(复选框、单选框等,select中的option),对于select元素来说,获取选中推荐使用 :selected)

    html 代码:

    <form>
      <input type="radio" checked/>
      <input type="checkbox"/>
    </form>

    jQuery代码:

    $("input:checked")

    结果:

    [<input type="radio" checked/>]

    60.selected(匹配所有选中的option元素)

    html 代码:

    <select>
      <option value="1">one</option>
      <option value="1" selected="selected">two</option>
      <option value="1">three</option>
    </select>

    jQuery代码:

    $("option:selected")

    结果:

    [<option value="1" selected="selected">two</option>]

    匹配给定的属性是以某些值开始的元素

  • 相关阅读:
    中台微服务了,那前端如何进行架构设计?
    单体架构&微服务架构&中台服务架构
    SpringCloud oauth2 jwt gateway demo
    SpringCloud-技术专区-认证服务操作
    SpringBoot集成SpringSecurity+CAS
    内核空间与用户空间的通信方式
    函数调用的细节实现
    Kmalloc可以申请的最大内存
    内核调试和系统调用劫持
    stm32最小系统制作(原理图,PCB图,焊接等)
  • 原文地址:https://www.cnblogs.com/lzh739887959/p/5898270.html
Copyright © 2011-2022 走看看