第一部分
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;
第二部分
根据属性获得元素
1.比如要获取页面p标签中属性有id的元素
$("p[id]").css("color","red");
根据属性值获得元素
1.$。在jQuery 中$("<span>")，这个语法等同于$(document.createElement("span")) ，这是一种用法，在选择元素的时候还会这样子的用：[attribute$=value]，匹配给定的属性是以某些值结尾的元素。下面举个例子来说明一 下：
HTML代码
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
jQuery 代码:
$("input[name$='letter']")
结果:
[ <input name="newsletter" />, <input name="jobletter" /> ]
2.!。选择器：[attribute!=value]，匹配所有不含有指定的属性，或者属性不等于特定值的元素，此选择器等价于:not([attr=value])。
例子说明一下：
HTML代码
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代码:
$("input[name!='newsletter']").attr("checked", true);
结果:
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
3.*。选择器：[attribute*=value]，匹配给定的属性是以包含某些值的元素。举个例子说明一下：
HTML 代码:
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
jQuery 代码:
$("input[name*='man']")
结果:
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
4.@。匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即
可。
5.^。选择器：[attribute^=value]，匹配给定的属性是以某些值开始的元素，下面举个例子来说明一下：
HTML 代码:
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
jQuery 代码:
$("input[name^='news']")
结果:
[ <input name="newsletter" />, <input name="newsboy" /> ]
6 获取指定属性且设定值中有指定字符串的元素
HTML 代码:
<input type="checkbox" name="newsletter" value="Hot Fuzz"/>
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery代码：
$("input[name$='letter'][value$='zz']").attr("checked","true");支持多条件操作
当然了，也可以根据id属性或其他属性来获取，如$("input[id=id1]").css("color",red);
在jquery中，当使 用$(”input[name='metaId']“).val()不能直接获得被选择的radio的值，只是获得 radio标签的第一个值，这可能jquery使用xpath语言了进行查找有关，而我们通常是想获得被选中的radio的值，有以下几种方法：
1，使用$(”input[name='metaId']:checked”).val()获得 //name代表radio中name属性名
2，使用$(”:radio:checked”).val()获得 //限制页面只有一组radio标签
扫一扫
1807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
