Jquery基礎整理

1一、核心:$是jquery類的一個別名,$()構造一個jquery對象,jQuery 的核心功能都是通過這個函數實現的。 jQuery中的一切都基於這個函數,或者說都是在以某種方式使用這個函數。

  21、 ${表達式}:根據這個表達式來查找所有匹配的元素。

  3    eg:$("div>p");  查找所有p元素,且這些p元素都是div的子元素.

  4       $("input:radio",document.forms[0]);  查找文檔第一個表單中,所有的單選按鈕。

  5        $("div",xml.responseXML);在一個由ajax返回的xml文檔中,查找所有的div元素。

  62、$(html標記字符串)  :根據提供的html字符串,創建jquery對象包裝的dom元素。

  7     eg:  $("<div><p>Hello</p></div>").appendTo("body");

  8        創建一個 <input> 元素必須同時設定 type  屬性

  9        $("<input  type='text'>")

10

113、$(dom元素):將一個或多個dom元素轉換爲jquery對象。

12     eg: $(document.body).css( "background",  "black" ); 設置頁面背景色

134、$(document).ready(function(){})==$(function(){});在頁面加載完成後自動執行的代碼。

14

15二、jquery對象訪問。eq返回的是jquery對象,只能使用jquery方法,get返回的是dom元素對象,只能使用dom方法.

16     1、$(dom元素).each(function(){}):以每一個匹配的元素作爲上下文來執行一個函數

17     2、$(dom元素).size()==$(dom元素).length;對象中元素的個數。eg:<img src="test1.jpg"/>  <img src="test2.jpg"/>,jquery代碼:$("img").size(); 返回2

18    3、context:返回傳給jQuery()的原始的DOM節點內容,即jQuery()的第二個參數。如果沒有指定,那麼context指向當前的文檔(document)。

19   4、$(dom元素).get():取得所有匹配的dom元素的集合。如果你想要直接操作  DOM 對象而不是 jQuery 對象,這個函數非常有用。

20    5、$(dom元素).get(index):取得其中一個匹配的元素.

21    6、$(dom元素).index():搜索與參數表示的對象匹配的元素,並返回相應元素的索引值。

22

23三、插件機制:

241、jQuery.fn.extend(object);擴展 jQuery  元素集來提供新的方法,針對某一個dom元素。

25      eg:jQuery.fn.extend({

26          check: function() { return  this.each(function() { this.checked = true; });},

27          uncheck: function() { return  this.each(function() { this.checked = false; });}

28         });

29      調用:

30          $("input[type=checkbox]").check();

31          $("input[type=radio]").uncheck();

32

332、$.extend(object);用來在jQuery命名空間上增加新函數,針對所有dom元素。

34     $.extend({

35       min:function(a,b){return  a<b?a:b;},

36       max:function(a,b){return  a>b?a;b;}

37     });

38    調用:$.max(10,20);

39

40四、選擇器

41基本:

42   1、$("#id"): 根據給定的ID匹配一個元素。

43   2、$("dom元素名"):根據給定的元素名匹配所有元素

44   3、$(".Class類名"): 根據給定的類匹配元素。

45   4、$("*") :匹配所有元素。

46    5、$("dom元素.class類名"):選擇所有class屬性爲指定類名的dom元素。

47   6、$(".stripe tr"):  獲取class屬性爲stripe的table元素下的所有行

48

49層級:

50   1、$("ancestor  descendant"):在給定的祖先元素下匹配所有的後代元素

51   2、$("parent >  child"):在給定的父元素下匹配所有的子元素

52   3、$("prev + next"):匹配所有緊接在 prev 元素後的 next  元素

53   4、$("prev ~ siblings"):匹配 prev 元素之後的所有  siblings(同級) 元素

54

55簡單:

561、$("tr:first") 匹配找到的第一個元素

572、$("tr:last") 匹配找到的最後一個元素

583、$("input:not(:checked)")  去除所有與給定選擇器匹配的元素

