Jquery學(xué)習(xí)記錄

1、$(document).ready(function()$(button).click(function()$(h2).hide();$(#cc).hide(); / #+id$(input).hide(); / 類型);); 點擊Click me 之后This is a headingThis is a paragraph.This is another paragraph.Click me 2Google 的 CDNMicrosoft 的 CDN在你想引用的網(wǎng)頁開頭的 里面 加入上面兩句話之一，就ok。3$(this).hide() 演示 jQuery hide() 函數(shù)，隱藏當(dāng)前的 HT

2、ML 元素。$(#test).hide() 演示 jQuery hide() 函數(shù)，隱藏 id=test 的元素。$(p).hide() 演示 jQuery hide() 函數(shù)，隱藏所有 元素。$(.test).hide() 演示 jQuery hide() 函數(shù)，隱藏所有 class=test 的元素。456 fadeIn() $(selector).fadeIn(speed,callback); fadeOut() $(selector).fadeOut(speed,callback); fadeToggle() $(selector).fadeTooggle(speed,callback

3、); fadeTo() $(selector).fadeTo(speed,callback);$(button).click(function() $(#div1).fadeToggle(); $(#div2).fadeToggle(slow); $(#div3).fadeToggle(3000););fadeTo() 方法中必需的 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）7jquery 滑動效果滑動效果8 $(document).ready(function() $(button).click(function() $(div).animate( left:250p

4、x, height:150px, width:150px ); );); 開始動畫 。 9 $(button).click(function() $(div).animate( /設(shè)初始坐標(biāo)（0,0,0,0） left:250px, /移動到（250,0,0,0） opacity:0.5, /色彩變?yōu)樵瓉淼陌俜种?0 /高度變?yōu)?50 px； width:150px );); /寬度改為150px； $(button).click(function() $(div).animate( left:250px, /每運行一次 高度+150 width:+=150px ); 預(yù)定義；把屬性的動畫值設(shè)

5、置為 show、hide 或 toggle： ); 10jQuery animate() - 使用隊列功能使用隊列功能 $(button).click(function() var div=$(div); div.animate(height:300px,opacity:0.4,slow); div.animate(width:300px,opacity:0.8,slow); div.animate(height:100px,opacity:0.4,slow); div.animate(fontSize:3em,slow); );1112有一種名為鏈接（chaining）的技術(shù)，允許我們在相同

