溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jQuery方法的案例分析

發(fā)布時間：2020-12-02 13:49:05 來源：億速云 閱讀：138 作者：小新 欄目：web開發(fā)

小編給大家分享一下jQuery方法的案例分析，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

jQuery 簡介

jQuery 是一個輕量級操作 DOM 的 JS 庫，主要包含以下功能：

HTML 元素選取和操作

HTML 事件函數(shù)

HTML DOM 遍歷和修改

CSS 操作

JavaScript 特效和動畫

AJAX

基于 jQuery 的插件

jQuery 的優(yōu)勢在于兼容于所有主流瀏覽器, 包括 Internet Explorer 6!

jQuery 語法

$(selector).action()

文檔加載就緒事件

$(document).ready(function() {
  // 代碼...
});

// 簡寫方式
$(function() {
  // 代碼...
});

$(document).ready 與 window.onload 的區(qū)別

$(document).ready 和 window.onload 都是在都是在頁面加載完執(zhí)行的函數(shù)，大多數(shù)情況下差別不大。
$(document).ready:是 DOM 結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。 意思就是 DOM 樹加載完畢，就執(zhí)行，不必等到頁面中圖片或其他外部文件都加載完畢。并且可以寫多個.ready。
window.onload:是頁面所有元素都加載完畢，包括圖片等所有元素。只能執(zhí)行一次。

jQuery 選擇器

jQuery 選擇器基于已經(jīng)存在的 CSS 選擇器

$('*')
$('p')
$('ul li')
$('ul li:last-child')
...

jQuery 事件

鼠標(biāo)事件鍵盤事件表單事件文檔/窗口事件
clickkeypresssubmitload
dbclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleave
blurunload
hover


常用的 jQuery 事件方法

  • click() 點擊事件
  • dbclick() 雙擊事件
  • mouseenter() 鼠標(biāo)穿過元素事件
  • mouseleave() 鼠標(biāo)離開元素事件
  • mousedown() 鼠標(biāo)移動到元素上方按下鼠標(biāo)事件
  • mouseup() 鼠標(biāo)按住移動到元素上方松開鼠標(biāo)事件
  • hover() 鼠標(biāo)懸停事件
  • focus() 表單元素聚焦事件
  • blur() 表單元素失去焦點事件
  • submit() 表單提交事件
  • change() 表單元素值改變事件
  • keypress() 鍵盤鍵按住事件
  • keydown() 鍵盤鍵按下事件
  • keyup() 鍵盤鍵松開事件
  • load() 指定元素加載完成式執(zhí)行事件 （1.8 版本后廢棄）
  • resize() 窗口大小改變事件
  • scroll() 滾動監(jiān)聽事件

jQuery 效果

$(selector).action(speed,callback)
變量說明
selector選擇器
action事件
speed速度，毫秒，也可以為‘slow’、‘fast‘
callback回掉函數(shù)

顯示隱藏

  • hide() 隱藏元素
  • show() 顯示元素
  • toggle() 顯示被隱藏的元素，隱藏已顯示的元素

淡入淡出

  • fadeIn() 淡入
  • fadeOut() 淡出
  • fadeToggle() 已淡出的元素淡入，已淡入的元素淡出

  • fadeTo() 漸變?yōu)榻o定不透明度

    $(selector).fadeTo(speed,opacity,callback);
    opacity 值為 0 與 1 之間

滑動

  • slideDown() 向下滑動展開元素
  • slideDown() 向上滑動收起元素
  • slideToggle() 已展開元素上滑收起，已收起元素下滑展示

動畫

$(selector).animate({params},speed,callback);
參數(shù)說明是否必須
params定義形成動畫的 css 屬性必須
speed速度，毫秒，也可以為‘slow’、‘fast‘可選
callback回掉函數(shù)可選

實例

$("button").click(function() {
  $("p").animate({
    left: "250px",
    opacity: "0.5",
    height: "150px",
    width: "150px"
  });
});

停止動畫

$(selector).stop(stopAll, goToEnd);
參數(shù)說明是否必須
stopAll是否應(yīng)該清除動畫隊列，默認(rèn)是 false可選
goToEnd是否立即完成當(dāng)前動畫可選

jQuery 鏈(Chaining)

通過 jQuery，可以把動作/方法鏈接在一起。

