选择器（一）：基本选择器

最新推荐文章于 2023-03-29 23:15:32 发布

无知的小菜鸡

最新推荐文章于 2023-03-29 23:15:32 发布

阅读量1.2k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_41897680/article/details/104393626

版权

jQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

基本选择器

基本选择器主要包括5中类型：id选择器、类型选择器、类选择器、通配选择器、分组选择器
ID选择器
JavaScript提供了原生的方法getElementById()，实现DOM中选择指定ID值的元素。该方法返回所匹配元素的对象

 var el=document.getElementById("id");

jQuery通过一个简单的"#"标识前缀快速匹配指定ID的元素对象。返回值为包含匹配id的元素的jQuery对象

 $('#id')

jQuery的缺点：

执行效率较低，在不是很必须的前提下可以直接考虑使用Document对象的getElementById()方法获取id元素
jQuery使用正则表达式来匹配参数值，而正则表达式对于特殊字符（点、冒号等）是敏感的，要避免正则表达式被误解，要使用双斜杠来转义字符。如果直接使用Document对象的getElementById()方法不存在这个问题

$(function(){
   	//jquery方式
   	$('#a\\.b').css('color','red');
   	$('#a\\:b').css('color','red');
   	$('#\\[div\\]').css('color','red');
   	//原生方式
   	document.getElementById('a.b').style.color='red';
   	document.getElementById('a:b').style.color='red';
   	document.getElementById('[div]').style.color='red';
   })

类型选择器
JavaScript使用getElementsByTagName在DOM中选择指定类型的元素，该方法返回所选类型元素的集合

 var el=document.getElementsByTagName("tagName")

jQuery：直接指定标签名称即可，返回值为包含匹配标签的jQuery对象

 $('element')

优点：以设置样式为例，jQuery可以直接为所有标签设置样式；原生则需要使用循环语句遍历返回的元素集合，并逐一设置

$(function(){
  	//jquery
  	$('div').css('color','red');
  	//原生
  	var divs=document.getElementsByTagName('div');
  	for (var i=0;i<divs.length;i++){
  		divs[i].style.color='red';
  	}
  })

缺点：在匹配标签时效率较低
类选择器
JavaScript：HTML5新增getElementsByClassName()方法用于选择指定类名的元素，多个类名之间通过空格分隔，不分先后顺序，返回带有指定类的所有元素的集合

document.getElementsByClassName()

jQuery：类选择器的字符串前面需要附加标识前缀（点）

 $('.className')

例：匹配类名是red和blue的标签，设置字体颜色为蓝色

<body>
	<div class="red blue">1</div>
	<div class="red blue">2</div>
	<script type="text/javascript">
		$(function() {
			//原生
			var cl = document.getElementsByClassName('red blue');
			for(var i = 0; i < cl.length; i++) {
				cl[i].style.color = 'blue';
			}
			//jquery
			$('.red.blue').css('color', 'blue');
		})
	</script>
</body>

通配选择器
JavaScript：如果把特殊字符串"*"传递给getElementsByClassName方法，将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序

var el=document.getElementsByTagName("*");

jQuery：

$('*')

分组选择器
jQuery可以选择多组元素，通过逗号来分隔多个不同的选择器，这些选择器可以是任意类型，甚至是符号选择器
例：

$("h2,#div,.red,[title]='text'").css('color','red')

混合使用
对于一般情况jQuery和JavaScript可以混合使用，这样可以简化代码，并且可以提高一些效率
例：匹配所有标签，将所有标签中的字体设置为红色

$(function() {
	var all = document.getElementsByTagName('*');
	$(all).css('color', 'red');
})

无知的小菜鸡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
选择器（一）：基本选择器

基本选择器基本选择器主要包括5中类型：id选择器、类型选择器、类选择器、通配选择器、分组选择器ID选择器JavaScript提供了原生的方法getElementById()，实现DOM中选择指定ID值的元素。该方法返回所匹配元素的对象 var el=document.getElementById("id");jQuery通过一个简单的"#"标识前缀快速匹配指定ID的元素对象。返回值为包...
复制链接

扫一扫