1.基本选择器介绍
基本选择器是jQuery中(共5个)最常用的选择器,也是最简单的选择器,它通过元素的id、class和标签名等查找DOM元素,在CSS都有对应的选择器,所以这里的选择器没有什么难度。
2.详细介绍每个基本选择器
3.实例应用
<html>
<head>
<title>基本选择器(共5种)</title>
<style type="text/css">
.person,.country{
width:280px;
height:280px;
border:#000 1px solid;
background-color:#aaa;
font-family:Verdana;
font-size:17px;
float:left;
margin:5px;
}
.provinceLevel{
width:80px;
height:80px;
background-color:#f00;
font-size:12px;
margin-top:12px;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Jason").css("background-color","#fff");//id选择器
//$(".country").css("background-color","#fff");//类选择器
//$("p").css("background-color","#fff");//标签选择器
//$("p,#beijing").css("background-color","#fff");//组合选择器
//$("*").css("background-color","#fff");
});
</script>
</head>
<body>
<div id="Jason" class="person">
Jason's block.
<p>Jason's dream is to go abroad for studying.</p>
</div>
<div id="China" class="country">
China's block.
<p>China's dream is to become the most stronger country.</p>
<div id="shandong"" class="provinceLevel">
ShanDong province's block.
</div>
<div id="beijing" class="provinceLevel">
BeiJing city's block
</div>
</div>
<div id="Spanish" class="country">
Spanish's block.
</div>
</body>
</html>