Jquery 万能选择器

来源：互联网发布：淘宝颜色分类图片大小编辑：程序博客网时间：2024/06/04 19:11

跟我学jQuery无所不能的选择器

一.区分DOM和jQuery包装集

在jQuery中要想获取一个对象,都要从一个美元符号和一段圆括号开始:$(),有这样一个函数我们就可以通过(css,XPath,id)来获取对象.

以往我们通过javascript来获取对象有如下几种取法,但取出来的是一些DOM对象

var obj1 = document.getElementById("txtName"); //获取一个指定id为txtName的DOM对象                var obj2 = document.getElementsByName("chkItem"); //获取name为chkItem的一组元素                var obj3 = document.getElementsByTagName("a");//获取标签元素为a的一组元素

获取的对象多是DOM对象,而DOM对象大家也知道其方法和属性是非常有限的.

而在jQuery中我们要获取上述的对象是非常简单的

var obj1 = $("#txtName"); //获取ID为txtName的对象                var obj2 = $("input:checkbox[@name='chkItem]"); //获取name为chkitem的一组复选框                var obj3 = $(".bgRed"); //获取class为bgReg的元素                var obj4 = $("a");//获取所有的a元素

当然在jQuery里获取对象不止是这些,还有更多,我们下面就会讲到,现在问题来了?有人会问,用普通的JavaScript和jQuery获取的对象是一样的吗?

答案:不是,JavaScript返回的是DOM对象,jQuery返回的是jQuery包装集,封装了更多的属性和方法

有人说我能不能用DOM对象去使用jQuery的方法呢?可以但必须要把这个DOM对象封装成jQuery包装集

var obj1 = document.getElementById("txtName"); //这里是一个DOM对象                var obj2 = $(obj1);//把DOM对象通过$()工厂函数转换成jQuery包装集了

有人会说我怎么区分这2个对象呀,如果你是VS2008的使用者,通过智能感应就可以检测出来

一看obj1提示出来的信息就知道是DOM的属性,我们在测试一下obj2 发现方法明显多出了很多,而且是DOM里面没有的

接下来我们要进行的是如何把一个jQuery的包装集转换成DOM对象呢?

由于jQuery包装集是一个集合,要访问单个元素就需要用到索引

var obj4 = $("a")[0];//获取所有的a元素一个元素

这里要注意的是通过索引返回来的对象就变成DOM对象了.区分了两者的概念对我们学习就会起到一个突进的作用,俗点说用jQuery就不要再去想JavaScript了.

二.jQuery选择器

在DOM里面我们要选择元素用getElementById,getElementByName进行选择,在jQuery中用一个$()工厂函数进行选择元素,取值的方式有几十种,而且灵活多变,有人会问$这个符号代表的是啥意思呀!$就是jQuery的简写

var obj1 = $("a");        var onj2 = jQuery("a");//两者的含义是一模一样的,简写形式而已

三.彻底掌握jQuery选择器

既然标题叫无所不能的选择器,我就彻底的来演示一遍.在讲解各种选择器的各种表达式之前,我要先引入2个jQuery方法,也就是上一讲很多人不明白的2个函数

addClass(样式表名) 说明:给指定的jQuery包装集添加一个指定的样式

removeClass(样式表名) 说明:删除指定的jQuery包装集的样式,例子可以看上一讲的例子

现在我要模仿<<jQuery实战>>这本书里面的一个选择模拟器[哈哈!支持国产],当我在指定的一个文本框中输入选择表达式,然后把选中的元素样式改变.

<html xmlns="http://www.w3.org/1999/xhtml">                <head>                    <title></title>                    <style type="text/css">                .myDiv        {            font-size:14px;            color:Black;            border-color:Black;            border-width:1px;            border-style:solid;        }        .changeDiv        {            font-size:18px;            color:Blue;            border-color:Red;            border-width:1px;            border-style:solid;        }            </style>                    <script language="javascript" type="text/javascript" src="jquery-1[1].3.2-vsdoc2.js"></script>         
<script language="javascript" type="text/javascript">
function ChangeCss() {
              var strSel = $("#txtSelect").val(); //val()获得第一个匹配元素的当前值
 $("*").removeClass("changeDiv"); //删除页面中所有classic为changeDiv的样式,*代表的是这个页面元素
 $(strSel).removeClass("myDiv").addClass("changeDiv"); //删除最初样式,添加新样式
$("#showSelect").html("代码为:$(/"" + strSel + "/")");//给指定的jQuery添加内容   
          }
 
