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()
隐藏:.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