2.1 寻找元素 （重要的选择器和筛选器）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2.1 寻找元素 （重要的选择器和筛选器）相关的知识，希望对你有一定的参考价值。
2 、寻找元素 （重要的选择器和筛选器）
2.1、选择器
1.1 基本选择器 $("*") $("#id") $(".class") $("element") $(".class, p, div")
- 【基本选择器】代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
<span id="foo:bar">1</span>
<span id="foo[bar]">2</span>
<span id="foo.bar">3</span>
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
<script>
// id 选择器
var x1 = $("#myDiv") // 默认获取的列表 [ <div id="myDiv">id="myDiv"</div> ]
x1.each(function () {
console.log("id 选择器",this)
})
var x2 = $("#foo\\[bar\\]") // 重点注意转义。
x2.each(function () {
console.log("id 选择器",this)
})
// 标签选择器
var x3 = $("div") // [ <div>DIV1</div>, <div>DIV2</div> ]
x3.each(function () {
console.log("标签选择器 ",this)
})
// class 选择器
var x4 = $(".myClass") // [ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
x4.each(function () {
console.log("class 选择器 ",this)
})
$("*")
/*
匹配所有元素
多用于结合上下文来搜索
*/
// selector1,selector2,selectorN
/*将每一个选择器匹配到的元素合并后一起返回。
你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
*/
$("div,span,p.myClass") //[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
</script>
</body>
</html>
1.2 、层级选择器 $(".outer div")(所有的后代) $(".outer>div")(所有的子代) $(".outer+div")(匹配所有跟在.outer后面的div) $(".outer~div")(.outer后面的所有div)
- 【层级选择器】代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../jquery-1.9.1.min.js"></script>
</head>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<script>
// 后代选择器 ancestor descendant
// 在给定的祖先元素下匹配所有的后代元素
var x1 = $("form input") //[ <input name="name" />, <input name="newsletter" /> ]
x1.each(function () {
console.log("后代选择器 ",this)
})
// 儿子选择器 在给定的父元素下匹配所有的子元素
var x2 = $("form > input") //[ <input name="name" /> ]
// 只要是相邻的即可
var x3 = $("label + input") //[ <input name="name" />, <input name="newsletter" /> ]
// 兄弟选择器
var x4 = $("form ~ input") //[ <input name="none" /> ]
</script>
</body>
</html>
1.3 基本筛选器 $("li:first") $("li:eq(2)") $("li:even")(偶数) $("li:gt(1)")
冒号的基本选择器
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<input name="apple" />
<input name="flower" checked="checked" />
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
<button id="run">Run</button><div></div>
<script src="jquery-1.12.4.js">
// first last
var x1 = $("li:first") //[ <li>list item 1</li> ]
// not()
var x2 = $("input:not(:checked)") //[ <input name="apple" /> ]
// even 偶数
var x3 = $("tr:even") //[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
// odd 奇数
var x4 = $("tr:odd") // [ <tr><td>Value 1</td></tr> ]
// eq 找索引 gt() lt() $("div:lang(en)")
var x5 = $("tr:eq(1)") //[ <tr><td>Value 1</td></tr> ]
// :header 匹配如 h1, h2, h3之类的标题元素
$(":header").css("background", "#EEE"); //[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]
// :animated 匹配所有正在执行动画效果的元素
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});
// focus
// :root html元素
</script>
</body>
</html>
1.4 属性选择器 $(‘[id="div1"]‘) $(‘["alex="sb"][id]‘)
>>1.4.1、内容选择器：
代码展示：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
<div><p>Hello</p></div>
<div>Hello again!</div>
<script>
// contains() 匹配包含给定文本的元素
var x6 = $("div:contains(‘John‘)") //[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]
// empty 匹配所有不包含子元素或者文本的空元素
$("td:empty") //[ <td></td>, <td></td> ]
//:has(selector) 匹配含有选择器所匹配的元素的元素
$("div:has(p)").addClass("test"); //[ <div class="test"><p>Hello</p></div> ]
//:parent 匹配含有子元素或者文本的元素
$("td:parent") //[ <td>Value 1</td>, <td>Value 2</td> ] 查找所有含有子元素或者文本的 td 元素
</script>
</body>
</html>
>> 1.4.2、可见性：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
<form>
<input type="text" name="email" />
<input type="hidden" name="id" />
</form>
<script>
// :hidden 匹配所有不可见元素，或者type为hidden的元素
$("tr:hidden") //[ <tr style="display:none"><td>Value 1</td></tr> ]
$("input:hidden") //[ <input type="hidden" name="id" /> ]
//:visible 匹配所有的可见元素
$("tr:visible") //[ <tr><td>Value 2</td></tr> ]
</script>
</body>
</html>
>> 1.4.3、属性：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
<script>
//[attribute] 匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
$("div[id]") //[ <div id="test2"></div> ]
//[attribute=value] 匹配给定的属性是某个特定值的元素
$("input[name=‘newsletter‘]").attr("checked", true); //[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]
//[attribute!=value] [attribute^=value]
//[selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用。
$("input[id][name$=‘man‘]") //[ <input id="letterman" name="new-letterman" /> ]
//[attribute*=value] 匹配给定的属性是以包含某些值的元素‘
$("input[name*=‘man‘]") //[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
</script>
</body>
</html>
1.5 表单选择器 $("[type=‘text‘]") 简写成 $(":text") 注意: 只适用于input标签
表单选择器
代码展示：
$("input:checked")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
<script>
$(":input") //所有input
$(":password") //[ <input type="password" /> ]
$(":checkbox")
</script>
</body>
</html>
以上是关于2.1 寻找元素 （重要的选择器和筛选器）的主要内容，如果未能解决你的问题，请参考以下文章