• jQuery中的事件与动画


    一、jQuery中的事件:
    1.基础事件
    (1)鼠标事件
    (2)键盘事件
    (3)window事件
    2.复合事件
    (1)鼠标光标悬停
    (2)鼠标连续点击
    二、鼠标事件:
    //1.点击事件click
    $("#btn1").click(function(){
    $("#div1_1").css(“background”,“green”);
    });

    //2.鼠标指针移过事件mouseover(当指针移入该元素以及包含的子元素时,都会重新触发该mouserover和mouseout事件)
    $("#div1").mouseover(function(){
    	console.log("指针移过");//给控制台打印信息
    });
    
    //3.鼠标指针移出事件mouseout
    $("#div1").mouseout(function(){
    	console.log("指针移出");	
    });
    
    //4.鼠标指针进入事件mouseenter(当鼠标指针移入该元素的子元素时,不会触发mouseenter和mouseleave事件)
    $("#div1").mouseenter(function(){
    	console.log("鼠标进入");
    });
    
    //5.鼠标指针离开事件mouseleave
    $("#div1").mouseleave(function(){
    	console.log("鼠标离开");
    });
    

    三、键盘事件:
    //1.键盘按下事件keydown(按下任意键的时候触发)
    $("#btn2").keydown(function(){
    $("#div2").css(“background”,“blue”);
    });

    //2.键盘抬起事件keyup
    $("#btn2").keyup(function(){
    	$("#div2").css("background","green");
    });
    
    //3.按下可打印字符的时候事件keypress
    $("#btn2").keypress(function(){
    	$("#div2").css("background","pink");
    });
    

    四、//绑定事件bind(单个事件)
    $("#btn3").bind(“click”,function(){
    $("#div2").css(“background”,“orange”);
    });

    //绑定多个事件(实现鼠标移入和移出事件)
    $("#div2").bind({
    	mouseenter:function(){
    		//鼠标移入代码
    		$(this).css("width","300px");
    	},mouseleave:function(){
    		//鼠标移出代码
    		$(this).css("width","200px");
    	}
    });
    
    //移除绑定的事件(移除点击事件)
    $("#div2").unbind("click");
    

    五、复合事件:
    //1.悬浮事件hover
    $("#div3").hover(function(){
    //放上去
    $(this).css(“background”,“red”);
    },function(){
    //移开
    $(this).css(“background”,“brown”);
    });
    //2.鼠标连续点击事件
    $("#div3").toggle(function(){
    alert(‘1’);
    },function(){
    alert(‘2’);
    },function(){
    alert(‘3’);
    });
    六、动画:
    //1.隐藏hide
    $("#div3").hide(1000);
    //2.显示show
    $("#div3").show(1000);

    //元素的淡入和淡出
    //1.淡出
    $("#div3").fadeOut(2000);
    //2.淡入
    $("#div3").fadeIn(2000);
    
    //改变元素的高度
    //1.高度变低
    $("#div3").slideUp(3000);
    //2.高度变高
    $("#div3").slideDown(3000);
    
  • 相关阅读:
    worker.properties配置
    uriworkermap.properties配置
    Apache Tomcat连接器-Web服务器操作方法
    x01.os.14: 时间都去哪儿了
    x01.os.13: 文件系统
    x01.os.12: 在 windows 中写 OS
    x01.os.11: IPC 路线图
    x01.os.10: 输入输出
    x01.os.9: 进程切换
    x01.os.8: 加载内核
  • 原文地址:https://www.cnblogs.com/a1111/p/12815891.html
Copyright © 2020-2023  润新知