6、的元素上運行多條 jQuery 命令，一條接著另一條。提示：這樣的話，瀏覽器就不必多次查找相同的元素。如需鏈接一個動作，您只需簡單地把該動作追加到之前的動作上。也可以這樣寫：1314$(#btn1).click(function() $(#test1).text(Hello world!););$(#btn2).click(function() $(#test2).html(Hello world!););$(#btn3).click(function() $(#test3).val(Dolly Duck););這是段落。這是另一個段落。Input field: 15text()、html()

7、 以及 val()，同樣擁有回調(diào)函數(shù)?；卣{(diào)函數(shù)由兩個參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)，以及原始（舊的）值。然后以函數(shù)新值返回您希望使用的字符串。16$(document).ready(function() $(button).click(function() $(#w3s).attr( href : http:/ title : W3School jQuery 教程 ); ););W3S改變 href 和 title 值17四個 jQuery 方法： append() - 在被選元素的結(jié)尾插入內(nèi)容 prepend() - 在被選元素的開頭插入內(nèi)容 after() - 在被選元素之后插入內(nèi)容

8、before() - 在被選元素之前插入內(nèi)容$(document).ready(function() $(#btn1).click(function() $(p).append( Appended text.); ); $(#btn2).click(function() $(ol).append(Appended item); ););This is a paragraph.This is another paragraph.List item 1List item 2List item 3追加文本追加列表項18function appendText()var txt3=document.cr

9、eateElement(p);txt3.innerHTML=Text.; / 通過 DOM 來創(chuàng)建文本$(body).append(txt1,txt2,txt3); / 追加新元素This is a paragraph.追加文本var txt2=$().text(Text.); / 以 jQuery 創(chuàng)建新元素19如需刪除元素和內(nèi)容，一般可使用以下兩個 jQuery 方法： remove() - 刪除被選元素（及其子元素） /div 屬性及其里面所有東西 empty() - 從被選元素中刪除子元素 /div面的子屬性 如：$(document).ready(function() $(butto

10、n).click(function() $(#div1).remove(); ););This is some text in the div.This is a paragraph in the div.This is another paragraph in the div.刪除 div 元素20$(document).ready(function() $(button).click(function() $(#div1).empty(); ););This is some text in the div.This is a paragraph in the div.This is ano

11、ther para in the div.清空 div 元素21$(document).ready(function() $(button).click(function() $(p).remove(#aa); );$(button).click(function() $(p).remove(.italic); ););This is a paragraph in the div.This is another paragraph in the div.This is another paragraph in the div.刪除 class=italic id=aa的所有 p 元素22jQu

12、ery 操作 CSS addClass() - 向被選元素添加一個或多個類 removeClass() - 從被選元素刪除一個或多個類 toggleClass() - 對被選元素進(jìn)行添加/刪除類的切換操作 css() - 設(shè)置或返回樣式屬性CSS.importantfont-weight:bold;font-size:xx-large;.bluecolor:blue;23向不同的元素添加 class 屬性。當(dāng)然，在添加類時，您也可以選取多個元素：()$(document).ready(function() $(button).click(function() $(h1,h2,p).addCla

13、ss(blue); $(div).addClass(important); ););.importantfont-weight:bold;font-size:xx-large;.bluecolor:blue; 標(biāo)題 1標(biāo)題 2這是一個段落。這是另一個段落。這是非常重要的文本！向元素添加類24可以在 addClass() 方法中規(guī)定多個類： （一對多）$(document).ready(function() $(button).click(function() $(#div1).addClass(important blue); ););.importantfont-weight:bold;fo

14、nt-size:xx-large;.bluecolor:blue; 這是一些文本。這是一些文本。向第一個 div 元素添加類25該方法對被選元素進(jìn)行添加/刪除類的切換操作$(button).click(function() $(h1,h2,p).toggleClass(blue););26$(document).ready(function() $(button).click(function() alert(Background color = + ); ););這是標(biāo)題這是一個段落。這是一個段落。這是一個段落。返回 p 元素的背景色27語法 ：css(propertyname,value)

15、;設(shè)置多個 CSS 屬性，請使用如下語法：css(propertyname:value,propertyname:value,.);$(document).ready(function() $(button).click(function() $(p).css(background-color:yellow,font-size:200%); ););這是標(biāo)題這是一個段落。這是一個段落。這是一個段落。這是一個段落。為 p 元素設(shè)置多個樣式28jQuery width() 和 height() 方法width() 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）。height() 方法設(shè)置或

16、返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）。jQuery innerWidth() 和 innerHeight() 方法innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）。innerHeight() 方法返回元素的高度（包括內(nèi)邊距）jQuery outerWidth() 和 outerHeight() 方法outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）。outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框）。$(document).ready(function() $(button).click(function() var txt=; txt+=Doc

17、ument width/height: + $(document).width(); txt+=x + $(document).height() + n; txt+=Window width/height: + $(window).width(); txt+=x + $(window).height(); alert(txt); ););29什么是遍歷？jQuery 遍歷，意為“移動”，用于根據(jù)其相對于其他元素的關(guān)系來“查找”（或選?。〩TML 元素。以某項選擇開始，并沿著這個選擇移動，直到抵達(dá)您期望的元素為止。下圖展示了一個家族樹。通過 jQuery 遍歷，您能夠從被選（當(dāng)前的）元素開始，輕

18、松地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱為對 DOM 進(jìn)行遍歷。30 元素是 元素的父元素，同時是 的子元素 左邊的 元素是 的父元素， 的子元素，同時是 的后代。 元素是 的子元素，同時是 和 的后代。 兩個 元素是同胞（擁有相同的父元素）。 右邊的 元素是 的父元素， 的子元素，同時是 的后代。 元素是右邊的 的子元素，同時是 和 的后代。31向上遍歷 DOM 樹 parent() parents() parentsUntil() $(document).ready(function() $(span).parent().css(color:red,

19、border:2px solid red);); div (曾祖父) ul (祖父) li (直接父) span div (祖父) p (直接父) span 32jQuery parents() 方法parents() 方法返回被選元素的所有祖先元素，。$(document).ready(function() $(span).parents().css(color:red,border:2px solid red);); body (曾曾祖父) div (曾祖父) ul (祖父) li (直接父) span 您也可以使用可選參數(shù)來過濾對祖先元素的搜索。$(document).ready(fun

20、ction() $(span).parents(ul).css(color:red,border:2px solid red););body (曾曾祖父) div (曾祖父) ul (祖父) li (直接父) span /對 以上所有祖先元素檢索，找到ul 元素 并賦值34jQuery parentsUntil() 方法parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素。下面的例子返回介于 與 元素之間的所有祖先元素。$(document).ready(function() $(span).parentsUntil().css(color:red,border:2px s

21、olid red);); body (曾曾祖父) div (曾祖父) ul (祖父) li (直接父) span 35向下遍歷 DOM 樹下面是兩個用于向下遍歷 DOM 樹的 jQuery 方法： children() find()$(document).ready(function() $(div).children().css(color:red,border:2px solid red););div (當(dāng)前元素) p (子) span (孫) p (child) span (孫) 36也可以使用可選參數(shù)來過濾對子元素的搜索$(document).ready(function() $(di

22、v).children(p.1).css(color:red,border:2px solid red););div (當(dāng)前元素) p (子) span (孫) p (子) span (孫) 37另一種 檢索后代的方法find（）$(document).ready(function() $(div).find(span.1).css(color:red,border:2px solid red);$(div).find(p.1).css(color:red,border:2px solid red););div (current element) p (子) span (孫) p (child

23、) span (孫) 38在 DOM 樹中水平遍歷有許多有用的方法讓我們在 DOM 樹進(jìn)行水平遍歷： siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil()用的不多，了解39縮寫搜索元素的范圍三個最基本的過濾方法是：first(), last() 和 eq()，它們允許您基于其在一組元素中的位置來選擇一個特定的元素。其他過濾方法，比如 filter() 和 not() 允許您選取匹配或不匹配某項指定標(biāo)準(zhǔn)的元素。eq() 方法返回被選元素中帶有指定索引號的元素。索引號從 0 開始，因此首個元素的索引號是 0 而不是

24、 1。下面的例子選取第二個 元素（索引號 1）40jQuery first() 方法first() 方法返回被選元素的首個元素。jQuery last() 方法last() 方法返回被選元素的最后一個元素。$(document).ready(function() $(p).eq(1).css(background-color,yellow););歡迎來到我的主頁我是唐老鴨 (index 0)。唐老鴨 (index 1)。我住在 Duckburg (index 2)。我最好的朋友是米老鼠 (index 3)。41jQuery filter() 方法filter() 方法允許您規(guī)定一個標(biāo)準(zhǔn)。不匹配

25、這個標(biāo)準(zhǔn)的元素會被從集合中刪除，匹配的元素會被返回。$(document).ready(function() $(p).filter(.intro).css(background-color,yellow););歡迎來到我的主頁我是唐老鴨。我住在 Duckburg。我愛 Duckburg。我最好的朋友是 Mickey。42jQuery not() 方法not() 方法返回不匹配標(biāo)準(zhǔn)的所有元素提示：not() 方法與 filter() 相反。$(document).ready(function() $(p).not(.intro).css(background-color,yellow););歡

26、迎來到我的主頁我是唐老鴨。我住在 Duckburg。我愛 Duckburg。我最好的朋友是 Mickey。43AJAX 是與服務(wù)器交換數(shù)據(jù)的藝術(shù)，它在不重載全部頁面的情況下，實現(xiàn)了對部分網(wǎng)頁的更新。關(guān)于 jQuery 與 AJAXjQuery 提供多個與 AJAX 有關(guān)的方法。通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠(yuǎn)程服務(wù)器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中。提示：如果沒有 jQuery，AJAX 編程還是有些難度的。編寫常規(guī)的 AJAX 代碼并不容易，因為不同的瀏覽器對 AJA

27、X 的實現(xiàn)并不相同。這意味著您必須編寫額外的代碼對瀏覽器進(jìn)行測試。不過，jQuery 團(tuán)隊為我們解決了這個難題，我們只需要一行簡單的代碼，就可以實現(xiàn) AJAX 功能。44jQuery load() 方法是簡單但強大的 AJAX 方法。load() 方法從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中語法：$(selector).load(URL,data,callback);data 參數(shù)規(guī)定與請求一同發(fā)送的查詢字符串鍵/值對集合。 callback 參數(shù)是 load() 方法完成后所執(zhí)行的函數(shù)名稱$(document).ready(function() $(#btn1).click(funct

28、ion() $(#test).load(/example/jquery/demo_test.txt); ) 請點擊下面的按鈕，通過 jQuery AJAX 改變這段文本。獲得外部的內(nèi)容必需的 URL 參數(shù)規(guī)定您希望加載的 URL。可選的可選的45也可以把 jQuery 選擇器添加到 URL 參數(shù) 例子：把 demo_test.txt 文件中 id=p1 的元素的內(nèi)容，加載到指定的 元素中：$(#div1).load(demo_test.txt #p1);$(document).ready(function() $(button).click(function() $(#div1).load(/

29、example/jquery/demo_test.txt #p1); ););使用 jQuery AJAX 來改變文本獲得外部內(nèi)容46 callback 參數(shù)規(guī)定當(dāng) load() 方法完成后所要允許的回調(diào)函數(shù)。回調(diào)函數(shù)可以設(shè)置不同的參數(shù)： responseTxt - 包含調(diào)用成功時的結(jié)果內(nèi)容 statusTXT - 包含調(diào)用的狀態(tài) xhr - 包含 XMLHttpRequest 對象$(document).ready(function() $(button).click(function() $(#div1).load(/example/jquery/demo_test.txt,functio

30、n(responseTxt,statusTxt,xhr) if(statusTxt=success) alert(外部內(nèi)容加載成功！); if(statusTxt=error) alert(Error: +xhr.status+: +xhr.statusText); ););); 使用 jQuery AJAX 來改變文本獲得外部內(nèi)容47HTTP 請求：GET vs. POST兩種在客戶端和服務(wù)器端進(jìn)行請求-響應(yīng)的常用方法是：GET 和 POST。 GET - 從指定的資源請求數(shù)據(jù) POST - 向指定的資源提交要處理的數(shù)據(jù)GET 基本上用于從服務(wù)器獲得（取回）數(shù)據(jù)。注釋：POST 也可用于從服務(wù)器獲取數(shù)據(jù)。不過，GET 方法可能返回緩存數(shù)據(jù)。POST 方法不會緩存數(shù)據(jù)，并且常用于連同請求一起發(fā)送數(shù)據(jù)。48jQuery $.get() 方法$.get() 方法通過 HTTP GET 請求從服務(wù)器上請求數(shù)據(jù)。語法：$.get(URL,callback); url （必須） callback（可選）$(document).ready(function() $(button).click(function() $.get(/example/jquery/demo_test.asp,function