2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > JQuery 自定义选择器 详解

JQuery 自定义选择器 详解

时间:2022-09-07 07:42:40

相关推荐

JQuery 自定义选择器  详解

:animatedSelects 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

针对表单对象

:buttonSelects any button (input[type=submit], input[type=reset],input[type=button], or button).

:checkboxSelects only check box elements (input[type=checkbox]).

:imageSelects form images (input[type=image]).

:inputSelects only form elements (input, select, textarea, button).

:headerSelects only elements that are headers;

:radioSelects only radio elements (input[type=radio]).

:resetSelects reset buttons (input[type=reset] or button[type=reset]).

:submitSelects submit buttons (button[type=submit] or input[type=submit]).

:textSelects only text elements (input[type=text]).

:fileSelects all file elements (input[type=file]).

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

如:($(":button"))

针对表单对象属性

:checkedSelects 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" />

:disabledSelects 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" />

:enabledSelects 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>

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。