|
一、核心:$是jquery類的一個(gè)別名,$()構(gòu)造一個(gè)jquery對(duì)象,jQuery 的核心功能都是通過(guò)這個(gè)函數(shù)實(shí)現(xiàn)的。 jQuery中的一切都基于這個(gè)函數(shù)，或者說(shuō)都是在以某種方式使用這個(gè)函數(shù)。 1、 ${表達(dá)式}：根據(jù)這個(gè)表達(dá)式來(lái)查找所有匹配的元素。 eg:$("div>p"); 查找所有p元素，且這些p元素都是div的子元素. $("input:radio",document.forms[0]); 查找文檔第一個(gè)表單中，所有的單選按鈕。 $("div",xml.responseXML);在一個(gè)由ajax返回的xml文檔中，查找所有的div元素。 2、$(html標(biāo)記字符串) :根據(jù)提供的html字符串，創(chuàng)建jquery對(duì)象包裝的dom元素。 eg: $("<div><p>Hello</p></div>").appendTo("body"); 創(chuàng)建一個(gè) <input> 元素必須同時(shí)設(shè)定 type 屬性 $("<input type='text'>") 、$(dom元素):將一個(gè)或多個(gè)dom元素轉(zhuǎn)換為jquery對(duì)象。 eg: $(document.body).css( "background", "black" ); 設(shè)置頁(yè)面背景色 4、$(document).ready(function(){})==$(function(){})；在頁(yè)面加載完成后自動(dòng)執(zhí)行的代碼。 二、jquery對(duì)象訪問(wèn)。eq返回的是jquery對(duì)象，只能使用jquery方法，get返回的是dom元素對(duì)象，只能使用dom方法. 1、$(dom元素).each(function(){}):以每一個(gè)匹配的元素作為上下文來(lái)執(zhí)行一個(gè)函數(shù) 2、$(dom元素).size()==$(dom元素).length;對(duì)象中元素的個(gè)數(shù)。eg:<img src="test1.jpg"/> <img src="test2.jpg"/>,jquery代碼：$("img").size(); 返回2 3、context：返回傳給jQuery()的原始的DOM節(jié)點(diǎn)內(nèi)容，即jQuery()的第二個(gè)參數(shù)。如果沒(méi)有指定，那么context指向當(dāng)前的文檔(document)。 4、$(dom元素).get()：取得所有匹配的dom元素的集合。如果你想要直接操作 DOM 對(duì)象而不是 jQuery 對(duì)象，這個(gè)函數(shù)非常有用。 5、$(dom元素).get(index)：取得其中一個(gè)匹配的元素. 6、$(dom元素).index():搜索與參數(shù)表示的對(duì)象匹配的元素，并返回相應(yīng)元素的索引值。 三、插件機(jī)制: 1、jQuery.fn.extend(object);擴(kuò)展 jQuery 元素集來(lái)提供新的方法,針對(duì)某一個(gè)dom元素。 eg:jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; });}, uncheck: function() { return this.each(function() { this.checked = false; });} }); 調(diào)用： $("input[type=checkbox]").check(); $("input[type=radio]").uncheck(); 2、$.extend(object);用來(lái)在jQuery命名空間上增加新函數(shù),針對(duì)所有dom元素。 $.extend({ min:function(a,b){return a<b?a:b;}, max:function(a,b){return a>b?a;b;} }); 調(diào)用：$.max(10,20); 四、選擇器 基本： 1、$("#id"): 根據(jù)給定的ID匹配一個(gè)元素。 2、$("dom元素名")：根據(jù)給定的元素名匹配所有元素 3、$(".Class類名"): 根據(jù)給定的類匹配元素。 4、$("*") ：匹配所有元素。 5、$("dom元素.class類名")：選擇所有class屬性為指定類名的dom元素。 6、$(".stripe tr"): 獲取class屬性為stripe的table元素下的所有行 層級(jí)： 1、$("ancestor descendant"):在給定的祖先元素下匹配所有的后代元素 2、$("parent > child"):在給定的父元素下匹配所有的子元素 3、$("prev + next"):匹配所有緊接在 prev 元素后的 next 元素 4、$("prev ~ siblings"):匹配 prev 元素之后的所有 siblings(同級(jí)) 元素 簡(jiǎn)單: 1、$("tr:first") 匹配找到的第一個(gè)元素 2、$("tr:last") 匹配找到的最后一個(gè)元素 3、$("input:not(:checked)") 去除所有與給定選擇器匹配的元素 4、$("tr:even") 匹配所有索引值為偶數(shù)的元素，從 0 開(kāi)始計(jì)數(shù) 5、$("tr:odd") 匹配所有索引值為奇數(shù)的元素，從 0 開(kāi)始計(jì)數(shù) 6、$("tr:eq(1)") 匹配一個(gè)給定索引值的元素 7、$("tr:gt(0)") 匹配所有大于給定索引值的元素 8、$("tr:lt(2)") 匹配所有小于給定索引值的元素 內(nèi)容： 1、$("div:contains('John')") 匹配包含給定文本的元素 2、$("div:has(p)") 匹配所有包含 p 元素的 div 元素 3、$("td:empty") 查找所有不包含子元素或者文本的空元素 可見(jiàn)性： 1、$("tr:visible") 查找所有可見(jiàn)的 tr 元素 2、$("tr:hidden") 匹配所有的不可見(jiàn)元素，input 元素的 type 屬性為 "hidden" 的話也會(huì)被匹配到 屬性： 1、$("div[id]") 查找所有含有 id 屬性的 div 元素 2、$("input[name='newsletter']") 查找所有 name 屬性是 newsletter 的 input 元素 3、$("input[name!='newsletter']") 查找所有 name 屬性不是 newsletter 的 input 元素 4、$("input[name^='news']") 查找所有 name 以 'news' 開(kāi)始的 input 元素 5、$("input[name$='letter']") 查找所有 name 以 'letter' 結(jié)尾的 input 元素 6、$("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素 7、$("input[id][name$='man']") 找到所有含有 id 屬性，并且它的 name 屬性是以 man 結(jié)尾的 子元素： 1、nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2) 匹配其父元素下的第N個(gè)子或奇偶元素 2、$("ul li:first-child") 在每個(gè) ul 中查找第一個(gè) li 3、$("ul li:last-child") 在每個(gè) ul 中查找最后一個(gè) li 4、$("ul li:only-child") 在 ul 中查找是唯一子元素的 li 表單： 1、$(":input") 查找所有的input元素 2、$("text") 匹配所有的單行文本框 3、$(":password") 匹配所有密碼框 4、$("radio") 匹配所有單選按鈕 5、$("checkbox") 匹配所有復(fù)選框 6、$("submit") 匹配所有提交按鈕 7、$("image") 匹配所有圖像域 8、$("button") 匹配所有按鈕 9、$("file") 匹配所有文件域 10、$("hidden") 匹配所有不可見(jiàn)元素，或者type為hidden的元素 表單對(duì)象屬性： 1、$("input:checked") 匹配所有選中的被選中元素(復(fù)選框、單選框等，不包括select中的option) 2、$("input:enabled") 匹配所有可用元素 3、$("input:disabled") 匹配所有不可用元素 04、$("select option:selected") 匹配所有選中的option元素 五、屬性操作 操作屬性： 1、$("img").attr("src"); 返回文檔中第一個(gè)圖像的src屬性值。 2、$("img").attr("src","test.jpg"); 為所有匹配的元素設(shè)置一個(gè)屬性值 3、$("img").attr("title", function() { return this.src }); 為所有匹配的元素設(shè)置一個(gè)計(jì)算的屬性值 4、$("img").removeAttr("src"); 從每一個(gè)匹配的元素中刪除一個(gè)屬性 5、$("img").attr({ src: "test.jpg", alt: "Test Image" }); 將一個(gè)“名/值”形式的對(duì)象設(shè)置為所有匹配元素的屬性。 操作CSS: 1、$("p").addClass("selected"); 為每個(gè)匹配的元素添加指定的類名 2、$("p").removeClass("selected"); 從所有匹配的元素中刪除全部或者指定的類。一個(gè)或多個(gè)要?jiǎng)h除的CSS類名，請(qǐng)用空格分開(kāi) $("p").removeClass();刪除匹配元素的所有類 3、$("p").toggleClass("selected"); 如果存在（不存在）就刪除（添加）一個(gè)類 4、 var count = 0; $("p").click(function(){ $(this).toggleClass("highlight", count++ % 3 == 0); }); 每點(diǎn)擊三下加上一次 'selected' 類 HTML代碼: 1、$("div").html(); 取得第一個(gè)匹配元素的html內(nèi)容 2、$("div").html("<p>Hello Again</p>"); 設(shè)置每一個(gè)匹配元素的html內(nèi)容 文本： 1、$("p").text(); 取得所有匹配元素的內(nèi)容 2、$("p").text("<b>Some</b> new text."); 設(shè)置所有匹配元素的文本內(nèi)容 值： 1、 $("#single").val() 獲得第一個(gè)匹配元素的當(dāng)前值。 2、$("input").val("hello world!"); 設(shè)置每一個(gè)匹配元素的值 六、篩選 過(guò)濾： 1、$("p").eq(1) 獲取第N個(gè)元素，這個(gè)元素的位置是從0算起 2、 if ( $(this).hasClass("protected") ) 檢查當(dāng)前的元素是否含有某個(gè)特定的類，如果有，則返回true。 3、$("p").filter(".selected") 篩選出與指定表達(dá)式匹配的元素集合 4、is(expr) 用一個(gè)表達(dá)式來(lái)檢查當(dāng)前選擇的元素集合，如果其中至少有一個(gè)元素符合這個(gè)給定的表達(dá)式就返回true。 5、$("p").not( $("#selected")[0] ) 刪除與指定表達(dá)式匹配的元素 查找： 1、$("div").children();取得一個(gè)包含匹配的元素集合中每一個(gè)元素的所有子元素的元素集合。 2、$("p").find("span");搜索所有與指定表達(dá)式匹配的元素。這個(gè)函數(shù)是找出正在處理的元素的后代元素的好方法。 3、$("p").next();取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合 4、$("p").prev();取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的前一個(gè)同輩元素的元素集合。 5、$("div").parent;取得一個(gè)包含著所有匹配元素的唯一父元素的元素集合。 6、$("span").parents;找到每個(gè)span元素的所有祖先元素 7、$("div").siblings();取得一個(gè)包含匹配的元素集合中每一個(gè)元素的所有唯一同輩元素的元素集合 七、文檔處理 內(nèi)部插入： 1、$("p").append("<b>Hello</b>"); 向每個(gè)匹配的元素內(nèi)部尾部追加內(nèi)容 2、$("p").prepend("<b>Hello</b>"); 向每個(gè)匹配的元素內(nèi)部前部追加內(nèi)容 2、$("p").appendTo("#foo"); 把所有段落追加到ID值為foo的元素中。 外部插入： 1、$("p").after("<b>Hello</b>"); 在每個(gè)匹配的元素之后插入內(nèi)容 2、$("p").before("<b>Hello</b>"); 在每個(gè)匹配的元素之前插入內(nèi)容 包裹 1、$("p").wrap("<div class='wrap'></div>"); 把所有匹配的元素用其他元素的結(jié)構(gòu)化標(biāo)記包裹起來(lái)。 替換： 1、$("p").replaceWith("<b>Paragraph. </b>"); 將所有匹配的元素替換成指定的HTML或DOM元素。 刪除： 1、$("p").empty(); 刪除匹配的元素集合中所有的子節(jié)點(diǎn)。 2、$("p").remove(); 從DOM中刪除所有匹配的元素 八、CSS操作 CSS: 1、$("p").css("color"); 取得第一個(gè)段落的color樣式屬性的值 2、$("p").css({ color: "#ff0011", background: "blue" }); 把一個(gè)“名/值對(duì)”對(duì)象設(shè)置為所有匹配元素的樣式屬性。 3、$("p").css("color","red"); 在所有匹配的元素中，設(shè)置一個(gè)樣式屬性的值 位置： 1、var offset = p.offset();獲取匹配元素在當(dāng)前視口的相對(duì)偏移，返回的對(duì)象包含兩個(gè)整形屬性：top 和 left。此方法只對(duì)可見(jiàn)元素有效。 2、var position = p.position();獲取匹配元素相對(duì)父元素的偏移 尺寸： 1、$("p").height(); 取得第一個(gè)匹配元素當(dāng)前計(jì)算的高度值（px）。 2、$("p").height(20); 為每個(gè)匹配的元素設(shè)置CSS高度(hidth)屬性的值 3、$("p").width(); 取得第一個(gè)匹配元素當(dāng)前計(jì)算的寬度值（px）。$(window).width(); 獲取當(dāng)前窗口的寬 4、$("p").width(20); 為每個(gè)匹配的元素設(shè)置CSS寬度(width)屬性的值 九、效果 基本： 1、$("p").show() 顯示隱藏的匹配元素 2、$("p").hide() 隱藏顯示的元素 3、$("p").show("slow"); 以優(yōu)雅的動(dòng)畫(huà)顯示所有匹配的元素，并在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。 speed (String,Number) : 三種預(yù)定速度之一的字符串("slow", "normal", or "fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000) callback (Function) : (Optional) 在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。 用迅速的動(dòng)畫(huà)將隱藏的段落顯示出來(lái)，歷時(shí)200毫秒。并在之后執(zhí)行反饋！ <p style="display: none">Hello</p> jQuery 代碼: $("p").show("fast",function(){ $(this).text("Animation Done!"); }); 4、$("p").hide("slow"); 以優(yōu)雅的動(dòng)畫(huà)隱藏所有匹配的元素，并在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。 5、$("p").toggle() 切換元素的可見(jiàn)狀態(tài) 6、$("p").toggle("slow"); 以優(yōu)雅的動(dòng)畫(huà)切換所有匹配的元素，并在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù) 淡入淡出: 1、$("p").fadeIn("slow"); 通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡入效果，并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù) 2、$("p").fadeOut("slow"); 通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡出效果，并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。 3、$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66); 把所有匹配元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度，并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù) 自定義： 1、$("#block").animate({ width: "90%", height: "100%", fontSize: "20em", borderWidth: 10 }, 1000 );用于創(chuàng)建自定義動(dòng)畫(huà)的函數(shù)。 十、事件 事件處理： 1、$("p").bind("click", function(){ alert( $(this).text() );}); 為每一個(gè)匹配元素的特定事件（像click）綁定一個(gè)事件處理器函數(shù) 2、$("p").one("click",function(){alert(${this}.text());}) 當(dāng)所有段落被第一次點(diǎn)擊的時(shí)候，顯示所有其文本 3、trigger(type,[data])在每一個(gè)匹配的元素上觸發(fā)某類事件 事件委派：$("p").live("click", function(){$(this).after("<p>Another paragraph!</p>");});。給所有當(dāng)前以及將來(lái)會(huì)匹配的元素綁定一個(gè)事件處理函數(shù)（比如click事件）。也能綁定自定義事件。與bind()不同的是，live()一次只能綁定一個(gè)事件 事件切換:一個(gè)模仿懸停事件（鼠標(biāo)移動(dòng)到一個(gè)對(duì)象上面及移出這個(gè)對(duì)象）的方法 $("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );鼠標(biāo)懸停的表格加上特定的類 4、每次點(diǎn)擊后依次調(diào)用函數(shù)。 $("td").toggle( function () { $(this).addClass("selected"); }, function () { $(this).removeClass("selected"); } ); 5、事件: 1、$("p").blur(); 觸發(fā)每一個(gè)匹配元素的blur事件 2、$("p").blur( function () { alert("Hello World!"); } ); 在每一個(gè)匹配元素的blur事件中綁定一個(gè)處理函數(shù) 3、change()；change事件會(huì)在元素失去焦點(diǎn)的時(shí)候觸發(fā)，也會(huì)當(dāng)其值在獲得焦點(diǎn)后改變時(shí)觸 4、change(fn);在每一個(gè)匹配元素的change事件中綁定一個(gè)處理函數(shù)。 5、$("p").click(); 觸發(fā)每一個(gè)匹配元素的click事件 6、$("p").click(function(){});在每一個(gè)匹配元素的click事件中綁定一個(gè)處理函數(shù) 7、dblclick()；dblclick事件會(huì)在元素的同一點(diǎn)雙擊時(shí)觸發(fā)。 8、$("p").dblclick( function () { alert("Hello World!"); }); 在每一個(gè)匹配元素的dblclick事件中綁定一個(gè)處理函數(shù)。 9、$(document).ready(function(){ $("#login").focus();}); 觸發(fā)每一個(gè)匹配元素的focus事件。 10、$("input[type=text]").focus(function(){this.blur();}); 在每一個(gè)匹配元素的focus事件中綁定一個(gè)處理函數(shù)。 11、keydown()；keydown事件會(huì)在鍵盤(pán)按下時(shí)觸發(fā)。 12、keydown(fn)；在每一個(gè)匹配元素的keydown事件中綁定一個(gè)處理函數(shù)。 13、keypress()；觸發(fā)每一個(gè)匹配元素的keypress事件 14、keypress(fn)；在每一個(gè)匹配元素的keypress事件中綁定一個(gè)處理函數(shù)。 15、keyup()；觸發(fā)每一個(gè)匹配元素的keyup事件 16、keyup(fn)；在每一個(gè)匹配元素的keyup事件中綁定一個(gè)處理函數(shù)。 17、mousedown(); 18、mouseup(); 19、mousemove(); 20、mouseover(); 21、mouseout(); 22、$("form:first").submit();提交本頁(yè)的第一個(gè)表單。 23、$("form").submit(function(){return false;});阻止頁(yè)面提交。 十一、ajax ajax請(qǐng)求： 1、通有方式：$.ajax(prop);prop是一個(gè)hash表，它可以傳遞的key/value有以下幾種: (String)type：數(shù)據(jù)傳遞方式(get或post)。 ((String)url：數(shù)據(jù)請(qǐng)求頁(yè)面的url ((String)data：傳遞數(shù)據(jù)的參數(shù)字符串，只適合post方式 ((String)dataType：期待數(shù)據(jù)返回的數(shù)據(jù)格式(例如 "xml", "html", "script",或 "json") ((Boolean)ifModified： 當(dāng)最后一次請(qǐng)求的相應(yīng)有變化是才成功返回，默認(rèn)值是false ((Number)timeout:設(shè)置時(shí)間延遲請(qǐng)求的時(shí)間。可以參考$.ajaxTimeout ((Boolean)global：是否為當(dāng)前請(qǐng)求觸發(fā)ajax全局事件，默認(rèn)為true ((Function)error：當(dāng)請(qǐng)求失敗時(shí)觸發(fā)的函數(shù)。 ((Function)success：當(dāng)請(qǐng)求成功時(shí)觸發(fā)函數(shù) ((Function)complete：當(dāng)請(qǐng)求完成后出發(fā)函數(shù) 2、$.get(url, params, callback) 用get方式向遠(yuǎn)程頁(yè)面?zhèn)鬟f參數(shù)，請(qǐng)求完成后處理函數(shù)，除了url外，其它參數(shù)任意選擇！ eg:$.get( "ajax.asp", { name: "young", age: "25" }, function(data){ alert("Data Loaded: " + data); } ) 3、$.getJSON(url, params, callback) 用get方式向遠(yuǎn)程json對(duì)象傳遞參數(shù)，請(qǐng)求完成后處理函數(shù)callback 4、$.post(url, params, callback) 用post方式向遠(yuǎn)程頁(yè)面?zhèn)鬟f參數(shù)，請(qǐng)求完成后處理函數(shù)callback 十二、工具類 數(shù)組和對(duì)象操作： 1、$.each(obj,callback); 通用例遍方法，可用于例遍對(duì)象和數(shù)組?；卣{(diào)函數(shù)擁有兩個(gè)參數(shù)：第一個(gè)為對(duì)象的成員或數(shù)組的索引，第二個(gè)為對(duì)應(yīng)變量或內(nèi)容。 $.each( [0,1,2], function(i, n){alert( "Item #" + i + ": " + n );}); 2、jQuery.grep(array,callback,[invert])；使用過(guò)濾函數(shù)過(guò)濾數(shù)組元素，此函數(shù)至少傳遞兩個(gè)參數(shù)：待過(guò)濾數(shù)組和過(guò)濾函數(shù) 3、$.map(array,callback);將一個(gè)數(shù)組中的元素轉(zhuǎn)換到另一個(gè)數(shù)組中 4、$.inArray(value,array);確定第一個(gè)參數(shù)在數(shù)組中的位置(如果沒(méi)有找到則返回 -1 ),從0開(kāi)始。 5、$.merge( [0,1,2], [2,3,4] ) ；合并兩個(gè)數(shù)組。返回的結(jié)果會(huì)修改第一個(gè)數(shù)組的內(nèi)容——第一個(gè)數(shù)組的元素后面跟著第二個(gè)數(shù)組的元素，不去掉重復(fù)項(xiàng)。 6、$.unique(array);刪除數(shù)組中重復(fù)元素 7、$.trim(" hello, how are you? "); 去掉字符串起始和結(jié)尾的空格 8、$.isArray(obj);測(cè)試對(duì)象是否為數(shù)組。 9、$.isFunction(obj); 測(cè)試對(duì)象是否為函數(shù) URL: 1、$.param(obj);將表單元素?cái)?shù)組或者對(duì)象序列化。是.serialize()的核心方法。 eg:var params = { width:1680, height:1050 }; var str = jQuery.param(params); 2、$("form").serialize() ；序列表單內(nèi)容為字符串，用于 Ajax 請(qǐng)求 十三、jquery操作單選框 if($("input[type='radio']:checked")){ var tt=$("input[name='chk']:checked").val(); } 十四、jquery操作復(fù)選框 var chkArr=""; $(".cc:checked").each(function(){ chkArr+=$(this).val()+"|"; }); 十五、jquery實(shí)現(xiàn)復(fù)選框全選 var checked=$("#allchk").attr("checked"); $(".ww").each(function(){ if($(this).attr("checked")!=checked){$(this).click();} }); |
|
|
