原生querySelector()与querySelectorAll()获取元素实例

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <title>Title</title>
   <style>
       p {
           width: 200px;
           margin: 0 auto;
           color: #0b597d;
           padding-top: 100px;

       }
       ul {
           width: 240px;
           margin: 0 auto;
           color: #00B83F;
           list-style: none;
           list-style: url("timg.jpg");
       }
       div {

           width: 400px;
           margin: 0 auto;
       }
       #btn{
           border-bottom: 1px solid #c5c5c5;
           margin:10px 0 0 10px;
           background:red;
           color:#fff;
           width:150px;
           height:30px;
           font:14px Verdana, Arial, Helvetica, sans-serif;
       }
   </style>
</head>
<body>
<div>
<p>首富朱老师的上午安排</p>
<ul>
   <li>4:00 起床</li>
   <li>4:15-5:00 健身</li>
   <li>5:00-5:30 早餐</li>
   <li>5:45-6:30 前往机场</li>
   <li>7:00-12:15 雅加达飞海口</li>
   <li>12:20-12:45 到达海南迎宾馆</li>
   <li>12:45-13:00 海南领导会见</li>

</ul>
   <button id="btn">忙啊</button>
</div>

<script>
   var btn =document.getElementById('btn')//获取按钮
btn.onclick=function () {//按钮点击事件
       //querySelectorAll获取全部li元素
var li =document.querySelectorAll('li')
       for (var i=0;i<li.length;i++){//for循环给所有的li元素加上背景色
li[i].style.background='whitesmoke'
}
       // querySelector获取li元素
document.querySelector('li').style.background='whitesmoke'
// $('li').css('background','red')
}

</script>
</body>
</html>
相关文章
