JQery代碼筆記

JQery代碼:(Jqery 是一個 JavaScript 庫,一般都是函數,編寫也要保留函數的樣式)

(有三種函數形式,統一用最簡單的: $( function() {       });     )

0、基礎:

jquery對象.click(事件處理函數);*******綁定事件

 

1、DOM對象和JQery對象的轉換

//一.DOM對象---->jQuery對象

//var div1 = document.getElementById("div1");

//alert(div1.innerHTML);

//var $div1 = $(div1);

//$div1.html(555);

//alert($div1.html());

//二.把jQquery對象--->dom對象

var $div = $("#div1");

alert($div.html());        

//第一種方式

var div = $div[0];//div是DOM對象

//第二種方式

var div2 = $div.get(0);

alert(div.innerHTML);

2、html()、text()、val()區別     $("#div1").xxx();

html() 相當於 innerHTML 內部的HTML代碼

text() 相當於 innerText 內部的文本  不包括HTML代碼

val() 相當於  value 值  得到dom對象的value值

3、$(document).ready()和window.onload區別

(1)window.onload只能綁定一個事件處理函數,如果綁定多個

只執行最後一個,而$(document).ready()可以綁定多個函數

(2)window.onload必須等待網頁中所有的內容加載完畢後(包括圖片)才能執行  

$(document).ready() 網頁中所有DOM結構繪製完畢後就執行,可能DOM元素關聯的東西並沒有加載完

4、修改樣式

單一樣式

DOM方式         document.getElementById("hello").style.color = "red";//得值得時候無法得到內嵌樣式的值

jQuery方式       $("#hello").css("color","#ff0000");//同一個方法名字既表示讀操作,又表示寫操作

     $("#hello").css("color","#ff0000");//寫操作

     $("#hello").css("color");//讀操作

整體樣式

DOM方式        document.getElementById("div1").className ="div1After";

jQuery方式     $("#div1").attr("class","div1After");

5、節點克隆

給選項綁定單擊事件

$("ul>li").click(function() {

var $obj = $(this).clone(true);

$("ul").append($obj);

});

jQuery對象.clone();//返回克隆出來的對象,相當於 對象.clone(false);

jQuery對象.clone(true);//克隆出來的對象含有事件

6、dom操作文件上傳(克隆)

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