一、选择器——jQuery的根基
1、CSS选择器
- 标签选择器:以文档元素作为选择符。
E {
CSS规则
}
- ID选择器:以文档元素的唯一标识符ID作为选择符。
#ID {
CSS规则
}
- 类选择器:以文档元素的class作为选择符。
E.className {
CSS规则
}
- 群组选择器:多个选择符应用同样的样式规则。
E1,E2,E3 {
CSS规则
}
- 后代选择器:元素E的任意后代元素F。
E F {
CSS规则
}
- 通配选择器:以文档的所有元素作为选择符。
* {
CSS规则
}
2、jQuery选择器
- 继承了CSS的风格,写法与CSS选择器相似。
- CSS选择器找到元素后是添加样式,jQuery选择器找到元素后是添加行为。
- jQuery中射击涉及操作CSS样式的部分比单纯的CSS功能更为强大。
- 拥有跨浏览器的兼容性。
二、jQuery选择器的优势
- 简洁的写法
- 支持CSS1到CSS3选择器
- 完善的处理机制,可以避免某些错误
三、jQuery选择器
1、基本选择器
通过元素id、class和标签名等来查找DOM元素。
- #id:根据给定的id匹配一个元素。
- .class:根据给定的类名匹配元素。
- element:根据给定的元素名匹配元素。
- *:匹配所有元素。
- selector1,selector2,…,selectorN:将每一个选择器匹配到的元素合并后一起返回。
下面举个例子简单说明。
先简单设计一个页面,包含一些<div>
和<spam>
元素,HTML代码如下:
<div id="one">id为one的div块</div>
<div class="two">class为two的div块</div>
<div class="three">class为three的span</div>
<span>span元素</span>
再添加一些简单的CSS样式,CSS代码如下:
div, span{
height: 100px;
width: 100px;
border: 1px solid #000;
margin: 5px;
float: left;
}
页面效果如下:
再使用选择器来匹配元素并调整它们的样式,代码如下:
//改变id为one的所有元素的背景色
$("#one").css("background","green");
//改变class为two的所有元素的背景色
$(".two").css("background","blue");
//改变元素名为<span>的所有元素的背景色
$("span").css("background","yellow");
//改变所有元素的字体
$("*").css("font-size","20px");
//改变所有<span>元素和id为three的元素的高度
$("span,#three").css("height","150px");
2、层次选择器
通过DOM元素之间的层次关系来获取特定元素,比如后代元素、子元素、相邻元素和同辈元素等。
- $(“ancestor descendant”): 后代选择器,选取ancestor元素里的所有descendant(后代)元素。
- $(“parent > child”):子选择器选取parent元素下的child(子)元素。
- $(“prev + next”):相邻兄弟选择器,选择紧接在prev元素后的next元素。可以使用next()方法代替。
- $(“prev ~ siblings”):一般兄弟选择器选取prev元素之后的所有siblings元素。可以使用nextAll()方法代替。
再举一个例子。
先给出HTML代码,如下:
<div id="one" class="one">
id为one,class为one的div
<div class="mini">class为mini的div</div>
<p>p元素</p>
</div>
<div id="two" class="two">
id为two,class为two的div
<div class="mini" title="1">class为mini,title为1的div</div>
<div class="mini" title="2">class为mini,title为2的div</div>
<p>p元素</p>
</div>
<div id="three" class="three">
id为three,class为three的div
<div class="mini">class为mini的div</div>
</div>
<span>
span元素
<p>p元素</p>
</span>
<div id="four" class="four">
id为four,class为four的div
<p>p元素</p>
</div>
<span id="mover">正在执行动画的span元素</span>
再给出CSS样式,如下:
div, span, .mini, p{
margin: 5px;
border: 1px solid #000;
float: left;
}
div, span{
height: 200px;
width: 200px;
}
.mini{
height: 80px;
width: 80px;
}
p{
height: 60px;
width: 60px;
}
为<span>
元素添加动画效果:
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
再使用选择器,代码如下:
//改变<div>内所有<p>的背景色
$("div p").css('background', '#BBFFAA');
//改变<body>内子<span>元素的背景色
$("body span").css('background', '#AABBCC');
//改变class为one的下一个<div>同辈元素的背景色
$(".one + div").css('background', '#777777');
//改变id为two的元素后面的所有<div>同辈元素的背景色
$("#two ~ div").css('background', 'yellow');