初探JQuery

一.文档处理

1.创建元素和追加

$("#div1").append($("<p>This is a p</p>"));

默认将元素放在最后。
tips:js和jquery混合不符合语法规则。

2.append和appendTo

1. append:在某个元素中追加子元素。
2. appendTo:先找到某个元素，追加到另一个元素中去。

3.before和after

1. before,指定元素元素前面追加
2. after,指定元素后面追加

4.replaceAll

$("<em></em>").replaceAll("<label></label>");

用em标签来替换label标签

5.删除

1. empty:删除指定元素里面的内容
2. remove：删除指定节点

$("#div1").empty();//删除div1中的内容
$("#div1").remove();//不传参就删除div1。

6.克隆

XXX.clone([true|false]);

如果参数为true，则连事件也会克隆。如果参数为false，则只克隆元素。

二.样式表

1.获取元素样式

var res = XXX.css("color");

2.设置元素样式

XXX.css("background-color","red");

区别，一个参数获取样式，两个参数设置样式。

3.设置多个元素样式

XXX.css({"color":"red","font-size":"20px"});

直接传入一个json对象。

4.同时改变一个元素的长和宽

$(".div1").click(function(){
    $(this).css({"width":function(n,val){
        return parseInt(val)*2;
    },"height":function(n,val){
        return parseInt(val)*2;
}})

三.事件

1.如何绑定事件

XXX.事件名(function(){})；
XXX.on("事件名",function(){});

2.绑定多个事件

$("#div").on({"click":function(){}},"mouseover":function(){});

传入一个json，类似于css传json设置多个属性值。

3.hover

$("#div").hover(function(){},function(){})

第一个参数，当鼠标移入。第二个参数，当鼠标移除。