<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用css方式来获取页面元素</title>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
alert("文档已经加载完毕")
})
</script>
</head>
<body>
<ul>
<li>春眠不觉晓</li>
<li>处处闻啼鸟</li>
<li>夜来风雨声</li>
<li>花落知多少</li>
</ul>
<button>字体颜色变化</button>
<script>
var btn = document.getElementsByTagName('button')[0]
btn.onclick = function () {
document.querySelector('li','li').style.color = 'red'//qtouerySelecr实现第一行字体效果
var li = document.querySelectorAll('li')//querySelectorAll实现所有符合条件的li字体效果
for (var i=0;i<li.length;i++){
li[i].style.color = 'green'
}
}
</script>
</body>
</html>qtouerySelecr 从上到下选取一个符合条件作为显示对象，不管下面符合条件的都不会有效果
querySelectorAll 从上到下 只要符合当前条件的 都会被选到
ready事件只创建出DOM节点 所有的元素都可以用 不用全部的资源加载完毕就可以执行
