一、jQuery基本选择器
1.CSS选择器
在学习jQuery选择器之前，先介绍一下之前学过的CSS选择器。
|
选择器 |
语法 |
描述 |
示例 |
|
标签选择器 |
E { CSS规则 } |
以文档元素为选择符 |
|
|
ID选择器 |
#ID{ CSS规则 } |
以ID为选择符 |
|
|
类选择器 |
E.className{ CSS规则 } |
以文档元素的Class为选择符 |
|
|
群组选择器 |
E1,E2{ CSS规则 } |
多个选择符应用同样的样式 |
|
|
后代选择器 |
E F { CSS规则 } |
元素E的任何后代F |
|
|
通配符选择器 |
*{ CSS规则 } |
文档的所有元素作为选择符 |
|
2.jQuery基本选择器
在网页中，每个id名称只能使用一次，class允许重复使用。基本选择器的介绍说明如下。
|
选择器 |
描述 |
返回 |
示例 |
|
#id |
根据给定的id匹配一个元素 |
单个元素 |
$("#test")选取id为test的元素 |
|
.class |
根据给定的类名匹配元素 |
集合元素 |
$(".test")选取所有class为test的元素 |
|
element |
根据给定的元素名匹配元素 |
集合元素 |
$("p")选取所有的<p>元素 |
|
* |
匹配所有的元素 |
集合元素 |
$("*")选取所有的元素 |
|
selector1,selector2 |
将每一个选择器匹配到的元素合并后引一起返回 |
集合元素 |
$("div,p.myclass")选取所有<div>，和用于class为myclass的<p>标签的一组元素 |
<body>
<input type="button" value="选择 id 为 one 的元素" id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
<input type="button" value="选择 所有的元素" id="btn4" />
<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素^^</span>
</body>
jQuery代码
$(function(){
//1.选择 id 为 one 的元素
$("#btn1").click(function(){
$("#one").css({ background : "#C1FFC1"});
});
//2.选择 class 为 mini 的所有元素
$("#btn2").click(function(){
$(".mini").css({background : "#C1FFC1"});
});
//3.选择 元素名是 div 的所有元素
$("#btn3").click(function(){
$("div").css({background : "#C1FFC1"});
});
//4.选择 所有的元素
$("#btn4").click(function(){
$("*").css({background : "#C1FFC1"});
});
//5.选择 所有的 span 元素和id为two的元素
$("#btn5").click(function(){
$("span,#two").css({background : "#C1FFC1"});
});
});
点击按钮1
点击按钮2
点击按钮3
点击按钮4
点击按钮5
时间： 2024-12-25 23:47:47