594、$("tr:even") 匹配所有索引值爲偶數的元素,從 0  開始計數

605、$("tr:odd") 匹配所有索引值爲奇數的元素,從 0  開始計數

616、$("tr:eq(1)") 匹配一個給定索引值的元素

627、$("tr:gt(0)") 匹配所有大於給定索引值的元素

638、$("tr:lt(2)") 匹配所有小於給定索引值的元素

64內容:

651、$("div:contains('John')")  匹配包含給定文本的元素

662、$("div:has(p)") 匹配所有包含 p 元素的 div  元素

673、$("td:empty")  查找所有不包含子元素或者文本的空元素

68

69可見性:

701、$("tr:visible") 查找所有可見的 tr 元素

712、$("tr:hidden") 匹配所有的不可見元素,input 元素的 type  屬性爲 "hidden" 的話也會被匹配到

72屬性:

731、$("div[id]") 查找所有含有 id 屬性的 div  元素

742、$("input[name='newsletter']") 查找所有 name 屬性是  newsletter 的 input 元素

753、$("input[name!='newsletter']") 查找所有 name  屬性不是 newsletter 的 input 元素

764、$("input[name^='news']") 查找所有 name 以 'news'  開始的 input 元素

775、$("input[name$='letter']") 查找所有 name 以  'letter' 結尾的 input 元素

786、$("input[name*='man']") 查找所有 name 包含 'man'  的 input 元素

797、$("input[id][name$='man']") 找到所有含有 id  屬性,並且它的 name 屬性是以 man 結尾的

80子元素:

811、nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2)  匹配其父元素下的第N個子或奇偶元素

822、$("ul li:first-child") 在每個 ul 中查找第一個  li

833、$("ul li:last-child")   在每個 ul 中查找最後一個  li

844、$("ul li:only-child")   在 ul 中查找是唯一子元素的  li

85表單:

861、$(":input") 查找所有的input元素

872、$("text")    匹配所有的單行文本框

883、$(":password") 匹配所有密碼框

894、$("radio")   匹配所有單選按鈕

905、$("checkbox") 匹配所有複選框

916、$("submit")   匹配所有提交按鈕

927、$("image")    匹配所有圖像域

938、$("button")   匹配所有按鈕

949、$("file")     匹配所有文件域

9510、$("hidden")  匹配所有不可見元素,或者type爲hidden的元素

96表單對象屬性:

971、$("input:checked")  匹配所有選中的被選中元素(複選框、單選框等,不包括select中的option)

982、$("input:enabled") 匹配所有可用元素

993、$("input:disabled") 匹配所有不可用元素

1004、$("select option:selected")  匹配所有選中的option元素

101

102

103五、屬性操作

104   操作屬性:

105    1、$("img").attr("src");  返回文檔中第一個圖像的src屬性值。

106    2、$("img").attr("src","test.jpg");  爲所有匹配的元素設置一個屬性值

107    3、$("img").attr("title", function() {  return this.src }); 爲所有匹配的元素設置一個計算的屬性值

108    4、$("img").removeAttr("src");  從每一個匹配的元素中刪除一個屬性

109    5、$("img").attr({ src: "test.jpg", alt:  "Test Image" }); 將一個“名/值”形式的對象設置爲所有匹配元素的屬性。

110   操作CSS:

111    1、$("p").addClass("selected");  爲每個匹配的元素添加指定的類名

112    2、$("p").removeClass("selected");  從所有匹配的元素中刪除全部或者指定的類。一個或多個要刪除的CSS類名,請用空格分開

113$("p").removeClass();刪除匹配元素的所有類

114    3、$("p").toggleClass("selected");  如果存在(不存在)就刪除(添加)一個類

115    4、 var count = 0;

116       $("p").click(function(){

117      $(this).toggleClass("highlight",  count++ % 3 == 0);

118}); 每點擊三下加上一次 'selected' 類

119HTML代碼:

120   1、$("div").html();  取得第一個匹配元素的html內容

