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