jQuery簡介

核心理念是write less,do more(寫得更少,做得更多)。


jQuery在2006年1月由美國人John Resig在紐約的barcamp發布,吸引了來自世界各地的眾多JavaScript高手加入,由Dave Methvin率領團隊進行開發。

如今,jQuery已經成為最流行的javascript庫,在世界前10000個訪問最多的網站中,有超過55%在使用jQuery。

jQuery是免費、開源的,使用MIT許可協議。

jQuery的語法設計可以使開發者更加便捷,例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能。

除此以外,jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者可以很輕松的開發出功能強大的靜態或動態網頁。

選擇器:

$("p") 選取全部

$("p.intro") 選取所有包含class為"intro"的 <p> 元素。

$("#demo") 選取 id為"demo" 的元素。

$("[href]") 選取所有帶有 href 屬性的元素。

$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。

$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。

$("[href^='/imgaes/']") 選取所有 href 值以 /imgaes/" 開頭的元素。

更多詳細信息請參見jQuery API的Selectors部分。

事件處理:

直接綁定指定事件,事件類型即方法名,支持click、focus、blur、submit等。

$("#button").click(function(){

//script

});

用on來綁定事件,off來解綁事件,第一個參數為事件名,第二個參數為回調函數。1.7.2版本開始支持。

$("#button").on('click',function(){

//script

});

jQuery還支持如下方法:

.blur() 表單元素失去焦點。

.change() 表單元素的值發生變化

.click() 鼠標單擊

.dblclick() 鼠標雙擊

.focus() 表單元素獲得焦點

.focusin() 子元素獲得焦點

.focusout() 子元素失去焦點

.hover() 同時為mouseenter和mouseleave事件指定處理函數

.keydown() 按下鍵盤(長時間按鍵,只返回一個事件)

.keypress() 按下鍵盤(長時間按鍵,將返回多個事件)

.keyup() 松開鍵盤

.load() 元素加載完畢

.mousedown() 按下鼠標

.mouseenter() 鼠標進入(進入子元素不觸發)

.mouseleave() 鼠標離開(離開子元素不觸發)

.mousemove() 鼠標在元素內部移動

.mouseout() 鼠標離開(離開子元素也觸發)

.mouseover() 鼠標進入(進入子元素也觸發)

.mouseup() 松開鼠標

.ready() DOM加載完成

.resize() 瀏覽器窗口的大小發生改變

.scroll() 滾動條的位置發生變化

.select() 用戶選中文本框中的內容

.submit() 用戶遞交表單

.toggle() 根據鼠標點擊的次數,依次運行多個函數

.unload() .當用戶離開頁面時,會發生 unload 事件。

遍歷:

add()?將元素添加到匹配元素的集合中。

andSelf()?把堆棧中之前的元素集添加到當前集合中。

children()?獲得匹配元素集合中每個元素的所有子元素。?

closest()?從元素本身開始,逐級向上級元素匹配,并返回最先匹配的祖先元素。

contents()?獲得匹配元素集合中每個元素的子元素,包括文本和注釋節點。

each()?對 jQuery?對象進行迭代,為每個匹配元素執行函數。?

end()?結束當前鏈中最近的一次篩選操作,并將匹配元素集合返回到前一次的狀態。

eq()?將匹配元素集合縮減為位于指定索引的新元素。?

filter()?將匹配元素集合縮減為匹配選擇器或匹配函數返回值的新元素。

find()?獲得當前匹配元素集合中每個元素的后代,由選擇器進行篩選。

first()?將匹配元素集合縮減為集合中的第一個元素。

has()?將匹配元素集合縮減為包含特定元素的后代的集合。?

is()?根據選擇器檢查當前的匹配元素集合,如果存在至少一個匹配元素,則返回 true。

last()?將匹配元素集合縮減為集合中的最后一個元素。

map()?把當前匹配集合中的每個元素傳遞給一個函數,產生包含返回值的新的 jQuery?對象。?

next()?獲得匹配元素集合中每個元素緊鄰的同輩元素。?

nextAll()?獲得匹配元素集合中每個元素之后的所有同輩元素,由選擇器進行篩選(可選)。

nextUntil()?獲得每個元素之后所有的同輩元素,直到遇到匹配選擇器的元素為止。

not()?從匹配元素集合中刪除元素。

offsetParent()?獲得用于定位的第一個父元素。

parent()?獲得當前匹配元素集合中每個元素的父元素,由選擇器篩選(可選)。?

parentsUntil()?獲得當前匹配元素集合中每個元素的祖先元素,直到遇到匹配選擇器的元素為止。?

