跟我学jQuery(四) 无所不能的选择器2-优快云博客

本文详细介绍了jQuery中的各类选择器，包括基本的选择器如ID选择器、类选择器，以及更高级的选择器如属性选择器、层级选择器等。通过丰富的实例帮助读者更好地理解和运用jQuery选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跟我学jQuery教程目录:

接着上一次内容我们继续讲解剩余的选择器

上次有很多人反映不会用我写的哪个例子,现在我来图解一下:

比如:查找指定的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

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 + next	prev和next是两个同级别的元素. 选中在prev元素后面的next元素.	$("#hibiscus+img")选在id为hibiscus元素后面的img对象.
prev ~ siblings	选择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")

9.表单对象属性选择器

选择器	说明	举例
:checked	匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)	$("input:checked")//查找所有选中的复选框元素
:disabled	匹配所有不可用元素	$("input:disabled")
:enabled	匹配所有可用元素	$("input:enabled")
:selected	匹配所有选中的option元素	$("select option:selected")//查找选中的选项元素

呼呼!~~过滤器实在太多了,写的头发晕,估计大家看的时候一定是晕的,当然对于这些对象,不一定要死背,大致了解一下,用到得时候在看看,但是一句话,熟能生巧,用多了,自然有印象.