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操作文件上传（克隆）