jQuery方法的總結（附範例）-js教程-PHP中文網

這篇文章帶給大家的內容是關於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 事件方法

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#回函數

顯示隱藏

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

淡入淡出

fadeOut() 淡入淡出
fadeToggle () 已淡出的元素淡入，已淡入的元素淡出
fadeTo() 漸變為給定不透明度
$(selector).fadeTo(speed,opacity,callback) ;
opacity 值為0 與1 之間

滑動

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

動畫

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

#參數paramsspeed##速度，毫秒，也可以為'slow'、'fast'可選#callback回掉函數實例

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

登入後複製

停止動畫

##說明	是否必須
定義形成動畫的css 屬性	#必須

##可選

$(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() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。 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() 返回介于两个给定参数之间的所有跟随的同胞元素。 prev() 返回被选元素的上一个同胞元素。 prevAll() 返回被选元素之前的所有的同胞元素。 prevUntil() 返回介于两个给定参数之间的所有前方的同胞元素。元素过滤： first() 返回被选元素的首个元素。 last() 返回被选元素的最后一个元素。 eq() 返回被选元素中带有指定索引号的元素。 filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。 not() 方法返回不匹配标准的所有元素。本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的jQuery教程视频栏目！

是否必須

可選

#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() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
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() 返回介于两个给定参数之间的所有跟随的同胞元素。
prev() 返回被选元素的上一个同胞元素。
prevAll() 返回被选元素之前的所有的同胞元素。
prevUntil() 返回介于两个给定参数之间的所有前方的同胞元素。

元素过滤：

first() 返回被选元素的首个元素。
last() 返回被选元素的最后一个元素。
eq() 返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的jQuery教程视频栏目！

以上是jQuery方法的總結（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！