<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="jquery-3.1.1/jquery-3.1.1.min.js"></script>
<div id="list">
<ul>
<li>aaaaaa</li>
<li>bbbbbb</li>
<li class="c">cccccc</li>
<li>dddddd</li>
<li>eeeeee</li>
</ul>
</div>
<script type="text/javascript">
// window.onload = function(){
// alert("这是js初始化函数");
// }
// window.onload = function(){
// alert("这也是一个js初始化函数");
// }
/*js中函数名相同函数会替换*/
// $(function(){
// alert("这是jq的初始化函数");
// });
//
// $(function(){
// alert("这也是一个jq的初始化函数");
// })
/*jq中函数名相同的函数不会被替换，其使用了闭包的技术*/
// $(document).ready(function(){
//
// });
//缩写
$(function(){
//得到一个js对象
var list = document.getElementById("list");
//通过$(js对象)就可以把js对象封装成一个jq对象
$(list).css("color","#F4A460").css("background","#668B8B");
/*可以级联设置*/
// 每一个jq对象（元素，节点）都是一个包装集(就算用id选择器匹配到的元素也一样)
// 从包装集中取出元素是js对象
$("#list li")[1].innerHTML = "这是一个js对象"
$(".c")[0].innerHTML = "这也是一个js对象"
list = $("#list ul li");
for(var i=0;i<list.length;i++){
var li = list[i];
//用js对象设置
// li.innerHTML="["+i+"]"+li.innerHTML;
//用jq对象设置
$(li).html("["+i+"]"+$(li).html());
}
});
</script>
</body>
</html>
Paste_Image.png