</script>        
</head>        
<body>        
<form id="form1">        
<p>请输入选择表达式(注意:ID选择就填写#id名,为了出现效果每次最好刷新一下页面):<input id="txtSelect" type="text" /><input id="btOk" type="button" value="确定" onclick="ChangeCss();" /></p>        
<p id="showSelect"></p>        
<span>span元素</span>        
<div class="myDiv" id="testDiv1">        
我ID是testDiv1,是一个DIV元素,class为myDiv
</div>        
<div class="myDiv" id="testDiv2">        
我ID是testDiv3,是一个DIV元素,class为myDiv
</div>        
<div id="testDiv3">        
我ID是testDiv3,是一个DIV元素,没有class
</div>        
<div id="testDiv4">        
<p>        
我ID是testDiv4,是一个DIV元素,没有class
</p>        
</div>        
<div id="testDiv5">        
我ID是testDiv5,是一个DIV元素,没有class
</div>        
<h1>标题1</h1>        
<p>段落1</p>        
<h2>标题2</h2>        
<p>段落2</p>        
<input id="Checkbox1" type="checkbox" checked="checked" />运动员
<input id="Checkbox2" type="checkbox" />歌唱家
<input id="Checkbox3" type="checkbox" />舞蹈家
<input id="Checkbox4" type="checkbox" checked="checked" />科学家
<input id="Checkbox5" type="checkbox" />工人
<div style="background-color:Yellow; width:300px; height:100px">        
</div>        
</form>        
</body>        
</html>

根据jQuery的API帮助文档选择器大致可以分为以下几种

1.基本选择器

选择表达式说明举例#id根据给定的ID匹配一个元素用#$("#testDiv2") 获取ID为testDiv2的元素.class根据给定的类匹配元素(也就是取class的值)用.$(".myDiv") 获取class为myDiv的一组元素element根据给定的元素名匹配所有元素,直接写上元素名例如(p,a,input,div等)$("div") 获取所有的div元素selector1,selector2,selectorN将每一个选择器匹配到的元素合并后一起返回,选择器可以是id,class,element用,隔开$("#testDiv2,p")

$("p,span,div.myDiv") 获取所有的p,span和class为myDiv的元素*选择所有的元素$("*")

2.简单选择器

选择表达式说明举例:first匹配找到的第一个元素$("div:first"):last匹配找到的最后一个元素$("div:last"):eq(index)匹配一个给定索引值的元素,当然要存在才可以找得到,索引从0开始$("div:eq(1)"):gt(index)匹配所有大于给定索引值的元素$("div:gt(0)") 查找第1个以后的元素:lt(index)匹配所有小于给定索引值的元素$("div:lt(2)") 查找第一行和第二行的元素:even匹配所有索引值为偶数的元素，从 0 开始计数$("div:even")
查找第1,3,5个div:odd匹配所有索引值为奇数的元素，从 0 开始计数$("div:odd")
查找第2,4个div:not(selector)去除所有与给定选择器匹配的元素
selector为表达式,可以是属性里面的一个值$("input:not(:checked)")
查找所有未选中的input 元素[注:checked为自定义筛选选择器,后面会讲到]:header匹配如 h1, h2, h3之类的标题元素$(":header").css("background", "#EEE");
添加样式:animated匹配所有正在执行动画效果的元素暂无例子

3.内容选择器

选择表达式说明举例:contains(text)匹配包含给定文本的元素,只要里面出现即可$("p:contains('段落')")
找带有段落字样的p元素:empty匹配所有不包含子元素或者文本的空元素$("div:empty"):has(selector)匹配含有选择器所匹配的元素的元素$("div:has('p')"):parent匹配含有子元素或者文本的元素$("div:parent")

上面的第二,三类的选择器例子多加了一个标签元素比如$("p:contains('段落')"),这样做是缩小了选择范围,当然也可以直接这样写$(":contains('段落')")

12点半了,准备睡觉了,明天还得上课,先写3个类型的选择器,大家利用上面的选择模拟器尝试去用一下,熟能生巧,代码我就不提供下载了,大家直接COPY上面HTML,放入一个jQuery的js即可

比如:查找指定的ID

其实在我介绍选择器的的时候多有一个举例

4.子元素选择器

选择器说明举例:first-child匹配第一个子元素$("ul li:first-child")//在每个 ul 中查找第一个 li:last-child匹配最后一个子元素$("ul li:last-child")//在每个 ul 中查找最后一个 li:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！

可以使用:
nth-child(even)//偶数行
:nth-child(odd)//奇数行
:nth-child(3n)
:nth-child(2)//索引为2的
:nth-child(3n+1)
:nth-child(3n+2)

$("ul li:nth-child(2)")//在每个 ul 查找第 2 个li:nth-child(index/even/odd/equation)匹配其父元素下的第N个子或奇偶元素$("ul li:nth-child(2)")//在每个 ul 查找第 2 个li:only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配

如果父元素中含有其他元素，那将不会被匹配。

$("ul li:only-child")//在 ul 中查找是唯一子元素的 li

2010-01-20 10:37

5.可见性选择器

选择器说明举例:hidden匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到$("div:hidden"):visible匹配所有的可见元素

$("div:visible")//元素来匹配
$(".divH:visible")//根据class来匹配

这里我们换一个例子演示

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <style type="text/css">        .divS        {            border-color:Black;            border-width:1px;            border-style:solid;        }        .divH        {            background-color:Olive;            display:none;        }    </style>    <script language="javascript" src="jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>    <script language="javascript" type="text/javascript">        function DispShow(temp) {                            if (temp == 0)                $("div:hidden").show(); //show()是jquery中用来显示隐藏的元素                                            else if (temp == 1)                $("div:visible").hide(); //hide()是jquery中用来隐藏的元素                                            else                                $(".divH:visible").hide();//根据class来进行匹配                        }    </script></head><body>    <input type="button" value="显示元素" onclick="DispShow(0);" />    <input type="button" value="隐藏元素" onclick="DispShow(1);" />    <input type="button" value="隐藏特定元素" onclick="DispShow(2);" />    <br />    <div class="divS">一个呈现在你眼前的DIV</div>    <div class="divH">隐藏起来的的DIV</div>    <div class="divS">一个呈现在你眼前的DIV</div>    <div class="divH">隐藏起来的的DIV</div></body></html>

运行效果如下

6.属性选择器

选择器说明举例[attribute]匹配包含给定属性的元素。$("div[class]")//查找是否有class属性的div
$("div[id]")//查找是否有id属性的div[attribute=value]匹配给定的属性是某个特定值的元素$("input[name='newsletter']")//匹配input元素里是否有name属性有等于newsletter的对象[attribute^=value]匹配给定的属性是以某些值开始的元素

$("input[name^='news']")

//匹配name属性是不是有以news开头的对象[newsletter,newsboy]多算[attribute$=value]匹配给定的属性是以某些值结尾的元素$("input[name$='letter']")
//匹配name属性是不是以letter结尾例如[newsletter][attribute!=value]匹配所有含有指定的属性，但属性不等于特定值的元素。$("input[name!='newsletter']")
//找name值不等于newsletter的元素

[attribute*=value]

匹配给定的属性是以包含某些值的元素$("input[name*='man']")
//找name中是否有内容包含man例如[milkman,man-news][selector1][selector2][selectorN]复合属性选择器，需要同时满足多个条件时使用$("input[id][name$='man']")
//找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的7.层级选择器

选择器说明举例ancestor descendant

在给定的元素下匹配所有的元素(包括子元素,也包括子元素下面的子元素,通俗说:它的子子孙孙)

$("form input")//找到表单中所有的 input 元素
$(".myDiv div") 选择CSS类为myDiv的元素中的所有<div>元素.parent > child在给定的父元素下匹配所有的子元素$("form > input")//匹配表单中所有的子级input元素。
$(".myList>li") 选择CSS类为myList元素中的直接子节点<li>对象.prev + nextprev和next是两个同级别的元素. 选中在prev元素后面的next元素.$("#hibiscus+img")选在id为hibiscus元素后面的img对象.prev ~ siblings

选择prev后面的根据siblings过滤的元素
注:siblings是过滤器

$("#someDiv~[title]")选择id为someDiv的对象后面所有带有title属性的元素

5.可见性选择器

选择器说明举例:hidden匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到$("div:hidden"):visible匹配所有的可见元素

$("div:visible")//元素来匹配
$(".divH:visible")//根据class来匹配

这里我们换一个例子演示

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <style type="text/css">        .divS        {            border-color:Black;            border-width:1px;            border-style:solid;        }        .divH        {            background-color:Olive;            display:none;        }    </style>    <script language="javascript" src="jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>    <script language="javascript" type="text/javascript">        function DispShow(temp) {                            if (temp == 0)                $("div:hidden").show(); //show()是jquery中用来显示隐藏的元素                                            else if (temp == 1)                $("div:visible").hide(); //hide()是jquery中用来隐藏的元素                                            else                                $(".divH:visible").hide();//根据class来进行匹配                        }    </script></head><body>    <input type="button" value="显示元素" onclick="DispShow(0);" />    <input type="button" value="隐藏元素" onclick="DispShow(1);" />    <input type="button" value="隐藏特定元素" onclick="DispShow(2);" />    <br />    <div class="divS">一个呈现在你眼前的DIV</div>    <div class="divH">隐藏起来的的DIV</div>    <div class="divS">一个呈现在你眼前的DIV</div>    <div class="divH">隐藏起来的的DIV</div></body></html>

运行效果如下

6.属性选择器

$("input[name^='news']")

[attribute*=value]

7.层级选择器

选择器说明举例ancestor descendant

在给定的元素下匹配所有的元素(包括子元素,也包括子元素下面的子元素,通俗说:它的子子孙孙)

选择prev后面的根据siblings过滤的元素
注:siblings是过滤器

$("#someDiv~[title]")选择id为someDiv的对象后面所有带有title属性的元素

后面2个选择器非常难以理解,大家可以自己去尝试一下

8.表单选择器

选择器说明举例:button匹配所有的按钮$(":button"):checkbox匹配所有的复选框$(":checkbox"):file匹配所有的文本域$(":file"):hidden匹配所有不可见元素，或者type为hidden的元素$("input:hidden"):image匹配所有图像域$(":image"):input匹配所有 input, textarea, select 和 button 元素$(":input"):password匹配所有的密码框$(":password"):radio匹配所有单选按钮$(":radio"):reset

匹配所有重置按钮

$(":reset"):submit匹配所有提交按钮$(":submit"):text匹配所有的单行文本框$(":text")