jquery常见的选择器

最新推荐文章于 2024-05-29 14:21:47 发布

小哥找Bug

最新推荐文章于 2024-05-29 14:21:47 发布

阅读量235

点赞数

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/qq_35463269/article/details/109711549

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

仅简单总结一下

jquery选择器的名称---------语法说明

基本选择器

1.标签（元素）选择器---------$(“html标签名”) 获得所有匹配标签名称的元素

2.id选择器---------$("#id的属性值") 获得与指定id属性值匹配的元素

3.类选择器---------$(".class的属性值") 获得与指定的class属性值匹配的元素

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>04-基本选择器</title>
	<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>

<span class="female">古力娜扎</span>
<span class="female">迪丽热巴</span>
<span class="female hero">黑寡妇</span>

<span class="male hero">钢铁侠</span>
<span class="male hero">超人</span>
<span id="boss">灭霸</span>

<script>
	// 1.获取span标签的jquery对象			 
	console.log($('span'));

	// 2.获取class有hero的jquery对象	
	console.log($('.hero'));

	// 3.获得id="boss"的jquery对象
	console.log($('#boss'));
</script>
</body>
</html>

层级关系选择器

1.后代选择器---------$(“A B”) 选择A元素内部的所有B元素

2.并集选择器---------$(“选择器1,选择器2…”) 获取多个选择器选中的所有元素

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>05-层级关系选择器</title>
	<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
	<div id="kangxi">
	<span>儿子：雍正</span>
	<p>
		<span>孙子：乾隆</span>
	</p>
</div>
<div>牛顿</div>

<script>
	// 1. 获取所有的p,div的文本
	console.log($('p,div').text());
	// 2. 获取div的后代span的文本
	console.log($('#kangxi span').text());
</script>
</body>
</html>

属性选择器

1.属性选择器---------$(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器

2.复合属性选择器---------$(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>06-属性选择器</title>
	<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>

<input type="text" name="username" value="用户名"/><br/>

<input type="text" name="nickname" value="昵称"/><br/>

<script>
	// 1.获取type='text'的input标签	
	console.log($('input[type="text"]'));

	// 2.获取type='text' 且 name="nickname" 的input标签
	console.log($('input[type="text"][name="nickname"]'));
</script>
</body>
</html>

过滤选择器

1.首元素选择器---------first 获得选择的元素中的第一个元素
2.尾元素选择器---------last 获得选择的元素中的最后一个元素
3.偶数选择器---------even 偶数，从 0 开始计数
4.奇数选择器---------odd 奇数，从 0 开始计数
5.指定索引选择器---------eq(index) 指定索引元素

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>07-过滤选择器</title>
	<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul>
	<li>大娃（红娃）</li>
	<li>二娃（橙娃）</li>
	<li>三娃（黄娃）</li>
	<li>四娃（绿娃）</li>
	<li>五娃（青娃）</li>
	<li>六娃（蓝娃）</li>
	<li>七娃（紫娃）</li>
</ul>

<script>
	// 1.获取第一个元素console.log($('li:first').text());
	// 2.获取偶数索引元素
	console.log($('li:even').text());
	// 3.获取指定索引2的元素console.log($('li:eq(2)').text());

</script>
</body>
</html>

对象遍历选择器

jq对象jq对象.each(function(index,element){------------------------------------------------------------------------------------})

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>08-对象遍历</title>
	<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--jquery对象的遍历   $.each() 用法示例-->
	<ul id="city">
	<li>北京</li>
	<li>上海</li>
	<li>天津</li>
</ul>

<script>
	let lis = document.querySelectorAll('li');
	// 普通for
	for (let i = 0; i < lis.length; i++) { 	
	console.log(lis[i]);
	}
	// 增强for
	for (let li of lis) { console.log(li);
	}
	console.log('	')
	// jq的for循环
	$('li').each(function (index, element) {
		// console.log(index);
		// console.log(element);
		// console.log(element.innerHTML); // 遍历的元素是js对象
		// console.log($(element).html()); // 升级为jq对象
		// console.log(this); // 当前遍历的元素，相当于element	补充
	})
</script>
</body>
</html>

小哥找Bug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery常见的选择器

仅简单总结一下jquery选择器的名称---------语法说明基本选择器1.标签（元素）选择器---------$(“html标签名”) 获得所有匹配标签名称的元素2.id选择器---------$("#id的属性值") 获得与指定id属性值匹配的元素3.类选择器---------$(".class的属性值") 获得与指定的class属性值匹配的元素<!DOCTYPE html><html lang="zh-CN"><head> <m
复制链接

扫一扫

专栏目录