当前位置:首页 > 开发 > Web前端 > 前端 > 正文

jq入门--选择器

发表于: 2015-11-13   作者:互联网   来源:转载   浏览次数:
摘要: 选择器是JQuery一大特色,所有的DOM操作、事件操作、Ajax操作都离不开选择器。熟练掌握JQuery的选择器,可以节省很多代码,很大程序上简化我们的脚本编程工作。 JQuery的选择器很类似于样式表的选择器。 JQuery选择器的特点: 1.简化代码编写 $("#标记ID")相当于document.getElementById(&q

选择器是JQuery一大特色,所有的DOM操作、事件操作、Ajax操作都离不开选择器。熟练掌握JQuery的选择器,可以节省很多代码,很大程序上简化我们的脚本编程工作。 
JQuery的选择器很类似于样式表的选择器。 

JQuery选择器的特点: 
1.简化代码编写 
$("#标记ID")相当于document.getElementById("标记ID"),是通过元素id来获取元素对象。 
$("标记名称")相当于document.getElementByTagName("标记名称"),是通过元素名称来获取元素组。 

2.隐式迭代 
$("标记名称").css("background-color","red"); 
“$("标记名称")”代表页面中一组元素; 
$("标记名称").css("background-color","red")则是为这组元素中每个元素的样式都加上红色背景。 
JQuery自动迭代每个元素,这就免去了我们编写代码编历每个元素对象的操作了。 

3.无需判断对象是否存在 
如果页面上不存在id为test的DOM 元素,$("#test").css("background-color","red")不会产生任何异常,而document.getElementById("test").style.backgroundColor='red'就会产生未找到对象的异常。 

JQuery选择器的分类:基本选择器,层次选择器,过滤选择器,表单选择器 

一、基本选择器: 
1. #ID选择器:根据给定的ID匹配一个元素 
$("#one")选取id为one的元素 
$("#one").css("background","#bbffaa"); 



《图1》 

2. .class选择器:根据class名选择匹配的元素 
$(".mini")选取class为mini的元素 
$(".mini").css("background","#bbffaa"); 




《图2》 

3.标签选择器:根据标签名选择元素 
$("div")选取所有div元素 
$("div").css("background","#bbffaa"); 




《图3》 

4.*选择器:选择所有的元素 
$("*")选取所有的元素 
$("*").css("background","#bbffaa"); 




《图4》 
(包括body在内的所有元素) 

5.selector1,selector2,selector3...selectorN :返回指定选择器的元素 
$("span,#two")选取所有的span标签元素和id=two的元素。 
$("span,#two").css("background","#bbffaa"); 




《图5》 

二、层次选择器 
1.$("ancestor descendant"):选取ancestor元素后所有的descendant元素: 
$("body div"):选取body元素下所有的div元素 
$("body div").css("background","#bbffaa"); 




《图6》 
(外层的DIV 和内层的DIV一起都被选中,即页面body中的有的DIV一起被选中) 

2.$("parent > child"):选取parent元素下的第一级child。 
$("body > div"):选取body元素下所有的div元素 
$("body > div").css("background","#bbffaa"); 




《图7》 
(只选择body下第一级DIV元素) 

三、过滤选择器 
(一)基本过滤 
1. :fist选取第一个元素 
$("div:first"):选取所有div中的第一个 
$("div:first")..css("background","#bbffaa"); 




《图8》 

2. :last选取最后一个元素 
$("div:last"):选取所有div中的最后一个 
$("div:last").css("background","#bbffaa"); 




《图9》 

3. :not(selector)除去指定的选择器外的元素 
$('div:not(.one)'):选取class不是.one的div元素 
$('div:not(.one)').css("background","#bbffaa"); 




《图10》 

4. :even选取索引号是偶数的元素(索引从0开始) 
$('div:even'):选取索引号是偶数项的div元素 
$('div:even').css("background","#bbffaa"); 




《图11》 

5.dd选取索引号是奇数的元素(索引从0开始) 
$('div:odd'):选取索引号是奇数项的div元素 
$('div:odd').css("background","#bbffaa"); 




《图12》 

6. :eq(index)选取第index个元素(索引从0开始) 
$('div:eq(3)'):选择 索引等于 3 的元素 
$('div:eq(3)').css("background","#bfa"); 




《图13》 

7. :gt(index)选取索引号大于index的元素(索引从0开始) 
$('div:gt(3)'):选择 索引大于 3 的元素 
$('div:gt(3)').css("background","#bfa"); 




《图14》 

8. :lt(index)选取索引号小于index的元素(索引从0开始) 
$('div:lt(3)'):选择 索引小于 3 的元素 
$('div:lt(3)').css("background","#bfa"); 




《图15》 

9. :animated选取当前正在执行动画的元素 
$(':animated'):选择 当前正在执行动画的所有元素. 
$(':animated').css("background","#bfa"); 




《图16》 

(二)内容过滤 
10. :contains(text)选取包含文本text的元素 
$('div:contains(di)'):选取含有文本"di"的div元素. 
$('div:contains(di)').css("background","#bbffaa"); 




《图17》 

11. :has(selector)选取含有选择器所匹配的元素的元素 
$('div:has(.mini)')选取含有class为mini元素 的div元素. 
$('div:has(.mini)').css("background","#bbffaa"); 




《图18》 

12. :empty选取不包含子元素(包括文本元素)的元素 
$('div:empty'):选取不包含子元素(或者文本元素)的div空元素. 
$('div:empty').css("background","#bbffaa"); 



《图19》 

13. :parent选取包含子元素(包括文本元素)的元素 
$('div:parent'):选取含有子元素(或者文本元素)的div元素. 
$('div:parent').css("background","#bbffaa"); 




《图20》 

(原创:灰灰虫的家http://hi.baidu.com/grayworm) 
(三)可见性过滤 
14. :hidden选取所有不可见元素,包括<input type='hidden'>,<div style="display:none">,<div style="visibility:hidden"> 
$('div:visible'):选取所有可见的元素. 
$('div:visible').css("background","#FF6500"); 



《图21》 

15. :visible选取所有可见元素 
$('div:hidden'):选取所有不可见的元素.包括<input type="hidden"/>. 
$('div:hidden').show(3000).css("background","#bbffaa"); 




《图22》 

(四)属性过滤 
16. :[attribute]选取拥有此属性的元素 
$('div[title]'):选取含有 属性title 的div元素. 
$('div[title]').css("background","#bbffaa"); 




《图23》 

17. :[attribute=value]选取属性值为value的元素 
$('div[title=test]'):选取 属性title值等于 test 的div元素 
$('div[title=test]').css("background","#bbffaa"); 




《图24》 

18. :[attribute!=value]选取属性值不为value的元素 
$('div[title!=test]'):选取 属性title值不等于 test 的div元素 
$('div[title!=test]').css("background","#bbffaa"); 




《图25》 

19. :[attribute^=value]选取属性值以value开始的元素 
$('div[title^=te]'):选取 属性title值 以 te 开始 的div元素 
$('div[title^=te]').css("background","#bbffaa"); 



《图26》 

20. :[attribute$=value]选取属性值以value结尾的元素 
$("div[title$=est]"):选取 属性title值 以 est 结束 的div元素 
$("div[title$=est]").css("background","#bbffaa"); 




《图27》 

21. :[attribute*=value]选取属性值含有value的元素 
$("div[title*=es]"):选取 属性title值 含有 es 的div元素 
$("div[title*=es]").css("background","#bbffaa"); 




《图28》 

22. :[selector1][selector2]...[selectorN]选取同时满足select1至selectorN的元素 
$("div[id][title*=es]"):组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有 es 的元素 
$("div[id][title*=es]").css("background","#bbffaa"); 




《图29》 

(五)子元素过滤 
23. :nth-child(index/even/odd)选取每个父节点下第index个子元素、偶数元素或奇数元素。 
$('div.one :nth-child(2)'):选取每个父元素下的第2个子元素 
$('div.one :nth-child(2)').css("background","#bbffaa"); 




《图30》 

24. :first-child选取每个父元素下的第一个子元素 
$('div.one :first-child'):选取每个父元素下的第一个子元素 
$('div.one :first-child').css("background","#bbffaa"); 




《图31》 

25. :last-child选取每个父元素下的最后一个子元素 
$('div.one :last-child'):选取每个父元素下的最后一个子元素 
$('div.one :last-child').css("background","#bbffaa"); 



《图32》 

26.nly-child选取只有一个子元素的元素。 
$('div.onenly-child'):如果父元素下的仅仅只有一个子元素,那么选中这个子元素 
$('div.onenly-child').css("background","#bbffaa"); 




《图33》 

(六)表单对象属性过滤 
27. :enabled选取所有可用的元素 
$("#form1 input:enabled") :选取所有可用元素 
$("#form1 input:enabled").val("这里变化了!"); 




《图34》 

28. :disabled选取所有不可用的元素 
$("#form1 input:disabled"):选取所有不可用元素 
$("#form1 input:disabled").val("这里变化了!"); 




《图35》 

29. :checked选取所有被选中的元素(radio,checkbox中的checked) 
$("input:checked"):选取所有被选中的元素(单选按钮和复选框) 

30. :selected选取被选中的选项元素(select中的option=selected) 
$("select :selected"):选取所有被选中的列表项 
如: 
$("select :selected").each(function () { 
str += $(this).text() + ","; 
}); 
编历每个选中项,并把项的内容拼接到字符串str中。 

四、表单选择器 
1. :input选取所有的<input><textarea><select><button>等表单元素 
2. :text选取所有的单行文本框 
3. :password选取密码框 
4. :radio选取所有的单选按钮 
5. :checkbox选取所有的复选框 
6. :submit选取所有的提交按钮 
7. :image选取所有的图片按钮 
8. :reset选取所有的重置按钮 
9. :button按钮所有的按钮 
10. :file选取所有的上传域 
11. :hidden选取所有的不可见元素(前面讲过“过滤选择器-14”) 

jq入门--选择器

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,
嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库
1、在VS中新建jq项目:   新建web窗体时选择第二个:      将系统生成的多余文件夹删掉,仅留
作者: 阮一峰 日期: <a href="http://www.ruanyifeng.com/blog/2011/07/" style="list-style-t
什么是插件   插件(plugin)是JQuery的扩展(Extension),以JQuery的核心代码为基础,是一种遵循一
1、在VS中新建jq项目:   新建web窗体时选择第二个:      将系统生成的多余文件夹删掉,仅留
直接上代码。 package org.autumn.rcp.learn; import java.util.Calendar; import java.util.regex.P
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号