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