<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生querySelector()与querySelectorAll()获取元素实例</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul>
<li>工作安排1</li>
<li>工作安排2</li>
<li>工作安排3</li>
<li>工作安排4</li>
<li>工作安排5</li>
</ul>
<button>css列表项改边背景颜色</button>
<button>querySelector()列表项改边背景颜色</button>
<button>querySelectorAll()列表项改边背景颜色</button>
<button>jquery列表项改边背景颜色</button>
<script>
var btn1 = document.getElementsByTagName('button')[0]
btn1.onclick = function () {
// 用css选择器获取页面元素
// 获取某一个li，用[]里面的数字控制
document.getElementsByTagName('li')[0].style.backgroundColor = 'yellow'
}
</script>
<script>
var btn2 = document.getElementsByTagName('button')[1]
btn2.onclick = function () {
// 原生querySelector()获取元素,获取满足条件的第一个元素
document.querySelector('li').style.backgroundColor = "red"
}
</script>
<script>
var btn3 = document.getElementsByTagName('button')[2]
btn3.onclick = function () {
// 用querySelectAll()获取满足条件的所有元素
var li = document.querySelectorAll('li')
// 给所有的li元素改变颜色
for (var i=0; i<li.length; i++) {
li[i].style.backgroundColor = 'yellow'
}
}
</script>
<script>
var btn4 = document.getElementsByTagName('button')[3]
btn4.onclick =function () {
$(function () {
$('li').css('background-color', 'green')
})
}
</script>
</body>
</html>搞定
