jQuery 方法整理

時間 2019-11-08

標籤 jquery 方法整理欄目 JQuery 简体版

原文原文鏈接

jQuery 簡介

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

HTML 元素選取和操做
HTML 事件函數
HTML DOM 遍歷和修改
CSS 操做
JavaScript 特效和動畫
AJAX
基於 jQuery 的插件

jQuery 的優點在於兼容於全部主流瀏覽器, 包括 Internet Explorer 6!css

jQuery 語法

$(selector).action()

文檔加載就緒事件html

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

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

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

$(document).ready 和 window.onload 都是在都是在頁面加載完執行的函數，大多數狀況下差異不大。
$(document).ready:是 DOM 結構繪製完畢後就執行，沒必要等到加載完畢。意思就是 DOM 樹加載完畢，就執行，沒必要等到頁面中圖片或其餘外部文件都加載完畢。而且能夠寫多個.ready。
window.onload:是頁面全部元素都加載完畢，包括圖片等全部元素。只能執行一次。

jQuery 選擇器

jQuery 選擇器基於已經存在的 CSS 選擇器jquery

$('*')
$('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 事件方法瀏覽器

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

jQuery 效果

$(selector).action(speed,callback)

變量	說明
selector	選擇器
action	事件
speed	速度，毫秒，也能夠爲‘slow’、‘fast‘
callback	回掉函數

顯示隱藏

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

淡入淡出

fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 已淡出的元素淡入，已淡入的元素淡出
fadeTo() 漸變爲給定不透明度app

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

滑動

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

動畫

$(selector).animate({params},speed,callback);

參數	說明	是否必須
params	定義造成動畫的 css 屬性	必須
speed	速度，毫秒，也能夠爲‘slow’、‘fast‘	可選
callback	回掉函數	可選

實例ide

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

中止動畫

$(selector).stop(stopAll, goToEnd);

參數	說明	是否必須
stopAll	是否應該清除動畫隊列，默認是 false	可選
goToEnd	是否當即完成當前動畫	可選

jQuery 鏈(Chaining)

經過 jQuery，能夠把動做/方法連接在一塊兒。函數

Chaining 容許咱們在一條語句中運行多個 jQuery 方法（在相同的元素上，瀏覽器就沒必要屢次查找相同的元素。動畫

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

// "p1" 元素首先會變爲紅色，而後向上滑動，再而後向下滑動

jQuery HTML

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

獲取內容和屬性

獲取內容

text() 設置或返回所選元素的文本內容
html() 設置或返回所選元素的內容（包括 HTML 標記）
val() 設置或返回表單字段的值

獲取屬性

attr() 設置或者返回所選的屬性的值

// 獲取屬性
$('#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'
  })

添加刪除元素

append() 在被選元素的結尾插入內容
prepend() 在被選元素的開頭插入內容
after() 在被選元素以後插入內容
before() 在被選元素以前插入內容
remove() 刪除被選元素（及其子元素）
empty() 從被選元素中刪除子元素

jQuery remove() 方法也可接受一個參數，容許您對被刪元素進行過濾。該參數能夠是任何 jQuery 選擇器的語法。下面的代碼表示刪除全部 p 元素中類名是 italic 的元素

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

獲取並設置 css 類

addClass() 向被選元素添加一個或多個類
removeClass() 從被選元素刪除一個或多個類
toggleClass() 對被選元素進行添加/刪除類的切換操做
css() 設置或返回樣式屬性

// 返回樣式屬性
$("p").css("background-color");

// 設置樣式屬性
$("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 樹進行遍歷。
parents() 返回被選元素的全部祖先元素，它一路向上直到文檔的根元素 (<html>)。
parentsUntil() parentsUntil() 方法返回介於兩個給定元素之間的全部祖先元素。

$(document).ready(function() {
  // div > ul > li > span
  $("span").parentsUntil("div");
  // 返回 ul 和 li
});

後代元素：

children() 返回被選元素的全部直接子元素。
find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。

$(document).ready(function() {
  $("div").find("span");
});

同胞元素：

siblings() 返回被選元素的全部同胞元素。
next() 返回被選元素的下一個同胞元素。
nextAll() 返回被選元素的全部跟隨的同胞元素。
nextUntil() 返回介於兩個給定參數之間的全部跟隨的同胞元素。
prev() 返回被選元素的上一個同胞元素。
prevAll() 返回被選元素以前的全部的同胞元素。
prevUntil() 返回介於兩個給定參數之間的全部前方的同胞元素。

元素過濾：

first() 返回被選元素的首個元素。
last() 返回被選元素的最後一個元素。
eq() 返回被選元素中帶有指定索引號的元素。
filter() 方法容許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
not() 方法返回不匹配標準的全部元素。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。