簡(jiǎn)介和背景
JQuery是一個(gè)快速刻坊、簡(jiǎn)潔的JavaScript框架，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(kù)（或JavaScript框架）党晋。jQuery設(shè)計(jì)的宗旨是“write Less谭胚，Do More”，即倡導(dǎo)寫(xiě)更少的代碼未玻，做更多的事情灾而。它封裝JavaScript常用的功能代碼，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式扳剿，優(yōu)化HTML文檔操作旁趟、事件處理、動(dòng)畫(huà)設(shè)計(jì)和Ajax交互庇绽。
jQuery的核心特性可以總結(jié)為：具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口锡搜；具有高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展瞧掺；擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件耕餐。jQuery兼容各種主流瀏覽器，如IE 6.0+夸盟、FF 1.5+蛾方、Safari 2.0+、Opera 9.0+等。
好了桩砰，話不多說(shuō)拓春，讓我們進(jìn)去JQuery的世界！
1.獲取元素：
如果想要使用JS修改頁(yè)面亚隅，一般情況下都需要先獲取元素硼莽。而與原生JS相比，使用JQuery可以更簡(jiǎn)單的獲取元素：
$("#id") //通過(guò)ID名獲取
$(".class") //通過(guò)class名獲取
$("div") //獲取html中全部的div元素
$("div:first") //獲取html中第一個(gè)div元素（這里只有first（第一個(gè)）和last（最后一個(gè)））
$("*") //獲取全部元素
2.對(duì)元素的操作
$("#box").css("width") //獲取id為box的元素的width屬性
$("#box").css("width",200) //設(shè)置id為box的元素的width屬性為200（這種方式只能設(shè)置一個(gè),且會(huì)自動(dòng)補(bǔ)全px）
$("#box").css("width","200px") //設(shè)置id為box的元素的width屬性為200px(這種方式只能設(shè)置一個(gè))
$("#box").css({"width","200"}) //設(shè)置id為box的元素的width屬性為200（可以同時(shí)設(shè)置多個(gè)屬性煮纵，且會(huì)自動(dòng)補(bǔ)全px）
3.動(dòng)畫(huà)方法
$("div").animate(JS對(duì)象懂鸵，動(dòng)畫(huà)時(shí)間，動(dòng)畫(huà)類(lèi)型（只調(diào)用JQuery時(shí)只有兩種方式行疏，可以不寫(xiě)）匆光，回調(diào)函數(shù))
4.頁(yè)面加載完成后再執(zhí)行函數(shù)
document.onload=函數(shù) //原生JS寫(xiě)法
$(document).ready(函數(shù)) //只能加載DOM結(jié)構(gòu)
$(函數(shù)) //只能加載DOM結(jié)構(gòu)
$(window).ready() //所有資源都加載完畢
5.廣告框代碼例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 2000px;
}
#div1 {
width: 100px;
height: 100px;
background: blue;
color: white;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div id="div1"> 我是小廣告 </div>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script>
$("body,html").animate({"scrollTop": 500})//保證瀏覽器的兼容性
$(document).scroll(function() {
var y = $(document).scrollTop();
$("#div1").stop(true,true).animate({"top": y+200}, 500);
})
</script>
</body>
</html>
6.回到頂端的函數(shù)高級(jí)例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 2000px;
}
#div1 {
width: 100px;
height: 30px;
background: blue;
color: white;
position: fixed;
right: 0;
bottom: 0;
display: none;
}
</style>
</head>
<body>
<button id="div1"> 回到頂部 </button>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script>
$("#div1").click(function() {
$("body,html").animate({scrollTop: 0});
});
$(document).scroll(function() {
var top = $(document).scrollTop();
if (top > 200) {
$("#div1").show();
} else {
$("#div1").hide();
}
})
</script>
</body>
</html>
7.簡(jiǎn)單的點(diǎn)擊事件函數(shù)例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 2000px;
}
div {
width: 100px;
height: 100px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div> 測(cè)試1 </div>
<div> 測(cè)試2 </div>
<div> 測(cè)試3 </div>
<div> 測(cè)試4 </div>
<div> 測(cè)試5 </div>
<div> 測(cè)試6 </div>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script>
$("div").click( m1 );
function m1() {
// this.isRed 是物體對(duì)象的屬性
if (!this.isRed) {
this.Red= true; // 如果不存在，默認(rèn)為true酿联，代表 紅色
} else {
this.isRed = !this.isRed;
}
if (this.isRed) {
$(this).css({"background": "red"})
} else {
$(this).css({"background": "blue"})
}
}
</script>
</body>
</html>
