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操作文件上傳(克隆)