1. 程式人生 > >jQuery 是一個 JavaScript 庫。

jQuery 是一個 JavaScript 庫。

新元素 常見 cape 術語 pat 焦點 查找 懸停 因此

JQuery 是一個 JavaScript 庫。
jQuery 極大地簡化了 JavaScript 編程。
jQuery 庫可以通過一行簡單的標記被添加到網頁中。
jQuery是一個JavaScript函數庫。
jQuery是一個輕量級的"寫的少,做的多"的JavaScript庫。
jQuery庫包含以下功能:
1、html,的元素選取
2、html的,元素操作
3、html dom,遍歷和修改
4、js,特效和動畫效果
5、css,操作
6、html,事件操作
7、ajax,異步請求方式
http:/ /www.iis7.com/
提示: 除此之外,Jquery還提供了大量的插件。
::::::::::::::::::::::
jQuery 語法
通過 jQuery,您可以選取(查詢,query) HTML 元素,並對它們執行"操作"(actions)。
jQuery 語法是通過選取 HTML 元素,並對選取的元素執行某些操作。
基礎語法: $(selector(選擇器)).(行為)action()
美元符號定義 jQuery
選擇符(selector)"查詢"和"查找" HTML 元素
jQuery 的 action() 執行對元素的操作
jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。
:::::::::::::::::::::::
文檔就緒事件
您也許已經註意到在我們的實例中的所有 jQuery 函數位於一個 document ready 函數中,這是為了防止文檔在完全加載(就緒)之前運行 jQuery 代碼,即在 DOM 加載完成後才可以對 DOM 進行操作。
兩種寫法:

  1. $(document).ready(function(){
    // 開始寫 jQuery 代碼...
    });
  2. 簡寫 $(function(){
    // 開始寫 jQuery 代碼...
    });
    如果在文檔沒有完全加載之前就運行函數,操作可能失敗。
    :::::::::::::::::::::::::
    jQuery 選擇器
    jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。
    jQuery 選擇器基於元素的 id、類、類型、屬性、屬性值等"查找"(或選擇)HTML 元素。 它基於已經存在的 CSS 選擇器,除此之外,它還有一些自定義的選擇器。
    jQuery 中所有選擇器都以美元符號開頭:$()。
    jQuery 元素選擇器基於元素名選取元素。
    ...................
    #id 選擇器
    jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
    頁面中元素的 id 應該是唯一的,所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。
    通過 id 選取元素語法如右側所示:$("#test")
    .................
    .class 選擇器
    jQuery 類選擇器可以通過指定的 class 查找元素。
    語法如右側所示:$(".test")
    ...........................
    $("*"),選取所有元素
    $(this),選取當前 HTML 元素
    $("p.intro"),選取 class 為 intro 的 <p> 元素
    $("p:first"),選取第一個 <p> 元素
    $("ul li:first"),選取第一個 <ul> 元素的第一個 <li> 元素
    $("ul li:first-child"),選取每個 <ul> 元素的第一個 <li> 元素
    $("[href]"),選取帶有 href 屬性的元素
    $("a[target=‘_blank‘]"),選取所有 target 屬性值等於 "_blank" 的 <a> 元素
    $("a[target!=‘_blank‘]"),選取所有 target 屬性值不等於 "_blank" 的 <a> 元素
    $(":button"),選取所有 type="button" 的 <input> 元素 和 <button> 元素
    $("tr:even"),選取偶數位置的 <tr> 元素
    $("tr:odd"),選取奇數位置的 <tr> 元素
    ::::::::::::::::::::::::::::::::::::::::::::::::::
    獨立文件中使用 jQuery 函數,如果您的網站包含許多頁面,並且您希望您的 jQuery 函數易於維護,那麽請把您的 jQuery 函數放到獨立的 .js 文件中。
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    jQuery 事件
    jQuery 是為事件處理特別設計的。
    頁面對不同訪問者的響應叫做事件。
    事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。
    實例:
    在元素上移動鼠標。
    選取單選按鈕
    點擊元素
    在事件中經常使用術語"觸發"(或"激發")例如: "當您按下按鍵時觸發 keypress(按鍵響應) 事件"。
    常見 DOM 事件:
    鼠標事件:
    click(單擊)
    dblclick(雙擊鼠標)
    mouseenter(鼠標移入),mouseleave(鼠標移出)
    mousedown(按下鼠標按鍵),mouseup(松開鼠標按鈕)
    hover()方法用於模擬光標懸停事件,當鼠標移動到元素上時,會觸發指定的第一個函數(mouseenter),當鼠標移出這個元素時,會觸發指定的第二個函數(mouseleave)。
    鍵盤事件:keypress(按鍵響應),keydown(按鍵按下),keyup(按鍵恢復)
    表單事件:submit(提交),change(更換),focus(焦點), blur(失去焦點)
    文檔/窗口事件: load(負荷),resize(調整尺寸), scroll(文本框中的起始滾動行), unload(卸載)
    fadeOut(淡出時間)
    在 jQuery 中,大多數 DOM 事件都有一個等效的 jQuery 方法。
    $(document).ready() 方法允許我們在文檔完全加載完後執行函數。
    ::::::::::::::::::::::::::::::::::::::::::::
    jQuery 效果- 隱藏和顯示
    隱藏、顯示、切換,滑動,淡入淡出,以及動畫。
    slow(緩慢的),可用作動作時間。
    。。。。。。。。。。。。。。。。。。
    jQuery hide(spaad) 和 show(spaad):
    通過 jQuery,您可以使用 "hide(隱藏)" 和 "show(顯示)" 方法來隱藏和顯示 HTML 元素。
    speed 參數規定隱藏/顯示的速度,可以取以下值:"slow(緩慢的)"、"fast(快速的)" 或毫秒,可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。
    。。。。。。。。。。。
    jQuery toggle(切換):
    通過 jQuery,您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    jQuery 效果 - 淡入淡出
    通過 jQuery,您可以實現元素的淡入淡出效果。
    jQuery 擁有下面四種 fade 方法:
    fadeIn(),用於淡入已隱藏的元素。
    fadeOut(),用於淡出顯示的元素。
    fadeToggle(),可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
    fadeTo(),允許漸變為給定的不透明度(值介於 0 與 1 之間)。
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    jQuery 效果 - 滑動
    通過 jQuery,您可以在元素上創建滑動效果。
    jQuery 擁有以下滑動方法:
    slideDown(),用於向下滑動元素。
    slideUp(),用於向上滑動元素。
    slideToggle(),可以在 slideDown() 與 slideUp() 方法之間進行切換。如果元素向下滑動,則 slideToggle() 可向上滑動它們。如果元素向上滑動,則 slideToggle() 可向下滑動它們。
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    jQuery 效果- 動畫
    jQuery animate() 方法允許您創建自定義的動畫。
    語法:$(selector).animate({params},speed,callback),必需的 params 參數定義形成動畫的 CSS 屬性。
    默認情況下,所有 HTML 元素都有一個靜態位置,且無法移動,如需對位置進行操作,要記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute!
    jQuery animate() - 使用相對值,也可以定義相對值(該值相對於元素的當前值)。需要在值的前面加上 "+=" 或 "-=" 。
    jQuery animate() - 使用預定義的值,您也可以把屬性的動畫值設置為 "show"、"hide" 或 "toggle" 。
    jQuery animate() - 使用隊列功能,默認地,jQuery 提供針對動畫的隊列功能。
    這意味著如果您在彼此之後編寫多個 animate() 調用,jQuery 會創建包含這些方法調用的"內部"隊列。然後逐一運行這些 animate 調用。
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    jQuery 停止動畫
    jQuery stop() 方法用於在動畫或效果完成前對它們進行停止。
    jQuery stop() 方法,jQuery stop() 方法用於停止動畫或效果,在它們完成之前,stop() 方法適用於所有 jQuery 效果函數,包括滑動、淡入淡出和自定義動畫。
    語法:$(selector).stop(stopAll,goToEnd);
    可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false,即僅停止活動的動畫,允許任何排入隊列的動畫向後執行。
    可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。
    因此,默認地,stop() 會清除在被選元素上指定的當前動畫。
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    jQuery Callback(回調函數) 方法
    Callback 函數在當前動畫 100% 完成之後執行。
    許多 jQuery 函數涉及動畫。這些函數也許會將 speed 或 duration 作為可選參數。
    例子:$("p").hide("slow")
    speed 或 duration 參數可以設置許多不同的值,比如 "slow", "fast", "normal" 或毫秒。
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    jQuery - 鏈(Chaining)
    通過 jQuery,可以把動作/方法鏈接在一起。
    Chaining 允許我們在一條語句中運行多個 jQuery 方法(在相同的元素上)。
    jQuery 方法鏈接:直到現在,我們都是一次寫一條 jQuery 語句(一條接著另一條)。
    不過,有一種名為鏈接(chaining)的技術,允許我們在相同的元素上運行多條 jQuery 命令,一條接著另一條。
    提示: 這樣的話,瀏覽器就不必多次查找相同的元素。
    如需鏈接一個動作,您只需簡單地把該動作追加到之前的動作上。
    如果需要,我們也可以添加多個方法調用。
    提示:當進行鏈接時,代碼行會變得很長。不過,jQuery 語法不是很嚴格;您可以按照希望的格式來寫,包含換行和縮進。
    jQuery 會拋掉多余的空格,並當成一行長代碼來執行上面的代碼行。
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    jQuery - 獲取內容和屬性
    jQuery 擁有可操作 HTML 元素和屬性的強大方法。
    jQuery DOM 操作:
    jQuery 中非常重要的部分,就是操作 DOM 的能力,jQuery 提供一系列與 DOM 相關的方法,這使訪問和操作元素和屬性變得很容易。
    DOM = Document Object Model(文檔對象模型)
    DOM 定義訪問 HTML 和 XML 文檔的標準:"W3C 文檔對象模型獨立於平臺和語言的界面,允許程序和腳本動態訪問和更新文檔的內容、結構以及樣式"。
    獲得內容 - text()、html() 和 val():
    三個簡單實用的用於 DOM 操作的 jQuery 方法:
    text() - 設置或返回所選元素的文本內容
    html() - 設置或返回所選元素的內容(包括 HTML 標記)
    val() - 設置或返回表單字段的值
    attr("要獲取的屬性") - 方法用於獲取屬性值
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    jQuery - 設置內容和屬性
    設置內容 - text()、html() 和 val()
    text() - 設置或返回所選元素的文本內容
    html() - 設置或返回所選元素的內容(包括 HTML 標記)
    val() - 設置或返回表單字段的值
    。。。。。。。。。。。。。。。。。。
    text()、html() 以及 val() 的回調函數:
    text()、html() 以及 val(),同樣擁有回調函數。回調函數有兩個參數:被選元素列表中當前元素的下標,以及原始(舊的)值。然後以函數新值返回您希望使用的字符串。
    attr() 方法也用於設置/改變屬性值。attr() 方法也允許您同時設置多個屬性。
    attr(),也提供回調函數。回調函數有兩個參數:被選元素列表中當前元素的下標,以及原始(舊的)值。然後以函數新值返回您希望使用的字符串。
    :::::::::::::::::::::::::::::::::
    jQuery - 添加元素
    通過 jQuery,可以很容易地添加新元素/內容。
    添加新內容的四個 jQuery 方法:
    append() - 在被選元素的結尾插入內容,(仍然該元素的內部),可無限追加。
    prepend() - 在被選元素的開頭插入內容,可無限追加。
    after() - 在被選元素之後插入內容
    before() - 在被選元素之前插入內容
    :::::::::::::::::::::::::::::::::
    jQuery - 刪除元素
    通過 jQuery,可以很容易地刪除已有的 HTML 元素。
    可使用以下兩個 jQuery 方法:
    remove() - 刪除被選元素(及其子元素),remove() 方法也可接受一個參數,允許您對被刪元素進行過濾,該參數可以是任何 jQuery 選擇器的語法。
    empty() - 從被選元素中刪除子元素
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    jQuery - 獲取並設置 CSS 類
    通過 jQuery,可以很容易地對 CSS 元素進行操作。
    jQuery 擁有若幹進行 CSS 操作的方法:
    addClass() - 向被選元素添加一個或多個類
    removeClass() - 從被選元素刪除一個或多個類
    toggleClass() - 對addClass()和removeClass() 的切換
    。。。。。。。。
    jQuery css() 方法
    css() - 設置或返回被選元素的一個或多個樣式屬性
    如需返回指定的 CSS 屬性的值,請使用如右所示語法:css("(屬性名)propertyname")。
    如需設置指定的 CSS 屬性,請使用如右所示語法:css("(屬性名)propertyname","(值)value")。
    如需設置多個 CSS 屬性,請使用如下語法:css({"propertyname":"value","propertyname":"value",...})。
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    jQuery 尺寸
    通過 jQuery,很容易處理元素和瀏覽器窗口的尺寸。
    jQuery 提供多個處理尺寸的重要方法:
    width()
    height()
    innerWidth()
    innerHeight()
    outerWidth()
    outerHeight()
    。。。。。。。。。。。。。。。。
    jQuery width() 和 height() 方法:
    width() 方法設置或返回元素的寬度(不包括內邊距,邊框或外邊距)。
    height() 方法設置或返回元素的高度(不包括內邊距,邊框或外邊距)。
    。。。。。。。。。。。。。。。。。。。。。
    jQuery innerWidth() 和 innerHeight() 方法:
    innerWidth() 方法返回元素的寬度(包括內邊距,不包括外邊距)。
    innerHeight() 方法返回元素的高度(包括內邊距,不包括外邊距)。
    。。。。。。。。。。。。。。。。。。。。。
    jQuery outerWidth() 和 outerHeight() 方法:
    outerWidth() 方法返回元素的寬度(包括內邊距和邊框)。
    outerHeight() 方法返回元素的高度(包括內邊距和邊框)。
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    jQuery 遍歷
    jQuery 遍歷,意為"移動",用於根據其相對於其他元素的關系來"查找"(或選取)HTML 元素。以某項選擇開始,並沿著這個選擇移動,直到抵達您期望的元素為止。
    遍歷 DOM:jQuery 提供了多種遍歷 DOM 的方法,遍歷方法中最大的種類是樹遍歷(tree-traversal)。
    。。。。。。。。。。
    jQuery 遍歷 - 祖先:
    祖先是父、祖父或曾祖父等等,通過 jQuery,您能夠向上遍歷 DOM 樹,以查找元素的祖先。
    這些 jQuery 方法很有用,它們用於向上遍歷 DOM 樹:
    parent()方法,返回被選元素的直接父元素,該方法只會向上一級對 DOM 樹進行遍歷。
    parents()方法,返回被選元素的所有祖先元素,它一路向上直到文檔的根元素 (<html>)。
    parentsUntil()方法,返回介於兩個給定元素之間的所有祖先元素。
    。。。。。。。。。。
    jQuery 遍歷 - 後代:
    後代是子、孫、曾孫等等,通過 jQuery,您能夠向下遍歷 DOM 樹,以查找元素的後代。
    下面是用於向下遍歷 DOM 樹的 jQuery 方法:
    children()方法,返回被選元素的所有直接子元素,該方法只會向下一級對 DOM 樹進行遍歷。
    find()方法,返回被選元素的後代元素,一路向下直到最後一個後代。
    。。。。。。。。。。。。。。
    jQuery 遍歷 - 同胞(siblings):
    同胞擁有相同的父元素,通過 jQuery,您能夠在 DOM 樹中遍歷元素的同胞元素。
    在 DOM 樹中水平遍歷,有許多有用的方法讓我們在 DOM 樹進行水平遍歷:
    siblings() 方法,返回被選元素的所有同胞元素。
    next()方法,返回被選元素的下一個同胞元素,該方法只返回一個元素。
    nextAll()方法,返回被選元素的所有跟隨的同胞元素。
    nextUntil()方法,返回介於兩個給定參數之間的所有跟隨的同胞元素。
    prev(),prevAll(),prevUntil()方法,工作方式與上面的方法類似,只不過方向相反而已:它們返回的是前面的同胞元素(在 DOM 樹中沿著同胞之前元素遍歷,而不是之後元素遍歷)。
    。。。。。。。。。。
    jQuery 遍歷- 過濾:
    縮小搜索元素的範圍:
    三個最基本的過濾方法是:first(), last() 和 eq(),它們允許您基於其在一組元素中的位置來選擇一個特定的元素。
    其他過濾方法,比如 filter() 和 not() 允許您選取匹配或不匹配某項指定標準的元素。
    first()方法,返回被選元素的首個元素。
    last()方法,返回被選元素的最後一個元素。
    eq()方法,返回被選元素中帶有指定索引號的元素,索引號從 0 開始,因此首個元素的索引號是 0 而不是 1。
    filter()方法,允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除,匹配的元素會被返回。
    not()方法,返回不匹配標準的所有元素,提示:not() 方法與 filter() 相反。
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    jQuery - AJAX(創建交互式 Web 應用程序而無需犧牲瀏覽器兼容性的流行方法)
    AJAX 是與服務器交換數據的技術,它在不重載全部頁面的情況下,實現了對部分網頁的更新。
    AJAX = 異步 JavaScript 和 XML(Asynchronous JavaScript and XML),簡短地說,在不重載整個網頁的情況下,AJAX 通過後臺加載數據,並在網頁上進行顯示。
    jQuery 提供多個與 AJAX 有關的方法。
    通過 jQuery AJAX 方法,您能夠使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數據直接載入網頁的被選元素中。
    。。。。。。。。。。。。。。
    jQuery - AJAX load() 方法:
    jQuery load() 方法是簡單但強大的 AJAX 方法,load() 方法從服務器加載數據,並把返回的數據放入被選元素中。
    語法:$(selector).load(負荷)(URL(地址),data(數據),callback)。
    必需的 URL 參數規定您希望加載的 URL。
    可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。
    可選的 callback 參數是 load() 方法完成後所執行的函數名稱。
    responseTxt - 包含調用成功時的結果內容
    statusTXT - 包含調用的狀態
    xhr - 包含 XMLHttpRequest 對象
    。。。。。。。。。。。。。。。。。
    jQuery - AJAX get() 和 post() 方法:
    jQuery get() 和 post() 方法用於通過 HTTP GET 或 POST 請求從服務器請求數據。
    HTTP 請求:GET vs. POST:
    兩種在客戶端和服務器端進行請求-響應的常用方法是:GET 和 POST。
    GET - 從指定的資源請求數據
    POST - 向指定的資源提交要處理的數據
    GET 基本上用於從服務器獲得(取回)數據。註釋:GET 方法可能返回緩存數據。
    POST 也可用於從服務器獲取數據。不過,POST 方法不會緩存數據,並且常用於連同請求一起發送數據。
    $.get() 方法通過 HTTP GET 請求從服務器上請求數據,語法:$.get(URL,callback),必需的 URL 參數規定您希望請求的 URL,可選的 callback 參數是請求成功後所執行的函數名。
    $.post() 方法通過 HTTP POST 請求向服務器提交數據,語法:$.post(URL,data,callback),必需的 URL 參數規定您希望請求的 URL。可選的 data 參數規定連同請求發送的數據。
    可選的 callback 參數是請求成功後所執行的函數名。
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    jQuery - noConflict(無抵觸) 方法
    如何在頁面上同時使用 jQuery 和其他框架?
    。。。。。。。。。。。。。。。
    jQuery 和其他 JavaScript 框架:
    正如您已經了解到的,jQuery 使用 $ 符號作為 jQuery 的簡寫。
    noConflict() 方法,會釋放對 $ 標識符的控制,這樣其他腳本就可以使用它了,您也可以創建自己的簡寫。noConflict() 可返回對 jQuery 的引用,您可以把它存入變量,以供稍後使用。
    如果你的 jQuery 代碼塊使用 $ 簡寫,並且您不願意改變這個快捷方式,那麽您可以把 $ 符號作為變量傳遞給 ready 方法。這樣就可以在函數內使用 $ 符號了 - 而在函數外,依舊不得不使用 "jQuery"。
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    JSONP(跨域) 教程
    Jsonp(JSON with Padding) 是 json 的一種"使用模式",可以讓網頁從別的域名(網站)那獲取資料,即跨域讀取數據。
    為什麽我們從不同的域(網站)訪問數據需要一個特殊的技術(JSONP )呢?這是因為同源策略。
    同源策略,它是由Netscape提出的一個著名的安全策略,現在所有支持JavaScript 的瀏覽器都會使用這個策略。

jQuery 是一個 JavaScript 庫。