jQuery选择器之id选择器使用介绍
jquery选择器之id选择器
页面的任何操作都需要节点的支撑,开发者如何快速高效的找到指定的节点也是中的一个重点。jquery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专注业务逻辑的编写。
jquery几乎支持主流的css1~css3选择器的写法,我们从最简单的也是最常用的开始学起
id选择器:一个用来查找的id,即元素的id属性
$( "#id" )
id选择器也是基本的选择器,jquery内部使用javascript函数document.getelementbyid()来处理id的获取。原生语法的支持总是非常高效的,所以在操作dom的获取上,如果能采用id的话尽然考虑用这个选择器
值得注意:
id是唯一的,每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id,将只匹配该id选择集合的第一个dom元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的
<!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 id="aaron">
<p>id="aaron"</p>
<p>选中</p>
</p>
<p id="imooc">
<p>id="imooc"</p>
<p>jquery选中</p>
</p>
<p id="imooc">
<p>id="imooc"</p>
<p>jquery未选中</p>
</p>
<script type="text/javascript">
//通过原生方法处理
var p = document.getelementbyid('aaron');
p.style.border = "3px solid blue";
</script>
<script type="text/javascript">
//通过jquery直接传入id
//id的唯一,只选择到了第一个匹配的id为imooc的p节点
$("#imooc").css("border", "3px solid blue");
</script>
</body>
</html>