JQuery 操作（二）

1.对于文档的操作

1>创建一个元素：

导入jquery后，创建元素的方式变得更加简单了。

语法：

$(“直接写入元素表达式”);

示例：

var op = $("<p>this is p </p>");
var op1 = $("<p id='p2'>this is p2 </p>");

2>将创建的元素加入到已有元素

加入的时候，默认放在内容最后。

示例：

$("#div1").append(op);
$("#div1").append(op1);

注意：

创建的op只有一个，如果在后面代码中加入多次，但是只会生效一次。不会产生copy行为。

3>将元素追加到内容的前面

采用：prepend（）方法。

示例：

$("#div1").prepend(op);
/*将op元素加入到div1中，并放在div中的最前面*/

4>将元素追加到内容里面

与上面相类似又有不同。

采用的是prependTo()；方法。

这里方法区别是：选中某个元素，把这个元素追加到xxx里面

示例：

$("#p2").prependTo("#div2");
/*将id为p2的元素加入到id是div2中的元素中*/

5>在指定元素的前后加入

很简单的两个单词。

前：before（）

后：after（）

示例：

$("#p2").before($("<b>this is b</b>"));
/*在id为p2的元素前面加上b元素*/
$("#p2").after($("<b>this is b2</b>"));

6>替换元素

采用：replaceAll（）方法

示例：

$("<em>em</em>").replaceAll("b");
/*用em元素来替换所有的b元素*/

还有replaceWith（）：用后面的元素 替换前面的元素

7>删除元素（节点）

1：empty（）； 将选中的元素内容清空。

2：remove( ) ； 删除自己节点，不传入参数，传入参数就传入过滤条件

eg：

$("#div1").empty();
$("#div1").remove();

8>克隆

采用的是clone() ；方法。

克隆也有参数，如果true 克隆当前的元素，将事件也一起克隆了。false只克隆元素。

示例：

var num = 1;
$("#btn1").click(function(){
num++;     $(this).clone(true).val("btn"+num).insertBefore($(this));
});
/*将id是btn1的元素加入点击事件，当点击的时候，就将自己进行克隆，并克隆此点击触发的内容。内容就是value是 btn + 这个num 而这个num每次点击就加1 ，并且每次克隆的元素放在自己的前面。*/

2.CSS操作

1>获取css样式

直接采用css（“样式属性名称”）

示例：

var cs = $("#p1").css("color");
var cs1 = $("#p1").css("font-size");

2>设置样式

同样采用css（）方法，传入两个参数就可以了。

第一个参数是样式属性名称，第二个是属性值

示例：

$("#p1").css("color","blue");

对于设置样式，如果要设置多个的话，怎么办呢？

这个时候就用到json对象。

传入一个json对象即可。

例如：

$("#span1").css({"color":"red", "font-size":"30px"});

3>一些特殊的用法：

代码：

$("#div1").click(function(){
$(this).css({"width":function(n,value){
/*默认传2个参数，第一个是当前元素的下标，第二个是当前对象的值，返回的是xxpx px可以加可以不用加*/
return parseInt(value)*2;
},"height":function(n,value){
return parseInt(value)*2;
}});
});

此代码的含义：

找到id是div1的元素，加入点击事件。

事件内容是：被点击的对象的样式属性为宽度发生改变，改变的值是现在宽度的2倍。高度是现在的两倍。在这段代码里面，代码本身会传入两个参数，如上所说。此参数和event十分类似。也是随事件直接传入。

3.事件

1>直接通过事件名称绑定

$("#p1").click(function(){

});

$("#sel1").change(function(){

});

2>通过on方法绑定

$("#p2").on("click",function(){
/*感觉就是相当于addEventListener*/
});

当需要多个事件同时触发这个行为时：
$("#p3").on("click,mouseover",function(){
//逗号隔开即可
});

3>当多个事件，多个行为时候。

依旧传入json对象处理。

代码：

$("#p3").on({"click":function(){
/*点击触发的事件内容*/
},"mouseover":function(){
/*鼠标移进触发的内容*/
}});

4.动画效果

1>设置隐藏

采用的是hide（）方法。

设置当前元素在xxx毫秒之类隐藏，参数是毫秒，系统参数3个：”slow”,”“normal”,”fast”

代码：

$("#div1").hide(2000);
/*设置id是div1的元素在2s后隐藏*/

2>设置显示

采用show（）方法。

效果是：动态改变宽和高，最后显示全部。

示例：

$("#div2").show(2000,function(){
alert("ok");
/*在2s后 id为div2的元素出现（先要设置不显示），当显示完全执行弹出框ok，对于动画的本节内容都可以写入此方法参数*/
});

3>流动的方式显示和隐藏

显示：.slideDown()

隐藏：
9326
.slideUp();

代码：

$("#div2").slideDown();
$("#div2").slideUp();

4>反向操作元素0.0

如果元素隐藏，就显示，如果是显示就隐藏

.slideToggle(2000)；

示例：

$("#div2").slideToggle(2000);

5>通过改变透明度的方式显示隐藏

显示：fadeIn（）

隐藏：fadeOut（）

示例：

$("#div2").fadeIn(2000);
$("#div2").fadeOut(2000);

6>设置某个动画延时

示例来说明：

$("#div3").fadeOut(2000).delay(1000).fadeIn(2000);
/*id为div3的元素在2s内以透明度渐变的方式隐藏后，1s后，在2s内以透明度渐变的方式显示出来*/

大体这些常用，如需更多，请翻阅API