這篇文章帶給大家的內容是關於jQuery方法的總結(附範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
jQuery 簡介
jQuery 是一個輕量級操作DOM 的JS 函式庫,主要包含下列功能:
HTML 元素選取與操作
#HTML 事件函數
HTML DOM 遍歷與修改
CSS 動作
JavaScript 特效與動畫
AJAX
基於jQuery 的外掛程式
jQuery 的優點在於相容於所有主流瀏覽器, 包含Internet Explorer 6!
jQuery 語法
$(selector).action()
文件載入就緒事件
1 2 3 4 5 6 7 8 | $(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#回函數
顯示隱藏
hide() 隱藏元素- show() 顯示元素
- toggle() 顯示被隱藏的元素,隱藏已顯示的元素
-
淡入淡出
fadeIn() 淡入- fadeOut() 淡入淡出
- fadeToggle () 已淡出的元素淡入,已淡入的元素淡出
-
- fadeTo() 漸變為給定不透明度$(selector).fadeTo(speed,opacity,callback) ;
opacity 值為0 與1 之間
滑動
#slideDown() 向下滑動展開元素- slideDown( ) 向上滑動收起元素
- slideToggle() 已展開元素上滑收起,已收起元素下滑展示
-
動畫
$(selector). animate({params},speed,callback);
#參數paramsspeed##速度,毫秒,也可以為'slow'、'fast'可選#callback回掉函數實例
1 2 3 4 5 6 7 8 | $( "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 方法(在相同的元素上,浏览器就不必多次查找相同的元素。
1 2 3 4 5 6 | $( "#p1" )
.css( "color" , "red" )
.slideUp(2000)
.slideDown(2000);
|
登入後複製
jQuery HTML
jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
获取内容和属性
获取内容
- text() 设置或返回所选元素的文本内容
- html() 设置或返回所选元素的内容(包括 HTML 标记)
- val() 设置或返回表单字段的值
获取属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $( '#test' ).attr( 'href' )
$( '#test' ).attr( 'href' , 'http://www.baidu.com' )
$( '#test' ).attr({
href: 'http://www.baidu.com' ,
title: '百度'
})
$( '#test' ).attr( 'href' , function (i, origValue){
return origValue + '/jquery'
})
|
登入後複製
添加删除元素
- append() 在被选元素的结尾插入内容
- prepend() 在被选元素的开头插入内容
- after() 在被选元素之后插入内容
- before() 在被选元素之前插入内容
- remove() 删除被选元素(及其子元素)
- empty() 从被选元素中删除子元素
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。下面的代码表示删除所有 p 元素中类名是 italic 的元素
$('p').remove('.italic')
获取并设置 css 类
- addClass() 向被选元素添加一个或多个类
- removeClass() 从被选元素删除一个或多个类
- toggleClass() 对被选元素进行添加/删除类的切换操作
- css() 设置或返回样式属性
1 2 3 4 5 6 7 | $( "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() 方法返回介于两个给定元素之间的所有祖先元素。
1 2 3 4 5 | $(document).ready( function () {
$( "span" ).parentsUntil( "p" );
});
|
登入後複製
后代元素:
- children() 返回被选元素的所有直接子元素。
- find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
1 2 3 | $(document).ready( function () {
$( "p" ).find( "span" );
});
|
登入後複製
同胞元素:
- siblings() 返回被选元素的所有同胞元素。
- next() 返回被选元素的下一个同胞元素。
- nextAll() 返回被选元素的所有跟随的同胞元素。
- nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
- prev() 返回被选元素的上一个同胞元素。
- prevAll() 返回被选元素之前的所有的同胞元素。
- prevUntil() 返回介于两个给定参数之间的所有前方的同胞元素。
元素过滤:
- first() 返回被选元素的首个元素。
- last() 返回被选元素的最后一个元素。
- eq() 返回被选元素中带有指定索引号的元素。
- filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
- not() 方法返回不匹配标准的所有元素。
本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的jQuery教程视频栏目!
|
以上是jQuery方法的總結(附範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!