prev()?獲得匹配元素集合中每個元素緊鄰的前一個同輩元素,由選擇器篩選(可選)。

prevAll()?獲得匹配元素集合中每個元素之前的所有同輩元素,由選擇器進行篩選(可選)。

prevUntil()?獲得每個元素之前所有的同輩元素,直到遇到匹配選擇器的元素為止。

siblings()?獲得匹配元素集合中所有元素的同輩元素,由選擇器篩選(可選)。

slice()?將匹配元素集合縮減為指定范圍的子集。


效果:

顯示隱藏:show(),hide(),toggle()

淡入淡出:fadeIn(),fadeOut(),fadeToggle(),fadeTo()

滑動效果:slideDown(),slideUp(),slideToggle()

動畫效果:animate()

文檔設置操作:

addClass() 向匹配的元素添加指定的類名。

after() 在匹配的元素之后插入內容。?

append() 向匹配的元素內部追加內容。

appendTo() 向匹配的元素內部追加內容。

attr() 設置或返回匹配元素的屬性和值。?

before() 在每個匹配的元素之前插入內容。

clone() 創建匹配元素集合的副本。?

detach() 從 DOM?中移除匹配元素集合。

empty() 刪除匹配的元素集合中所有的子節點。?

hasClass() 檢查匹配的元素是否擁有指定的類。?

html() 設置或返回匹配的元素集合中的 HTML?內容。?

insertAfter() 把匹配的元素插入到另一個指定的元素集合的后面。?

insertBefore() 把匹配的元素插入到另一個指定的元素集合的前面。

prepend() 向每個匹配的元素內部前置內容。?

prependTo() 向每個匹配的元素內部前置內容。

remove() 移除所有匹配的元素。?

removeAttr() 從所有匹配的元素中移除指定的屬性。?

removeClass()從所有匹配的元素中刪除全部或者指定的類。

replaceAll()用匹配的元素替換所有匹配到的元素。?

replaceWith()用新內容替換匹配的元素。

text()設置或返回匹配元素的內容。?

toggleClass()從匹配的元素中添加或刪除一個類。

unwrap()移除并替換指定元素的父元素。

val()設置或返回匹配元素的值。?

wrap()把匹配的元素用指定的內容或元素包裹起來。?

wrapAll()把所有匹配的元素用指定的內容或元素包裹起來。?

wrapinner()將每一個匹配的元素的子內容用指定的內容或元素包裹起來。

Ajax操作:

jQuery.ajax()執行異步 HTTP?(Ajax)?請求。?

ajaxComplete()當 Ajax?請求完成時注冊要調用的處理程序。這是一個 Ajax?事件。?

ajaxError()當 Ajax?請求完成且出現錯誤時注冊要調用的處理程序。這是一個 Ajax?事件。?

ajaxSend()在 Ajax?請求發送之前顯示一條消息。?

jQuery.ajaxSetup()設置將來的 Ajax?請求的默認值。?

ajaxStart()當首個 Ajax?請求完成開始時注冊要調用的處理程序。這是一個 Ajax?事件。

ajaxStop()當所有 Ajax?請求完成時注冊要調用的處理程序。這是一個 Ajax?事件。?

ajaxSuccess()當 Ajax?請求成功完成時顯示一條消息。

jQuery.get()使用 HTTP GET?請求從服務器加載數據。?

jQuery.getJSON()使用 HTTP GET?請求從服務器加載 JSON?編碼數據。?

jQuery.getScript()使用 HTTP GET?請求從服務器加載 JavaScript?文件,然后執行該文件。

load()從服務器加載數據,然后把返回到 HTML?放入匹配元素。?

jQuery.param()創建數組或對象的序列化表示,適合在 URL?查詢字符串或 Ajax?請求中使用。

jQuery.post()使用 HTTP POST?請求從服務器加載數據。?

serialize()將表單內容序列化為字符串。?

serializeArray()序列化表單元素,返回 JSON?數據結構數據。

————————其它內容以后會詳細介紹。


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、JQuery簡介 JQuery是繼Prototype之后又一個優秀的JavaScript庫。JQuery理念:...
    王閑森閱讀 389評論 0 1
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關注...
    前端進階之旅閱讀 16,679評論 18 503
  • 1.JQuery 基礎 改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,200評論 0 1
  • 1.JQuery 基礎 改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,378評論 0 2
  • 第一章 入門 基本功能:訪問和操作 dom 元素,控制頁面樣式,對頁面的事件處理,與ajax完美結合,有豐富的插件...
    X_Arts閱讀 1,066評論 0 2