当前位置:首页 > Js/Jquery

jQuery再学习之二、jQuery选择器

happyfhb13年前 (2013-05-16)Js/Jquery1972
摘要:前言jQuery选择器非常非常强大而且灵活,要完全掌握它是需要狠下一番功夫的。当然,掌握了主要的部分后,其它的了解就好,因为一些比较偏的毕竟用得少,而且可以有其它方法来实现。…

前言

jQuery选择器非常非常强大而且灵活,要完全掌握它是需要狠下一番功夫的。当然,掌握了主要的部分后,其它的了解就好,因为一些比较偏的毕竟用得少,而且可以有其它方法来实现。

选择器

1          基本选择器

1.1        #id选择器,通过元素的id来查找对象,

例:$("#txtTime")  

查找idtxtTime的元素

1.2        html标签选择器,通过html标签来查找对象,例:

$("div")

查找标签为div的所有元素

1.3        .css类选择器,通过元素使用的css类名来查找对象,例:

$(".title")

查找css类名为title的元素

1.4        *,选取所有元素,例:$("*")

1.5        xx,xx,xx多选择器,多个选择器一起使用(逗号分隔),例:

$("div,#txtname")

查找所有的div元素和idtxtName的元素

2          层级关系选择器

2.1        在所有子孙元素中匹配(使用空格),例:

$("body div")

查找body元素下的所有子孙节点中的div元素

2.2        在所有子元素中匹配(使用>号),例:

$("body>div");

查找body元素下所有儿子节点中的div元素

3          简单条件选择器

3.1        :not(…) :非选择器,祛除匹配的元素,例:

$("div:not(.txtRed)");

查找所有的div元素,并排除css类名为txtReddiv元素

3.2        :eq(index) :匹配一个给定索引值的元素,例:

$("div:eq(1)");

查找所有div元素,并只取查找到的元素数组的索引号为1div元素

3.3        :gt(index) :匹配大于给定索引值的元素,例:

$("div:gt(1)");

查找所有div元素,并取查找到的元素数组的索引号大于1div元素

3.4        :lt(index) :匹配小于给定索引值的元素,例:

$("div:lt(1)");

查找所有div元素,并取查找到的元素数组的索引号小于1div元素

3.5        :contains(text) :匹配包含给定文本的元素,例:

$("div:contains('name')");

查找所有div元素,并取查找到的元素包含name文本的div元素

3.6        :hidden:visible :匹配所有隐藏的、可见的元素,例:

$("div:hidden");

查找所有div元素,并取所有隐藏了的div元素

4          属性选择器

4.1        […] :匹配包含给定属性的元素,例:

$("div[id]")

查找包含id属性的div元素

4.2        [attribute(=/!=/^=/$=/*=)value] :匹配给定的属性值(等于、不等于、开头为、结束为、包含)给定的value值,例:

$("div[id='title']")

查找id等于titlediv注意:值应该用引号括起来,如’value’

4.3        […][…][…] :多属性联合使用,例:

$("div[id='txt'][class='title']")

查找idtxtclasstitlediv

$("input[type='checkbox'][checked='true']")

查找所有的被勾选了的复选框

5          查找选择器

5.1        $("...").children([]) 获取所有匹配元素的儿子节点的匹配元素,例:

$("body").children().length

获取body元素的所有儿子节点元素

$("body").children("div").length

获取body元素的所有儿子节点元素中的div元素

5.2        $("...").closest("...") : 从元素本身开始,逐级向上查找匹配的元素,并返回最新查找到的元素,例:

$("#dd").closest("div").html()

查找iddd的元素的最近的上级div元素

5.3        $("...").find("...") 查找元素下的匹配元素(所有子孙节点),例:

$("body").find("div").length

获取body节点下的所有div元素

5.4        $("...").parent() 获取元素的父亲节点元素,例:

$("#yy").parent().html()

获取idyy的节点的父亲节点

5.5        $("...").parents("...") 获取元素的所有祖先节点或其中的匹配节点,例:

$("#yy").parents().length

获取idyy的节点的所有祖先节点

$("#yy").parents("body").html()

获取idyy的节点的祖先节点为body标签的元素


扫描二维码推送至手机访问。

版权声明:本文由海海日记-冯海滨博客发布,如需转载请注明出处。

本文链接:http://www.fenghaibin.com/?id=1076

返回列表

没有更早的文章了…

下一篇:jquery的table表格在指定行后添加新行

“jQuery再学习之二、jQuery选择器 ” 的相关文章

jquery的table表格在指定行后添加新行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META…

jquery easyui datebox 获取时间

$("#dd").datebox("getValue");当然这种方式不是太符合我们习惯,那么我们可以给它添加一个事件监听,在datebox onSelect 日期选中后,自动为input id="dd" type="text…

easyui中combobox的值改变onchang事件

今天在公司里,那jquery中的easy-ui-里面的combobox,真的郁闷死了!    把郁闷的事情记下来,下次就不会犯错了!…

js的replace实现全部替换的方法

<script language="javascript">    function change(){     var str = "aca…

无比纠结的html转移

最近做jqueryeasyui的一个项目被html转义困扰主要难点在于换行符和特殊符号。那 textarea 为列子提交服务器前用escape编码服务器接收到编码数据后 解码 然后 解码前.Replace("+", "%2b")//将+号在编码&nb…

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。