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

    Jquery选择器大全

    1.#id

    id="one"的元素背景色设置为黑色。(id选择器返单个元素)

    HTML 代码:

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

    jQuery 代码:
    $(document).ready(function () {
      $('#one').css('background', '#000');
    });

    b.查找含有特殊字符的元素

    HTML 代码:

    <span id="foo:bar"></span>

    <span id="foo[bar]"></span>

    <span id="foo.bar"></span>

    jQuery 代码:

    #foo\[bar\]

    结果:

     <span id="foo[bar]"></span>

    2. element: 根据给定的元素标签名匹配所有元素

    HTML 代码:

    <p>世界,你好<p>

    jQuery 代码:

    $(document).ready(function () {
            $('p').css('font-size', '12px');
        });

    3.  .class

    查找所有类是 "myClass" 的元素.

    HTML 代码:

    <div class="notMe">div class="notMe"</div>

    <div class="myClass">div class="myClass"</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 代码:

    <h2>这是标题</h2>

    <p>这是一个段落。</p>

    <p>这是另外一个段落。</p>

    <button>点我</button>

    jQuery 代码:

    $(document).ready(function () {

            // 遍历所有元素,将字体颜色设置为红色
            $('*').css('color', '#FF0000');
        });

    });

    5. selector1,selector2,selectorN

    找到匹配任意一个类的元素。

    HTML 代码:

    <div>div</div>

    <p class="myClass">p class="myClass"</p>

    <span>span</span>

    <p class="notMyClass">p class="notMyClass"</p>

    jQuery 代码:

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

    结果:

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

    6. ancestor descendant  :在给定的祖先元素下匹配所有的后代元素

    找到表单中所有的 input 元素

    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  在给定的父元素下匹配所有的子元素

    示例

    描述:

    匹配表单中所有的子级input元素。

    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 匹配所有紧接在 prev 元素后的 next 元素

    示例

    描述:

    匹配所有跟在 label 后面的 input 元素

    HTML 代码:

    <form>

      <label>Name:</label>

      <input name="name" />

      <fieldset>

          <label>Newsletter:</label>

          <input name="newsletter" />

     </fieldset>

    </form>

    <input name="none" />

    jQuery 代码:

    $("label + input")

    结果:

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

    9. prev ~ siblings  匹配 prev 元素之后的所有 siblings 元素

    示例

    描述:

    找到所有与表单同辈的 input 元素

    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) 去除所有与给定选择器匹配的元素

    示例

    描述:

    查找所有未选中的 input 元素

    HTML 代码:

    <input name="apple" />

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

    jQuery 代码:

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

    结果:

    [ <input name="apple" /> ]

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

    示例

    描述:

    查找表格的135...行(即索引值024...

    HTML 代码:

    <table>

      <tr><td>Header 1</td></tr>

      <tr><td>Value 1</td></tr>

      <tr><td>Value 2</td></tr>

    </table>

    jQuery 代码:

    $("tr:even")

    结果:

    [ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

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

    示例

    描述:

    查找表格的246行(即索引值135...

    HTML 代码:

    <table>

      <tr><td>Header 1</td></tr>

      <tr><td>Value 1</td></tr>

      <tr><td>Value 2</td></tr>

    </table>

    jQuery 代码:

    $("tr:odd")

    结果:

    [ <tr><td>Value 1</td></tr> ]

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

    0 开始计数

    示例

    描述:

    查找第二行

    HTML 代码:

    <table>

      <tr><td>Header 1</td></tr>

      <tr><td>Value 1</td></tr>

      <tr><td>Value 2</td></tr>

    </table>

    jQuery 代码:

    $("tr:eq(1)")

    结果:

    [ <tr><td>Value 1</td></tr> ]

    15. :gt(index)

    概述

    匹配所有大于给定索引值的元素

    0 开始计数

    示例

    描述:

    查找第二第三行,即索引值是12,也就是比0

    HTML 代码:

    <table>

      <tr><td>Header 1</td></tr>

      <tr><td>Value 1</td></tr>

      <tr><td>Value 2</td></tr>

    </table>

    jQuery 代码:

    $("tr:gt(0)")

    结果:

    [ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

    16. :lang(language)

    示例

    选择所有<P> 的语言属性:

    $("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)

    概述

    匹配所有小于给定索引值的元素

    0 开始计数

    示例

    描述:

    查找第一第二行,即索引值是01,也就是比2

    HTML 代码:

    <table>

      <tr><td>Header 1</td></tr>

      <tr><td>Value 1</td></tr>

      <tr><td>Value 2</td></tr>

    </table>

    jQuery 代码:

    $("tr:lt(2)")

    结果:

    [ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

    19. :header

    匹配如 h1, h2, h3之类的标题元素

    示例

    描述:

    给页面内所有标题加上背景色

    HTML 代码:

    <h1>Header 1</h1>

    <p>Contents 1</p>

    <h2>Header 2</h2>

    <p>Contents 2</p>

    jQuery 代码:

    $(":header").css("background", "#EEE");

    结果:

    [ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]

    20. :animated

    匹配所有正在执行动画效果的元素

    示例

    描述:

    只有对不在执行动画效果的元素执行一个动画特效

    HTML 代码:

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

    jQuery 代码:

    $("#run").click(function(){

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

    });

    21. :focus

    示例

    描述:

    添加一个"focused"的类名给那些有focus方法的元素

    css 代码:

    .focused {

        background: #abcdef;

    }

    html 代码:

    <div id="content">

        <input tabIndex="1">

        <input tabIndex="2">

        <select tabIndex="3">

            <option>select menu</option>

        </select>

        <div tabIndex="4">

            a div

        </div>

    </div>

    jQuery 代码:

    $( "#content" ).delegate( "*", "focus blur", function( event ) {

        var elem = $( this );

        setTimeout(function() {

           elem.toggleClass( "focused", elem.is( ":focus" ) );

        }, 0);

    });

    22. :root

    选择该文档的根元素。

    HTML中,文档的根元素,和$(":root")选择的元素一样, 永远是<html>元素。

    示例

    设置<html>背景颜色为黄色

    $(":root").css("background-color","yellow");

    23. :target

    选择由文档URI的格式化识别码表示的目标元素。

    如果文档的URI包含一个格式化的标识符,或hash(哈希), 然后:target选择器将匹配ID和标识符相匹配的元素。  例如,给定的URI http://example.com/#foo$( "p:target" ),将选择<p id="foo">元素。

    这个不寻常的用法,可进一步讨论中找到 W3C CSS specification.

    24. :contains(text)

    概述

    匹配包含给定文本的元素,一个用以查找的字符串

    示例

    描述:

    查找所有包含 "John" div 元素

    HTML 代码:

    <div>John Resig</div>

    <div>George Martin</div>

    <div>Malcom John Sinclair</div>

    <div>J. Ohn

    jQuery 代码:

    $("div:contains('John')")

    结果:

    [ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

    25. :empty

    匹配所有不包含子元素或者文本的空元素

    示例

    描述:

    查找所有不包含子元素或者文本的空元素

    HTML 代码:

    <table>

      <tr><td>Value 1</td><td></td></tr>

      <tr><td>Value 2</td><td></td></tr>

    </table>

    jQuery 代码:

    $("td:empty")

    结果:

    [ <td></td>, <td></td> ]

    26. :has(selector)

    概述

    匹配含有选择器所匹配的元素的元素

    一个用于筛选的选择器

    示例

    描述:

    给所有包含 p 元素的 div 元素添加一个 text

    HTML 代码:

    <div><p>Hello</p></div>

    <div>Hello again!</div>

    jQuery 代码:

    $("div:has(p)").addClass("test");

    结果:

    [ <div class="test"><p>Hello</p></div> ]

    27. :parent

    匹配含有子元素或者文本的元素

    示例

    描述:

    查找所有含有子元素或者文本的 td 元素

    HTML 代码:

    <table>

      <tr><td>Value 1</td><td></td></tr>

      <tr><td>Value 2</td><td></td></tr>

    </table>

    jQuery 代码:

    $("td:parent")

    结果:

    [ <td>Value 1</td>, <td>Value 2</td> ]

    28. :hidden 匹配所有不可见元素,或者typehidden的元素

    示例

    描述:

    查找隐藏的 tr

    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> ]

    描述:

    匹配typehidden的元素

    HTML 代码:

    <form>

      <input type="text" name="email" />

      <input type="hidden" name="id" />

    </form>

    jQuery 代码:

    $("input:hidden")

    结果:

    [ <input type="hidden" name="id" /> ]

    29. :visible

    匹配所有的可见元素

    示例

    描述:

    查找所有可见的 tr 元素

    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. [attribute]

    概述

    匹配包含给定属性的元素。

    示例

    描述:

    查找所有含有 id 属性的 div 元素

    HTML 代码:

    <div>

      <p>Hello!</p>

    </div>

    <div id="test2"></div>

    jQuery 代码:

    $("div[id]")

    结果:

    [ <div id="test2"></div> ]

    31. [attribute=value]

    概述

    匹配给定的属性是某个特定值的元素

    属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。

    示例

    描述:

    查找所有 name 属性是 newsletter input 元素

    HTML 代码:

    <input type="checkbox" name="newsletter" value="Hot Fuzz" />

    <input type="checkbox" name="newsletter" value="Cold Fusion" />

    <input type="checkbox" name="accept" value="Evil Plans" />

    jQuery 代码:

    $("input[name='newsletter']").attr("checked", true);

    结果:

    [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

    32. [attribute!=value]

    匹配所有不含有指定的属性,或者属性不等于特定值的元素。

    示例

    描述:

    查找所有 name 属性不是 newsletter input 元素

    HTML 代码:

    <input type="checkbox" name="newsletter" value="Hot Fuzz" />

    <input type="checkbox" name="newsletter" value="Cold Fusion" />

    <input type="checkbox" name="accept" value="Evil Plans" />

    jQuery 代码:

    $("input[name!='newsletter']").attr("checked", true);

    结果:

    [ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

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

    示例

    描述:

    查找所有 name 'news' 开始的 input 元素

    HTML 代码:

    <input name="newsletter" />

    <input name="milkman" />

    <input name="newsboy" />

    jQuery 代码:

    $("input[name^='news']")

    结果:

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

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

    示例

    描述:

    查找所有 name 'letter' 结尾的 input 元素

    HTML 代码:

    <input name="newsletter" />

    <input name="milkman" />

    <input name="jobletter" />

    jQuery 代码:

    $("input[name$='letter']")

    结果:

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

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

    描述:

    查找所有 name 包含 'man' input 元素

    HTML 代码:

    <input name="man-news" />

    <input name="milkman" />

    <input name="letterman2" />

    <input name="newmilk" />

    jQuery 代码:

    $("input[name*='man']")

    结果:

    [ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

    36. [selector1][selector2][selectorN]复合属性选择器,需要同时满足多个条件时使用。

    示例

    描述:

    找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的

    HTML 代码:

    <input id="man-news" name="man-news" />

    <input name="milkman" />

    <input id="letterman" name="new-letterman" />

    <input name="newmilk" />

    jQuery 代码:

    $("input[id][name$='man']")

    结果:

    [ <input id="letterman" name="new-letterman" /> ]

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

    示例

    描述:

    在每个 ul 中查找第一个 li

    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:first-child")

    结果:

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

    38. :first-of-type

    描述:

    查找作为父元素的span类型子元素中的"长子"span标签

    HTML 代码:

    <div id="n1">

        <div id="n2" class="abc">

            <label id="n3">label1</label>

            <span id="n4">span1</span>

            <span id="n5" class="abc">span2</span>

            <span id="n6">span3</span>

        </div>

        <div id="n7">

            <span id="n8" class="abc">span1</span>

            <span id="n9">span2</span>

        </div>

    </div>

    jQuery 代码:

    $(".abc:first-of-type");

    结果:

    //.abc可以匹配id分别为n2n5n83个元素,n2n1所有div类型子元素中的第一个,n8n7所有span类型子元素中的第一个,但n5不是n2所有span类型子元素中的第一个,因此不能匹配n5

    [<div id="n2" class="abc">,<span id="n8" class="abc">span1</span>]

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

    示例

    描述:

    在每个 ul 中查找最后一个 li

    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:last-child")

    结果:

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

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

    41. :nth-child匹配其父元素下的第N个子或奇偶元素

    示例

    描述:

    在每个 ul 查找第 2 li

    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-child(2)")

    结果:

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

    42. :nth-last-child(n|even|odd|formula)选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。

    必须为整数,注意从1开始而不是0

    示例

    在每个匹配的ul中查找倒数第二个li

    <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    </ul>

    $("ul li:nth-last-child(2)");

    43. :nth-last-of-type(n|even|odd|formula)选择的所有他们的父级元素的第n个子元素,计数从最后一个元素到第一个。

    在每个匹配的ul中查找倒数第二个li

    <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    </ul>

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

    44. :nth-of-type(n|even|odd|formula)选择同属于一个父元素之下,并且标签名相同的子元素中的第n个。

    示例

    查找每个span,这个 span 是 其所有兄弟span元素中的第二个元素。

    <div>

      <span>John</span>

      <b>Kim</b>

      <span>Adam</span>

      <b>Rafael</b>

      <span>Oleg</span>

    </div>

    <div>

      <b>Dave</b>

      <span>Ann</span>

    </div>

    <div>

      <i><span>Maurice</span></i>

      <span>Richard</span>

      <span>Ralph</span>

      <span>Jason</span>

    </div>

    $("span:nth-of-type(2)");

    45. :only-child

    示例

    描述:

    ul 中查找是唯一子元素的 li

    HTML 代码:

    <ul>

      <li>John</li>

      <li>Karl</li>

      <li>Brandon</li>

    </ul>

    <ul>

      <li>Glen</li>

    </ul>

    jQuery 代码:

    $("ul li:only-child")

    结果:

    [ <li>Glen</li> ]

    46. :only-of-type

    选择所有没有兄弟元素,且具有相同的元素名称的元素。

    如果父元素有相同的元素名称的其他子元素,那么没有元素会被匹配。

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

    示例

    描述:

    查找所有的input元素,下面这些元素都会被匹配到。

    HTML 代码:

    <form>

        <input type="button" value="Input Button"/>

        <input type="checkbox" />

        <input type="file" />

        <input type="hidden" />

        <input type="image" />

        <input type="password" />

        <input type="radio" />

        <input type="reset" />

        <input type="submit" />

        <input type="text" />

        <select><option>Option</option></select>

        <textarea></textarea>

        <button>Button</button>

    </form>

    jQuery 代码:

    $(":input")

    结果:

    [

        <input type="button" value="Input Button"/>,

        <input type="checkbox" />,

        <input type="file" />,

        <input type="hidden" />,

        <input type="image" />,

        <input type="password" />,

        <input type="radio" />,

        <input type="reset" />,

        <input type="submit" />,

        <input type="text" />,

        <select><option>Option</option></select>,

        <textarea></textarea>,

        <button>Button</button>,

     ]

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

    示例

    描述:

    查找所有文本框

    HTML 代码:

    <form>

      <input type="text" />

      <input type="checkbox" />

      <input type="radio" />

      <input type="image" />

      <input type="file" />

      <input type="submit" />

      <input type="reset" />

      <input type="password" />

      <input type="button" />

      <select><option/></select>

      <textarea></textarea>

      <button></button>

    </form>

    jQuery 代码:

    $(":text")

    结果:

    [ <input type="text" /> ]

    49. :password匹配所有密码框

    示例

    描述:

    查找所有密码框

    HTML 代码:

    <form>

      <input type="text" />

      <input type="checkbox" />

      <input type="radio" />

      <input type="image" />

      <input type="file" />

      <input type="submit" />

      <input type="reset" />

      <input type="password" />

      <input type="button" />

      <select><option/></select>

      <textarea></textarea>

      <button></button>

    </form>

    jQuery 代码:

    $(":password")

    结果:

    [ <input type="password" /> ]

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

    示例

    描述:

    查找所有单选按钮

    HTML 代码:

    <form>

      <input type="text" />

      <input type="checkbox" />

      <input type="radio" />

      <input type="image" />

      <input type="file" />

      <input type="submit" />

      <input type="reset" />

      <input type="password" />

      <input type="button" />

      <select><option/></select>

      <textarea></textarea>

      <button></button>

    </form>

    jQuery 代码:

    $(":radio")

    结果:

    [ <input type="radio" /> ]

    51. :checkbox匹配所有复选框

    示例

    描述:

    查找所有复选框

    HTML 代码:

    <form>

      <input type="text" />

      <input type="checkbox" />

      <input type="radio" />

      <input type="image" />

      <input type="file" />

      <input type="submit" />

      <input type="reset" />

      <input type="password" />

      <input type="button" />

      <select><option/></select>

      <textarea></textarea>

      <button></button>

    </form>

    jQuery 代码:

    $(":checkbox")

    结果:

    [ <input type="checkbox" /> ]

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

    示例

    描述:

    查找所有提交按钮

    HTML 代码:

    <form>

      <input type="text" />

      <input type="checkbox" />

      <input type="radio" />

      <input type="image" />

      <input type="file" />

      <input type="submit" />

      <input type="reset" />

      <input type="password" />

      <input type="button" />

      <select><option/></select>

      <textarea></textarea>

      <button></button>

    </form>

    jQuery 代码:

    $(":submit")

    结果:

    [ <input type="submit" /> ]

    53. :image匹配所有图像域

    示例

    描述:

    匹配所有图像域

    HTML 代码:

    <form>

      <input type="text" />

      <input type="checkbox" />

      <input type="radio" />

      <input type="image" />

      <input type="file" />

      <input type="submit" />

      <input type="reset" />

      <input type="password" />

      <input type="button" />

      <select><option/></select>

      <textarea></textarea>

      <button></button>

    </form>

    jQuery 代码:

    $(":image")

    结果:

    [ <input type="image" /> ]

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

    示例

    描述:

    查找所有重置按钮

    HTML 代码:

    <form>

      <input type="text" />

      <input type="checkbox" />

      <input type="radio" />

      <input type="image" />

      <input type="file" />

      <input type="submit" />

      <input type="reset" />

      <input type="password" />

      <input type="button" />

      <select><option/></select>

      <textarea></textarea>

      <button></button>

    </form>

    jQuery 代码:

    $(":reset")

    结果:

    [ <input type="reset" /> ]

    55. :button匹配所有按钮

    示例

    描述:

    查找所有按钮.

    HTML 代码:

    <form>

      <input type="text" />

      <input type="checkbox" />

      <input type="radio" />

      <input type="image" />

      <input type="file" />

      <input type="submit" />

      <input type="reset" />

      <input type="password" />

      <input type="button" />

      <select><option/></select>

      <textarea></textarea>

      <button></button>

    </form>

    jQuery 代码:

    $(":button")

    结果:

    [ <input type="button" />,<button></button> ]

    56. :file匹配所有文件域

    示例

    描述:

    查找所有文件域

    HTML 代码:

    <form>

      <input type="text" />

      <input type="checkbox" />

      <input type="radio" />

      <input type="image" />

      <input type="file" />

      <input type="submit" />

      <input type="reset" />

      <input type="password" />

      <input type="button" />

      <select><option/></select>

      <textarea></textarea>

      <button></button>

    </form>

    jQuery 代码:

    $(":file")

    结果:

    [ <input type="file" /> ]

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

    示例

    描述:

    查找所有可用的input元素

    HTML 代码:

    <form>

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

      <input name="id" />

    </form>

    jQuery 代码:

    $("input:enabled")

    结果:

    [ <input name="id" /> ]

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

    示例

    描述:

    查找所有不可用的input元素

    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="checkbox" name="newsletter" checked="checked" value="Daily" />

      <input type="checkbox" name="newsletter" value="Weekly" />

      <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />

    </form>

    jQuery 代码:

    $("input:checked")

    结果:

    [ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

    60. :selected

    匹配所有选中的option元素

    示例

    描述:

    查找所有选中的选项元素

    HTML 代码:

    <select>

      <option value="1">Flowers</option>

      <option value="2" selected="selected">Gardens</option>

      <option value="3">Trees</option>

    </select>

    jQuery 代码:

    $("select option:selected")

    结果:

    [ <option value="2" selected="selected">Gardens</option> ]

    61. $.escapeSelector(selector)

    这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候,这个方法基本上与CSSCSS.escape()方法类似,唯一的区别是jquery中的这个方法支持所有浏览器。

    示例

    描述:

    对含有#号的ID进行编码

    jQuery 代码:

    $.escapeSelector( "#target" ); // "#target"

    描述:

    选择出类中包含.boxdiv

    HTML 代码:

    <div class="notMe">div class="notMe"</div>

    <div class=".box myClass">div class=".box myClass"</div>

    <div class=".box">span class=".box"</div>

    jQuery 代码:

    $( "div" ).find( "." + $.escapeSelector( ".box" ) );

    结果:

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

  • 相关阅读:
    WampServer Mysql配置
    Java实现 蓝桥杯VIP 算法提高 陶陶摘苹果2
    Java实现 蓝桥杯VIP 算法提高 陶陶摘苹果2
    Java实现 蓝桥杯VIP 算法提高 陶陶摘苹果2
    Java实现 蓝桥杯VIP 算法提高 质因数2
    Java实现 蓝桥杯VIP 算法提高 质因数2
    Java实现 蓝桥杯VIP 算法提高 质因数2
    Java实现 蓝桥杯VIP 算法提高 质因数2
    Java实现 蓝桥杯VIP 算法提高 质因数2
    Java实现 蓝桥杯VIP 算法提高 前10名
  • 原文地址:https://www.cnblogs.com/moyingliang/p/5898973.html
Copyright © 2011-2022 走看看