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

jQuery选择器之元素选择器

元素选择器：根据给定（html）标记名称选择所有的元素

描述：

$( "element" )

搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持

右边编辑器代码所示：

第一组：通过getElementsByTagName方法得到页面所有的<div>元素

var divs = document.getElementsByTagName('div');

divs是dom合集对象，通过循环给每一个合集中的<div>元素赋予新的border样式

第二组：同样的效果，$("p")选取所有的<p>元素，通过css方法直接赋予样式

任务

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

$("p")
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     div {
  9.         width: 100px;
  10.         height: 90px;
  11.         float: left;
  12.         padding: 5px;
  13.         margin: 5px;
  14.         background-color: #EEEEEE;
  15.     }
  16.     </style>
  17.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  18. </head>
  19. <body>
  20.     <div class="aaron">
  21.         <p>class="aaron"</p>
  22.         <p>选中</p>
  23.     </div>
  24.     <div class="aaron">
  25.         <p>class="aaron"</p>
  26.         <p>选中</p>
  27.     </div>
  28.     <div class="imooc">
  29.         <p>class="imooc"</p>
  30.         <p>jQuery选中</p>
  31.     </div>
  32.     <div class="imooc">
  33.         <p>class="imooc"</p>
  34.         <p>jQuery选中</p>
  35.     </div>
  36.  
  37.     <script type="text/javascript">
  38.     //通过原生方法处理
  39.     //获取到所有的节点标记名为div的元素
  40.     //给每一个div加上蓝色的边框
  41.     var divs = document.getElementsByTagName('div');
  42.     for (var i = 0; i < divs.length; i++) {
  43.         divs[i].style.border = "3px solid blue";
  44.     }
  45.     </script>
  46.     <script type="text/javascript">
  47.     //通过jQuery直接传入标签名p
  48.     //标签是可以多个的，所以得到的同样也是一个合集
  49.     ?.css("border", "3px solid red");
  50.     </script>
  51. </body>
  52.  
  53. </html>
下一节