121   2、$("div").html("<p>Hello  Again</p>"); 設置每一個匹配元素的html內容

122文本:

1231、$("p").text(); 取得所有匹配元素的內容

1242、$("p").text("<b>Some</b> new  text."); 設置所有匹配元素的文本內容

125值:

1261、 $("#single").val()  獲得第一個匹配元素的當前值。

1272、$("input").val("hello world!");  設置每一個匹配元素的值

128

129六、篩選

130過濾:

131   1、$("p").eq(1)  獲取第N個元素,這個元素的位置是從0算起

132   2、 if ( $(this).hasClass("protected") )  檢查當前的元素是否含有某個特定的類,如果有,則返回true。

133   3、$("p").filter(".selected")  篩選出與指定表達式匹配的元素集合

134   4、is(expr)  用一個表達式來檢查當前選擇的元素集合,如果其中至少有一個元素符合這個給定的表達式就返回true。

135   5、$("p").not( $("#selected")[0] )  刪除與指定表達式匹配的元素

136查找:

137    1、$("div").children();取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。

138    2、$("p").find("span");搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。

139    3、$("p").next();取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合

140    4、$("p").prev();取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。

141    5、$("div").parent;取得一個包含着所有匹配元素的唯一父元素的元素集合。

142    6、$("span").parents;找到每個span元素的所有祖先元素

143    7、$("div").siblings();取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合

144

145七、文檔處理

146   內部插入:

147     1、$("p").append("<b>Hello</b>"); 向每個匹配的元素內部尾部追加內容

148     2、$("p").prepend("<b>Hello</b>"); 向每個匹配的元素內部前部追加內容

149    2、$("p").appendTo("#foo");  把所有段落追加到ID值爲foo的元素中。

150外部插入:

151     1、$("p").after("<b>Hello</b>"); 在每個匹配的元素之後插入內容

152     2、$("p").before("<b>Hello</b>"); 在每個匹配的元素之前插入內容

153包裹

154   1、$("p").wrap("<div  class='wrap'></div>"); 把所有匹配的元素用其他元素的結構化標記包裹起來。

155替換:

156   1、$("p").replaceWith("<b>Paragraph.  </b>"); 將所有匹配的元素替換成指定的HTML或DOM元素。

157刪除:

158   1、$("p").empty();  刪除匹配的元素集合中所有的子節點。

159   2、$("p").remove();  從DOM中刪除所有匹配的元素

160八、CSS操作

161   CSS:

162    1、$("p").css("color");  取得第一個段落的color樣式屬性的值

163    2、$("p").css({ color: "#ff0011",  background: "blue" }); 把一個“名/值對”對象設置爲所有匹配元素的樣式屬性。

164    3、$("p").css("color","red");  在所有匹配的元素中,設置一個樣式屬性的值

165   位置:

166    1、var offset =  p.offset();獲取匹配元素在當前視口的相對偏移,返回的對象包含兩個整形屬性:top 和 left。此方法只對可見元素有效。

167    2、var position =  p.position();獲取匹配元素相對父元素的偏移

168   尺寸:

169    1、$("p").height();  取得第一個匹配元素當前計算的高度值(px)。

170    2、$("p").height(20);  爲每個匹配的元素設置CSS高度(hidth)屬性的值

171    3、$("p").width();  取得第一個匹配元素當前計算的寬度值(px)。$(window).width(); 獲取當前窗口的寬

172    4、$("p").width(20);  爲每個匹配的元素設置CSS寬度(width)屬性的值

173九、效果

174   基本:

175    1、$("p").show() 顯示隱藏的匹配元素

176    2、$("p").hide() 隱藏顯示的元素

177    3、$("p").show("slow");  以優雅的動畫顯示所有匹配的元素,並在顯示完成後可選地觸發一個回調函數。

178      speed (String,Number) :  三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如:1000)

179callback (Function) : (Optional)  在動畫完成時執行的函數,每個元素執行一次。

180

181     用迅速的動畫將隱藏的段落顯示出來,歷時200毫秒。並在之後執行反饋!

