jQuery的介紹
一、什么是jQuery
jQuery是一個快速嘀倒、簡潔的JavaScript框架囤攀，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。jQuery設(shè)計(jì)的宗旨是“write Less贰军，Do More”，即倡導(dǎo)寫更少的代碼蟹肘，做更多的事情词疼。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設(shè)計(jì)模式帘腹，優(yōu)化HTML文檔操作贰盗、事件處理、動畫設(shè)計(jì)和Ajax交互阳欲。
Jquery它是javascript的一個輕量級框架舵盈，對javascript進(jìn)行封裝，它提供了很多方便的選擇器球化。供你快速定位到需要操作的元素上面去秽晚。還提供了很多便捷的方法。
二筒愚、怎么使用jQuery
Jquery它是一個庫(框架)赴蝇，要想使用它，必須先引入巢掺！
jquery-1.8.3.js：一般用于學(xué)習(xí)階段句伶。
jquery-1.8.3.min.js：用于項(xiàng)目使用階段
三劲蜻、jQuery的簡單入門
所有的jQuery代碼寫在頁面加載函數(shù)
$(function(){
jQuery代碼
});
獲取元素：
JS:document.getElementById();
JQ:$("#id");
jQuery與JS的區(qū)別：
<title>JS與JQ頁面加載區(qū)別</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
window.onload = function(){
alert("張三");
}
//傳統(tǒng)的方式頁面加載會存在覆蓋問題，加載比JQ慢(整個頁面加載完畢<包括里面的其它內(nèi)容熄阻，比如圖片>)
window.onload = function(){
alert("老王");
}
//JQ的加載比JS加載要快斋竞！(當(dāng)整個dom樹結(jié)構(gòu)繪制完畢就會加載)
jQuery(document).ready(function(){
alert("李四");
});
//JQ不存在覆蓋問題，加載的時(shí)候是順序執(zhí)行
$(document).ready(function(){
alert("王五");
});
//簡寫方式
$(function(){
alert("汾九");
});
</script>
總結(jié)：
- JQ對象只能操作JQ里面的屬性和方法
- JS對象只能操作JS里面的屬性和方法秃殉。
jQuery對象與DOM對象的轉(zhuǎn)換：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dom與JQ對象之間的轉(zhuǎn)換</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
function write1(){
//1.JS的DOM操作
//document.getElementById("span1").innerHTML="萌萌噠坝初！";
//DOM對象無法操作JQ對象里面屬性和方法
//document.getElementById("span1").html("萌萌噠！");
var spanEle = document.getElementById("span1");
//將DOM對象轉(zhuǎn)換成JQ對象
$(spanEle).html("思密達(dá)");
}
$(function(){
$("#btn").click(function(){
//JQ對象無法操作JS里面的屬性和方法＜鼐ｖ邸！
//$("#span1").innerHTML="呵呵噠吏恭！"
$("#span1").html("呵呵噠拗小！");
//JQ對象向DOM對象轉(zhuǎn)換方式一
$("#span1").get(0).innerHTML="美美噠！";
//JQ對象向DOM對象轉(zhuǎn)換方式二
$("#span1")[0].innerHTML="棒棒噠樱哼！";
});
});
</script>
</head>
<body>
<input type="button" value="JS寫入" onclick="write1()"/>
<input type="button" value="JQ寫入" id="btn"/><br />
班長：<span id="span1">你好帥哀九！</span>
</body>
</html>
jQuery的效果：
jQuery的效果.png
