2-1 jQuery选择器之id选择器
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery选择器之id选择器

页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。

jQuery几乎支持主流的css1~css3选择器的写法，我们从最简单的也是最常用的开始学起

id选择器：一个用来查找的ID，即元素的id属性

$( "#id" )

id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器

值得注意：

id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

任务

在代码编辑器中第42行填写相应的代码

​$("#imooc")
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <style>
  7.     div {
  8.         width: 100px;
  9.         height: 90px;
  10.         float: left;
  11.         padding: 5px;
  12.         margin: 5px;
  13.         background-color: #EEEEEE;
  14.     }
  15.     </style>
  16.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  17. </head>
  18.  
  19. <body>   
  20. 	 <div id="aaron">
  21.     	<p>id="aaron"</p>
  22.     	<p>选中</p>
  23.     </div>
  24.     <div id="imooc">
  25.         <p>id="imooc"</p>
  26.         <p>jQuery选中</p>
  27.     </div>
  28.     <div id="imooc">
  29.         <p>id="imooc"</p>
  30.         <p>jQuery未选中</p>
  31.     </div>
  32.  
  33.     <script type="text/javascript">
  34.        //通过原生方法处理
  35.         var div = document.getElementById('aaron');
  36.         div.style.border = "3px solid blue";
  37.     </script>
  38.  
  39.     <script type="text/javascript">
  40.     	//通过jQuery直接传入id
  41.     	//id的唯一，只选择到了第一个匹配的id为imooc的div节点
  42.         ?.css("border", "3px solid red");
  43.     </script>
  44.  
  45. </body>
  46.  
  47. </html>
下一节