Jquery 选择器 详解
2016-04-03 14:12
706 查看
在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery
各种在线工具地址:http://www.ostools.net/
一、基本选择器
二、层级选择器
三、基本过滤选择器
四、内容过滤选择器
五、属性过滤选择器
六、子元素过滤选择器
七、表单对象属性过滤选择器
八、选择器要注意的地方
View Code
各种在线工具地址:http://www.ostools.net/
一、基本选择器
$("#div1").html("hello world 1"); //根据id匹配元素(a) $(".c1").html("hello world 2"); //根据Yclass匹配元素(b) $("span").html("hello world 3"); //根据元素名称匹配 (c) $("span,div.c1").html("hello world 4"); //匹配页面所有的span 和class=c1的div(b c) $("*").html("hello world 5"); //匹配页面所有元素,也包含body
二、层级选择器
$("body span").html("hello world 1"); //选取body中所有的span(a b d) $("body>span").html("hello world 2"); //选取body元素的子span元素(a b) $("span.c1+div").html("hello world 3"); //选取class为c1的span的下一个div元素,注意是同级元素 $("span.c1").next().html("hello world 3"); //跟上行效果相同 (c) $("span.c1~div").html("hello world 4"); //选取class为c1的span的后面的所有div $("span.c1").nextAll().html("hello world 4"); //跟上行效果相同(c e)
三、基本过滤选择器
$("div:first").html("hello world 1"); //选取所有div中的第一个div $("span:last").html("hello world 2"); //选取所有span中的最后一个 $("span:not(.c1)").html("hello world 3"); //选取除class为c1的span外的所有span $("span:even").html("hello world 4"); //选取索引为偶数的span,索引从0开始 $("span:odd").html("hello world 5"); //选取索引为奇数的span,索引从0开始 $("span:eq(2)").html("hello world 6"); //选取指定索引的span,索引从0开始 $("span:gt(0)").html("hello world 7"); //选取大于指定索引的span,不包含指定索引 $("span:lt(2)").html("hello world 8"); //选取小于指定索引的span,不包含指定索引 $(":header").html("hello world 9"); //选取页面中所有的标题元素 h1 h2 h3...
四、内容过滤选择器
$("span:contains(aa)").html("hello world 1"); //选取内容包含aa的span元素 $("span:empty").html("hello world 2"); //选取空的span元素 $("div:has(span)").html("hello world 3"); //选取包含span的div元素 $("span:parent").html("hello world 4"); //选取包含子元素的span元素,包含文本
五、属性过滤选择器
$("span[id]").html("hello world 1"); //选取有属性id的span元素 $("span[id=span2]").html("hello world 2"); //选取属性id等于span2的span元素 $("span[id!=span2]").html("hello world 3"); //选取属性id不等于为span2的span元素 $("span[id^=span]").html("hello world 4"); //选取属性id以span开始的span元素 $("span[id$=2]").html("hello world 5"); //选取属性id以2结尾的span元素 $("span[id*=an]").html("hello world 6"); //选取属性id包含an的span元素 $("span[id*=an][class$=2]").html("hello world 6"); //选取属性id包含an并且class以结尾的span元素
六、子元素过滤选择器
$("div.c1 :nth-child(1)").html("hello world 1"); //选取class等于c1的div的指定索引子元素 $("div.c1 :nth-child(even)").html("hello world 2"); //选取class等于c1的div的偶数子元素 $("div.c1 :nth-child(odd)").html("hello world 3"); //选取class等于c1的div的奇数子元素 $("div.c1 :first-child").html("hello world 4"); //选取class等于c1的div的第一个子元素 $("div.c1 :last-child").html("hello world 5"); //选取class等于c1的div的最后一个子元素 $("div.c1 :only-child").html("hello world 6"); //选取class等于c1的div只有一个子元素的子元素
七、表单对象属性过滤选择器
$("#form1 input:enabled").val("hello world 1"); //选取form表单中没有禁用的文本框 $("#form1 input:disabled").val("hello world 2"); //选取form表单中没有禁用的文本框 $("#form1 input:checked").attr("checked",false); //选取form表单中选的复选框 $("select option[selected]").each(function () { //选取 下拉框 选中的 option alert($(this).val()); });
八、选择器要注意的地方
<body> <div id="div#1">aaaaaaaaaaa</div> <div class="c[1]">bbbbbbbbb</div> <div class="c1"> <div name="div">ccccccccc</div> <div name="div">ddddddddd</div> <div name="div">eeeeeeeee</div> <div class="c1" name="div">fffffffff</div> </div> <div class="c1" name="div">gggggggg</div> <div class="c1" name="div">hhhhhhhh</div> </body> $(function () { //有时在id或是class中有一些特殊字符如 [ 等,需要用反斜杠进行转义 $("#div\\#1").html("hello world 1"); $(".c\\[1\\]").html("hello world 2"); //有没有空格的区别 //有空格是选取class等于c1的div里面的name等于div的div(c d e f) $(".c1 [name=div]").html("hello world 3"); //没有空格是选取class等于c1并且name等于div的div (f g h) $(".c1[name=div]").html("hello world 4"); });
View Code
相关文章推荐
- jQuery源码浅析
- JavaScript之jQuery-6 jQuery 类数组的操作
- JavaScript之jQuery-5 jQuery 动画效果(隐藏和显示、自定义动画、并发与排列效果)
- C#+一般处理程序+jquery.uploadify 上传XML文件并插入数据库中
- jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习
- JavaScript之jQuery-4 jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)
- jQuery中的Deferred和promise 的区别
- DOM对象 与 jQuery对象 之间的相互装换
- jquery中attr和prop的区别
- jQuery实现复制到剪切板
- jQuery qrcode生成二维码的方法
- .NET+Jquery+jquery.ztree 实现树状角色权限设置
- 240个jquery插件(转)
- 10分钟-jQuery动画特效
- seajs 2.3.0 加入jquery
- 【JQuery】delay()方法
- a毛 jquery 学习记 2(下) 基础核心
- jQuery qrcode生成二维码的方法
- jQuery中的Deferred和promise 的区别
- 【JQuery】stop()函数