jQuery学习笔记（2） jQuery选择器
jQuery的选择器完全继承了CSS的风格，利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为。
目录
- 目录
- CSS选择器
- jQuery选择器
- jQuery选择器的优势
- jQuery选择器的种类
- 1. 基本选择器
- 2. 层次选择器
- 3. 过滤选择器
- 4. 表单选择器
- 选择器中含有空格的注意事项
CSS选择器
/*标签选择器*/
td{
font-size: 14px;
width: 120px;
}
/*ID选择器*/
#note{
font-size: 14px;
width: 120px;
}
/*类选择器*/
div.note{
font-size: 14px;
}
.dream{
font-size: 14px;
}
/*群组选择器*/
td,p,div.a{
font-size: 14px;
}
/*后代选择器*/
#links a{
color: red;
}
/*通配选择符*/
*{
font-size: 14px;
}ID和class的区别
- 对于html而言，ID和class都是DOM元素的属性值。不同的地方在于ID属性的值是唯一的，而class属性值可以重复。
- 一般不会对ID添加样式，使用只对class添加样式。
jQuery选择器
利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，并且无需担心浏览器是否支持这一选择器。
- 在HTML中设置事件（JavaScript代码和HTML代码混杂）
<p onclick="demo();">
喵喵喵
p>
<script type="text/javascript">
function demo() {
alert("喵喵喵!");
}
script>- 使用jQuery方法做到网页内容和行为分离
<p class="demo">
喵喵喵
p>
<script type="text/javascript">
$(".demo").click(function demo() {
alert("喵喵喵!");
})
script>jQuery选择器的优势
- 简洁的写法。对比于DOM方法的
getElementById()和getElementsByTagName()函数，更加简洁。 - 支持CSS1到CSS3选择器
- 完善的处理机制。使用DOM方法的
getElementById()和getElementsByTagName()时，若不存在相应的DOM元素（ID或TagName），浏览器就会报错。但使用jQuery获取网页中不存在的元素也不会报错。
<div>testdiv>
<script type="text/javascript">
$("#tt").css("color","red");
script>注：若要判断所选择的元素是否存在，应该判断获取到的元素长度或者转换成DOM对象来判断
if ($("#tt").length > 0) { //判断长度
//do something
}if ($("#tt")[0]) { //转换成DOM对象
//do something
}jQuery选择器的种类
jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。用以下页面进行试验：
HTML:
<div class="one" id="one">
id为one，class为one的div
<div class="mini">Class为minidiv>
div>
<div class="one" id="two" title="test">
id为two，class为one，title为test的div
<div class="mini" title="other">class为mini，title为otherdiv>
<div class="mini" title="test">class为mini，title为testdiv>
div>
<div class="one">
<div class="mini">class为minidiv>
<div class="mini">class为minidiv>
<div class="mini">class为minidiv>
<div class="mini">div>
div>
<div class="one">
<div class="mini">class为minidiv>
<div class="mini">class为minidiv>
<div class="mini">class为minidiv>
<div class="mini" title="tesst">class为mini，title为tesstdiv>
div>
<div style="display: none;" class="none">style的displ为“none”点的divdiv>
<div class="hide"> class为hide的divdiv>
<div>
包含type为“hidden”的input的div
"hidden" size="8"/>
div>
id="mover">正在执行动画的span元素CSS
<style type="text/css">
div,span,p{
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini{
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide{
display: none;
}
style>1. 基本选择器
基本选择器是最常用、最简单的选择器，通过元素id、class和标签名来查找DOM元素。
//ID
$("#one")
.css("background","#bbffaa");
//类(class)
$(".mini")
.css("background","#bbffaa");
//元素div
$("div")
.css("background","#bbffaa");
//所有元素
$("*")
.css("background","#bbffaa");
//所有元素和id为two的元素
$("span, #two")
.css("background","#bbffaa"); 2. 层次选择器
通过DOM元素之间的层次关系来获取特定元素。包括后代元素、子元素、相邻元素、兄弟元素。
//后代元素：改变内所有的背景色
$("body div")
.css("background","#bbffaa");
//子元素：改变内子元素的颜色(仅为body下一级的div元素)
$("body > div")
.css("background","#bbffaa");
$("body >> div")//可以嵌套，表示下两级
.css("background","#bbffaa");
$("body > div > div")
.css("background","#bbffaa");
//相邻元素：改变class为one的下一个元素背景色（注意不会选中自身）
$(".one + div")
.css("background","#bbffaa");
$(".one").next("div") //更常用的方法
.css("background","#bbffaa");
//兄弟元素：改变id为two的元素后面所有兄弟元素的背景色（注意不会选中自身）
$("#two ~ div") //所有元素
.css("background","#bbffaa");
$("#two").nextAll("div") //更常用的方法
.css("background","#bbffaa");
$("#two").siblings("div")//nextAll只能选择之后的同辈元素，siblings方法可以选择与前后位置无关的同辈元素
.css("background","#bbffaa");
3. 过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素。选择器以冒号(:)开头，搭以不同的过滤规则。在冒号前可以有一个元素、多个元素、或者没有元素。
1. 基本过滤选择器
$("div:first") //所有div元素的第一个
$("div:last") //所有div元素的最后一个
$("input:not(.myClass)") //选择class不是myClass的input
$("input:even") //索引为偶数的
$("input:odd") //索引为奇数的
$("input:eq(0)") //索引等于0的，若索引号为负数，则逆序寻址
$("input:gt(1)") //索引大于1的
$("input:lt(10)") //索引小于10的
$(":header") //所有...
$("div:animated") //正在执行动画的
2. 内容过滤选择器
$("div:contains('di')") //选择含有文本"di"的
$("div:empty") //选择不包含子元素（包括文本元素）的
$("div:has(p)") //选取含有元素的
$(":has(#two)") //选取含有id为two的所有元素
$(":has(.mini)") //选取含有class为mini的所有元素
$("div:parent") //选择拥有子元素（包括文本元素）的.（当爸爸了）
注：contains()和has()方法的区别
contains()方法只选取文本has()方法只可以选取标签、id和class
3. 可见性过滤选择器
//让不可见元素显示。show()是jQuery显示元素的方法，3000是时间，单位是毫秒。
$("div:hidden").show(3000);
$("div:visible") //选取可见的div元素
注：常用到的的不可见元素
<input type="hidden"/>
<div style="display: none;">略略略看不见我div>
<div style="visibility: hidden;">略略略还是看不见我div>
4. 属性过滤选择器
通过元素的属性来获取相应的元素
// 含有属性title的div
$("div[title]")
.css("background","#bbffaa");
//属性title值为test的div
$("div[title=test]")
.css("background","#bbffaa");
//title的值不为test的div（不一定要有title）
$("div[title!=test]")
.css("background","#bbffaa");
//title以te开头的div
$("div[title^=te]")
.css("background","#bbffaa");
//title以st结尾的div
$("div[title$=st]")
.css("background","#bbffaa");
//title包含es的div
$("div[title*=es]")
.css("background","#bbffaa");
//含有属性id，同时title包含es的div
$("div[id][title*=es]")
.css("background","#bbffaa");
5. 子元素过滤选择器
特别强调：子元素过滤选择器的冒号前一定要有空格，不然会报错。
//class为one的div父元素下第二个子元素
$("div.one :nth-child(2)")
.css("background","#bbffaa");
//class为one的div父元素的第一个子元素
$("div.one :first-child")
.css("background","#bbffaa");
//class为one的div父元素的最后一个子元素
$("div.one :last-child")
.css("background","#bbffaa");
//选择只有一个子元素的class为one的div元素
$("div.one :only-child")
.css("background","#bbffaa");
注：nth-child()和eq()的区别
eq(index)只匹配一个元素，nth-child(index)将为每一个父元素匹配子元素eq(index)的index从0开始；nth-child(index)的index从1开始
6. 表单对象属性过滤选择器
主要是对所选择的表单元素进行过滤，如下拉框、多选框等。
HTML表单页面：
<form id="form1" action="#">
可用元素：<input name="add" value="可用文本框"/><br/>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素：<input name="che" value="可用文本框"/><br/>
不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
<br/>
多选框：<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1"/>test1
<input type="checkbox" name="newsletter" value="test2"/>test2
<input type="checkbox" name="newsletter" value="test3"/>test3
<input type="checkbox" name="newsletter" checked="checked" value="test4"/>test4
<input type="checkbox" name="newsletter" value="test5"/>test5
<div>div>
<br/><br/>
下拉列表1：<br/>
<select name="test" multiple="multiple" style="height: 100px;">
<option>浙江option>
<option selected="selected">湖南option>
<option>北京option>
<option selected="selected">天津option>
<option>广州option>
<option>湖北option>
select>
<br/><br/>
下拉列表2：<br/>
<select name="test2">
<option>浙江option>
<option>湖南option>
<option selected="selected">北京option>
<option>天津option>
<option>广州option>
<option>湖北option>
select>
<div>div>
form>
表单对象属性过滤选择器：
//选取可用元素
$("#form1 input:enabled")
.val("这里变化了");
//选取不可用元素
$("#form1 input:disabled")
.val("这里变化了");
//选取已被选中的元素（单选框、复选框）
$("#form1 input:checked").length;
//选取已被选中的元素（下拉列表）-注意select后面有空格
$("#form1 select :selected").text();
4. 表单选择器
表单选择器可以方便用户获取表单的某个或某类型的元素。和表单对象属性过滤选择器的区别在于：表单选择器侧重于选择表单元素，而表单对象属性过滤选择器侧重于选择属性。
$(":input") //