天天看點

jQuery 簡單歸納總結

jQuery文法是為HTML元素的選取編制的,能夠對元素運作某些操作。

基礎文法是:$(selector).action()

+美元符号定義 jQuery

+選擇符(selector)“查詢”和“查找” HTML 元素

+jQuery 的 action() 運作對元素的操作

示範樣例:

$("p").hide()--隐藏全部段落

$(this).hide()--隐藏目前元素

jQuery選擇器:

元素選擇器:

$("p")--選取<p>元素

$("p.intro")--選取全部class=“intro”的<p>元素

$("p#intro")--選取全部id=“ontro”的<p>元素

屬性選擇器:

jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。

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

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

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

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

CSS選擇器:

$("p").css("background-color","red");

jQuery 名稱沖突:

jQuery使用$符号作為jQuery的簡稱方式。

某些其它JavaScript庫(比方Prototype)也是用相同的符号。

那麼此時,jQuery使用noConflict()的方法來解決此問題。

Var jq=jQuery.noConflict(); //幫助你使用自己的名稱來使用jQuery

jQuery是為事件處理專門設計的。

$(document).ready(function(){

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

    $("p").hide();

  });

});

jQuery hide()和show()

文法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

speed隐藏動作所運作速度。它能夠取值:“slow”.“fast”和毫秒值

callback隐藏後回調函數

jQuery toggle():顯示被隐藏的元素,隐藏已顯示的元素

jQuery效果:淡入淡出

淡入:$(selector).fadeIn(speed,callback)

淡出:$(selector).fadeOut(speed,callback)

淡入淡出切換:$(selector).fadeToggle(speed,callback)

漸變為給定不透明度:$(selector).fadeTo(speed,opacity,callback)

speed:動作運作速度。

它能夠取值:“slow”.“fast”和毫秒值

opacity:參數将淡入淡出效果設定為給定的不透明度(值介于 0 與 1 之間)。

jQuery滑動效果

向下滑動:$(selector).slideDown(speed,callback);

向上滑動:$(selector).slideUp(speed,callback);

