元素
獨(dú)立文件中使用 jQuery 函數(shù)，如果您的網(wǎng)站包含許多頁面，并且您希望您的 jQuery 函數(shù)易于維護(hù)，那么請(qǐng)把您的 jQuery 函數(shù)放到獨(dú)立的 .js 文件中。
jQuery 事件
jQuery 是為事件處理特別設(shè)計(jì)的。
頁面對(duì)不同訪問者的響應(yīng)叫做事件。
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時(shí)所調(diào)用的方法。
實(shí)例：
在元素上移動(dòng)鼠標(biāo)。
選取單選按鈕
點(diǎn)擊元素
在事件中經(jīng)常使用術(shù)語"觸發(fā)"（或"激發(fā)"）例如： "當(dāng)您按下按鍵時(shí)觸發(fā) keypress(按鍵響應(yīng)) 事件"。
常見 DOM 事件：
鼠標(biāo)事件：
click(單擊)
dblclick(雙擊鼠標(biāo))
mouseenter(鼠標(biāo)移入)，mouseleave(鼠標(biāo)移出)
mousedown(按下鼠標(biāo)按鍵)，mouseup(松開鼠標(biāo)按鈕)
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)。
鍵盤事件：keypress(按鍵響應(yīng))，keydown(按鍵按下)，keyup(按鍵恢復(fù))
表單事件：submit(提交)，change(更換)，focus(焦點(diǎn))， blur(失去焦點(diǎn))
文檔/窗口事件： load(負(fù)荷)，resize(調(diào)整尺寸)， scroll(文本框中的起始滾動(dòng)行)， unload(卸載)
fadeOut(淡出時(shí)間)
在 jQuery 中，大多數(shù) DOM 事件都有一個(gè)等效的 jQuery 方法。
$(document).ready() 方法允許我們?cè)谖臋n完全加載完后執(zhí)行函數(shù)。
jQuery 效果- 隱藏和顯示
隱藏、顯示、切換，滑動(dòng)，淡入淡出，以及動(dòng)畫。
slow(緩慢的)，可用作動(dòng)作時(shí)間。
jQuery hide(spaad) 和 show(spaad)：
通過 jQuery，您可以使用 "hide(隱藏)" 和 "show(顯示)" 方法來隱藏和顯示 HTML 元素。
speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取以下值："slow(緩慢的)"、"fast(快速的)" 或毫秒，可選的 callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱。
jQuery toggle(切換)：
通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
jQuery 效果 - 淡入淡出
通過 jQuery，您可以實(shí)現(xiàn)元素的淡入淡出效果。
jQuery 擁有下面四種 fade 方法：
fadeIn()，用于淡入已隱藏的元素。
fadeOut()，用于淡出顯示的元素。
fadeToggle()，可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換。
fadeTo()，允許漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間）。
jQuery 效果 - 滑動(dòng)
通過 jQuery，您可以在元素上創(chuàng)建滑動(dòng)效果。
jQuery 擁有以下滑動(dòng)方法：
slideDown()，用于向下滑動(dòng)元素。
slideUp()，用于向上滑動(dòng)元素。
slideToggle()，可以在 slideDown() 與 slideUp() 方法之間進(jìn)行切換。如果元素向下滑動(dòng)，則 slideToggle() 可向上滑動(dòng)它們。如果元素向上滑動(dòng)，則 slideToggle() 可向下滑動(dòng)它們。
jQuery 效果- 動(dòng)畫
jQuery animate() 方法允許您創(chuàng)建自定義的動(dòng)畫。
語法：$(selector).animate({params},speed,callback)，必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性。
默認(rèn)情況下，所有 HTML 元素都有一個(gè)靜態(tài)位置，且無法移動(dòng)，如需對(duì)位置進(jìn)行操作，要記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute！
jQuery animate() - 使用相對(duì)值，也可以定義相對(duì)值（該值相對(duì)于元素的當(dāng)前值）。需要在值的前面加上 "+=" 或 "-=" 。
jQuery animate() - 使用預(yù)定義的值，您也可以把屬性的動(dòng)畫值設(shè)置為 "show"、"hide" 或 "toggle" 。
jQuery animate() - 使用隊(duì)列功能，默認(rèn)地，jQuery 提供針對(duì)動(dòng)畫的隊(duì)列功能。
這意味著如果您在彼此之后編寫多個(gè) animate() 調(diào)用，jQuery 會(huì)創(chuàng)建包含這些方法調(diào)用的"內(nèi)部"隊(duì)列。然后逐一運(yùn)行這些 animate 調(diào)用。
jQuery 停止動(dòng)畫
jQuery stop() 方法用于在動(dòng)畫或效果完成前對(duì)它們進(jìn)行停止。
jQuery stop() 方法，jQuery stop() 方法用于停止動(dòng)畫或效果，在它們完成之前，stop() 方法適用于所有 jQuery 效果函數(shù)，包括滑動(dòng)、淡入淡出和自定義動(dòng)畫。
語法：$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動(dòng)畫隊(duì)列。默認(rèn)是 false，即僅停止活動(dòng)的動(dòng)畫，允許任何排入隊(duì)列的動(dòng)畫向后執(zhí)行。
可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫。默認(rèn)是 false。
因此，默認(rèn)地，stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫。
jQuery Callback(回調(diào)函數(shù)) 方法
Callback 函數(shù)在當(dāng)前動(dòng)畫 100% 完成之后執(zhí)行。
許多 jQuery 函數(shù)涉及動(dòng)畫。這些函數(shù)也許會(huì)將 speed 或 duration 作為可選參數(shù)。
例子：$("p").hide("slow")
speed 或 duration 參數(shù)可以設(shè)置許多不同的值，比如 "slow", "fast", "normal" 或毫秒。
jQuery - 鏈(Chaining)
通過 jQuery，可以把動(dòng)作/方法鏈接在一起。
Chaining 允許我們?cè)谝粭l語句中運(yùn)行多個(gè) jQuery 方法（在相同的元素上）。
jQuery 方法鏈接：直到現(xiàn)在，我們都是一次寫一條 jQuery 語句（一條接著另一條）。
不過，有一種名為鏈接（chaining）的技術(shù)，允許我們?cè)谙嗤脑厣线\(yùn)行多條 jQuery 命令，一條接著另一條。
提示： 這樣的話，瀏覽器就不必多次查找相同的元素。
如需鏈接一個(gè)動(dòng)作，您只需簡單地把該動(dòng)作追加到之前的動(dòng)作上。
如果需要，我們也可以添加多個(gè)方法調(diào)用。
提示：當(dāng)進(jìn)行鏈接時(shí)，代碼行會(huì)變得很長。不過，jQuery 語法不是很嚴(yán)格；您可以按照希望的格式來寫，包含換行和縮進(jìn)。
jQuery 會(huì)拋掉多余的空格，并當(dāng)成一行長代碼來執(zhí)行上面的代碼行。
jQuery - 獲取內(nèi)容和屬性
jQuery 擁有可操作 HTML 元素和屬性的強(qiáng)大方法。
jQuery DOM 操作：
jQuery 中非常重要的部分，就是操作 DOM 的能力，jQuery 提供一系列與 DOM 相關(guān)的方法，這使訪問和操作元素和屬性變得很容易。
DOM = Document Object Model（文檔對(duì)象模型）
DOM 定義訪問 HTML 和 XML 文檔的標(biāo)準(zhǔn)："W3C 文檔對(duì)象模型獨(dú)立于平臺(tái)和語言的界面，允許程序和腳本動(dòng)態(tài)訪問和更新文檔的內(nèi)容、結(jié)構(gòu)以及樣式"。
獲得內(nèi)容 - text()、html() 和 val()：
三個(gè)簡單實(shí)用的用于 DOM 操作的 jQuery 方法：
text() - 設(shè)置或返回所選元素的文本內(nèi)容
html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
val() - 設(shè)置或返回表單字段的值
attr("要獲取的屬性") - 方法用于獲取屬性值
jQuery - 設(shè)置內(nèi)容和屬性
設(shè)置內(nèi)容 - text()、html() 和 val()
text() - 設(shè)置或返回所選元素的文本內(nèi)容
html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
val() - 設(shè)置或返回表單字段的值
text()、html() 以及 val() 的回調(diào)函數(shù)：
text()、html() 以及 val()，同樣擁有回調(diào)函數(shù)?；卣{(diào)函數(shù)有兩個(gè)參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)，以及原始（舊的）值。然后以函數(shù)新值返回您希望使用的字符串。
attr() 方法也用于設(shè)置/改變屬性值。attr() 方法也允許您同時(shí)設(shè)置多個(gè)屬性。
attr()，也提供回調(diào)函數(shù)?；卣{(diào)函數(shù)有兩個(gè)參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)，以及原始（舊的）值。然后以函數(shù)新值返回您希望使用的字符串。
jQuery - 添加元素
通過 jQuery，可以很容易地添加新元素/內(nèi)容。
添加新內(nèi)容的四個(gè) jQuery 方法：
append() - 在被選元素的結(jié)尾插入內(nèi)容，（仍然該元素的內(nèi)部），可無限追加。
prepend() - 在被選元素的開頭插入內(nèi)容，可無限追加。
after() - 在被選元素之后插入內(nèi)容
before() - 在被選元素之前插入內(nèi)容
jQuery - 刪除元素
通過 jQuery，可以很容易地刪除已有的 HTML 元素。
可使用以下兩個(gè) jQuery 方法：
remove() - 刪除被選元素（及其子元素），remove() 方法也可接受一個(gè)參數(shù)，允許您對(duì)被刪元素進(jìn)行過濾，該參數(shù)可以是任何 jQuery 選擇器的語法。
empty() - 從被選元素中刪除子元素
jQuery - 獲取并設(shè)置 CSS 類
通過 jQuery，可以很容易地對(duì) CSS 元素進(jìn)行操作。
jQuery 擁有若干進(jìn)行 CSS 操作的方法：
addClass() - 向被選元素添加一個(gè)或多個(gè)類
removeClass() - 從被選元素刪除一個(gè)或多個(gè)類
toggleClass() - 對(duì)addClass()和removeClass() 的切換
jQuery css() 方法
css() - 設(shè)置或返回被選元素的一個(gè)或多個(gè)樣式屬性
如需返回指定的 CSS 屬性的值，請(qǐng)使用如右所示語法：css("(屬性名)propertyname")。
如需設(shè)置指定的 CSS 屬性，請(qǐng)使用如右所示語法：css("(屬性名)propertyname","(值)value")。
如需設(shè)置多個(gè) CSS 屬性，請(qǐng)使用如下語法：css({"propertyname":"value","propertyname":"value",...})。
jQuery 尺寸
通過 jQuery，很容易處理元素和瀏覽器窗口的尺寸。
jQuery 提供多個(gè)處理尺寸的重要方法：
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
jQuery width() 和 height() 方法：
width() 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距，邊框或外邊距）。
height() 方法設(shè)置或返回元素的高度（不包括內(nèi)邊距，邊框或外邊距）。
jQuery innerWidth() 和 innerHeight() 方法：
innerWidth() 方法返回元素的寬度（包括內(nèi)邊距，不包括外邊距）。
innerHeight() 方法返回元素的高度（包括內(nèi)邊距，不包括外邊距）。
jQuery outerWidth() 和 outerHeight() 方法：
outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框）。
jQuery 遍歷
jQuery 遍歷，意為"移動(dòng)"，用于根據(jù)其相對(duì)于其他元素的關(guān)系來"查找"（或選?。〩TML 元素。以某項(xiàng)選擇開始，并沿著這個(gè)選擇移動(dòng)，直到抵達(dá)您期望的元素為止。
遍歷 DOM：jQuery 提供了多種遍歷 DOM 的方法，遍歷方法中大的種類是樹遍歷（tree-traversal）。
jQuery 遍歷 - 祖先：
祖先是父、祖父或曾祖父等等，通過 jQuery，您能夠向上遍歷 DOM 樹，以查找元素的祖先。
這些 jQuery 方法很有用，它們用于向上遍歷 DOM 樹：
parent()方法，返回被選元素的直接父元素，該方法只會(huì)向上一級(jí)對(duì) DOM 樹進(jìn)行遍歷。
parents()方法，返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 ()。
parentsUntil()方法，返回介于兩個(gè)給定元素之間的所有祖先元素。
jQuery 遍歷 - 后代：
后代是子、孫、曾孫等等，通過 jQuery，您能夠向下遍歷 DOM 樹，以查找元素的后代。
下面是用于向下遍歷 DOM 樹的 jQuery 方法：
children()方法，返回被選元素的所有直接子元素，該方法只會(huì)向下一級(jí)對(duì) DOM 樹進(jìn)行遍歷。
find()方法，返回被選元素的后代元素，一路向下直到最后一個(gè)后代。
jQuery 遍歷 - 同胞(siblings)：
同胞擁有相同的父元素，通過 jQuery，您能夠在 DOM 樹中遍歷元素的同胞元素。
在 DOM 樹中水平遍歷，有許多有用的方法讓我們?cè)?DOM 樹進(jìn)行水平遍歷：
siblings() 方法，返回被選元素的所有同胞元素。
next()方法，返回被選元素的下一個(gè)同胞元素，該方法只返回一個(gè)元素。
nextAll()方法，返回被選元素的所有跟隨的同胞元素。
nextUntil()方法，返回介于兩個(gè)給定參數(shù)之間的所有跟隨的同胞元素。
prev()，prevAll()，prevUntil()方法，工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿著同胞之前元素遍歷，而不是之后元素遍歷）。
jQuery 遍歷- 過濾：
縮小搜索元素的范圍：
三個(gè)最基本的過濾方法是：first(), last() 和 eq()，它們?cè)试S您基于其在一組元素中的位置來選擇一個(gè)特定的元素。
其他過濾方法，比如 filter() 和 not() 允許您選取匹配或不匹配某項(xiàng)指定標(biāo)準(zhǔn)的元素。
first()方法，返回被選元素的首個(gè)元素。
last()方法，返回被選元素的最后一個(gè)元素。
eq()方法，返回被選元素中帶有指定索引號(hào)的元素，索引號(hào)從 0 開始，因此首個(gè)元素的索引號(hào)是 0 而不是 1。
filter()方法，允許您規(guī)定一個(gè)標(biāo)準(zhǔn)。不匹配這個(gè)標(biāo)準(zhǔn)的元素會(huì)被從集合中刪除，匹配的元素會(huì)被返回。
not()方法，返回不匹配標(biāo)準(zhǔn)的所有元素，提示：not() 方法與 filter() 相反。
jQuery - AJAX(創(chuàng)建交互式 Web 應(yīng)用程序而無需犧牲瀏覽器兼容性的流行方法)
AJAX 是與服務(wù)器交換數(shù)據(jù)的技術(shù)，它在不重載全部頁面的情況下，實(shí)現(xiàn)了對(duì)部分網(wǎng)頁的更新。
AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）,簡短地說，在不重載整個(gè)網(wǎng)頁的情況下，AJAX 通過后臺(tái)加載數(shù)據(jù)，并在網(wǎng)頁上進(jìn)行顯示。
jQuery 提供多個(gè)與 AJAX 有關(guān)的方法。
通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠(yuǎn)程服務(wù)器上請(qǐng)求文本、HTML、XML 或 JSON - 同時(shí)您能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中。
jQuery - AJAX load() 方法：
jQuery load() 方法是簡單但強(qiáng)大的 AJAX 方法，load() 方法從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中。
語法：$(selector).load(負(fù)荷)(URL(地址),data(數(shù)據(jù)),callback)。
必需的 URL 參數(shù)規(guī)定您希望加載的 URL。
可選的 data 參數(shù)規(guī)定與請(qǐng)求一同發(fā)送的查詢字符串鍵/值對(duì)集合。
可選的 callback 參數(shù)是 load() 方法完成后所執(zhí)行的函數(shù)名稱。
responseTxt - 包含調(diào)用成功時(shí)的結(jié)果內(nèi)容
statusTXT - 包含調(diào)用的狀態(tài)
xhr - 包含 XMLHttpRequest 對(duì)象
jQuery - AJAX get() 和 post() 方法：
jQuery get() 和 post() 方法用于通過 HTTP GET 或 POST 請(qǐng)求從服務(wù)器請(qǐng)求數(shù)據(jù)。
HTTP 請(qǐng)求：GET vs. POST：
兩種在客戶端和服務(wù)器端進(jìn)行請(qǐng)求-響應(yīng)的常用方法是：GET 和 POST。
GET - 從指定的資源請(qǐng)求數(shù)據(jù)
POST - 向指定的資源提交要處理的數(shù)據(jù)
GET 基本上用于從服務(wù)器獲得（取回）數(shù)據(jù)。注釋：GET 方法可能返回緩存數(shù)據(jù)。
POST 也可用于從服務(wù)器獲取數(shù)據(jù)。不過，POST 方法不會(huì)緩存數(shù)據(jù)，并且常用于連同請(qǐng)求一起發(fā)送數(shù)據(jù)。
$.get() 方法通過 HTTP GET 請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)，語法：$.get(URL,callback)，必需的 URL 參數(shù)規(guī)定您希望請(qǐng)求的 URL，可選的 callback 參數(shù)是請(qǐng)求成功后所執(zhí)行的函數(shù)名。
$.post() 方法通過 HTTP POST 請(qǐng)求向服務(wù)器提交數(shù)據(jù)，語法：$.post(URL,data,callback)，必需的 URL 參數(shù)規(guī)定您希望請(qǐng)求的 URL。可選的 data 參數(shù)規(guī)定連同請(qǐng)求發(fā)送的數(shù)據(jù)。
可選的 callback 參數(shù)是請(qǐng)求成功后所執(zhí)行的函數(shù)名。
jQuery - noConflict(無抵觸) 方法
如何在頁面上同時(shí)使用 jQuery 和其他框架？
jQuery 和其他 JavaScript 框架：
正如您已經(jīng)了解到的，jQuery 使用 $ 符號(hào)作為 jQuery 的簡寫。
noConflict() 方法，會(huì)釋放對(duì) $ 標(biāo)識(shí)符的控制，這樣其他腳本就可以使用它了，您也可以創(chuàng)建自己的簡寫。noConflict() 可返回對(duì) jQuery 的引用，您可以把它存入變量，以供稍后使用。
如果你的 jQuery 代碼塊使用 $ 簡寫，并且您不愿意改變這個(gè)快捷方式，那么您可以把 $ 符號(hào)作為變量傳遞給 ready 方法。這樣就可以在函數(shù)內(nèi)使用 $ 符號(hào)了 - 而在函數(shù)外，依舊不得不使用 "jQuery"。
JSONP(跨域)
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網(wǎng)頁從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)。
為什么我們從不同的域（網(wǎng)站）訪問數(shù)據(jù)需要一個(gè)特殊的技術(shù)(JSONP )呢？這是因?yàn)橥床呗浴?br/>同源策略，它是由Netscape提出的一個(gè)著名的安全策略，現(xiàn)在所有支持JavaScript 的瀏覽器都會(huì)使用這個(gè)策略。看完上述內(nèi)容，你們對(duì)jQuery有進(jìn)一步的了解嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)頁標(biāo)題：jQuery基礎(chǔ)知識(shí)介紹-創(chuàng)新互聯(lián)
文章位置：http://weahome.cn/article/dcoijs.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司