jQuery选择器小案例

abstract：<!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元素
Correcting teacher：查无此人Correction time：2018-11-25 09:41:15
Teacher's summary：挺不错的，会了选择器，基本就弄懂一半了，只要对页面进行操作，都要先选择对象。
jQuery选择器小案例

Popular Entries
