[转]jquery 常用的选择器
2016-12-06 10:17
274 查看
元素选择器
属性选择器
层级选择器
例如:
$(“box ~ li”) //同胞选择器,返回box下第一层的li
过滤选择器
CSS过滤选择器
属性过滤选择器
表单选择器
表单过滤选择器
$("#box") //选择id值等于box的元素,id值是唯一的,如果出现多个相同id的元素,那么只获取第一个元素 $("div") //选择所有的div标签元素,返回div元素数组 $(".box") //选择使用box类的css的所有元素 $("*") //选择文档中所有的元素 $("p.intro") //选取所有 class="intro" 的 <p> 元素 $("p#demo") //选取所有 id="demo" 的 <p> 元素
属性选择器
$("[href]") //选取所有带有 href 属性的元素 $("[href='#']") //选取所有带有 href 值等于 "#" 的元素 $("[href!='#']") //选取所有带有 href 值不等于 "#" 的元素 $("[href$='.jpg']") //选取所有 href 值以 ".jpg" 结尾的元素
层级选择器
$("div input") //选择所有div里的input元素 $("#box > *") //选择id值为box里的所有子元素 $("div > li") //选择div下第一层的li。
例如:
<div> <li>1</li><!-- 返回我 --> <li>2</li><!-- 返回我 --> <span>3</span> <ul> <li>4</li> </ul> </div> <li>5</li>
$("li + input") //选择所有li标签兄弟节点下面是b标签的,返回b标签。例如:
<li>1</li> <b>2</b><!-- 返回我 --> <b>3</b> <b>4</b> <li>5</li> <b>6</b><!-- 返回我 -->
$(“box ~ li”) //同胞选择器,返回box下第一层的li
<div> <li>1</li><!-- 返回我 --> <li>2</li><!-- 返回我 --> <span>3</span> <ul> <li>4</li> </ul> </div>
过滤选择器
$("li:first") //选择所有li元素的第一个 $("li:last") //选择所有li元素的最后一个 $("li:even") //选择所有的li元素中的第0,2,4...个元素,从0开始计算。 $("li:odd") //选择所有的li元素的第1,3,5...个元素,从0开始计算。 $("li:eq(2)") //选择所有的li元素中的第2个li,从0开始计算。 $("li:gt(4)") //选择li元素中第四个后面的li元素,从0开始计算。 $("li:lt(4)") //选择li元素中第四个前面的li元素,从0开始计算。 $(":header") //选择h1、h2、h3之类的,如果有h7也会被选上。 $("div:animated") //选择正在执行动画效果的元素 内容过滤选择器 $("p:contains('ma')") //选择所有p标签中包含有'ma'文本的元素 $("div:empty") //选择所有不包含任何文本不包含任何标签的div元素。 $("div:has(p)") //选择所有包含有p标签的div元素 $("div:parent") //选择所有包含文本或者包含节点的div元素。
CSS过滤选择器
$("div:hidden") //选择所有的被hidden(隐藏)的div元素 $("div:visible") //选择所有的可视化的div(显示)元素
属性过滤选择器
$("div[id]") //选择所有含有id属性的div元素 $("input[name='user']") //选择所有的name属性等于'user'的input元素 $("input[name!='user']") //选择所有的name属性不等于'user'的input元素 $("input[name^='tag']") //选择所有的name属性以'tag'开头的input元素 $("input[name$='tag']") // 选择所有的name属性以'tag'结尾的input元素 $("input[name*='tag']") //选择所有的name属性包含'tag'的input元素 $("input[name*='ma'][name$='cn']") //组合使用。选择name包含'ma',且以'cn'结尾的input。例如:<input type="text" name="maweb.cn"> $("li:nth-child(2)") //选择所有li当中的第二个li,和eq的区别在于eq是从0计算,这个是从1计算。 $("li:nth-child(odd)") //选择li当中的第1,3,5...li。 $("li:nth-child(2n)") //选择所有li当中的第2,4,6...li。括号中的2可以为其它数。 $("li:nth-child(2n + 1)") //从第一个li开始,每隔2个li选择一次。返回,1,3,5..。 例如:$("li:nth-child(3n + 2)")选择器返回:2,5,8.. $("div span:first-child") //返回所有的div元素的第一个子节点的数组 $("div span:last-child") //返回所有的div元素的最后一个节点的数组 $("div li:only-child") //返回所有的div中只有唯一一个子节点,并且是li的,返回这个li。
<div> <li>1</li><!-- 返回我 --> </div> <div> <li>2</li> <li>3</li> </div> <div> <li>4</li> <span>5</span> </div>
表单选择器
$(":input") //选择所有的表单输入元素,包括input, textarea, select 和 button $(":text") //选择所有的type=text的input元素,如果input没设置任何type也会被选中。 $(":password") //选择所有type=password的input元素 $(":radio") //选择所有type=radio的input元素 $(":checkbox") //选择所有type=checkbox的input元素 $(":submit") //选择所有type=submit的input元素 $(":image") //选择所有的type=image的input元素 $(":reset") //选择所有type=reset的input元素 $(":button") //选择所有type=button的input元素 $(":file") //选择所有type=file的input元素 $(":hidden") //选择所有type=hidden和css隐藏的input元素。也会选择head,meta,title,script...等
表单过滤选择器
$(":enabled") //选择所有非disabled(禁止)属性的input $(":disabled") //择所有的禁止(disabled)的表单元素 $(":checked") //选择所有的被checked的表单元素 $("select option:selected") //选择下拉框当前选中项元素
相关文章推荐
- jquery常用操作整理 (二)--jQuery-Selectors(选择器)的使用
- JQuery常用选择器
- 在jQuery中 常用的选择器介绍
- jquery常用选择器
- jQuery常用方法(四)-选择器
- jquery 最常用选择器排名
- 常用jQuery代码,重点:选择器
- JQuery的常用选择器、过滤器、方法祥细介绍
- JQuery的常用选择器、过滤器、方法祥细介绍
- jquery常用选择器
- jquery选择器(常用选择器说明)
- jquery 常用的选择器
- jquery常用的选择器、事件器、dom操作及执行事件
- jQuery中常用的选择器
- 三个最常用的CSS,jquery选择器
- JQuery中常用的过滤选择器
- Jquery选择器常用例子
- JQuery常用选择器
- JQuery的常用选择器、过滤器、方法祥细介绍
- jquery常用过滤器选择器