jQuery對象增刪改,事件,操做,.data函數,.each函數

1  jQuery 兩種建立節點的方法

　　　　1 使用,相似這樣的方法。

　　　　2 肯定導入jQuery後

　　　　

　　　　效果：

　　　　

 

 　　　　

2  jQuery改動DOM節點的多種方法：

　　　　添加次級節點：　　　　

$(A).append(B)// 把B追加到A的次級目錄得最後面
$(A).appendTo(B)// 把A追加到B的次級目錄得最後面

$(A).prepend(B)// 把B前置到A的次級目錄得最後面

$(A).prependTo(B)// 把A前置到B的次級目錄得最後面

　　　　添加同級節點：

$(A).after(B)// 把B放到A的後面
$(A).insertAfter(B)// 把A放到B的後面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

　　　　移除和清空元素

remove()// 從DOM中刪除全部匹配的元素，包括本節點。
empty()// 刪除匹配的元素集合中全部的子節點。

　　　　替換節點：

$A.replaceWith($B) //A替換B
$BreplaceAll(￥A)   //B替換A

　　　　克隆：

　

$A.clone();  // clone方法不加參數true，克隆標籤但不克隆標籤帶的事件
$A.clone(true); //clone方法加參數true，克隆標籤而且克隆標籤帶的事件

　　

3　事件  event；

　　　　經常使用事件：

經常使用事件
click(function(){...}) //單擊事件
hover(function(){...},function(){...}) //第一個函數鼠標移上去時執行，第二個函數鼠標移開執行
blur(function(){...})　　//失去焦點
focus(function(){...})　　//獲取聚焦
change(function(){...})　　//值改變
keyup(function(){...})　　　//某個鍵由按下變化到平時狀態
keydown(function(){...})   //某個鍵被按下


keyup(),keydown()  keydown，keyon會獲得一個keyCode值,按下不一樣鍵，值是不一樣的。

　　　　

 事件綁定

　　事件能夠由上面的事件函數綁定，也能夠由on() 函數綁定。

　　.on( events [, selector ],function(){})：events參數數據類型爲字符串，通常是上面事件函數的字符部分如　　　　　　

　　"click"，"keyon"，"keydown"，"change"。   

　　具體事件列表   http://www.w3school.com.cn/jquery/jquery_ref_events.asp

　　function(){},事件發生時的函數，注意   若是此時函數內部引用this，那麼是一個DOM節點，而不是jQuery對象.

　　[, selector ]  可選參數，若是有參數  數據類型爲字符串，配合使用本函數的對象使用，

　　好比：$("body").on("event","input:checkedbox",function(){''.......})       那麼觸發事件的對象，就是$('body input:checkedbox')對象

  事件移除　

　　.off( events [, selector ][,function(){}])（用法同上）

　　　　　

　　阻止後續事件執行

　　1  return false；  2 this.preventDefault()

　　 注意：hover 不能直接在on函數裏面使用，參考如下代碼

　　　　　　

$('ul').on('mouseenter', 'li', function() {//綁定鼠標進入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//綁定鼠標劃出事件
    $(this).removeClass('hover');
});

　　　　　　

　　　　　

4 頁面載入

   當DOM載入就緒能夠查詢及操縱時綁定一個要執行的函數。這是事件模塊中最重要的一個函數，由於它能夠極大地提升web應用程序的響應速度。

　　　

$(document).ready(function(){
// 在這裏寫你的JS代碼...
})

或

$(function(){
// 你在這裏寫你的代碼
})

5  .data函數 .each函數

　  在匹配的元素集合中的全部元素上存儲任意數據  ，返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。

　  .data(key, value):  在匹配的元素上存儲任意相關數據。

　  $("div").data("k",100);//給全部div標籤都保存一個名爲k，值爲100

　 .removeData(key):

　　　　

　  jQuery.each(collection, callback(indexInArray, valueOfElement))：

　　通用迭代函數，用來無縫迭代對象和數組。數組和相似數組的對象經過一個長度屬性（如一個函數的參數對象）來迭代數字索引，

　　　　從0到length - 1。其餘對象經過其屬性名進行迭代。

　　　　

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//i是索引，v是每次循環的具體元素。
})

輸出：
010
120
230
340

 方法用來迭代jQuery對象中的每個DOM元素。每次回調函數執行時，會傳遞當前循環次數做爲參數(從0開始計數)。
因爲回調函數是在當前DOM元素爲上下文的語境中觸發的，因此關鍵字  老是指向這個元素。

停止.each操做：   return false   （至關於break）      跳過循環：return    （至關於 continue）

.each()this

　

注意: jQuery的方法返回一個jQuery對象，遍歷jQuery對象中的元素 - 被稱爲隱式迭代的過程。

當這種狀況發生時，它一般不須要顯式地循環的 .each()方法：

也就是說，上面的例子沒有必要使用each()方法，直接像下面這樣寫就能夠了：

$("li").addClass("c1");  // 對全部標籤作統一操做

 

r=[{'name':'小李','性別':'男'},{'name':'小王','性別':'不男不女'}]
$.each(r,function(index,value){
    console.log(index,value)
})
0 {name: "小李", 性別: "男"}
1 {name: "小王", 性別: "不男不女"}

 

　　

6 　jQuery如何操做標籤屬性,className值　　　　

attr(attrName)// 返回第一個匹配元素的屬性值
attr(attrName, attrValue)// 爲全部匹配元素設置一個屬性值
attr({k1: v1, k2:v2})// 爲全部匹配元素設置多個屬性值
removeAttr()// 從每個匹配的元素中刪除一個屬性

prop() // 獲取屬性
removeProp() // 移除屬性

prop和attr的區別：

　　attr全稱attribute(屬性) 

　　prop全稱property(屬性)

　　雖然都是屬性，但他們所指的屬性並不相同，attr所指的屬性是HTML標籤屬性，而prop所指的是DOM對象屬性，能夠認爲attr是顯式的，而prop是隱式的

總結一下：

1. 對於標籤上有的能看到的屬性和自定義屬性都用attr
2. 對於返回布爾值的好比checkbox、radio和option的是否被選中都用prop。

實例：

　　　　

<input type="checkbox" checked id="i1" value="1">
$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>

樣式操做：　　　

addClass();// 添加指定的CSS類名。
removeClass();// 移除指定的CSS類名。
hasClass();// 判斷樣式存不存在
toggleClass();// 切換CSS類名，若是有就移除，若是沒有就添加。

直接操做屬性節點的值：
css("color","red")//DOM操做：tag.style.color="red"
如 
$("p").css("color", "red"); //將全部p標籤的字體設置爲紅色

位置操做　　

offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置
position()// 獲取匹配元素相對父元素的偏移
scrollTop()// 獲取匹配元素相對滾動條頂部的偏移
scrollLeft()// 獲取匹配元素相對滾動條左側的偏移

尺寸

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()　　　　

文本操做

html()// 取得第一個匹配元素的html代碼
html(val)// 設置全部匹配元素的html代碼
text()// 取得全部匹配元素的文本內容
text(val)// 設置全部匹配元素的文本內容
val()// 取得第一個匹配元素的當前值
val(val)// 設置全部匹配元素的值
val([val1, val2])// 設置多選的checkbox、多選select的值

實例：
<input type="checkbox" value="basketball" name="hobby">籃球
<input type="checkbox" value="football" name="hobby">足球

<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

設置值：
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])

獲取被選中的checkbox或radio的值：

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

$("input[name='gender']:checked").val()

　　

　爲了方便，不要隨意把jQurey對象變成Dom對象