jQuery事件
1、单击事件
$("button").click(function(){
//动作触发后执行的代码!!
});
2、双击事件
$("button").dblclick(function(){
//动作触发后执行的代码!!
});
3、鼠标进入
$("#p1").mouseenter(function(){
alert('您的鼠标移到了id="p1"的元素上!');
});
4、鼠标离开
$("#p1").mouseleave(function(){
alert('您的鼠标移出了id="p1"的元素上!');
});
5、获取焦点
$("input").focus(function(){
alert('获取到了input的焦点');
});
6、失去焦点
$("input").blur(function(){
alert('获失去了input的焦点');
});
jQuerycss()方法
css()方法设置或返回被选元素的一个或多个样式属性。
1.返回CSS属性
语法:css("propertyname");
例如:
$("p").css("background-color");
2.设置CSS属性
语法:css("propertyname","value");
例如:
$("p").css("background-color","yellow");
3.设置多个CSS属性
语法:css({"propertyname":"value","propertyname":"value",...});
例如:
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuerycss类
1. addClass()
向被选元素添加一个或多个类
例如:
.important{font-weight:bold;font-size:xx-large;}
.blue{color:blue;}
$("button").click(function(){
$("h1,p").addClass("blue");
$("div").addClass("important");
});
2. removeClass()
从被选元素删除一个或多个类
例如:
$("button").click(function(){$("h1,h2,p").removeClass("blue");});
3. toggleClass()
对被选元素进行添加/删除类的切换操作
例如:
$("button").click(function(){$("h1,h2,p").toggleClass("blue");});
4. eq()
方法返回带有被选元素的指定索引号的元素
用法:$(selector).eq(index)
5. index()
index()方法返回指定元素相对于其他同级元素的index位置。
用法:$(this).index()
6.not()
Not()方法返回指定元素之外的元素。
用法:$("input").not(".in1")
jQuery动画
1. jQuery隐藏显示
可以使用hide()和show()方法来隐藏和显示HTML元素。
也可以使用toggle()方法来切换hide()和show()方法。
例如:
$("button").click(function(){$("p").toggle();});
2. jQuery淡入淡出
fadeIn()用于淡入已隐藏的元素,fadeOut()方法用于淡出可见元素。
fadeToggle()方法可以在fadeIn()与fadeOut()方法之间进行切换。
例如:
$("button").click(function(){("#div2").fadeToggle("fast");});
fadeTo()方法允许渐变为给定的不透明度(值介于0与1之间)。
例如:
$("button").click(function(){$("#div1").fadeTo("slow",0.15);});
3. jQuery滑动
slideDown()方法用于向下滑动元素,slideUp()方法用于向上滑动元素。
slideToggle()方法可以在slideDown()与slideUp()方法之间进行切换。
例如:
$("#flip").click(function(){$("#panel").slideToggle();});
4.jQuery自定义动画
animate()方法用于创建自定义动画。可选的speed参数规定效果的时长。它可以取以
下值:"slow"、"fast"或毫秒。可选的callback参数是动画完成后所执行的函数名称。
5. stop方法
jQuerystop()方法用于停止动画或效果,在它们完成之前,适用于所有jQuery效果函
数,包括滑动、淡入淡出和自定义动画。
$("#stop").click(function(){$("#panel").stop();});
6. 回调函数
在当前动画100%完成之后执行。
例如:
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});});