口號(hào)：Write Less Do More
1.解決了瀏覽器兼容性問(wèn)題
2.封裝了常用的操作，用更少的代碼做更多的事。
引入jQuery
1.使用自己項(xiàng)目中的jquery.min.js瘩燥。
2.使用CDN服務(wù)器上的jQuery文件。
如何使用jQuery
jQuery對(duì)象的本質(zhì)是一個(gè)偽數(shù)組
- 有l(wèi)ength屬性
- 可以通過(guò)下標(biāo)獲取數(shù)據(jù)
window.jQuery屬性 --> $
1叠国、$函數(shù)的參數(shù)是一個(gè)函數(shù) - 傳入的函數(shù)是頁(yè)面加載完成之后要執(zhí)行的回調(diào)函數(shù)
2驶忌、$函數(shù)的參數(shù)是選擇器字符串 - 獲得頁(yè)面上的標(biāo)簽而且轉(zhuǎn)換成JQuery對(duì)象。
說(shuō)明：為什么要獲取jQuery對(duì)象 - 因?yàn)閖Query對(duì)象有更多封裝好的方法可供調(diào)用囤屹。
- 綁定/反綁定：on()/off()/one()
- 獲取/修改標(biāo)簽內(nèi)容：text()/html()
- 獲取/修改標(biāo)簽屬性：attr(name, value)
- 添加子節(jié)點(diǎn)：append()后 / prepend()前面
- 刪除/清空節(jié)點(diǎn)：remove() / empty()
- 修改樣式表：css({'color':'red',……}) - 修改多個(gè)樣式 （一個(gè)參數(shù)是讀樣式熬甚，兩個(gè)是修改樣式）
- 獲取節(jié)點(diǎn)：parent() / children() / prev() /next()
- 后兩個(gè)是兄弟節(jié)點(diǎn)
3、$函數(shù)的參數(shù)是標(biāo)簽字符串 - 創(chuàng)建標(biāo)簽并且返回對(duì)應(yīng)的jQuery對(duì)象肋坚。
4乡括、$函數(shù)的參數(shù)是原生JS對(duì)象 - 將原生JS對(duì)象轉(zhuǎn)換成JQuery對(duì)象肃廓。
- 如果bar是一個(gè)jQuery對(duì)象 可以通過(guò)bar[0] / bar.get[0]
四種$使用方法例子：
<script>
$(function(){
function deleteItem(evt){
$(evt.target).parent().remove();
}
$("#fruits a").on("click",deleteItem);
$("#ok").on("click",function(){
var fruitName = $("#container input[name=fruit]").val().trim();
if (fruitName.length > 0) {
$("#fruits").append($("<li>").text(fruitName).append($("<a>").text("x").attr("href","javascript:viod(0);").on("click",deleteItem)));
}
});
});
</script>
具體jQuery用法可以參考：jQuery API 手冊(cè)
