事件绑定与解绑 bind/ ubbind
鼠标悬停事件 进入mouseover 离开 mouseout
$("d1").mouseover(function(){
$("#d2").show(1000) });
.mouseout(function(){
$("#d2").hide(1000) });
隐藏/显示.hide()隐藏 .show()显示. toggle() 隐藏/显示 ，切换
$(this).hide() .hide()函数,隐藏当前的HTML元素
$("p").hide().hide()函数, 隐藏所有p标记元素
#("#ID").hide() 隐藏ID选择器的 元素
JQ事件:$(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件
淡入/淡出 /切换 fadeIn() fadeOut() fadeToggle() fadeTo()
fadeIn() 淡入 $(document).ready(function(){
fadeOut() 淡出 $("button").click(function(){
fadeToggle() 淡入/淡出切换 $("#p1").fadeToggle();
$("#p2").fadeToggle("slow");
$("#p3").fadeToggle(3000); }); });
fadeTo() 规定淡出时的透明度,并不是完全消失 0-1
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div3").fadeTo("slow",0.7);});
创建滑动隐藏消失。 slideDown() 滑动向下,弹出 slideUp() 滑动向上,收回 slideToggle()滑动隐藏消失切换
$(document).ready(function(){
$("button").click(function(){
$(".up").slideToggle("slow"); }); });
滑动弹出,收回切换, 注意.up的DIV 的CSS设置为display:none;
动画效果 animate()动画效果 height:'toggle' 定义已经设置好的高度弹出隐藏
$(document).ready(function(){
$("button").click(function(){
$(".up").animate({ 定义动画
left:'250px', 定义动画距离
height:'150px', 定义动画的大小
width:'150px' }); }); });
height/width:+=150px; 动画可以根据需要无限制+=150px; 点一下就放一次 但是相对于left:250px位置
注: .up需提前设置样式,并声明position:absolute
提示：animate() 方法几乎可以操作所有的CSS属性
不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。 $(document).ready(function(){
$("button").click(function(){ var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
div.animate({样式代码段'},"slow"); });});
滑动停止,动画停止.shop()
$(".sub").click(function(){
$(".pop").slideDown(5000); }); 定义.pop1向下5秒显示
$("button").click(function(){ 定义.shop点击停止滑动
$(".pop").stop();});}); pop停止滑动点击停止
.shop延伸知识点:
$(document).ready(function(){
$("#start").click(function(){ 选择开始按钮
$("div").animate({left:'100px'},5000); 选择div动画效果 左100px,5秒钟
$("div").animate({fontSize:'3em'},5000); }); 选择div动画效果 字体大小3em,5秒
$("#stop").click(function(){ 选择停止按钮
$("div").stop(); }); div停止动画
$("#stopsy").click(function(){ 选择停止所有按钮
$("div").stop(true);}); div停止所有动画(加一个true)
$("#stopwc").click(function(){ 选择停止所有但要完成按钮
$("div").stop(true,true); }); 选的div停止(加2个true) });
Callback函数 在当前动画100%完成之后执行
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("The paragraph is now hidden"); }); });});
当动画.hide百分百完成后 直接启用下一个函数弹出框
Chaining 链接技术, 就是可以吧几个JQ调用连在一个相同的元素上,共同使用
$(document).ready(function() {
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000); });
点击bun后 #p1的css字体红色, 向上收弹出框2秒钟后 ，接着向下2秒弹出});
前端小知识：孙鲁意博客网站
网友评论