上下切換:$(selector).slideToggle(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取下面值:"slow"、"fast" 或毫秒。

jQuery 動畫 animate()

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

patams:必須參數,定義形成的動畫css屬性

speed :可選參數,規定效果的時長。它能夠取下面值:"slow"、"fast" 或毫秒。

注:預設情況下。全部 HTML 元素的位置都是靜态的。而且無法移動。

如需對位置

    進行操作,記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 

    absolute。

jQuery:stop()--停止函數,動畫或效果。

文法:$(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數規定是否應該清除動畫隊列。預設是 false,

即僅停止活動的動畫,同意不論什麼排入隊列的動畫向後運作。

可選的 goToEnd 參數規定是否馬上完畢目前動畫。預設是 false。

Chaining能夠把動作方法連結起來:

$("#p1").css("color","red")

  .slideUp(2000)

  .slideDown(2000);

 jQuery擁有可操作HTMML元素的屬性的強慷慨法。

三個簡單有用的用于 DOM 操作的 jQuery 方法:

text() - 設定或傳回所選元素的文本内容

html() - 設定或傳回所選元素的内容(包含 HTML 标記)

val() - 設定或傳回表單字段的值

attr() - 擷取連結中href屬性的值

ps:括号無值為擷取,有值為設定

jQuery-加入元素

append() - 在被選元素的結尾插入内容(内部)

prepend() - 在被選元素的開頭插入内容(内部)

after() - 在被選元素之後插入内容(外部)

before() - 在被選元素之前插入内容(外部)

jQuery-删除元素

remove() - 删除被選元素(及其子元素)

empty() - 從被選元素中删除子元素

jQuery-擷取并設定CSS類

addClass() - 向被選元素加入一個或多個類

removeClass() - 從被選元素删除一個或多個類

toggleClass() - 對被選元素進行加入/删除類的切換操作

css() - 設定或傳回樣式屬性,可設定多個css屬性。例如以下:

css({"propertyname":"value","propertyname":"value",...});

jQuery-尺寸

width() 方法設定或傳回元素的寬度(不包含内邊距、邊框或外邊距)。

height() 方法設定或傳回元素的高度(不包含内邊距、邊框或外邊距)。

innerWidth() 方法傳回元素的寬度(包含内邊距)。

innerHeight() 方法傳回元素的高度(包含内邊距)。

outerWidth() 方法傳回元素的寬度(包含内邊距和邊框)。

outerHeight() 方法傳回元素的高度(包含内邊距和邊框)。

jQuery-周遊

向上周遊 DOM 樹

這些 jQuery 方法非常實用。它們用于向上周遊 DOM 樹:

parent() 方法傳回被選元素的直接父元素。

parents() 方法傳回被選元素的全部祖先元素,它一路向上直到文檔的根元素 (<html>)。

           能夠使用可選參數來過濾對祖先元素的搜尋。

parentsUntil() 方法傳回介于兩個給定元素之間的全部祖先元素。

例:

  $("span").parents("ul");

向下周遊 DOM 樹

以下是兩個用于向下周遊 DOM 樹的 jQuery 方法:

children()方法傳回被選元素的全部直接子元素。

能夠使用可選參數來過濾對子元素的搜尋。

find()方法傳回被選元素的後代元素,一路向下直到最後一個後代。

  $("div").children("p.1");

在 DOM 樹中水準周遊

有很多實用的方法讓我們在 DOM 樹進行水準周遊:

siblings()方法傳回被選元素的全部同胞元素。

next()方法傳回被選元素的下一個同胞元素。

nextAll()方法傳回被選元素的全部尾随的同胞元素。

nextUntil()方法傳回介于兩個給定參數之間的全部尾随的同胞元素。

prev()

prevAll()

prevUntil()

jQuery 周遊-過濾

first() 方法傳回被選元素的首個元素。

  $("div p").first();

last() 方法傳回被選元素的最後一個元素。

eq() 方法傳回被選元素中帶有指定索引號的元素。

filter() 方法同意您規定一個标準。不比對這個标準的元素會被從集合中删除,

          比對的元素會被傳回。

not() 方法傳回不比對标準的全部元素。與 filter() 相反。

 jQuery - AJAX 

 AJAX = 異步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

 簡短地說,在不重載整個網頁的情況下,AJAX 通過背景載入資料。并在網頁上進行顯示。

使用 AJAX 的應用程式案例:谷歌地圖、騰訊微網誌、優酷視訊、人人網等等。

jQuery - AJAX load() 方法(簡單但強大的AJAX方法),

從server載入資料,并把傳回的資料放入被選的元素中。

文法: $(selector).load(URL,data,callback);

必需的 URL 參數規定您希望載入的 URL。

可選的 data 參數規定與請求一同發送的查詢字元串鍵/值對集合。

可選的 callback 參數是 load() 方法完畢後所運作的函數名稱。

執行個體:

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

  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

    if(statusTxt=="success")

      alert("外部内容載入成功!");

    if(statusTxt=="error")

      alert("Error: "+xhr.status+": "+xhr.statusText);

jQuery $.get() 方法

$.get() 方法通過 HTTP GET 請求從server上請求資料。

$.get(URL,callback);

    $.get("/example/jquery/demo_test.asp",function(data,status){

      alert("資料:" + data + "\n狀态:" + status);

    });

jQuery $.post() 方法

$.post() 方法通過HTTP POST 請求從server上請求資料

$post(URL,data,callback);

必需的 URL 參數規定您希望請求的 URL。

可選的 data 參數規定連同請求發送的資料。

可選的 callback 參數是請求成功後所運作的函數名。

  $.post("demo_test_post.asp",

  {

    name:"Donald Duck",

    city:"Duckburg"

  },

  function(data,status){

    alert("Data: " + data + "\nStatus: " + status);

本文轉自mfrbuaa部落格園部落格,原文連結:http://www.cnblogs.com/mfrbuaa/p/5325212.html,如需轉載請自行聯系原作者

繼續閱讀