一、设置元素样式
1、添加、删除CSS类别
$("div").addClass("myClass1 myClass2"); 给元素添加一个类样式,或多个类样式,每个样式间以空格分割
$("div").removeClass("myClass1"); 删除元素的类样式
2、类别间动态切换
$(function(){
$("p").click(function({
$(this).toggleClass("mycss"); 每次点击时对指定的样式反复加载或移除的操作,即样式交替执行。
});); 这里的this是指包含它的函数作为方法被调用时所属的对象:p
}); toggleClass只能设置一种Class不能设置多个。
3、鼠标感应
$(".d1").mouseover(function () { mouseover:鼠标移上去之后的事件
$(this).hide(1000); 把产生事件的元素1秒内隐藏
}); 这里的this是指包含它的函数作为方法被调用时所属的对象:div
$(".d1").mouseout(function () { mouseout:鼠标移走之后的事件
$(this).show(1000); 把产生事件的元素1秒内显示
});
$(".d1").hover(function () { hover:合并了上两种事件,他直接带两个函数分别执行mouseover和
$(this).hide(1000); mouseout对应的事件
}, function () { hide:隐藏元素
$(this).show(1000); show:显示元素
});
4、toggle方法
$("#btn").click(function () { 每点击一次按钮时指定元素交替完成显示、隐藏的动作
$(".d1").toggle(1000); 指定元素在1秒内显示或隐藏
});
** toggle方法的低版本写法 jquery-1.8.2.min.js下可以正常执行,不兼容高版本
$("#btn").toggle(function () { 这种写法直接有两个函数指定交替执行的函数体。
$(".d1").slideUp(); 下边缘开始收起,全部收完的效果呈现隐藏。
}, function () {
$(".d1").slideDown(); 下边缘开始拉开,全部拉开的效果呈现显示
});
5、某个元素中是否含有某个class类别的样式,返回值为布尔型
$("d1").hasClass("myClass") 如果d1元素中有myClass的类样式的话返回真,否则返回假。