jQuery 学习
$1 jQuery相对于原生JS的优势
可以写多个入口函数函数名字简单易记jQuery代码简洁（隐式迭代）解决了浏览器兼容问题代码容错率高，前面的代码有问题不影响后面代码的执行链式编程
$1.1 入口函数
$(document
).ready(function() {
...
});
$(function() {
...
});
jQuery入口函数与原生window.onload方法的区别：
jQuery可以写多个入口函数而原生JS不能jQuery的入口函数先于window.onload方法执行，与书写顺序无关；因为jQuery在页面的DOM树加载完毕后进行，而window.onload在页面上所有的资源（DOM树，外部css/js文件，图片等等）加载完毕后进行
$1.2 '$'是什么？
(function(){
...
}(...));
window
.$
= window
.jQuery
= jQuery
$(function() {
});
$('#id');
$('<div>new div</div>');
什么是DOM对象？ 简单的说，DOM对象就是通过原生JS选择器获取到的对象document.getElementById('#od') 什么是jQuery对象？ 简单的说，jQuery对象就是通过原生JS选择器获取到的对象$('#id')，jQuery对象是一个‘伪’数组，是DOM对象的包装集 注意DOM对象只能调用DOM的属性和方法，jQuery对象只能调用jQuery的属性和方法
DOM对象与jQuery对象的相互转化：
DOM转jQuery：
var div1
= document
.getElementById("id");
var $div1
= $(div1
);
jQuery转DOM：
var $divs
= $('div');
var div0
= $divs
[0];
var div1
= $divs
.get(0);
不要忘记，jQuery对象用数组下标的形式获取的是DOM对象而不再是jQuery对象！！！
$1.3 开关灯实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.4.1.js"></script>
<style>
div {
margin: 0 auto;
text-align: center;
}
.container {
border: 2px solid deepskyblue;
height: 100%;
width: 50%;
}
img #main-image {
height: 100%;
width: 100%;
}
img #lightBulb {
height: 40px;
width: 40px;
}
</style>
<title>开关灯
</title>
</head>
<body>
<div class="container" >
<img src="001.png" id="main-image" alt="图片加载失败">
</div>
<div class="controller">
<img src="images/lightOff.png" id="lightBulb">
</div>
<script type="text/javascript">
$(function () {
var light = 1;
var turnLights = function () {
light = (light+1)%2;
if (light == 1) {
$("body").css("backgroundColor", "#FFFFFF");
$bulb.attr("src", "images//lightOff.png");
}
else {
$("body").css("backgroundColor", "#0F0F0F");
$bulb.attr("src", "images//lightOn.png");
}
}
var $bulb = $('#lightBulb');
$bulb.click(turnLights);
})
</script>
</body>
</html>
$1.4 其他常用方法
text()
$("#id").text();
$("#id").text("文本");
css()
$("div").css("border");
$("div").css("border-top-width");
$("div").css("background-color");
$("div").css("backgroundColor");
$("div").css("width");
$("div").css({
"width": "300px";
"background-color": "red";
});
设置的样式是行内样式
$2 jQuery选择器
$("div");
$(".myClass");
$("#myID");
$("div.myClass");
$(".myClass,.hisClass");
$("ul > li");
$("ul li");
$("li:eq(n)");
$("li:odd");
$("li:even");
$("ul").children("li");
$("ul").find("li");
$("#myID").siblings("li");
$("#myID").parent();
$("#myID").eq(index
);
$("#myID").prev();
$("#myID").next();
