溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下jQuery方法的案例分析，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
jQuery 簡介
jQuery 是一個輕量級操作 DOM 的 JS 庫，主要包含以下功能：
HTML 元素選取和操作
HTML 事件函數
HTML DOM 遍歷和修改
CSS 操作
JavaScript 特效和動畫
AJAX
基于 jQuery 的插件
jQuery 的優勢在于兼容于所有主流瀏覽器, 包括 Internet Explorer 6!
jQuery 語法
$(selector).action()
文檔加載就緒事件
$(document).ready(function() {
// 代碼...
});
// 簡寫方式
$(function() {
// 代碼...
});$(document).ready 與 window.onload 的區別
$(document).ready 和 window.onload 都是在都是在頁面加載完執行的函數，大多數情況下差別不大。
$(document).ready:是 DOM 結構繪制完畢后就執行，不必等到加載完畢。 意思就是 DOM 樹加載完畢，就執行，不必等到頁面中圖片或其他外部文件都加載完畢。并且可以寫多個.ready。
window.onload:是頁面所有元素都加載完畢，包括圖片等所有元素。只能執行一次。
jQuery 選擇器
jQuery 選擇器基于已經存在的 CSS 選擇器
$('*')
$('p')
$('ul li')
$('ul li:last-child')
...
jQuery 事件
| 鼠標事件 | 鍵盤事件 | 表單事件 | 文檔/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dbclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
常用的 jQuery 事件方法
jQuery 效果
$(selector).action(speed,callback)
| 變量 | 說明 |
|---|---|
| selector | 選擇器 |
| action | 事件 |
| speed | 速度，毫秒，也可以為‘slow’、‘fast‘ |
| callback | 回掉函數 |
fadeTo() 漸變為給定不透明度
$(selector).fadeTo(speed,opacity,callback);
opacity 值為 0 與 1 之間
$(selector).animate({params},speed,callback);
| 參數 | 說明 | 是否必須 |
|---|---|---|
| params | 定義形成動畫的 css 屬性 | 必須 |
| speed | 速度，毫秒，也可以為‘slow’、‘fast‘ | 可選 |
| callback | 回掉函數 | 可選 |
實例
$("button").click(function() {
$("p").animate({
left: "250px",
opacity: "0.5",
height: "150px",
width: "150px"
});
});$(selector).stop(stopAll, goToEnd);
| 參數 | 說明 | 是否必須 |
|---|---|---|
| stopAll | 是否應該清除動畫隊列，默認是 false | 可選 |
| goToEnd | 是否立即完成當前動畫 | 可選 |
通過 jQuery，可以把動作/方法鏈接在一起。
Chaining 允許我們在一條語句中運行多個 jQuery 方法（在相同的元素上，瀏覽器就不必多次查找相同的元素。
$("#p1")
.css("color", "red")
.slideUp(2000)
.slideDown(2000);
// "p1" 元素首先會變為紅色，然后向上滑動，再然后向下滑動jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。
獲取內容
獲取屬性
// 獲取屬性
$('#test').attr('href'）
// 設置屬性
$('#test').attr('href','http://www.baidu.com')
$('#test').attr({
href: 'http://www.baidu.com',
title: '百度'
})
// 回掉函數
$('#test').attr('href', function(i, origValue){
// i 被選元素列表中當前元素的下標
// origValue 原始值
return origValue + '/jquery'
})jQuery remove() 方法也可接受一個參數，允許您對被刪元素進行過濾。該參數可以是任何 jQuery 選擇器的語法。下面的代碼表示刪除所有 p 元素中類名是 italic 的元素
$('p').remove('.italic')
// 返回樣式屬性
$("p").css("background-color");
// 設置樣式屬性
$("p").css("background-color", "yellow");
// 或者
$("p").css({ "background-color": "yellow", "font-size": "200%" });祖先元素：
$(document).ready(function() {
// p > ul > li > span
$("span").parentsUntil("p");
// 返回 ul 和 li
});后代元素：
$(document).ready(function() {
$("p").find("span");
});同胞元素：
元素過濾：
看完了這篇文章，相信你對jQuery方法的案例分析有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
