<html>
<head>
<title>jQuery基本选择器</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<style type="text/css">
*{margin:0;padding: 0;}
html,body{height:100%;width:100%}
div{
background:#aaa;/*#aaa:灰色*/
border: 1px solid #000;
font-size:14px;
font-family:verdana;
}
.exa_1{
width: 450px;
height: 350px;
}
#id_find{
font-size: 30px;
}
.exa_1 .mini{
width:350px;
height:150px;
margin: 20px;
padding: 10px;
}
</style>
</head>
<body>
<div class="exa_1">
<p id="id_find">jQuery基本选择器:</p>
<div class="mini">
<p>1、通配符(*)选择器:$("*")选取所有的元素</p>
<p>2、群组选择器:$("html,body")选取html,body标签</p>
<p>3、元素选择器: $("div")选取所有div元素</p>
<p>4、类选择器:$(".exa_1")选取class为exa_1的元素</p>
<p>5、id选择器:$("#id_find")选取idid_find的元素</p>
<p>6、后代选择器:$(".exa_1 .mini")选取.exa_1任意class为mini的后代元素</p>
</div>
</div>
<script type="text/javascript"></script>
</body>
</html>
jQuery基本选择器
最新推荐文章于 2023-04-23 17:34:04 发布