182   <p style="display:  none">Hello</p>

183   jQuery 代碼:

184

185   $("p").show("fast",function(){

186   $(this).text("Animation  Done!");

187   });

188   4、$("p").hide("slow");  以優雅的動畫隱藏所有匹配的元素,並在顯示完成後可選地觸發一個回調函數。

189   5、$("p").toggle() 切換元素的可見狀態

190   6、$("p").toggle("slow");  以優雅的動畫切換所有匹配的元素,並在顯示完成後可選地觸發一個回調函數

191淡入淡出:

1921、$("p").fadeIn("slow");  通過不透明度的變化來實現所有匹配元素的淡入效果,並在動畫完成後可選地觸發一個回調函數

1932、$("p").fadeOut("slow");  通過不透明度的變化來實現所有匹配元素的淡出效果,並在動畫完成後可選地觸發一個回調函數。

1943、$("p").fadeTo("slow",  0.66);$("p").fadeTo("slow", 0.66);  把所有匹配元素的不透明度以漸進方式調整到指定的不透明度,並在動畫完成後可選地觸發一個回調函數

195自定義:

196   1、$("#block").animate({

197    width: "90%",

198    height: "100%",

199    fontSize: "20em",

200    borderWidth: 10

201}, 1000 );用於創建自定義動畫的函數。

202

203

204十、事件

205   事件處理:

206    1、$("p").bind("click", function(){ alert(  $(this).text() );}); 爲每一個匹配元素的特定事件(像click)綁定一個事件處理器函數

207     2、$("p").one("click",function(){alert(${this}.text());})  當所有段落被第一次點擊的時候,顯示所有其文本

208     3、trigger(type,[data])在每一個匹配的元素上觸發某類事件

209事件委派:$("p").live("click",   function(){$(this).after("<p>Another   paragraph!</p>");});。給所有當前以及將來會匹配的元素綁定一個事件處理函數(比如click事件)。也能綁定自定義事 件。與bind()不同的是,live()一次只能綁定一個事件

210

211

212事件切換:一個模仿懸停事件(鼠標移動到一個對象上面及移出這個對象)的方法

213   $("td").hover(

214function () {

215    $(this).addClass("hover");

216},

217function () {

218    $(this).removeClass("hover");

219}

220);鼠標懸停的表格加上特定的類

221

2224、每次點擊後依次調用函數。

223$("td").toggle(

224function () {

225    $(this).addClass("selected");

226},

227function () {

228     $(this).removeClass("selected");

229}

230);

231

2325、事件:

233   1、$("p").blur();  觸發每一個匹配元素的blur事件

234   2、$("p").blur( function () { alert("Hello  World!"); } ); 在每一個匹配元素的blur事件中綁定一個處理函數

235    3、change();change事件會在元素失去焦點的時候觸發,也會當其值在獲得焦點後改變時觸

236    4、change(fn);在每一個匹配元素的change事件中綁定一個處理函數。

237   5、$("p").click();  觸發每一個匹配元素的click事件

238    6、$("p").click(function(){});在每一個匹配元素的click事件中綁定一個處理函數

239    7、dblclick();dblclick事件會在元素的同一點雙擊時觸發。

240   8、$("p").dblclick( function () {  alert("Hello World!"); }); 在每一個匹配元素的dblclick事件中綁定一個處理函數。

241   9、$(document).ready(function(){  $("#login").focus();}); 觸發每一個匹配元素的focus事件。

242    10、$("input[type=text]").focus(function(){this.blur();});  在每一個匹配元素的focus事件中綁定一個處理函數。

243    11、keydown();keydown事件會在鍵盤按下時觸發。

244    12、keydown(fn);在每一個匹配元素的keydown事件中綁定一個處理函數。

245    13、keypress();觸發每一個匹配元素的keypress事件

246    14、keypress(fn);在每一個匹配元素的keypress事件中綁定一個處理函數。

