jQuery选择器之类选择器
2017-03-21 18:47
302 查看
$( ".class" )
类选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选
同样的jQuery在实现上,对于类选择器,如果浏览器支持,jQuery使用JavaScript的原生getElementsByClassName()函数来实现的
右边实现一个原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较
我们不难发现:
jQuery除了选择上的简单,而且没有再次使用循环处理
不难想到$(".imooc").css()方法内部肯定是带了一个隐式的循环处理,所以使用jQuery选择节点,不仅仅只是选择上的简单,同时还增加很多关联的便利操作,后续我们还会慢慢的学到其他的优势。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
div {
width: 100px;
height: 90px;
float: left;
padding: 5px;
margin: 5px;
background-color: #EEEEEE;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<script type="text/javascript">
//通过原生方法处理
//样式是可以多选的,所以得到的是一个合集
//需要通过循环给合集中每一个元素修改样式
var divs = document.getElementsByClassName('aaron');
for (var i = 0; i < divs.length; i++) {
divs[i].style.border = "3px solid blue";
}
</script>
<script type="text/javascript">
//通过jQuery直接传入class
//class选择器可以选择多个元素
$(".imooc").css("border", "3px solid red");
</script>
</body>
</html>
相关文章推荐
- jQuery选择器之类选择器
- jQuery选择器之类选择器
- jQuery选择器之类选择器
- jQuery选择器大全
- 9、第九节课jquery选择器jq2,20151007
- JQuery 提供的函数 JQuery选择器 过滤器
- jQuery选择器整理
- jQuery 选择器
- jquery学习之选择器
- jquery Bug:当表单中包含name为nodeType的input时jquery选择器失效的bug
- jquery选择器篇
- jquery多个选择器绑定同一个事件
- jQuery的选择器中的通配符[id^='code']
- 从零开始学习jQuery (二) 万能的选择器
- jquery id选择器和class选择器的区别
- js实现类似jquery基础功能 简单选择器/事件/属性
- JQuery选择器
- jQuery选择器总结
- 我的第四课:jQuery 选择器
- jquery 选择器部分整理