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>为空

posted @ 2009-08-24 16:59  RicoRui  阅读(1687)  评论(0编辑  收藏  举报