JQuery
目錄
JQuery
JQuery選擇器
JQuery事件
JQuery對(duì)DOM元素的操作
JQuery
jQuery是一個(gè)快速、簡(jiǎn)潔的javaScript框架，它封裝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有1.x和2.x兩個(gè)主要版本，區(qū)別在于2.x移除了對(duì)古老的IE 6、7、8的支持，因此2.x的代碼更精簡(jiǎn)，jQuery只是一個(gè)jquery-xxx.js文件。
JQuery的使用
我們只需要在我們網(wǎng)站的head中引入jquery文件即可。
$符號(hào)
$是著名的jQuery符號(hào)。實(shí)際上，jQuery把所有功能全部封裝在一個(gè)全局變量jQuery中，而$也是一個(gè)合法的變量名，它是變量jQuery的別名，即? $ ==? jQuery
document.getElementById('test'); //普通JavaScript寫(xiě)法
$('#test'); //JQuery寫(xiě)法
jQuery('#test'); //JQuery的另外一種寫(xiě)法
文檔就緒事件(入口函數(shù))
這是為了防止文檔在完全加載之前運(yùn)行 jQuery 代碼，即在 DOM 加載完成后才可以對(duì) DOM 進(jìn)行操作
JQuery的寫(xiě)法
$(document).ready(function(){
// 開(kāi)始寫(xiě) jQuery 代碼...
});
//或者
$(function(){
// 開(kāi)始寫(xiě) jQuery 代碼...
});
普通JavaScript的寫(xiě)法
window.onload = function () {
// 執(zhí)行JS代碼
}
jQuery 入口函數(shù)與 JavaScript 入口函數(shù)的區(qū)別：
jQuery 的入口函數(shù)是在 html 所有標(biāo)簽(DOM)都加載之后，就會(huì)去執(zhí)行。
JavaScript 的 window.onload 事件是等到所有內(nèi)容，包括外部圖片之類的文件加載完后，才會(huì)執(zhí)行。
JQuery選擇器
jQuery 選擇器允許對(duì) HTML 元素組或單個(gè)元素進(jìn)行操作，jQuery 選擇器基于元素的 id、class、type、attr、屬性值等選擇HTML 元素。 它基于已經(jīng)存在的CSS選擇器，除此之外，它還有一些自定義的選擇器。
jQuery 中所有選擇器都以美元符號(hào)開(kāi)頭：$( )
$("*") //選取所有元素
$("p") //選擇頁(yè)面所有的p標(biāo)簽元素
$("#test") //選擇id為test的標(biāo)簽元素
$(".test") //選擇class為test的標(biāo)簽元素
$(this) //選取當(dāng)前HTML元素
$("p.test") //選取class為test的p元素
$("p:first") //選取第一個(gè)p元素
$("ul li:first") //選取第一個(gè)ul元素的第一個(gè)li元素
更多的選擇，傳送門(mén)：http://www.runoob.com/jquery/jquery-selectors.html
JQuery事件
常見(jiàn)的事件
//hover()方法用于模擬光標(biāo)懸停事件。當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)(mouseenter);當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)(mouseleave)。
$("#p1").hover(
function(){
alert("你進(jìn)入了 p1!");
},
function(){
alert("拜拜! 現(xiàn)在你離開(kāi)了 p1!");
}
);
//點(diǎn)擊事件
$("p").click(function(){
$(this).hide();
});
JQuery對(duì)DOM元素的操作
獲取內(nèi)容和屬性值
這是段落中的 粗體 文本。
名稱:
設(shè)置內(nèi)容和屬性值
這是段落中的文本。
姓名:
愛(ài)好： 運(yùn)動(dòng)
聽(tīng)音樂(lè)
閱讀
參考文章：http://www.runoob.com/jquery/jquery-tutorial.html
HTML jQuery
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。
相關(guān)文章
