示例:fadeTo(500,0.5) //第二个参数是透明度的设置(0~1)
fadeToggle()切换
注意:在使用jquery时,动画和事件会出现排队现象(即:如果一次执行了很多动画,后面的动画不会替换前面的,而是排队等待执行)
这时我们可以使用插队方法进行解决:
示例:$(this).children().stop().slideUp(); 加一个 .stop() 即可解决
4)setInterval(): //可按照指定的周期(以毫秒计)来调用函数或计算表达式
示例:$(function(){
setInterval("f1()",2000);
})
(三)jquery修改css属性
1,jquery可以获取行内、内部、外部的样式
2,js dom方式只能获得行内样式
3,包含多种属性样式的需要拆分为具体样式进行获取
1)css属性获取及修改:
①css单属性获取:alert($('div').css('height'))
②css单属性修改:$('div').css('属性名','属性值')
③css多属性修改:$('div').css({'属性名':'属性值','属性名':'属性值',...})
注意!在书写css复合属性时,要采用驼峰式命名!
示例:background-color应写为backgroundColor
④.animate({属性名:'属性值'},500)
//动态的css方法,允许创建自定义的动画,可以用来操作多个css属性,使用队列功能,方法将逐一被调用,后续会加入示例。。
2)css类:
(四)jquery修改html属性
1,获取html内容(包括格式):
$('div').html() [innerHtml]
$('div').html('代码')代码可以识别文本、标签
2,获取html文本内容:
$('div').text() [innerText]
$('div').text(代码)设置文本内容 //注意: 如果内容中有标签,会将这些标签当作文本处理
注意:没括号的话是获取信息,有括号是修改信息的值
3,DOM文档处理:
1)内部插入(父子级关系):
①$(a).append($(b)) 把b插入a中
②$(b).appendTo($(a)) 把b插入到a中
//注意:这两个都是插入到a里面的后面
与prepend区分,是插入到a里面的前面
//注意:若是已有节点追加,则发生位置移动,即旧节点被移除
2)外部插入(兄弟级关系):
//注意:与before区分,是插入到a外面的前面
//注意:若是已有节点追加,则发生位置移动,即旧节点被移除
3)包裹:wrap
①$(a).wrap($(b)) 把a用b包裹起来(每个元素都会包裹) unwrap不包裹
②wrapAll: 包裹所有(所有元素包裹在一起)
③wrapInner: 内部包裹(会包裹指定元素的下一级)
4)替换:replaceWith
①$(a).replaceWith($(b)) 用b替换a
②replaceAll $(a).replaceAll($(b)) 用a替换b
//旧节点替换也是位置移动
5)删除:empty
①empty 删除父节点下的子节点(不包括父节点)
②remove 删除指定的节点
6)克隆:clone(复制) 将内容复制一份
①var a = $('b').clone(false); //只复制节点,不包括事件;
②var a = $('b').clone(true); //复制节点和其事件;
7)attr()的使用:
①元素.attr();获取属性
②元素.attr(attr,value);设置属性
示例 $("input").attr("value"); //获取
$("input").attr("value","abcd"); //设置
③元素.attr({value:"zhi",type:"zhi"});设置多个属性的方法
注意:jquery中不允许在attr中修改或删除type属性
8)val()的使用:
val()在复选框(checkbox)中的使用demo: