jQuery选择器之全选择器(选择器)使用介绍
jquery选择器之全选择器(选择器)使用介绍
在css中,经常会在第一行写下这样一段样式
* {padding: 0; margin: 0;}
通配符*意味着给所有的元素设置默认的边距。jquery中我们也可以通过传递*选择器来选中文档页面中的元素
描述:
$( "*" )
抛开jquery,如果要获取文档中所有的元素,通过document.getelementsbytagname()中传递"*"同样可以获取到
不难发现,id、class、tag都可以通过原生的方法获取到对应的节点,但是我们还需要考虑一个兼容性的问题,我这里顺便提及一下,比如:
1. ie会将注释节点实现为元素,所以在ie中调用getelementsbytagname里面会包含注释节点,这个通常是不应该的
2. getelementbyid的参数在ie8及较低的版本不区分大小写
3. ie7及较低的版本中,表单元素中,如果表单a的name属性名用了另一个元素b的id名并且a在b之前,那么getelementbyid会选中a
4. ie8及较低的版本,不支持getelementsbyclassname
看到了吧,作为一名合格的前端不是那么简单的,就一个基本的选择器上面都需要做这么多兼容,幸好有jquery的出现,让我们省了很多功夫,如果大家对jquery的实现感兴趣,可以看我另一个门课程 《jquery解析》
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
width: 100px;
height: 90px;
float: left;
padding: 5px;
margin: 5px;
background-color: #eeeeee;
}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<p class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</p>
<p class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</p>
<p class="imooc">
<p>class="imooc"</p>
<p>jquery选中</p>
</p>
<p class="imooc">
<p>class="imooc"</p>
<p>jquery选中</p>
</p>
<script type="text/javascript">
//获取页面中所有的元素
var elements1 = document.getelementsbytagname('*');
</script>
<script type="text/javascript">
//获取页面中所有的元素
var elements2 = $("*") ;
//原生与jquery方法比较
//===表示数据和类型都相等
if(elements2.length === elements1.length){
elements2.css("border","1px solid red");
}
</script>
</body>
</html>