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

  • 相关阅读:
    log4net配置文件详解
    Window 中杀死指定端口 cmd 命令行 taskkill
    weui获取checkbox选中值 带GIF效果演示
    动态新增行数据
    JAVA的WebService创建和使用
    Linux-20211008
    SpringBoot
    winfrom将控件保存为图片
    VB相关记录
    代码编辑说明文档
  • 原文地址:https://www.cnblogs.com/moyingliang/p/5898973.html
Copyright © 2020-2023  润新知