jQuery 程序员速成二之选择器

来源：互联网发布：php 阿里大于短信接口编辑：程序博客网时间：2024/05/21 08:38

jQuery 程序员速成二之选择器

发布时间: 1/13/2011 9:44 AM[打印]　[返回前一页]　[关闭窗口]

文章类型：原创笔记

　阅读(144)　评论(0)　编辑　删除　复制链接　所属分类: [Html/Css/Ajax/Js]

Jquery选择器是 jquery的根基，重中之重。掌握了选择器，基本掌握了一半 jquery 的使用。

Jquery选择器分为基本选择器、层次选择器、过滤选择器、表单选择器。

一、基本选择器：
通过元素的ID，class，标签名来查找DOM元素。

$('#id') //根据给定的 id匹配一个元素

例：改变 id为 one的元素的背景色
$('#one').css('background','#ff0000');

$('.class') //根据给定的类名匹配元素

例：改变 class为 mini的所有元素的背景色
$('.mini').css('background','#ff0000');

$(element) //根据给定的元素名匹配元素

例：改变所有 <div>的背景色
$('div').css('background','#ff0000');

$(*) //匹配所有元素

例：改变所有元素的背景色
$('*').css('background','#ff0000');

$(selector1,selector2,...,selectorN) //将每一个选择器匹配到的元素合并后一起返回

例：改变所有的 <span>元素和 id为 two的元素的背景色
$('span, #two').css('background','#ff0000');

二、层次选择器

$("ancestor descendant") //选取 ancestor元素里的所有 descendant（后代）元素，后代元素不仅包括子元素，还包括孙元素、孙孙元素。

例：改变 <body>里所有 <div>（不限于子层级）的背景色
$('body div').css('background','#ff0000');

$("parent > child") //只选取 parent元素下的 child （子层级）元素，与 $("ancestor descendant")有区别，前者选择所有后代元素（含且不限于子层级）

例：仅改变 <body>里 child <div>的背景色，孙级的 <div>不会受影响
$('body > div').css('background','#ff0000');

$('prev + next') //选取紧接在 prev元素后的同辈的 next元素

例：改变 class为 one的元素的下一个同辈 <div>元素的背景色
$('.one + div').css('background','#ff0000');

$('.one + div')也可以用 next()方法代替，等价于 $('.one').next('div')

$('prev ~ siblings') //选取 prev元素之后的所有同辈的 siblings元素

例：改变 class为 two的元素后面的所有同辈 <div>兄弟元素的背景色
$('.two ~ div').css('background','#ff0000');

$('.two ~ div')也可以用 nextAll()方法代替，等价于 $('.two').nextAll('div')

还有一个函数是 siblings()，该函数与 $('prev ~ siblings')是不同的

$('#prev ~ div')是选取 #prev元素后面的同辈 <div>元素

$('#prev'). siblings('div')是选取所有与 #prev元素同辈的 <div> ，无论前后位置

三、过滤选择器

过滤选择器，以冒号 ':' 开头。

可以同时跟多个过滤选择器，例如

选取索引值大于 3且小于 6的 <div>元素，即选取第 4， 5个 <div>

