jQuery 学习笔记之三 (jQuery 选择器)
2011-03-06 19:29
603 查看
jQuery 选择器
例子1：给网页中所有的<p> 元素添加onclick事件。
<p>china</p>
<p>english</p>
(1) 获取所有的<p> 元素。
(2) 对<p> 元素进行循环(因为获取的是数组对象)。
(3) 给每一个<P>元素添加行为事件。
javascript 代码如下:
var items = document.getElementByTagName("p"); //获取网页中所有的P元素
for(var i=0;i<items.length;i++){ //循环数组对象
items[i].onclick= function(){ //给每一个对象添加onclick事件
//doiing something!
}
}
例子2 使一个特定的表格隔行变色
<table id="tb">
<tbody>
<tr><td> 第一行</td><td>第一行</td></tr>
<tr><td> 第二行</td><td>第二行</td></tr>
<tr><td> 第三行</td><td>第三行</td></tr>
<tr><td> 第四行</td><td>第四行</td></tr>
<tr><td> 第五行</td><td>第五行</td></tr>
<tr><td> 第六行</td><td>第六行</td></tr>
</tbody>
</table>
根据 javascript 规则列出所有的项
(1) 根据表格ID 获取表格。
(2)在表格内获取<tbody>元素。
(3)在<tbody> 元素下获取<tr>元素。
(4)循环输出获取的<tr> 元素
(5)对<tr> 元素的索引值除以2并取模，然后根据奇偶设置不同的背景颜色。
javascript代码如下:
var item = document.getElementById("tb");//获取id 为td的元素(table)
var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第1个tbody 元素
var trs = tbody.getElementsByTagName("tr"); //获取tbody元素下的所有tr元素
for(vari i=0;i<trs.length;i++){ //循环 tr元素
if(i%2==0) { //取模(取余数，例如0/2=0 1%2=1 2%2 =0 )
trs[i].style.backgroundColor="#888";// 改变符合条件的tr元素的背景色
}
}
例子3 对多选框进行操作，输出选中的多选框的个数。
<input type="checkbox" value="1" name="check" checked />
<input type="checkbox" value="2" name ="check"/>
<input type="checkbox" value="3" name="check" checked/>
<input type="button" vlaue="你选中的个数" id="btn"/>
(1).获取所有name为check的多选框。
(2)循环判断多选框是否选中，如果被选中则添加到数组里。
(3)获取输出按钮，然后为按钮添加onclick事件,输出数组的长度即可。
var btn = document.getElementById("btn"); //获取id为Btn的元素(button)
btn.onclick= function(){
var arrays = new Array();
var items = document.getElementsByName("check"); //获取name为check的一组元素(checkbox)
for(int i=0;i<items.length;i++){ //循环这组数据
if(items[i].checked){ //判断是否选中
arrarys.push(items[i].value) ;//添加符合条件的数据
}
}
}
基本选择器
选择器 描述 返回 示例
#id 根据给定的ID匹配一个元素 单个元素 $("#test")选取id为test的元素
.class 根据给定的类名匹配元素 集合元素 $(".test")选取所有class为test的元素
element 根据给定的元素名匹配元素 集合元素 $("p")选取所有的<p>元素
* 匹配所有元素 集合元素 $("*")选区所有的元素
selector1 将每一个选择器匹配到元素 集合元素 $("div,span,p.myClass")选取所有<div>,<span> 和拥有class为myclass的<p> 标签的一组元素
合并后一起返回
改变id为one的元素的背景颜色 $('#one').css("background","#bbffaa")
改变calss为mimi的所有元素的背景色 $('.mini').css("background",#bbffaa);
改变元素名是<div>的所有元素的背景色 $('div').css("background","#bbffaa");
改变所有元素景色 $('*').css("background","#bbffaa");
改变所有的<span> 元素和id 为two的元素的背景颜色 $('span,#two').css("background","#bbffaa");
一 层次选择器
选择器 描述 返回 示例
$("ancestor descendant") 选取ancestor 元素的所有descendant（后代）元素 集合 $("div span")选取<div>里的所有的<span> 元素
$("parent>child") 选取parent元下的child（子）元素 集合 $("div>span")选取<div> 元素下元素名是<span>的子元素
$('prev+next') 选取紧接在prev元素后的next元素 集合 $('.one+div')选取class为one的下一个<div>元素
$('prev~siblings') 选取prev元素之后的所有siblings元素 集合 $("#two~div")选取id为two的元素后面的所有<div>兄弟 元素
1.改变<body> 内所有的<div> 的背景色 $('body div').css("background","#bbffaa");
2.改变<body> 内<div>元素的背景颜色 $('body>div').css("background","#bbffaa");
3.改变class为one的下一个<div>元素背景色 $(".one+div").css("background","#bbffaa");
4.改变id 为two的元素后面的所有<div>兄弟元素的背景色 $('#two~div').css("background","#bbffaa");
在层次选择器中，第1个和第2个选择器比较常用，而后面两个因为在jQuery里可以用更加简单的方法来代替，
所以使用的几率相对少些。
可以使用next() 方法来替$('prev+next')选择器，如表2-6所示。
可以使用nextAll方法来替代$('prev~siblings')选择器。
选择器 方法
等价关系 $(".one+div"); $(".one").next("div");
$("#prev~div"); $("#prev").nextAll("div");
$("#prev~div").css("background","#bbffaa"); //选取#prev之后的所有同辈div元素
$("#prev").nextAll().css("background","#bbffaa"); //同上
$("#prev").siblings("div").css("background","#bbffaa"); 选取#prev所有同辈div元素,无论前后位置
二 过滤选择器
选择器 描述 返回 示例
:first 选取第一个元素 单个元素 $("div:first")选取所有<div> 元素中第一个<div>元素。
:last 选取最后一个元素 单个元素 $("div:last") 选取所有<div>元素中最后一个<div>元素。
:not(selector) 去除所有与给定选择器匹配的元素 集合元素 $("input:not(.myclass)")选取class不是myclass的<input>元素。
:even 选取索引是偶数的所有元素，索引从0 开始 集合元素 $("input:even")选取索引是偶数的<input> 元素。
:odd 选取索引是奇数的所有元素，索引从0开始 集合元素 $("input:dd") 选取索引是奇数的<input>元素。
:eq(index) 选取索引等于index的元素(index从0开始)单个元素 $("input:eq(1)")选取索引等于1的<input>元素。
:gt(index) 选取索引大于index的元素(index从0开始)集合元素 $("input:gt(1)")选取索引大于1的<input>元素 大于1 不包含 。
:lt(index) 选取索引小于index的元素(index从0开始)集合元素 $("input:lt(1)")选取索引大于1的<input>元素。
:header 选取所有的标题元素，h1 ,h2 ,h3 等 集合元素 $(":header") 选取网页中所有的<h1> <h2> <h3>
:animate 选取当前正在执行动画的所有元素 集合元素 $("div:animated")选取正在执行动画的<div>元素
三 内容过滤
选择器 描述 返回 示例
:contains(text) 选取含有文本内容"text"的元素 集合元素 $("div:contains("我")")选取所有文本含有"我"的<div>元素
:empty 选取不包含子元素或者文本的空元素 集合元素 $("div:empty")选取不包含子元素(包括文本元素)的<div>空元素
:has(selector) 选取含有选择器所匹配的元素的元素 集合元素 $("div:has(p)")选取含所有<p>元素的<div>元素
:parent 选取含有子元素或者文本的元素 集合元素 $("div:parent")选取拥有子元素(包括文本元素)的<div>元素。
四 可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。
选择器 描述 返回 示例
:hidden 选取所有不可见的元素 集合元素 $(":hidden")选取所有不可见的元素。包括<input type="hidden">,<div style="display:nooe"> 如果只选取<input>元素 ，可以使用 $("input:hidden");
:visible 选取所有可见的元素 集合元素 $("div:visible") 选取所有可见的<div>元素
在可见性选择器中，需要注意选择器:hidden ，它不仅包括样式属性display 为"none"的元素,也包括文本隐藏<input type="hidden" />和 visibility:hidden 之类的元素。
注意 show()是jQuery的方法，它的功能是显示元素,3000 是时间，单位为毫秒 。
五 属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。属性过滤选择器的介绍说明如表 2-14所示。
选择器 描述 返回 示例
attribute 选取拥有此属性的元素 集合元素 $("div[id]")选取属性拥有id的元素
attribute=value 选取属性的值为value的元素 集合元素 $("div[title=test]")选取属性title为test的<div>元素
attribute!=value 选取属性的值不等于value的元素 集合元素 $("div[title=test]")选取属性title不等于test的<div>元素（没有title的<div>元素也会被选取）
attribute^=value 选取属性的值以value开始的元素 集合元素 $("div[title^=test]")选取属性title以"test"开始的<div> 元素
attribute$=value 选取属性的值以value结束的元素 集合元素 $("div[title$=test]")选取属性title以"test"结束的<div> 元素
attribute*=value 选取属性的值含有value的元素 集合元素 $("div[title*=test]")选取属性title含有test的<div>元素
[select1][slect2] 用属性选择器合并成一个复合属性选择器，满足多个条件，每一次，缩小一次范围 集合元素 $("div[id][title$='test']")选取拥有属性id，并且属性title以test结束的<div>元素
六 子元素过滤选择器
子元素过滤选择器的过滤规则相对于其他的选择器稍微有些复杂，不过没有关系，只要将元素的父元素和子元素区别清楚，那么使用起来就很简单。
选择器 描述 返回 示例
:nth-child(index/evenodd/equation) 选取每个父元素的第index个子元素或者奇偶元素(index) 集合元素 :eq(index)只匹配一个元素，而nth-child将为每一个父元素匹配子元素，并且nth-child(index)的index 是从1开始的。而eq(index)是从0开始的
:first-child 选取每个父元素的第1个子元素 集合元素 :first 是返回单个元素，而first-child选择符将为每个父元素匹配1个子元素。
:last-child 选取每个父元素的最后一个子元素
:only-child 如果某个元素是它父元素中惟一的子元素，那么将会被匹配，如果父元素中含有其他元素，则不会匹配 集合元素 $("ul li:only-child")在<ul>中选取是惟一子元素的<li>元素
:nth-child()选择器是很常用的子元素过滤选择器，详细功能如下。
(1) :nth-child()选择器是很常用的子元素过滤选择器。
1.:nth-child(even)能选取每个父元素下的索引值是偶数的元素。
2.:nth-child(old) 能选取每个父元素下的索引值是奇数的元素。
3.:nth-child(2) 能选取每个父元素下的索引值等于2的元素
4.:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素。
5.:nth-child(3n+1)能选取每个父元素下的索引值是3n+1的元素
功能 代码
改版每个class为one 的<div>父元素下的第2个子元素的背景色 $('div.one :nth-child(2)').css("background","#bbffaa");
改变每个class为one的<div>父元素的第1个子元素的背景色 $('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");
七 表单对象属性过滤选择器
选择器主要是对所选择的表单元素进行过滤，例比如选择被选中的下拉框，多选框等等。
选择器 描述 返回 示例
:enable 选取所有可用元素 集合元素 $("#from :enable") 选取id为from1的表单内的所有可用元素
:disabled 选取所有不可用元素 集合元素 $("#from2")：disabled选取id为from2的表单内的所有不可用元素
:checked 选取所有被选中的元素(单选框，复选框) 集合元素 $("input:checked")选取所有被选中的<input>元素
:selected 选取所有被选中的选项元素(下拉列表) 集合元素 $("select:selected");选取所有被选中的选项元素
八 表单选择器
为了使用户能够更加灵活地操作表单，jQuery中专门加入了表单选择器，利用这个选择器，能极其方便地获取到表单的某个或某类型的元素。
选择器 描述 返回 示例
:input 选取所有的<input>,<textarea>,<select>和<button>元素 集合元素 $(":input")选取所有<input>,<textare>,<select>和<button>元素
:text 选取所有的单行文本框 集合元素 $(":text")选取所有的单行文本框
:password 选取所有的密码框 集合元素 $(":password")选取所有的密码框
:radio 选取是以体育的单选框 集合元素 $(":radio") 选取所有的单选框
:checkbox 选取所有的多选框 集合元素 $(":checkbox")选取所有的复选框
:submit 选取所有的提交按钮 集合元素 $(":submit")选取所有的提交按钮
:image 选取所有的图像按钮 集合元素 $(":image")选取所有的图像按钮
:rest 选取所有的重置按钮 集合元素 $(":rest")选取所有的重置按钮
:button 选取所有的按钮 集合元素 $(":button");选取所有的按钮
:file 选取所有的上传域 集合元素 $(":file")选取所有的上传域
:hidden 选取所有不可见元素 集合元素 $(":hidden")选取所有不可见元素（已经在不可见性过滤选择器中讲过）
如果想得到表单内表单元素的个数
$("#from1:input").length;
如果想得到表单内单行文本框的个数
$("#from1:text").length
如果想得到表单内密码框的个数
$("#from1 :password").length;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery 学习笔记之四 (jQuery 选择器)
- Jquery伪选择器学习笔记
- 【知了堂学习笔记】_jQuery基础知识之选择器（一）
- [知了堂学习笔记] jQuery选择器
- jQuery-$选择器 学习笔记三
- JQuery学习笔记-基本选择器
- JQuery学习笔记-基本过滤选择器
- jQuery学习笔记二（jQuery选择器）
- JQUERY1.9学习笔记 之内容过滤器(三) has选择器
- jquery学习笔记1——选择器
- 锋利的jQuery学习笔记之选择器
- jQuery学习笔记之选择器（继基础核心篇）
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
- jQuery学习笔记（三）：选择器总结
- JQUERY1.9学习笔记 之属性选择器(一) 前缀选择器
- jQuery学习笔记之二——常规选择器
- jQuery学习笔记之选择器
- jQuery学习笔记之jQuery选择器的使用
- jQuery学习笔记6：表单选择器
- jQuery学习笔记二：选择器与包装集