247   15、keyup();觸發每一個匹配元素的keyup事件

248    16、keyup(fn);在每一個匹配元素的keyup事件中綁定一個處理函數。

249   17、mousedown();

250   18、mouseup();

251   19、mousemove();

252   20、mouseover();

253   21、mouseout();

254    22、$("form:first").submit();提交本頁的第一個表單。

255   23、$("form").submit(function(){return  false;});阻止頁面提交。

256

257

258十一、ajax

259      ajax請求:

260        1、通有方式:$.ajax(prop);prop是一個hash表,它可以傳遞的key/value有以下幾種:

261          (String)type:數據傳遞方式(get或post)。

262         ((String)url:數據請求頁面的url

263          ((String)data:傳遞數據的參數字符串,只適合post方式

264         ((String)dataType:期待數據返回的數據格式(例如  "xml", "html", "script",或 "json")

265         ((Boolean)ifModified:  當最後一次請求的相應有變化是才成功返回,默認值是false

266          ((Number)timeout:設置時間延遲請求的時間。可以參考$.ajaxTimeout

267          ((Boolean)global:是否爲當前請求觸發ajax全局事件,默認爲true

268          ((Function)error:當請求失敗時觸發的函數。

269          ((Function)success:當請求成功時觸發函數

270          ((Function)complete:當請求完成後出發函數

271     

272      2、$.get(url, params, callback)  用get方式向遠程頁面傳遞參數,請求完成後處理函數,除了url外,其它參數任意選擇!

273         eg:$.get(   "ajax.asp",

274            { name: "young", age: "25"  },

275            function(data){ alert("Data  Loaded: " + data); }

276          )

277      3、$.getJSON(url, params, callback)  用get方式向遠程json對象傳遞參數,請求完成後處理函數callback

278      4、$.post(url, params, callback)  用post方式向遠程頁面傳遞參數,請求完成後處理函數callback

279

280

281

282十二、工具類

283      數組和對象操作:

284       1、$.each(obj,callback);  通用例遍方法,可用於例遍對象和數組。回調函數擁有兩個參數:第一個爲對象的成員或數組的索引,第二個爲對應變量或內容。

285       $.each( [0,1,2], function(i, n){alert(  "Item #" + i + ": " + n );});

286      2、jQuery.grep(array,callback,[invert]);使用過濾函數過濾數組元素,此函數至少傳遞兩個參數:待過濾數組和過濾函數

287      3、$.map(array,callback);將一個數組中的元素轉換到另一個數組中

288      4、$.inArray(value,array);確定第一個參數在數組中的位置(如果沒有找到則返回 -1 ),從0開始。

289     5、$.merge( [0,1,2], [2,3,4] )  ;合併兩個數組。返回的結果會修改第一個數組的內容——第一個數組的元素後面跟着第二個數組的元素,不去掉重複項。

290     6、$.unique(array);刪除數組中重複元素

291     7、$.trim(" hello, how are you? ");  去掉字符串起始和結尾的空格

292     8、$.isArray(obj);測試對象是否爲數組。

293     9、$.isFunction(obj);  測試對象是否爲函數

294

295   URL:

296    1、$.param(obj);將表單元素數組或者對象序列化。是.serialize()的核心方法。

297     eg:var params = { width:1680,  height:1050 }; var str = jQuery.param(params);

298

299   2、$("form").serialize() ;序列表單內容爲字符串,用於  Ajax 請求

300

301十三、jquery操作單選框

302    if($("input[type='radio']:checked")){

303     var  tt=$("input[name='chk']:checked").val();

304}

305

306十四、jquery操作複選框

307    var chkArr="";

308$(".cc:checked").each(function(){

309       chkArr+=$(this).val()+"|";

310});

311

312十五、jquery實現複選框全選

313   var  checked=$("#allchk").attr("checked");

314$(".ww").each(function(){

315     if($(this).attr("checked")!=checked){$(this).click();}

316});

參考了:http://www.cnblogs.com/greatxj/articles/2260357.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章