JQuery学习04_02篇(标签选择器/元素选择器、层次选择器)

最新推荐文章于 2021-01-21 21:33:10 发布

程宇寒

最新推荐文章于 2021-01-21 21:33:10 发布

阅读量165

点赞数

文章标签： JQuery 选择器元素选择器/标签选择器层次选择器 js

本文链接：https://blog.csdn.net/czh500/article/details/103251714

版权

直接po图和代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习04_02篇(标签选择器/元素选择器、层次选择器)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
	<h2 style="color: Maroon;">JQuery学习04_02篇(标签选择器/元素选择器、层次选择器)</h2>
	<div id="div1">
		<p>江西省</p>
		<p>浙江省</p>
		<p>福建省</p>
		<p>江苏省</p>
	</div>
	<div>
		<p>广东省</p>
		<p>山西省</p>
		<p>安徽省</p>
		<p>湖南省</p>
	</div>
	<div>
		<p>河北省</p>
		<p>陕西省</p>
		<p>黑龙江省</p>
		<p>四川省</p>
	</div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('div p').css("background", "palegreen");

//:first只匹配一个单独的元素(这里，只匹配出了第一个div元素下的第一个p元素)
$('div p:first').css("background", "pink");
//first-child选择器可以匹配多个(这里，匹配出了每个div元素下的第一个p元素)
$('div p:first-child').css("background", "red");
//nth-child(1)与first-child效果一样
$('div p:nth-child(1)').css("background", "green");

//:last只匹配一个单独的元素(这里，只匹配出了最后一个div元素下的最后一个p元素)
$('div p:last').css("background", "blue");
//first-child选择器可以匹配多个(这里，匹配出了每个div元素下的最后一个p元素)
$('div p:last-child').css("background", "gray");

//所以，first和first-child的区别以及last和last-child的区别就体现出来了
$('div p:last').css("background", "Coral");
$('div p:last-child').css("background", "CornflowerBlue");
//(这里，匹配出了每个div元素下的最后一个p元素)鼠标放上去变成小手形状
$('div p:last-child').css("cursor", "pointer");
/*
cursor:hand 与 cursor:pointer 的效果是一样的，都像光标指向链接一样，光标变成手行。
cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效果。
cursor:pointer ：是CSS2.0的标准。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持。
结论：还是用 cursor:pointer 来的方便
参考网页https://www.cnblogs.com/keyi/p/6857524.html
*/
</script>
</html>