jQuery 选择器
2016-07-30 06:25
381 查看
1、jQuery 基本选择器
以上包含了一些常用的jQuery基本选择器
选择器 | 实例 | 选取 |
---|---|---|
* | $("*") | 所有元素 |
#id | $("#lastname") | id="lastname" 的元素 |
.class | $(".intro") | 所有 class="intro" 的元素 |
element | $("p") | 所有 <p> 元素 |
.class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
:first | $("p:first") | 第一个 <p> 元素 |
:last | $("p:last") | 最后一个 <p> 元素 |
:even | $("tr:even") | 所有偶数 <tr> 元素 |
:odd | $("tr:odd") | 所有奇数 <tr> 元素 |
:eq(index) | $("ul li:eq(3)") | 列表中的第四个元素(index 从 0 开始) |
:gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
:lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
:not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
:header | $(":header") | 所有标题元素 <h1> - <h6> |
:animated | 所有动画元素 | |
:contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
:empty | $(":empty") | 无子(元素)节点的所有元素 |
:hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
:visible | $("table:visible") | 所有可见的表格 |
s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
[attribute] | $("[href]") | 所有带有 href 属性的元素 |
[attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
[attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
[attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
:input | $(":input") | 所有 <input> 元素 |
:text | $(":text") | 所有 type="text" 的 <input> 元素 |
:password | $(":password") | 所有 type="password" 的 <input> 元素 |
:radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
:checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
:submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
:reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
:button | $(":button") | 所有 type="button" 的 <input> 元素 |
:image | $(":image") | 所有 type="image" 的 <input> 元素 |
:file | $(":file") | 所有 type="file" 的 <input> 元素 |
:enabled | $(":enabled") | 所有激活的 input 元素 |
:disabled | $(":disabled") | 所有禁用的 input 元素 |
:selected | $(":selected") | 所有被选取的 input 元素 |
:checked | $(":checked") | 所有被选中的 input 元素 |
2、jQuery 选择器补充:
层叠选择器:$("A B") 查找A元素下面的所有子节点,包括非直接子节点$("A>B") 查找A元素下面的直接子节点$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点3、牛刀小试(是骡子是马拉出来溜溜)
$("form input") 选择所有的form元素中的input元素$("#main > *") 选择id值为main的所有的子元素$("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素$("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签$("input:not(:checked) + span") 过滤掉:checked的选择器的所有的input元素$("div:has(p)") 选择所有含有p标签的div元素$("td:parent") 选择所有的以td为父节点的元素数组$("div[id]") 选择所有含有id属性的div元素$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素$("input[name^='news']") 选择所有的name属性以'news'开头的input元素$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素$("input[name*='man']") 选择所有的name属性包含'news'的input元素$("input[id][name$='man']") 得到所有的含有id属性并且那么属性以man结尾的元素$("ul li:nth-child(2)") 返回ul下面的第二个li$("ul li:nth-child(odd)"), 返回ul所有奇数li的数组$("ul li:nth-child(3n + 1)")$("div span:first-child") 返回所有的div元素的第一个子节点的数组$("div span:last-child") 返回所有的div元素的最后一个节点的数组$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组$("select option:selected") 选择所有的select 的子元素中被selected的元素$("input[@ name =S_03_22]").parent().prev().text() 选取一个 name 为”S_03_22″的input text框的上一个td的text值$("input[@ name ^='S_']").not("[@ name $='_R']") 名字以”S_”开始,并且不是以”_R”结尾的$("input[@ name =radio_01][@checked]").val(); 一个名为 radio_01的radio所选的值
相关文章推荐
- jQuery 删除行(带跨行的表格)
- jQuery浏览器兼容模块support详解
- delay()--一个很常用的jquery方法,制作页面动画效果的利器
- focus()和blur()--jquery的表单元素常用方法
- 避免jQuery名字冲突--noConflict()方法
- jquery ajax 实例
- jquery遍历函数.li ???
- JQuery动画效果
- 基于jQuery的插件
- JQuery Uploadify v3.2.1 上传图片并预览(基于spring mvc框架开发)
- 创建JQuery检测元素是否含有指定属性hasAttr的原型
- 【代码笔记】HTML+CSS+JAVAScript+jQuery滑过图标下滑列表
- JQuery对选择器的筛选API
- JQuery DOM操作、 事件和动画
- jquery的初始化的方法
- JQuery Datatables Columns API 参数详细说明
- jquery中的.detach()与.remove()的区别
- jQuery中each的break和continue
- jquery AJAX 实现文件上传
- 常见浏览器的宽高代码写法!有原生JavaScript和jquery两种写法-------------------------------以及我的个人网站