摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<input type="text" name="uname" value="mrH">
<input type="text" name="age" class="age" value="30">
<ul class="cont-box">
<li class="test">0</li>
<li class="test">1</li>
<li class="test">2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
<script src="./js/jquery.min.js"></script>
<script>
//jq选择器 分为
// 1 基本选则器 ；$("#id") , $(".class") , $("element") , $("#id .class element")
// 2 层级选择器 ：$("父级>子级") ; $("祖先 后代") ； $("prev+next") 同级元素紧跟在prev的next元素 ；
// $("prev~siblings") 匹配prev后面的所有兄弟元素
// 3 顺序选择器
// a 顺序 $(":first") ; $(":last")
// b 比较 $(:gt(x)) 表示大于x的元素(x的循序是从0开始); $(":lt(x)") 小于x ; $(":eq(x)") 等于x
// c 奇偶数 $(":odd")偶数
// 4 $(":not(selector)") 匹配不是selector的所有元素
// 5 内容选择器：$(":contains(text)") 匹配包含给定文本的元素； $(":has(selector)") 匹配特定选择器元素的元素
// $(":empty") 匹配不含有内容的元素（不包含子元素或文本为空的元素） ；$(":parent") 匹配含有子元素或文本的元素
// 6 属性选择器
// $("[属性名]") 匹配包含给定属性的元素
// $("[attribute=value]") 匹配包含给定属性值的元素
// $("[attribute!=value]") 匹配所有不包含给定属性值的元素
// $("[attribute^=value]") 匹配所给定属性是以某些值开头的元素
// $("[attribute$=value]") 匹配所给定属性是以某些值结尾的元素
// $("[attribute*=value]") 匹配所给定属性包含某些值结尾的元素
// $("[selector1][selector2][selectorN]") 复合选择器，匹配同时满足的元素
//例 匹配input元素name=age ,class=age的元素
$("input[name='age'][class='age']")
//匹配 li中文本为1的元素
$("li:contains(1)");
//匹配 匹配li中类不是test的元素
$("li:not('.test')");
//匹配第一个li
$("li:first");
//匹配div下面的ul
$("div>ul");
//匹配id为box的元素
$("#box");
</script>
批改老师：灭绝师太批改时间：2019-03-11 09:03:57
老师总结：选择器是jq比较具有代表性的知识点,要好好练习!
