当前位置:首页 > 开发 > 编程语言 > Java > 正文

jq入门--选择器

发表于: 2010-05-16   作者:石头的日记   来源:转载   浏览次数:
摘要: JQuery霹雳:二、选择器2010年01月08日星期五09:21(原创:灰灰虫的家http://hi.baidu.com/grayworm)选择器是JQuery一大特色,所有的DOM操作、事件操作、Ajax操作都离不开选择器。熟练掌握JQuery的选择器,可以节省很多代码,很大程序上简化我们的脚本编程工作。JQuery的选择器很类似于样式表的选择器。JQuery选择器的特点:1.简化代码编写$(
JQuery霹雳:二、选择器
2010年01月08日 星期五 09:21
(原创:灰灰虫的家http://hi.baidu.com/grayworm)
选择器是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.one nly-child'):如果父元素下的仅仅只有一个子元素,那么选中这个子元素
$('div.one nly-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”)

参考书籍:《锋利的JQuery》
(原创:灰灰虫的家http://hi.baidu.com/grayworm)

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号