jQuery--选择器详解

最新推荐文章于 2025-08-09 20:51:19 发布

原创最新推荐文章于 2025-08-09 20:51:19 发布 · 413 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #javascript

jQuery 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了jQuery中的各类选择器，包括基本选择器、层次选择器、过滤选择器等内容，并通过实例展示了如何使用这些选择器来操作DOM元素。

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

1 基本选择器

2 层次选择器

3 过滤选择器

4 内容选择器

5 可见性选择器

6 属性选择器

7 子元素过滤选择器

8 表单选择器

9 表单属性选择器

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div>
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
</div>
<span>span</span>
<input type="text" value="ahaha"></input>

</body>
<script type="text/javascript">
	/*jq选择器 优势：1不担心浏览器兼容问题 2容错机制（html的id名写错，相同情况下js报错 jq不报*/

/*基本选择器
1 id选择器
$('#id')
2 类 
$('.class') 
3 标签 
$('p')
x4 *选择器 所有的节点都添加样式 基本不会用
5 多重选择器
$('p,div')


层次选择器
e f为标签名

1 e f e的所有后代
2 e>f e的子后代（没有孙后代）
$('div>p')
3 e+next e 邻近的也就是下一个标签
$('p+span')
或者$('div').next()

4 e~sibling 把div后的所有p标签
$('div~p')
$('div').nextAll()

*/


// alert($('p+p').html());
// alert($('div').next().html());



/*
过滤选择器 ps下面省略若干$()

1 
$('p:first')
在所有p标签中的第一个p标签

p :first (注意 p后面的空格)
是第一个p的第一个子孙元素 

2
last是一样的

3 
所有p标签除了某(些)标签
p:not(".a") 

4 
偶数开始的p标签，从下标0开始计数（参照js） 所以看页面是奇数变样式
p:even

5 
与上面相反
p:odd

6 
指定位数下标(索引)标签
p:eq(3) 第四个变样式

7 
指定下标之后的所有
p:gt(2） 下标大于2

8 
与上面相反
p:lt(2)

9
选取h1-h6标签 
:header

10 
.animate({'left':'100'},10000)

选取运动的样式
:animated
 */

$('p:gt(1)').css('border','solid 10px orange');


/*

内容选择器
1 p标签内有所写文本的p标签
p:contains("内容")

2 有某子孙标签的p标签
p:has("strong")

3 选择空的标签
p:empty

4 选取含有子元素或文本内容的标签
p:parent

*/


/*
可见性选择器
1 css里div标签有 div{display:none}
上面这个div 页面就看不到它了
div:hidden

2 与上面相反
div:visible
 
 */


 /*
 属性选择器
1 [title]属性=xxx的p标签
p[title=xxx]

2属性 不写值也可以
p[title]

3还可以多属性，都符合才行&&
p[title][name=xxx]

*/


/*
子元素过滤选择器
1 选择e标签下子元素f里的第一个元素
div p:first-child

2last-child同样的用法

3只包含一个子元素的
only-child

4和eq不一样是从1开始的，根据css来的规范
子元素的第x个
nth-child(2)

还可以
nth-child(2n)偶数
nth-child(2n-1)奇
nth-child(odd)奇数
nth-child(even)偶

*/


/*表单选择器

1input textarea 等所有表单元素
$(':input')

2input type为text的input标签
:text

3
xx:password

4 
x:radio

5
x:checkbox
上面这些也可以用 属性选择器也能做到

6hidden
x:hidden 使用条件1不在页面可见2不占据位置


表单属性选择器
1 input:disabled   不可修改的
2 xx:enabled
3 :checked
4 :selected /    select option:selected*/

alert($(':text').val());
alert($('input[type=text').val());
 
</script>
</html>