文章目录
1. 常见选择器
(1) id选择器:$(’#id’)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<script type="text/javascript" src="../js/jquery.js"></script>
</head>
<body>
<script type="text/javascript">
/*
* id选择器：#id
* 同css类似
* */
$(function () {
alert($('#name').length)//1
//id不能重复，因此如果页面中有多个相同的id，那么jquery只会获取第一次出现的id作为jquery对象
alert($('#name').val())//张三
})
</script>
<input type="text" value="张三" id="name"/>
<input type="text" value="李四" id="name"/>
</body>
</html>
(2) element和class选择器
格式：
element标签选择器：$(“p”) 所有 p元素class选择器：$(".intro") 所有 class=“intro” 的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>element和class选择器</title>
</head>
<body>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function () {
//element标签选择器：$("p") 所有 <p> 元素
alert($("div").length);//3
//class选择器：$(".intro") 所有 class="intro" 的元素
alert($(".name").length)//2
//获取出来的jquery是一个数组，如果直接使用jquery，那么jquery会把数组中第一个元素作为jquery的对象使用
alert($(".name").val())//张时
//如果想获取非第一个元素的对象，需要根据索引获取到指定元素位置的DOM对象后，再转换成jquery对象继续使用
// alert($($(".name")[1]).val())//李飞
//或者直接DOM-->value
alert($(".name")[1].value)//李飞
})
</script>
<div>123</div>
<div>ni</div>
<div></div>
<input type="text" class="name" value="张时"/><br>
<input type="text" class="name" value="李飞"/>
</body>
</html>
(3) parent > child选择器
格式：$(“div > .name”)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parent > child选择器</title>
<!--格式：$("div > .name")
本例中被div包住的name，都是子类
-->
</head>
<body>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function () {
alert($(".name").length)//获取所有class为name的元素 长度为3
//div相当于父类，里面包含2个input节点相当于子类。
alert($("div > .name").length)//获取div标签下所有class为name的元素 长度为2
alert($("div > .name").val())//张三，默认为首元素
alert($("div > .name")[1].value)//胡歌，第二个元素以DOM数组表示
})
</script>
<div>
<input type="text" class="name" value="张三"/>
<input type="text" class="name" value="胡歌"/>
</div>
<input type="text" class="name" value="刘总"/>
</body>
</html>
(4) prev + next选择器
格式：$(“div + .name”)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prev + next选择器</title>
<!--格式：$("div + .name")
本例中，紧邻</div>的元素：为</div>之后的class为name的元素
-->
</head>
<body>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function () {
alert($("div + .name").length)//获取紧邻元素为div之后的class为name的元素 长度为1值为刘好
alert($("div + .name").val())//刘好
})
</script>
<div>
<input type="text" class="name" value="刘明"/>
</div>
<input type="text" class="name" value="刘好"/>
<input type="text" class="name" value="刘天"/>
</body>
</html>
(5) prev ~ siblings选择器
格式：$(“div ~ .name”)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prev ~ siblings选择器</title>
<!--格式：$("div ~ .name")
本例中，在</div>标签后，所有带class为name的元素
-->
</head>
<body>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function () {
alert($("div~.name").length)//获取div标签之后带class为name所有的元素 长度为2 值为 刘好和刘天
alert($("div~.name").val())//刘好 首元素
alert($("div~.name")[1].value)//刘天 第二个元素以数组DOM表示
})
</script>
<input type="text" class="name" value="刘能"/>
<div>
<input type="text" class="name" value="刘明"/>
</div>
<input type="text" class="name" value="刘好"/>
<input type="text" class="name" value="刘天"/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
本例中，有几个</div>，那标签后所有带class为name的元素都包含
-->
</head>
<body>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function () {
alert($("div~.name").length)//6，获取div标签之后带class为name所有的元素 长度为6 值为 刘好、刘天、<div>、王菲、鑫飞、刘明1
alert($(".div~.name").length)//0,没有class为div的标签
alert($("#div~.name").length)//1,id选择器为</div>的标签后带class为name所有的元素，刘明1
//*,代表任何元素
alert($("#div~ *").length)//3, id选择器为</div>的标签后的所有元素,刘明1、<span>、<div>
})
</script>
<div>
<input type="text" class="name" value="刘明"/>
</div>
<input type="text" class="name" value="刘好"/>
<input type="text" class="name" value="刘天"/>
<div class="name"><!--div也带class为name的元素，包含-->
<input type="text" class="name" value="李浩"/>
</div>
<input type="text" class="name" value="王菲"/>
<input type="text" class="name" value="鑫飞"/>
<div id="div"></div>
<input type="text" class="name" value="刘明1"/>
<span></span>
<div></div>
</body>
</html>
2. 简单选择器
格式：$(“p:first”) 或 $(“ul li:gt(3)”)
- (1)first(第一个)、last(最后一个)、odd(奇数)、even(偶数)
- (2)eq(等于)、gt(大于)、lt(小于)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单选择器</title>
<!--$("p:first")/$("ul li:gt(3)")
(1)first(第一个)、last(最后一个)、odd(奇数)、even(偶数)
(2)eq(等于)、gt(大于)、lt(小于)
-->
</head>
<body>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function () {
alert($("input:first").val());//000,第一个<input>元素
alert($("input:last").val());//004,最后一个<input>元素
alert($("input:odd").length);//2, 所有奇数元素 001和003，首元素以0开始
alert($("input:even").length);//3, 所有偶数元素 000/002/004
alert($("input:eq(1)").val())//001 等于下标1的是001
alert($("input:gt(1)").length)//3 002、003、004 大于下标1的有3组
alert($("input:lt(1)").length)//1 000 小于下标1的有1组
})
</script>
<input type="text" value="000"><!--首元素的下标为0-->
<input type="text" value="001">
<input type="text" value="002">
<input type="text" value="003">
<input type="text" value="004">
</body>
</html>
3. 属性选择器
格式：就是带该属性名字的，都可以调用，为
[属性名字]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器-attribute</title>
</head>
<body>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function () {
alert($("[value]").length)//4 获取所有的元素拥有value属性的元素
alert($(".name[value]").length)//3 获取所有class为name并且拥有value属性的页面元素，同时满足class和value
alert($("[jh]").length)//3 获取所有jh属性的元素
alert($("[jh=aa]").length)//2 获取jh属性为aa的元素
})
</script>
<div class="name">
<input type="text" class="name" value="刘明" jh="aa"/>
</div>
<input type="text" class="name" value="刘好" jh="aa"/>
<input type="text" class="name" value="刘天" jh="we"/>
<!--这个value也可以-->
<a value="ji">连接</a>
<hr color=green>
</body>
</html>
