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>
时间： 2024-10-17 10:18:31