WEB基础之： jQuery选择器
jQuery选择器
示例：
<body>
<a href="http://jquery.com/" id="linkID" class="linkClass">jQuery</a>
<script src="jquery-3.5.1.js"></script>
</body>
1. ID选择器
#id: 根据给定的ID匹配一个元素。
$('#foo').text(); // "id=\"foo\" class=\"myclass\""
// 查找含有特殊字符的元素
// 特殊字符要用双“\\”转义
$('#foo\\:bar').text(); // "id=\"foo:bar\""
$('#foo\\[bar\\]').text(); // "id=\"foo[bar]\""
$('#foo\\.bar').text(); // "id=\"foo.bar\""
2. 元素选择器
element: 根据给定的元素标签名匹配所有元素
$('p'); // Object { 0: p#foo.myclass, 1: p#foo:bar, 2: p#foo[bar], 3: p#foo.bar, length: 4, prevObject: {…} }
3. 类选择器
.class: 根据给定的css类名匹配元素。
$('.myclass'); // Object { 0: p#foo.myclass, length: 1, prevObject: {…} }
4. 组合选择器
-
*: 匹配所有元素$('*'); //Object { 0: html, 1: head, 2: meta, 3: meta, 4: meta, 5: title, 6: script, 7: style, 8: body, 9: p#foo.myclass, … } -
selector1,selector2,selectorN: 指定任意多个选择器，并将匹配到的元素合并到一个结果内。$('#foo','p','.myclass') // Object { length: 0, prevObject: {…} }
5. 层级选择器
-
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素。$('body #foo'); // Object { 0: p#foo.myclass, length: 1, prevObject: {…} } -
parent > child: 在给定的父元素下匹配所有的子元素。$('body > #foo'); // Object { 0: p#foo.myclass, length: 1, prevObject: {…} } -
prev + next: 匹配所有紧接在 prev 元素后的 next 元素$('#foo + p'); // Object { 0: p#foo:bar, length: 1, prevObject: {…} } -
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素$('#foo ~ p'); // Object { 0: p#foo:bar, 1: p#foo[bar], 2: p#foo.bar, length: 3, prevObject: {…} }
6. 基本选择器
示例
<body>
<input name="list" type="radio" value="list1">section1
<input name="list" type="radio" value="list2" checked="checked">section2
<input name="list" type="radio" value="list3" lang="it">section3
<script src="jquery-3.5.1.js"></script>
<script>
</script>
</body>
-
:first: 获取匹配的第一个元素。$('p:first'); // Object { 0: p#foo.myclass, length: 1, prevObject: {…} } -
:not(selector): 去除所有与给定选择器匹配的元素。$('input:not(:checked)'); // 0: <input name="list" type="radio" value="list1"> // 1: <input name="list" type="radio" value="list3" lang="it"> // length: 2 -
:even: 匹配所有索引值为偶数的元素，从 0 开始计数。$('input:even'); // 0: <input name="list" type="radio" value="list1"> // 1: <input name="list" type="radio" value="list3" lang="it"> // length: 2 -
:odd: 匹配所有索引值为奇数的元素，从 0 开始计数。$('input:odd'); // 0: <input name="list" type="radio" value="list2" checked="checked"> // length: 1 -
:eq(index): 匹配一个给定索引值的元素，从 0 开始计数。$('input:eq(1)'); // 0: <input name="list" type="radio" value="list2" checked="checked"> // length: 1 -
:gt(index): 匹配所有大于给定索引值的元素，从 0 开始计数。$('input:gt(1)'); // 0: <input name="list" type="radio" value="list3" lang="it"> // length: 1 -
:lang(language)：匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。例如，选择器$("div:lang(en)")将匹配<div lang="en">and<div lang="en-us">（和他们的后代<div>），但不包括<div lang="fr">。$('input:lang(it)'); // 0: <input name="list" type="radio" value="list3" lang="it"> // length: 1 -
:last(): 获取最后个元素。$('input:lang(it)'); // 0: <input name="list" type="radio" value="list3" lang="it"> // length: 1 -
:lt(index): 匹配所有小于给定索引值的元素，从 0 开始计数。$('input:lt(1)'); // 0: <input name="list" type="radio" value="list1"> // length: 1 -
:header: 匹配如 h1, h2, h3之类的标题元素$(':header'); // 0: <h1> // 1: <h2> // length: 2 -
:animated: 匹配所有正在执行动画效果的元素。 -
:root: 选择该文档的根元素。在HTML中，根元素是<html>元素。$(":root").css("background-color","blue"); // 0: <html style="background-color: yellow;" lang="en"> // length: 1 -
:target: 选择由文档URI的格式化识别码表示的目标元素。如果文档的URI包含一个格式化的标识符，或hash（哈希）， 然后:target选择器将匹配ID和标识符相匹配的元素。 例如，给定的URIhttp://example.com/#foo，$( "p:target" )，将选择<p id="foo">元素。
7. 内容选择器
示例
<body>
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
<p></p>
<button id="run">Run</button><div></div>
<script src="jquery-3.5.1.js"></script>
</body>
-
:contains(text): 匹配包含给定文本的元素。$("p:contains('Contents')"); // 0: <p> // 1: <p> // length: 2 -
$("p:empty"): 匹配所有不包含子元素或者文本的空元素。$("p:empty"); // 0: <p> // length: 1 -
:has(selector): 匹配含有选择器所匹配的元素的元素。$(':has(p)').append(':has test.'); -
:parent: 匹配含有子元素或者文本的元素。$(':has(p)').append(':has test.'); // Object { 0: html, 1: body, length: 2, prevObject: {…} }
8. 可见性选择器
示例
<body>
<table>
<tr style="display:none"><td>Value 1 display:no</td></tr>
<tr><td>Value 2 visible</td></tr>
</table>
<script src="jquery-3.5.1.js"></script>
</body>
-
:hidden: 匹配所有不可见元素，或者type为hidden的元素。$('tr:hidden'); // 0: <tr style="display:none"> -
:visible: 匹配所有的可见元素。$("tr:visible").text(); // "Value 2 visible"
9. 属性选择器
示例
<body>
<div>
<input id="jquery" name="jquery">
<input name="2injquerytest">
<input id="3jQuerytest" name="3jQuerytest">
<input name="jqlearn">
</div>
<script src="jquery-3.5.1.js"></script>
</body>
-
[attribute]: 匹配包含给定属性的元素。$("input[name]") // 0: <input id="jquery" name="jquery"> // 1: <input name="2injquerytest"> // 2: <input id="3jQuerytest" name="3jQuerytest"> // 3: <input name="jqlearn"> // length: 4 -
[attribute=value]: 匹配给定的属性是某个特定值的元素$("input[name='jquery']") // 0: <input id="jquery" name="jquery"> // length: 1 -
[attribute!=value]: 匹配所有不含有指定的属性，或者属性不等于特定值的元素。等价于[:not([attr=value])，要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])。$("input[name!='jquery']"); // 0: <input name="2injquerytest"> // 1: <input id="3jQuerytest" name="3jQuerytest"> // 2: <input name="jqlearn"> // length: 3 -
[attribute^=value]: 匹配给定的属性是以某些值开始的元素$("input[name^='jq']"); // 0: <input id="jquery" name="jquery"> // 1: <input name="jqlearn"> // length: 2 -
[attribute$=value]: 匹配给定的属性是以某些值结尾的元素。$("input[name$='test']"); // 0: <input name="2injquerytest"> // 1: <input id="3jQuerytest" name="3jQuerytest"> // length: 2 -
[attribute*=value]: 匹配给定的属性是以包含某些值的元素。$("input[name*='jquery']"); // 0: <input id="jquery" name="jquery"> // 1: <input name="2injquerytest"> // length: 2 -
[selector1][selector2][selectorN]: 复合属性选择器，需要同时满足多个条件时使用。$("input[id][name$='test']") // <input id="3jQuerytest" name="3jQuerytest">
10. 表单选择器
示例
<body>
<form>
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="submit">
<input type="image">
<input type="reset">
<input type="file">
<input type="button" value="BtnValue">
<input type="text" hidden="hidden">
<input type="text" disabled="disabled">
<select>
<option>Option</option>
</select>
<textarea></textarea>
<button>Button</button>
</form>
<script src="jquery-3.5.1.js"></script>
</body>
:input: 匹配所有 input, textarea, select 和 button 元素。:text: 匹配所有的单行文本框。:password: 匹配所有密码框。:radio: 匹配所有单选按钮。:checkbox: 匹配所有复选框。:submit: 匹配所有提交按钮。:image: 匹配所有图像域。:reset: 匹配所有重置按钮。:button: 匹配所有按钮。:file: 匹配所有文件域。
10. 1 表单对象属性筛选器
:hidden: 匹配所有不可见元素，或者type为hidden的元素。:enabled: 匹配所有可用元素。:disabled: 匹配所有不可用元素。:checked: 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用:selected。:selected: 匹配所有选中的option元素。
11. 混淆选择器
$.escapeSelector(selector): 这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候，这个方法基本上与CSS中CSS.escape()方法类似，唯一的区别是jquery中的这个方法支持所有浏览器。
