摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器案例.html</title> <script type="text/javascript" src="j
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器案例.html</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
div{
margin: 10px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("a").css("text-decoration","none");
$("p:first").css("color","#ccc")
$("p:last").css("color","#888")
$("a:odd").css("color","pink")
$("div:contains(第一类)").css("color","purple")
$(":disabled").css("background","red")
$("input[name][id=username]").css("background-color","yellow")
$(":selected").css("color","green")
})
</script>
<p>男装 </p>
<div>第一类:</div>
1 <a href="">上衣</a>
2 <a href="">半袖</a>
3 <a href="">T-shirt</a>
<div>第二类:</div>
4 <a href="">外套</a>
5 <a href="">短裤</a>
6 <a href="">卫衣</a>
<p>女装</p>
1 <a href="">长裙子</a>
2 <a href="">半袖</a>
3 <a href="">牛仔裤</a><br>
4 <a href="">外套</a>
5 <a href="">短裙子</a>
6 <a href="">卫衣</a>
<p>儿童</p>
1 <a href="">上衣</a>
2 <a href="">裤子</a>
3 <a href="">鞋</a><br>
4 <a href="">袜子</a>
5 <a href="">玩具</a>
6 <a href="">手表</a>
<br>
<br>
<form >
姓名:<input type="text" name="" id="username"><br>
电话:<input type="text" name=""><br>
联系人:<input type="text" name=""><br>
地址:<input type="text" name=""><br>
邮箱:<input type="text" name="" placeholder="这里禁止填写" disabled><br>
性别:<select>
<option>女</option>
<option selected>男</option>
</select>
</form>
</body>
</html>
jquery基本选择器语法:
$("#id名") 根据给定的id来匹配到元素
$(".class名") 根据给定的class来匹配到元素
$("element") 根据给定的标签来匹配到元素
$("*") 匹配到所有元素
$("#id名,.class名,element") 匹配到页面中多个选择器
jquery层级选择器语法:
$("父级元素>子级元素") 给定的父级元素下匹配所有的子元素
$("祖先元素 后代元素") 给定的祖先元素下匹配所有的后代元素
$("prev+next")(同级元素) 匹配紧跟在prev后面的next元素
$("prev~siblings") 匹配prev元素后面的所有的siblings元素
jquery顺序选择器:
1 顺序
$(":first") 第一个元素
$(":last") 最后一个元素
2 比较(x的顺序是从0开始的)
$(":gt(x)") 表示大于值x的元素
$(":lt(x)") 表示小于值x的元素
$(":eq(x)") 表示等于值x的元素
3 奇偶数(x的顺序是从0开始的)
$(":odd") 奇数排序
$(":even") 偶数排序
4 非
$(":not(selector)") 匹配不是selector(选择器)的所有元素
jquery内容选择器:
$(":contains(text)") 匹配包含给定文本(text)的元素
$(":has(selector)") 匹配包含特定选择器元素的元素
$(":empty") 匹配不含有内容的元素(即不含有子元素或者文本的空元素)
$(":parent") 匹配含有子元素或者文本的元素
jquery属性选择器:
$("[属性名]") 匹配包含给定属性的元素
$("[属性名=属性值]") 匹配给定属性是某个特定值的元素
$("[属性名!=属性值]") 匹配所有不含有特定值得属性或者说是属性不等于特定值的元素
$("[属性名^=属性值]") 匹配给定属性是以某些值开始的元素
$("[属性名$=属性值]") 匹配给定属性是以某些值结尾的元素
$("[属性名*=属性值]") 匹配给定属性包含某些值的元素
$("attrSel[1] attrSel[1] attrSel[1]") 符合选择器，需要同时瞒住多个条件使用
jquery表单选择器:
$(":enabled") 所有激活的input元素(可以使用的input元素)
$(":disabled") 所有禁用的input元素(不可以使用的input元素)
$(":selected") 所有被选取的元素，针对于select元素
$(":checked") 所有被选中的input元素
批改老师：查无此人批改时间：2018-11-25 09:41:15
老师总结：挺不错的，会了选择器，基本就弄懂一半了，只要对页面进行操作，都要先选择对象。
