<!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>
