zoukankan      html  css  js  c++  java
  • JQuery 自定义选择器 详解

    :animated          Selects elements that are currently under animated control.( 匹配所有正在执行动画效果的元素)

    声明:  $(':animated')

    代码:

    <div id="father">
    <div id="first">I am first</div>
    <div id="second" class="red">I am second</div>
    <div id="third" style="display:none">I am third</div>
    </div>
    <p class="red">I am forth</p>
    <h4></h4>

    function animateIt()
    {
        $("#second").slideToggle("slow",animateIt);
    }
    animateIt();


    alert($(':animated').html());

    结果:

    显示I am second


    针对表单对象

    :button         Selects any button (input[type=submit], input[type=reset],input[type=button], or button).
    :checkbox    
    Selects only check box elements (input[type=checkbox]).
    :image         
    Selects form images (input[type=image]).
    :input        
      Selects only form elements (input, select, textarea, button).
    :header         Selects only elements that are headers;
    :radio          
    Selects only radio elements (input[type=radio]).
    :reset           Selects reset buttons (input[type=reset] or button[type=reset]).
    :submit       
    Selects submit buttons (button[type=submit] or input[type=submit]).
    :text            Selects only text elements (input[type=text]).
    :file              Selects all file elements (input[type=file]).

    以上没有什么说,直接使用就可以了

    如:($(":button"))


    针对表单对象属性


    :checked         Selects only check boxes or radio buttons that are checked (supported by CSS).

                          匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)

    声明:$("input:checked")

    代码:

    <form>
      <input type="checkbox" name="XX1" checked="checked" value="YY1" />
      <input type="checkbox" name="XX2" value="YY2" />
      <input type="checkbox" name="XX3" checked="checked" value="YY3" />
    </form>

    结果:

    <input type="checkbox" name="XX1" checked="checked" value="YY1" />

    <input type="checkbox" name="XX3" checked="checked" value="YY3" />



    :disabled         Selects only form elements that are disabled in the interface (supported by CSS).

                          匹配所有不可用元素

    声明:$("input:disabled")

    代码:

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

    结果:

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



    :enabled          Selects only form elements that are enabled in the interface (supported by CSS).

                            匹配所有可用元素

    声明:$("input:enabled")

    代码:

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

    结果:

      <input name="id" />



    :selected         Selects option elements that are selected.

                           匹配所有选中的option元素

    声明:$("select option:selected")

    代码:

    <select>
      <option value="1">Flowers</option>
      <option value="2" selected="selected">Gardens</option>
      <option value="3">Trees</option>
    </select>

    结果:

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


    针对表单对象的可见性

    :visible            Selects only elements that are visible.

                           匹配所有的可见元素

    注意:              css或者style两种方式都是被过滤的

                            如:<tr style="display:none">

                       或   <tr class="nodisplay">  /<style> .nodisplay{ display:none; }</style>

    声明:$("tr:visible")

    代码:

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

    结果:

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


    :hidden         Selects only elements that are hidden.

                        匹配所有的不可见元素

    注意:           input 元素的 type 属性为 "hidden" 的话也会被匹配到

    声明:$("tr:hidden")

    代码:

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

    结果:

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

    声明:$("input:hidden").length

    代码:

    <form>

    <input type="file" />

    <input type="text" />

    <input type="hidden" />

    </form>

    结果:

    <input type="hidden" />


    :contains(foo)        Selects only elements containing the text foo.

                                   匹配包含给定文本的元素

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

    代码:

    <div>John Resig</div>
    <div>George Martin</div>
    <div>Malcom John Sinclair</div>
    <div>John</div>

    结果:

    <div>John</div>


    :not(filter)          Negates the specified filter.

                               去除所有与给定选择器匹配的元素

    注意:其实not就是取反的功能,筛选中也有同样的,只不过括号中是表达式 not(expr):删除与指定表达式匹配的元素

             选择一般都是以 ":" 开头

             如:       :not(filter)

    而其他如:筛选 not(expr)

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

    代码:

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

    结果:

              <input name="apple" />

    声明:$("p").not( $("#selected")[0] )

    代码:

    <p>Hello</p>

    <p id="selected">Hello Again</p>

    结果:

    <p>Hello</p>



    :parent           Selects only elements that have children (including text), but not empty elements.

                          匹配含有子元素或者文本的元素,而排除空元素

    声明:$('div:parent').length

    代码:

    <div id="div1">
           div1
    </div>
    <div id="div2">
        div2
    </div>
    <div id="div3" height="20px">
        div3
    </div>
    <div id="div4">
    </div>

    结果:

    3

    因为<div id="div4"></div>为空

  • 相关阅读:
    Sublime Text 3065
    FBX .NET
    macbook pro的usb串口失效的的处理方法
    CMAKE使用
    Ctrl+Scroll改变所有Editor的缩放比例 (Code::Blocks)
    如何在Mac OSX 10.10上安装GDB
    yum安装指定(特定)版本(旧版本)软件包的方法
    MinGW: TOO MANY SECTIONS issue
    轻量级Image Library
    CodeLite的姿势
  • 原文地址:https://www.cnblogs.com/RuiLei/p/1553018.html
Copyright © 2011-2022 走看看