我的Jquery學習筆記(一)

  • ready函數是在頁面元素創建玩閉後被觸發的函數,可以多次調用此函數,並且每次調用的內容都會在頁面加載,其作用相當於C#中的 +=機制;

與Dom中的onload的區別:onload是所有Dom元素創建完畢、圖片、Css等都加載完畢後才被觸發;用Ready的好處是可以提高網頁的響應速度。


  •  $.map(array,fn);對數組中的每個元素調用fn進行處理,fn將處理返回,得到一個新數組;

var arr = [3, 6, 9];

var arr2 = $.map(arr, function (item) { return item * 2;});

alert(arr + "->" + arr2);

對每個arr數組的元素進行乘以2的操作。返回值是新的arry

注意一般不對tionary風格的數組進行處理,因爲沒什麼呢意義,這種風格的函數一般用$.each函數來處理

  •   $.each(array,fn);對數組array每個元素調用fn進行處理,沒有返回值

var dict = { "aliye": 10, "jack":20, "bim": 30 };

$.each(dict, function (key, value) {alert("key=" + key + ",vlaue=" + value); });

 

可以用this來直接取值:

var dict = {"aliye": 10, "jack": 20, "bim": 30 };

$.each(dict,function () { alert(this)});

 

用item來取得名稱(序號):

var dict = {"aliye": 10, "jack": 20, "bim": 30 };

$.each(dict, function (item) { alert(item)});

  •   修改樣式

$(“#div”).css(“background”,”red”)

取得樣式

$(“#div”).css(“background”)

  •  對於很多Jquery函數來說,函數帶參數則爲修改值,無參數則爲取得值.
  •   .next()方法用於獲取節點之後緊接着的第一個同輩元素

.nextAll()則是獲取節點之後所有的同輩元素;

注意,在括號中加上元素標籤則可以過濾掉不需要的元素

但是做.next(“div”)用時,如果當前元素後緊接着的不是一個div則取不到元素

  •  .siblings()方法用於獲取所有的同輩元素
  •  鏈式編程不能隨便用,需要明確鏈式編程的原理,如:

實現一個評分控件可以用如下Jquery語句:

$(this).text("★");

$(this).siblings().text("★");

$(this).nextAll().text("☆");

但是不能改爲如下鏈式語句:

$(this).text("★").siblings().text("★").nextAll().text("☆");//此處不能用鏈式編程的寫法,因爲首先.siblings()獲得了當前節點外所有的兄弟節點,但是緊接着的.nextAll()卻表示 獲得每一個當前節點的兄弟節點的所有同輩元素,如此的話如果鼠標移動到第一個節點那麼第一個節點☆變爲★,它的兄弟節點有4個,每一個兄弟節點有各自不同的之後 的同輩元素,所以不能達到原來的效果

 

  •   基本過濾選擇器:

:first選取第一個元素$(“div:first”)選取第一個<div>

:last選取最後一個元素

:not(選擇器)選取不滿足”選擇器”條件的元素$(“input:not(.mayClass)”) 選取樣式名不是myClass的<input>的元素

:even、:odd 選取索引是奇數、偶數的元素:$(“input:event”)選取索引是奇數的<inpout>

:eq(索引序號)、:gt(索引序號)、lt(索引序號)選取索引等於、大於、小於索引序號的元素,比如$(“inpout:lt(4)”)選取索引序號小於5的<input>

$(“:header”)選取所有的h1……h6元素

$(“div:animated”)選取正在執行動畫的<div>元素

  •   屬性過濾器:

$(“div[id]”)選取有id屬性的<div>

$(“div[title=test]”)選取title屬性爲”test”的<div>

$(“div[title!=test]”)選取title屬性不爲”test”的<div>

還可以選擇開頭、結束、包含等,條件符合

  •   $(“#form1:enabled”)選取id爲from1的表單內所有啓用的元素

$(“#from1:disabled”)選取id爲from1的表單內所有禁用的元素

$(“input:checked”)選取所有選中元素(Radio、ChackBox)

$(“select:selected”)選取所有選中的選項元素(下拉列表)

  •   簡化操作:

$(“input”)選取所有<input>、<textarea>、<select>、<button>元素

和$(“input”)不一樣,$(“input”)只獲得<input>

$(“:text”)選取所有單行文本框

$(“:password”)選取所有密碼框。同理還有:radio\:checkbox\:submit\:image\:button\:file\:hidden.

  •   用attr()方法讀取或者設置元素的屬性:

alert($(“a:first”).attr(“href”));

$(“a:first”).attr(“href”,”http://www.baidu.com”);

         JQuery沒有的屬性可以通過attr方法來使用

         removeAttr可以刪除屬性。

  •   使用$(html字符串)來創建Dom節點,並且返回一個jQuery對象,然後調用append等方法添加到Dom中

append:在元素末尾追加元素

perpend:在元素的開始添加元素

after:在元素之後添加元素(兄弟)

before:在元素之前添加元素(兄弟)


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