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的元素 |