Chaining 允許我們在一條語句中運行多個 jQuery 方法（在相同的元素上，瀏覽器就不必多次查找相同的元素。

$("#p1")
  .css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

// "p1" 元素首先會變?yōu)榧t色，然后向上滑動，再然后向下滑動

jQuery HTML

jQuery 提供一系列與 DOM 相關(guān)的方法，這使訪問和操作元素和屬性變得很容易。

獲取內(nèi)容和屬性

獲取內(nèi)容

  • text() 設(shè)置或返回所選元素的文本內(nèi)容
  • html() 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
  • val() 設(shè)置或返回表單字段的值

獲取屬性

  • attr() 設(shè)置或者返回所選的屬性的值
// 獲取屬性
$('#test').attr('href'）

// 設(shè)置屬性
$('#test').attr('href','http://www.baidu.com')

$('#test').attr({
    href: 'http://www.baidu.com',
    title: '百度'
})

// 回掉函數(shù)
$('#test').attr('href', function(i, origValue){
    // i 被選元素列表中當(dāng)前元素的下標(biāo)
    // origValue 原始值
    return origValue + '/jquery'
  })

添加刪除元素

  • append() 在被選元素的結(jié)尾插入內(nèi)容
  • prepend() 在被選元素的開頭插入內(nèi)容
  • after() 在被選元素之后插入內(nèi)容
  • before() 在被選元素之前插入內(nèi)容
  • remove() 刪除被選元素（及其子元素）
  • empty() 從被選元素中刪除子元素

jQuery remove() 方法也可接受一個參數(shù)，允許您對被刪元素進(jìn)行過濾。該參數(shù)可以是任何 jQuery 選擇器的語法。下面的代碼表示刪除所有 p 元素中類名是 italic 的元素

$('p').remove('.italic')

獲取并設(shè)置 css 類

  • addClass() 向被選元素添加一個或多個類
  • removeClass() 從被選元素刪除一個或多個類
  • toggleClass() 對被選元素進(jìn)行添加/刪除類的切換操作
  • css() 設(shè)置或返回樣式屬性
// 返回樣式屬性
$("p").css("background-color");

// 設(shè)置樣式屬性
$("p").css("background-color", "yellow");
// 或者
$("p").css({ "background-color": "yellow", "font-size": "200%" });

尺寸方法

  • width() 元素寬度
  • height() 元素高度
  • innerWidth() 包含 padding 寬度
  • innerHeight() 包含 padding 高度
  • outerWidth() 包含 padding、border 寬度
  • outerHeight() 包含 padding、border 高度
  • outerWidth(true) 包含 padding、border、margin 寬度
  • outerHeight(true) 包含 padding、border、margin 高度

元素遍歷

祖先元素：

  • parent() 返回被選元素的直接父元素，該方法只會向上一級對 DOM 樹進(jìn)行遍歷。
  • parents() 返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)。
  • parentsUntil() parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素。
$(document).ready(function() {
  // p > ul > li > span
  $("span").parentsUntil("p");
  // 返回 ul 和 li
});

后代元素：

  • children() 返回被選元素的所有直接子元素。
  • find() 方法返回被選元素的后代元素，一路向下直到最后一個后代。
$(document).ready(function() {
  $("p").find("span");
});

同胞元素：

  • siblings() 返回被選元素的所有同胞元素。
  • next() 返回被選元素的下一個同胞元素。
  • nextAll() 返回被選元素的所有跟隨的同胞元素。
  • nextUntil() 返回介于兩個給定參數(shù)之間的所有跟隨的同胞元素。
  • prev() 返回被選元素的上一個同胞元素。
  • prevAll() 返回被選元素之前的所有的同胞元素。
  • prevUntil() 返回介于兩個給定參數(shù)之間的所有前方的同胞元素。

元素過濾：

  • first() 返回被選元素的首個元素。
  • last() 返回被選元素的最后一個元素。
  • eq() 返回被選元素中帶有指定索引號的元素。
  • filter() 方法允許您規(guī)定一個標(biāo)準(zhǔn)。不匹配這個標(biāo)準(zhǔn)的元素會被從集合中刪除，匹配的元素會被返回。
  • not() 方法返回不匹配標(biāo)準(zhǔn)的所有元素。

看完了這篇文章，相信你對jQuery方法的案例分析有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手