选择器（⼀）：基本选择器
基本选择器
基本选择器主要包括5中类型：id选择器、类型选择器、类选择器、通配选择器、分组选择器
ID选择器
JavaScript提供了原⽣的⽅法getElementById()，实现DOM中选择指定ID值的元素。该⽅法返回所匹配元素的对象
var ElementById("id");
jQuery通过⼀个简单的"#"标识前缀快速匹配指定ID的元素对象。返回值为包含匹配id的元素的jQuery对象
$('#id')
jQuery的缺点：
1. 执⾏效率较低，在不是很必须的前提下可以直接考虑使⽤Document对象的getElementById()⽅法获取
id元素
2. jQuery使⽤正则表达式来匹配参数值，⽽正则表达式对于特殊字符（点、冒号等）是敏感的，要避免正则表达式被误解，要使⽤双斜
杠来转义字符。如果直接使⽤Document对象的getElementById()⽅法不存在这个问题
$(function(){
//jquery⽅式
$('#a\\.b').css('color','red');
$('#a\\:b').css('color','red');
$('#\\[div\\]').css('color','red');
//原⽣⽅式
})
类型选择器
JavaScript使⽤getElementsByTagName在DOM中选择指定类型的元素，该⽅法返回所选类型元素的集合
var ElementsByTagName("tagName")
jQuery：直接指定标签名称即可，返回值为包含匹配标签的jQuery对象
$('element')
优点：以设置样式为例，jQuery可以直接为所有标签设置样式；原⽣则需要使⽤循环语句遍历返回的元素集合，并逐⼀设置
$(function(){
//jquery
$('div').css('color','red');
//原⽣
var ElementsByTagName('div');
for(var i=0;i<divs.length;i++){
divs[i].lor='red';
}
})
缺点： 在匹配标签时效率较低
类选择器
JavaScript：HTML5新增getElementsByClassName()⽅法⽤于选择指定类名的元素，多个类名之间通过空格分隔，不分先后顺序，返回带有指定类的所有元素的集合
jQuery：类选择器的字符串前⾯需要附加标识前缀（点）
$('.className')
例：匹配类名是red和blue的标签，设置字体颜⾊为蓝⾊
<body>
jquery是什么选择器<div class="red blue">1</div>
<div class="red blue">2</div>
<script type="text/javascript">
$(function(){
//原⽣
var cl = ElementsByClassName('red blue');
for(var i =0; i < cl.length; i++){
cl[i].lor ='blue';
}
//jquery
$('.red.blue').css('color','blue');
})
</script>
</body>
通配选择器
JavaScript：如果把特殊字符串"*"传递给getElementsByClassName⽅法，将返回⽂档中所有元素的列表，元素排列的顺序就是它们在⽂档中的顺序
var ElementsByTagName("*");
jQuery：
$('*')
分组选择器
jQuery可以选择多组元素，通过逗号来分隔多个不同的选择器，这些选择器可以是任意类型，甚⾄是符号选择器
例：
$("h2,#div,.red,[title]='text'").css('color','red')
混合使⽤
对于⼀般情况jQuery和JavaScript可以混合使⽤，这样可以简化代码，并且可以提⾼⼀些效率
例：匹配所有标签，将所有标签中的字体设置为红⾊
$(function(){
var all = ElementsByTagName('*');
$(all).css('color','red');
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。