$('div:gt(3):lt(6))

过滤选择器分为： 基本过滤、内容过滤，可见性过滤、属性过滤、子元素过滤和表单对象过滤

3.1 基本过滤选择器

$("selector:first") //选取第一个元素

例：改变第 1个 <div>元素的背景色
$('div:first').css('background','#ff0000');

$("selector:last") //选取最后一个元素

例：改变最后 1个 <div>元素的背景色
$('div:last').css('background','#ff0000');

$("selector:not(selector2)") //去除所有与给定选择器匹配的元素

例：改变 class不为 one的所有 <div>元素的背景色
$('div:not(.one)').css('background','#ff0000');

$("selector:even") //选取索引是偶数的所有元素，索引从 0开始

例：改变索引值为偶数的 <div>元素的背景色
$('div:even').css('background','#ff0000');

$("selector:odd") //选取索引是奇数的所有元素，索引从 0开始

例：改变索引值为奇数的 <div>元素的背景色
$('div:odd').css('background','#ff0000');

$("selector:eq(index)") //选取索引等于 index的元素， index 从 0 开始

例：改变索引值等于 3的 <div>元素的背景色
$('div:eq(3)').css('background','#ff0000');

$("selector:gt(index)") //选取索引大于 index的元素， index 从 0 开始

例：改变索引值大于 3的 <div>元素的背景色
$('div:gt(3)').css('background','#ff0000');

$("selector:lt(index)") //选取索引小于 index的元素， index从 0开始

例：改变索引值小于 3的 <div>元素的背景色
$('div:lt(3)').css('background','#ff0000');

$(":header") 选取所有的标题元素，如 h1,h2,h3等等

例：改变所有标题元素，如 <h1>,<h2>,<h3>等的背景色
$(':header').css('background','#ff0000');

$(":animated") 选取当前正在执行动画的所有元素

例：改变当前正在执行动画的元素的背景色
$(':animiated').css('background','#ff0000');

3.2 内容过滤选择器

$(":contains(text)") //选取含有文本内容为 "text"的元素

例：改变含有文本 di的 <div>元素的背景色
$('div:contains(di)').css('background','#ff0000');

$(":empty") //选取不包含子元素或者文本的空元素

例：改变不包含子元素（包括文本元素）的 <div>元素的背景色
$('div:empty').css('background','#ff0000');

$(":has(selector2)") //选取含有选择器所匹配的元素的元素

例：改变含有 class为 mini的 <div>元素的背景色
$('div:has(.mini)').css('background','#ff0000');

$(":parent") //选取含有子元素或者文本的元素

例：改变含有子元素或文本的 <div>元素的背景色，该过滤与 (':empty') 刚刚相反
$('div:parent).css('background','#ff0000');

3.3 可见性过滤选择器

$(":hidden") //选取所有不可见的元素

例：显示隐藏的 <div>元素 3秒
$('div:hidden').show(3000);

$(":visible") //选取所有可见的元素

例：改变所有可见的 <div>元素的背景色
$('div:visible').css('background','#ff0000');

3.4 属性过滤选择器

$("selector[attribute]") //选取拥有此属性的元素

例：改变含有 title属性的 <div>元素的背景色
$('div:[title]').css('background','#ff0000');

$("selector[attribute=value]") //选取属性的值为 value的元素

例：改变属性 title的值等于 test的 <div>元素的背景色
$('div:[title=test]').css('background','#ff0000');

$("selector[attribute!=value]") //选取属性的值不等于 value的元素

例：改变属性 title的值不等于 test的 <div>元素的背景色
$('div:[title!=test]').css('background','#ff0000');

$("selector[attribute^=value]") //选取属性的值以 value开始的元素

例：改变属性 title的值以 te开始的 <div>元素的背景色
$('div:[title^=te]').css('background','#ff0000');

$("selector[attribute$=value]") //选取属性的值以 value结束的元素

例：改变属性 title的值以 est结尾的 <div>元素的背景色
$('div:[title$=est]').css('background','#ff0000');

$("selector[attribute*=value]") //选取属性的值含有 value的元素

例：改变属性 title的值含有 es的 <div>元素的背景色
$('div:[title*=es]').css('background','#ff0000');

$("selector[selector2][selectorN]") 用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围，如 $("div[id][title$='test']")选取拥有属性 id，并且属性 title以 "test"结束的 <div>元素

3.5 子元素过滤选择器

$(":nth-child(index/even/odd/equation)") //选取每个父元素下的第 index个子元素或者奇偶元素， index 从 1 算起

:nth-child(even)是选取父元素下的索引值是偶数的元素
:nth-child(odd)是选取父元素下的索引值是奇数的元素
:nth-child(2)是选取父元素下的索引值是 2的元素
:nth-child(3n)是选取父元素下的索引值是 3的倍数的元素 (n从 0开始 )
:nth-child(3n+1)是选取父元素下的索引值是 3n+1的元素 (n从 0开始 )
例：改变每个 class为 one的 <div>父元素下的第 2个子元素的背景色
$('div.one:nth-child(2)') .css('background','#ff0000');

$("selector:first-child") //选取每个父元素的第一个子元素

例：改变每个 class为 one的 <div>父元素下的第 1个子元素的背景色
$('div.one:first-child') .css('background','#ff0000');

$("selector:last-child") //选取每个父元素的最后一个子元素

例：改变每个 class为 one的 <div>父元素下的最后 1个子元素的背景色
$('div.one:last-child') .css('background','#ff0000');

$("selector:only-child") //如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配

例：如果 class为 one的 <div>父元素下只有一个子元素，那么改变这个子元素的背景色
$('div.one:only-child') .css('background','#ff0000');

3.6 表单对象属性过滤选择器

该类选择器主要是对表单元素进行过滤

假设有HTML代码如下：

折叠展开xhtml 代码复制内容到剪贴板

<form id='form1 ' action='#'>
可用元素
<input name='add'>
不可用元素
<input name='email' disabled='disabled'>
<input type='checkbox ' name='number' checked='checked' value='1'>
<input type='checkbox' name='number' value='2'>
<select name='test'>
<option>1</option>
<option>2</option>
</select>
</form>

$("selector:enabled") //选取所有可用元素

例：改变表单内可用 <input>元素的值
$('#form1 input:enabled') .val('changed');

$("selector:disabled") //选取所有不可用元素

例：改变表单内不可用 <input>元素的值
$('#form1 input:disabled') .val('changed');

$("selector:checked") //选取所有被选中的元素（ for radio,checkbox）

例：获取多选框选中的个数
$('input:checked') .length;

$("selector:selected") //选取所有被选中的选项元素（主要针对 <select>下拉列表）

例：获取下拉选框的内容
$('select:selected') .text();

四、表单选择器

通过这类选择器，可以很方便的获取表单的某个或某类型的元素

$(":input") //选取所有的 <input>,<textarea>,<select>,<button> 元素

例：获取表单内表单元素的个数
$('#form1 :input') .length;

注意和 $('#form1 input') 的区别，
$('#form1 input')是只是选取所有 #form1里的 <input>元素，不包括 <textarea>,<select>,<button>

$(":text") //选取所有的单行文本框

例：获取表单内单行文本框的个数
$('#form1 :text') .length;

$(":password") //选取所有的密码框

例：获取表单内密码框的个数
$('#form1 :password') .length;

$(":radio")     //选取所有的单选框
$(":checkbox")     //选取所有的复选框
$(":submit")     //选取所有的提交按钮
$(":image")     //选取所有的图像按钮
$(":reset")     //选取所有的重置按钮
$(":button")     //选取所有的按钮
$(":file")     //选取所有的上传域
$(":hidden")     //选取所有不可见元素

注特殊字符的处理与事项：

当选择器中含有特殊字符时：. # ( ) [ ]
需要在特殊字符之前加' \\' 进行转义

例如对于 html code:

折叠展开xhtml 代码复制内容到剪贴板

<div id='id#b'>bb</div>
<div id='id[1]'>bb</div>

那么在 jquery代码里需要以如下方式选取该元素：

$('#id\\#b')
$('#id\\[1\\]')

当选择器中含有空格时

选择器中的空格不容忽视，多一个空格或少一个空格结果也许完全不同

有空格代表后代选择器，没空格代表过滤选择器
例如：

$('.test :hidden') 表示 class为 test的元素里的所有被隐藏的后代元素
$('.test:hidden') 表示被隐藏了的 class为 test的元素

jQuery 程序员速成二 之 选择器

jQuery 程序员速成二 之 选择器

jQuery 程序员速成二之选择器

jQuery 程序员速成二之选择器