jquey选择器（一）

最新推荐文章于 2024-01-14 11:54:30 发布

夕阳下炸了的芋头(ง •̀_•́)ง

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量272

点赞数

分类专栏： jQuery 文章标签： jquery选择器（一）

本文链接：https://blog.csdn.net/wanwenjieGood/article/details/83625377

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基本选择器：

<div id="a" class="b">基本选择器</div>

id选择器： $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲a").click(funct\dots$ (".b").click(function(){});
标签选择器：$(“div”).click(function(){});

过滤选择器书写时都以：冒号开头

1）基本过滤器
：first 获取第一个元素
eg: $(“li:first”) 获取所有li中的第一个li

：last
：even 获取索引为偶数的元素
eg：$(“li:even”)获取索引为偶素的li
：odd 获取索引为奇数的元素

：eq（index）获取索引等于index的元素，索引从0开始计算
eg: $(“li:eq(2)”) 获取索引等于2的li

：gt（index）获取索引大于index的元素
：lt（index）获取索引小于index的元素
…

内容过滤选择器
:contains(text) 获取含有text的元素
：empty 获取没有后代的元素（且没有文本）
：has(selector) 获取有后代元素为selector的元素
：parent 获取有后台元素或者有文本的元素

<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
	<style type="text/css">
		div{
		width:50px;
		height:50px;
		float:left;
		margin:10px;
	}
	p{
		clear:left;
	}
	</style>
	
	
<script>
	$(function(){
		$("#a").click(function(){
			
			$("div:contains('A')").css('background-color','#F00');
		});
		$("#b").click(function(){
			
			$("div:empty").css('background-color','#0F0');
		});
		$("#c").click(function(){
			
			$("div:has(span)").css('background-color','#00F');
		});
		$("#d").click(function(){
			
			$("div:parent").css('color','white');
		});
	})
</script>
</head>
<body>

	<div>ABCD</div>
	<div></div>
	<div><span></span></div>
	<p>
		<input type="button" value="a" id="a"/>
		<input type="button" value="b" id="b"/>
		<input type="button" value="c" id="c"/>
		<input type="button" value="d" id="d"/>
	</p>
</body>
</html>

可见性过滤器

：hidden 选取不可见元素
：visible 选取可见元素

夕阳下炸了的芋头(ง •̀_•́)ง

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquey选择器（一）

基本选择器：&lt;div id="a" class="b"&gt;基本选择器&lt;/div&gt;id选择器： KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲a").click(funct…(".b").click(function(){});标签选择器：$(“div”).click(function(){}
复制链接

扫一扫

专栏目录