- 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:在元素之前添加元素(兄弟)