jQuery选择器

最新推荐文章于 2020-09-29 18:55:32 发布

hongxiao2016

最新推荐文章于 2020-09-29 18:55:32 发布

阅读量121

点赞数

分类专栏： # jQuery

本文链接：https://blog.csdn.net/hongxiao2016/article/details/102637379

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery中没有优先级之分。

基本选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery.js">
		</script>
		<style type="text/css">
			ul{
				width:500px;
				list-style: none;
			}
			li{
				margin: 10px;
				padding: 10px;
				border: 2px solid darkblue;
			}
		</style>
	</head>
	<body>
		<div id="item">div(id item)</div>
		<ul id="list1">
			<li>list1 li</li>
			<li>list1 li</li>
			<li>list1 li</li>
			<ul id="list2">
				<li>list2 li</li>
				<li>list2 li</li>
				<li class="item">list2 li class item</li>
				<li>list2 li</li>
			</ul>
			<li>list1 li</li>
			<li class="item">list1 li class item</li>
			<li>list1 li</li>
		</ul>
		<script type="text/javascript">
			$(function() {
				//id选择器
				$("#item").css("border","2px solid red");
				//class选择器
				$(".item").css("border","2px solid green");
				//标签选择器
				$("li").css("background-color","#369")
				//全局选择器
				$("*").css("border","3px solid red");
				//组合选择器
				$("li.item").css("color","#f40");
				//多个选择器
				$("li,div").css("border","3px solid yellow");
			})
		</script>
	</body>
</html>