jQuery常用的选择器
来源:互联网 发布:centos 6.8安装 分区 编辑:程序博客网 时间:2024/06/08 07:56
当我们想要操所页面中的元素时,首先要做的就是选取元素。选取页面中元素可以使用jQuery给我们提供的$()
方法,该方法需要提供选择器作为参数,方法执行完成后会返回给我们一个jQuery对象,被选取的元素就包含在该对象中。
1.1基础选择器
选择器实列说明全局选择器$('*')选择所有元素标签选择器$('p')选择所有的p元素ID选择器$('#top')选择所有id
属性值为top
的元素class选择器$('.box')选择所有clss属性值为top
的元素多重选择器$('div, p')选择所有的div
元素和p
元素
2.2 按层次结构选取元素
选择器实列说明子代选择器$('div > p')选择作为div
元素子元素的所有p
元素后代选择器$('div p')选择作为div
后代的所有p
元素相邻选择器$('div + p'选择紧邻div
元素且位于其后的p
元素兄弟选择器$('div ~ p')选择作为div
元素且位于其后的所有p
元素
2.3 使用属性选择元素
选择器实列说明tag[attr]$('p[class]')选择所有带有class
属性的p
元素tag[attr="value"]$('p[class="top"]')选择所有class
属性值恰好等于top
的p
元素tag[attr^="value"]$('p[class^="top"]')选择所有class属性值以top开头的P元素(包括class等于top的p元素) tag[attr$="value"] $('p[class$="top"]') 选择所有class
属性值以top
结尾的p
元素(包括class
属性值恰好等于top
的p
元素) tag[attr!="value"]$('p[class!="top"]') 选择所有class
属性值不等于top
的p
元素 tag[attr*="value"] $('p[class*="top"]') 选择所有class
属性值中包含字符串top
的p
元素(包括class
属性值恰好等于top
的p
元素) tag[attr|="value"] $('p[class|="top"]') 选择所有class
属性值为连接符分隔的字符串并且该字符串以top
开头的p
元素和class
属性值恰好等于top
的p
元素 tag[attr~="value"] $('p[class~="top"]') 选择所有class
属性值为空格分隔的多个字符串且其中一个字符串等于top
的p
元素和class
属性值恰好等于top
的p
元素tag[attr="value"]...$('p[class="top"][id]')选择所有class
属性值恰好等于top
并且带有id
属性的p
元素
<p class="center" >段落内容1</p> <p class="center right">段落内容2</p> <p class="left center right">段落内容3</p> <p class="center-right">段落内容4</p> <p class="left-center">段落内容5</p> <p class="left-center-right">段落内容6</p>
// 1. 选择带有Class属性的所有p元素 var $p1 = $('p[class]'); // 2. 选择class属性值恰好等于center的p元素 var $p2 = $('p[class="center"]'); // 3. 选择class属性值以center开始的p元素和class属性值恰好等于center的p元素 var $p3 = $('p[class^="center"]'); // 4. 选择Class属性值以center结尾的p元素和class属性值恰好等于center的p元素 var $p4 = $('p[class$="center"]'); // 5. 选择Class属性不等于center的p元素 var $p5 = $('p[class!="center"]'); // 6. 选择Class属性值中包含center字符串的p元素和class属性值恰好等于center的p元素 var $p6 = $('p[class*="center"]'); // 7. 选择所有class属性值为连接符分隔的字符串并且该字符串以center开头的p元素和class属性值恰好等于center的p元素 var $p7 = $('p[class|="center"]'); // 8. 选择所有class属性值为空格分隔的多个字符串且其中一个字符串等于center的p元素和class属性值恰好等于center的p元素 var $p8 = $('p[class~="center"]'); // 9. 选择所有class属性值恰好等于center并且id属性值恰好等于的p1元素 var $p9 = $('p[class="center"][]');
2.4基础过滤器
选择器实列说明:firs$('li:first')选择匹配元素集合中第一个li元素:last$('li:last')选择匹配元素集合中最后一个li元素:even$('li:even')选择匹配元素集合中偶数位的li元素:odd$('li:odd')选择匹配元素集合中奇数位的li元素:eq(n)$('eq(3)')选择匹配元素集合中索引等于3的li元素:gt(n)$('gt(3)')选择匹配元素集合中索引大于3的li元素:lt(n)$('lt(3)')选择匹配元素集合中索引小于3的li元素:root$(':root')选择文档的根元素:header$(':header')选择所有的标题元素(h1-h6):lang(language)$('div:lang(en-us)')选取指定的语言元素:not(selector)$('a:not(.active)')选择不匹配.active
选择器的a
元素:target$(':target')选择处于目标状态的元素(锚链接目标元素):hidden$(':hidden')选择处于隐藏的状态:visible$(':visible')选择处于可见状态的元素。:animated$(':animated')选取正在应用动画效果的元素(只对通过jq方法添加动画有效)
2.5子元素过滤器
tag:first-child
$('div p:first-child')
选择作为其父元素第一个子元素的p
元素tag:last-child
$('div p:last-child')
选择作为其父元素最后一个子元素的p
元素tag:first-of-type
$('p:first-of-type')
选择几个同辈p
元素中的第一个tag:last-of-type
$('p:last-of-type')
选择几个同辈p
元素中的最后一个tag:nth-child(n)
$('p:nth-child(2)')
选择作为其父元素正数第2
个子元素的所有p
元素tag:nth-last-child(n)
$('p:nth-last-child(2)')
选择作为其父元素倒数第2
个子元素的所有p
元素tag:nth-of-type(n)
$('p:nth-of-type(1)')
选择几个同辈p
元素中的正数第1
个tag:nth-last-of-type(n)
$('p:nth-last-of-type(1)')
选择几个同辈p
元素中的倒数第1
个tag:only-child
$('p:only-child')
选择作为其父元素唯一子元素的p
元素tag:only-of-type
$('p:only-of-type')
选择同辈元素中唯一一个标签为p
的元素提示:tag:nth-child(n),tag:nth-last-child(n)和tag:nth-of-type(n)中的n可以替换成even|odd,或者表达式,比如:Xn+Y。
2.6 内容过滤器
tag:contain(text)
$('div:contain("hello")')
选择匹配元素集合中包含指定文本的所有div
元素tag:empty
$('div:empty')
选择所有没有子元素的div
元素(包括文本节点)tag:has(selector)
$('div:has(p)')
选择所有子元素中包含p
元素的div
元素tag:parent
$('div:parent')
选择匹配元素集合中包含子元素的所有div
元素(包括文本节点)
2.7 选取表单元素
jQuery提供了一些专门为表单设计的选择器,用于快速访问表单元素。
:text
$(':text ')
选择所有文本字段(type="text"
,或没有写type
属性的input
元素):password
$(':password')
选择所有密码字段(type="password"
):submit
$(':submit ')
选择所有提交按钮(type="submit"
):reset
$(':reset ')
选择所有重置按钮(type="reset"
,)选取type类型为reset的button元素:button
$(':button ')
选择所有其他按钮(type="button"
):checkbox
$(':checkbox')
选择所有复选按钮(type="checkbox"
):radio
$(':radio ')
选择所有单选按钮(type="radio"
):file
$(':file ')
选取type类型为file的input元素:image
$(':image ')
选择所有图片按钮(type="image"
):input
$(':input ')
选择所有的表单元素(input,select,textarea,button
):enabled
$(':enabled ')
选择处于可用状态的元素:disabled
$(':disabled ')
选择处于不可用状态的元素(button, input, optgroup, option, select, textarea
):selected
$(':selected')
选择处于被选中状态的option
元素:focus
$(':focus ')
选择处于焦点状态的元素:checked
$(':checked ')
选择处于选中状态的checkbox
,radio
,option
元素
6. 使用context提高检索效率先前我们选取页面中的元素时,不可避免的要检索页面中的所有元素,这样就降低了检索的效率。这不是我们想要的,能不能在我们指定的的范围中检索我们想要获取的元素。下面的选择器会在id属性值为box的元素中查找p元素,而不是在整个文档中查找: $('p', '#box')后代选择器也可以像上面那样写: $('#box p') // 等价于 $('p', '#box')
阅读全文
0 0
- jQuery的常用选择器
- jquery的常用选择器
- jquery 常用的选择器
- jQuery常用的选择器
- Jquery 常用的 选择器 归纳
- [转]jquery 常用的选择器
- 不常用的jQuery选择器
- 三个最常用的CSS,jquery选择器
- 常用的Jquery选择器/自带事件
- 在jQuery中 常用的选择器介绍
- html和jQuery常用的选择器
- html和jQuery常用的选择器
- jQuery初识,常用的选择器、Ajax
- jQuery中常用基本选择器的使用方法
- JQuery常用选择器
- jquery常用选择器
- jquery常用选择器
- JQuery常用选择器总结
- 使用欧几里得算法求两个自然数的最大公约数
- Linux-破晓
- 用SQL语句,删除掉重复项只保留一条
- 二叉搜索树
- webView 离线缓存机制
- jQuery常用的选择器
- 9.8
- action输出from标签形成提交表单页面
- 如何构建高效测试团队,你必须知道的11招!
- jsp中的内置对象与servlet的内置对象的联系与区别
- pat 乙级 1053. 住房空置率 (20)
- $——jquery小结
- php基础学习day2
- 排序算法·冒泡排序