7jQuery中的事件$即jQuery

最新推荐文章于 2024-05-02 17:59:36 发布

Java_Eastlin

最新推荐文章于 2024-05-02 17:59:36 发布

阅读量1k

点赞数

分类专栏：结构性学前端文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/computer408/article/details/123452637

版权

结构性学前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

#jQuery中的事件

课件

jQuery事件是对JavaScript事件的封装，常用事件分类

1基础事件

鼠标事件

键盘事件

window事件

表单事件

2复合事件

鼠标光标悬停

鼠标连续点击

hover( )方法

toggle( )方法

3绑定事件与移除事件

绑定事件

移除事件

4jQuery动画效果

jQuery提供了很多动画效果

控制元素显示与隐藏

改变元素的透明度

改变元素高度

自定义动画

总结

代码

示例1：当当图书导航

*{padding:0;margin:0;}

html{color:#404040;font-size:12px;font-family:"Arial","微软雅黑";}

a{text-decoration:none;color:#1a66b3;}

ul{list-style:none;}

.left{float:left;}

.right{float:right;}

.hide{display:none;}

.clearfix{clear:both;overflow:hidden;height:0;}

.wrap{width:1200px;margin:0 auto;}

/**头部**/

.top{height:32px;background:#f9f9f9;padding-top:2px;line-height:32px;border-bottom:1px solid #f2f2f2}

.top,.top a{color:#646464;}

.top a:hover{color:#ff2832;}

.top-l .top-login{color:#ff2832;margin-right:5px;}

.top-m > li{float:left;height:22px;line-height:22px;padding-top:5px;}

.top-m > li.line{width:1px;height:12px;background:#e1e1e1;margin:10px 0 0;padding:0;}

.top-m > li a{display:block;padding:0 8px;}

.top-m > li a.menu-btn{padding-right:27px;background:url(../images/home_sprite.png) no-repeat right -307px;}

.top-m > li a i{margin-right:6px;margin-top:3px;}

.top-m > li.on{position:relative;border:1px #e6e6e6 solid;background:#fff;}

.top-m ul.topDown{position:absolute;border:1px #e6e6e6 solid;border-top:0;width:100%;top:27px;left:-1px;background:#fff;}

.top-m ul.topDown li{line-height:24px;}

.top-m ul.topDown li a{display:block;padding-left:10px;color:#000;}

.top-m ul.topDown li a:hover{background:#f2f2f2;color:#000;}

.top-m .top-car{width:15px;height:14px;background:url(../images/home_sprite.png) no-repeat -40px -86px;}

.top-m .top-tel{width:11px;height:16px;background:url(../images/home_sprite.png) no-repeat -40px -70px;}

.nav-box{height:36px;line-height:36px;background:#ff2832;color:#fff;}

.nav-box li{float:left;}

.nav-box li a{display:block;padding:0 15px;color:#fff;font-weight:bold;font-size:14px;}

.nav-box .all{width:190px;border:2px transparent solid;border-width:0 2px;margin-right:18px;}

.nav-box .all a,.nav-box .all a:hover{padding-left:20px;padding-right:0;background:url(../images/home_sprite.png) no-repeat 161px -567px;}

.nav-box li.on{position:relative;}

.nav-box li .topDown{position:absolute;width:120px;background:#fff;top:24px;left:0;}

$(document).ready(function(){

/**主菜单鼠标移上时背景颜色加深**/

$(".nav-ul a").mouseover(function(){

$(this).css("background-color","#f01e28");

});

$(".nav-ul a").mouseout(function(){

$(this).css("background-color","#ff2832");

});

<!doctype html>

<head>

<title>当当图书导航</title>

</head>

<body>

<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>

<li><a href="">当当自出版</a></li>

<li>

</li>

</ul>

</div>

</div>

<li class="all"><a href="">全部商品详细分类</a></li>

</ul>

</div>

</body>

</html>

示例2：键盘事件keyup/down

<!doctype html>

<head>

*{margin: 0; padding: 0; font-family:"微软雅黑";}

fieldset {

width: 300px;

margin: 10px auto;

}

dl{clear: both;}

dt,dd{

display:inline-block;

height: 35px;

line-height: 35px;;

}

dt{ width: 80px; text-align: right;}

input[type="submit"]{width: 60px; text-align: center; line-height: 25px;}

</style>

</head>

<body>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

</fieldset>

$(document).ready(function () {

$("[type=password]").keyup(function () {

$("#events").append("keyup");

}).keydown(function (e) {

$("#events").append(" keydown");

}).keypress(function () {

$("#events").append(" keypress");

});

$(document).keydown(function (event) {

if (event.keyCode == "13") {//按回车键

alert("确认要提交么？");

}

});

</script>

</body>

</html>

回车

示例3：当当图书导航bind

*{padding:0;margin:0;}

html{color:#404040;font-size:12px;font-family:"Arial","微软雅黑";}

a{text-decoration:none;color:#1a66b3;}

ul{list-style:none;}

.left{float:left;}

.right{float:right;}

.hide{display:none;}

.clearfix{clear:both;overflow:hidden;height:0;}

.wrap{width:1200px;margin:0 auto;}

/**头部**/

.top{height:32px;background:#f9f9f9;padding-top:2px;line-height:32px;border-bottom:1px solid #f2f2f2}

.top,.top a{color:#646464;}

.top a:hover{color:#ff2832;}

.top-l .top-login{color:#ff2832;margin-right:5px;}

.top-m > li{float:left;height:22px;line-height:22px;padding-top:5px;}

.top-m > li.line{width:1px;height:12px;background:#e1e1e1;margin:10px 0 0;padding:0;}

.top-m > li a{display:block;padding:0 8px;}

.top-m > li a.menu-btn{padding-right:27px;background:url(../images/home_sprite.png) no-repeat right -307px;}

.top-m > li a i{margin-right:6px;margin-top:3px;}

.top-m > li.on{position:relative;border:1px #e6e6e6 solid;background:#fff;}

.top-m ul.topDown{position:absolute;border:1px #e6e6e6 solid;border-top:0;width:100%;top:27px;left:-1px;background:#fff;display:none;}

.top-m ul.topDown li{line-height:24px;}

.top-m ul.topDown li a{display:block;padding-left:10px;color:#000;}

.top-m ul.topDown li a:hover{background:#f2f2f2;color:#000;}

.top-m .top-car{width:15px;height:14px;background:url(../images/home_sprite.png) no-repeat -40px -86px;}

.top-m .top-tel{width:11px;height:16px;background:url(../images/home_sprite.png) no-repeat -40px -70px;}

.nav-box{height:36px;line-height:36px;background:#ff2832;color:#fff;}

.nav-box li{float:left;}

.nav-box li a{display:block;padding:0 15px;color:#fff;font-weight:bold;font-size:14px;}

.nav-box .all{width:190px;border:2px transparent solid;border-width:0 2px;margin-right:18px;}

.nav-box .all a,.nav-box .all a:hover{padding-left:20px;padding-right:0;background:url(../images/home_sprite.png) no-repeat 161px -567px;}

.nav-box li.on{position:relative;}

.nav-box li .topDown{position:absolute;width:120px;background:#fff;top:24px;left:0;}

$(document).ready(function(){

/**导航头部我的当当显示二级菜单绑定悬浮 bind一个事件*

$(".on").bind("mouseover",function(){

$(".topDown").show();

});*/

/**bind 两个事件**/

$(".top-m .on").bind({

mouseover:function(){

$(".topDown").show();

mouseout:function(){

$(".topDown").hide();

}

});

/**主菜单鼠标移上时背景颜色加深**/

$(".nav-ul a").mouseover(function(){

$(this).css("background-color","#f01e28");

});

$(".nav-ul a").mouseout(function(){

$(this).css("background-color","#ff2832");

});

<!doctype html>

<head>

<title>当当图书导航</title>

</head>

<body>

<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>

<li><a href="">当当自出版</a></li>

</ul>

</li>

</ul>

</div>

</div>

<li class="all"><a href="">全部商品详细分类</a></li>

</ul>

</div>

</body>

</html>

示例4：Tab切换

*{margin: 0; padding: 0; font-family: "微软雅黑"; font-size: 14px; line-height: 25px; color: #717578;}

ul,ol,li{list-style: none;}

#taskList{

width: 560px;

overflow: hidden;

margin: 5px auto 0 auto;

}

#taskList>ul li{

float: left;

width: 120px;

height: 35px;

overflow: hidden;

line-height: 35px;

text-align: center;

border-top-left-radius: 5px;

border-top-right-radius: 5px;

color: #ffffff;

font-size: 16px;

cursor: pointer;

}

#taskList>ul li:first-of-type{

margin-left: 10px;

margin-right: 1px;

background: #26a6e3;

}

#taskList>ul li:last-of-type{

background: #ff9400;

}

.taskContent{

clear: both;

background: #26a6e3;

border-radius: 8px;

height: 310px;

overflow: hidden;

padding-top: 10px;

}

.taskContent li{

height: 95px;

overflow: hidden;

padding-left: 95px;

width: 435px;

margin: 5px auto 0 auto;

border-radius: 5px;

}

.taskContent li div:first-of-type{

float: left;

width: 320px;

padding-top: 10px;

}

.taskContent li div:last-of-type{

width: 100px;

padding-top: 45px;

float: left;

}

.taskContent h1{font-size: 16px; color: #5a5156;}

.taskContent span{color: #fd5000; padding-right: 10px;}

.taskContent input{

width: 92px;

height: 35px;

text-align: center;

height: 36px;

line-height: 35px;

overflow: hidden;

border: none;

color: #ffffff;

font-size: 16px;

border-radius: 5px;

}

#dayTask li:nth-of-type(1){background: #ffffff url(../images/day01.png) 10px 15px no-repeat;}

#dayTask li:nth-of-type(2){background: #ffffff url(../images/day02.png) 10px 15px no-repeat;}

#dayTask li:nth-of-type(3){background: #ffffff url(../images/day03.png) 10px 15px no-repeat;}

#dayTask input{background: #4dc83a;}

#growTask{display: none;}

#growTask li:nth-of-type(1){background: #ffffff url(../images/task01.png) 10px 15px no-repeat;}

#growTask li:nth-of-type(2){background: #ffffff url(../images/task02.png) 10px 15px no-repeat;}

#growTask input{background: #ff4e00;}

/**

* Created by zongjuan.wang on 2016/6/23.

$(document).ready(function(){

$("#nav li:first").bind("click",bg1=function(){

$(".taskContent").css("background","#26a6e3");

}).bind("click",content1=function(){

$("#dayTask").show();

$("#growTask").hide();

});

$("#nav li:last").bind("click",bg2=function(){

$(".taskContent").css("background","#ff9400");

}).bind("click",content2=function(){

$("#dayTask").hide();

$("#growTask").show();

});

/*$("#del").click(function(){

$("#nav li:first").unbind("click", content1)

});*/

$("#del").click(function(){

$("#nav li:first").unbind();

});

})

<!DOCTYPE html>

<html>

</head>

<body>

<li>

<div>

<p>为喜欢的回答送出一个赞</p>

</div>

</li>

<li>

<div>

<p>前往回答一个问题</p>

</div>

</li>

<li>

<div>

</div>

</li>

</ul>

<li>

<div>

<p>知道等级达到2级</p>

<p>奖励：<span>财富值×20</span><span>铜宝箱×1</span><span>准备入学微章×1</span></p>

</div>

</li>

<li>

<div>

<p>在知道获得1个采纳</p>

</div>

</li>

<li>

<div>

</div>

</li>

</ul>

</div>

</section>

</body>

</html>

示例5：当当图书导航-hover实现

*{padding:0;margin:0;}

html{color:#404040;font-size:12px;font-family:"Arial","微软雅黑";}

a{text-decoration:none;color:#1a66b3;}

ul{list-style:none;}

.left{float:left;}

.right{float:right;}

.hide{display:none;}

.clearfix{clear:both;overflow:hidden;height:0;}

.wrap{width:1200px;margin:0 auto;}

/**头部**/

.top{height:32px;background:#f9f9f9;padding-top:2px;line-height:32px;border-bottom:1px solid #f2f2f2}

.top,.top a{color:#646464;}

.top a:hover{color:#ff2832;}

.top-l .top-login{color:#ff2832;margin-right:5px;}

.top-m > li{float:left;height:22px;line-height:22px;padding-top:5px;}

.top-m > li.line{width:1px;height:12px;background:#e1e1e1;margin:10px 0 0;padding:0;}

.top-m > li a{display:block;padding:0 8px;}

.top-m > li a.menu-btn{padding-right:27px;background:url(../images/home_sprite.png) no-repeat right -307px;}

.top-m > li a i{margin-right:6px;margin-top:3px;}

.top-m > li.on{position:relative;border:1px #e6e6e6 solid;background:#fff;}

.top-m ul.topDown{position:absolute;border:1px #e6e6e6 solid;border-top:0;width:100%;top:27px;left:-1px;background:#fff;display:none;}

.top-m ul.topDown li{line-height:24px;}

.top-m ul.topDown li a{display:block;padding-left:10px;color:#000;}

.top-m ul.topDown li a:hover{background:#f2f2f2;color:#000;}

.top-m .top-car{width:15px;height:14px;background:url(../images/home_sprite.png) no-repeat -40px -86px;}

.top-m .top-tel{width:11px;height:16px;background:url(../images/home_sprite.png) no-repeat -40px -70px;}

.nav-box{height:36px;line-height:36px;background:#ff2832;color:#fff;}

.nav-box li{float:left;}

.nav-box li a{display:block;padding:0 15px;color:#fff;font-weight:bold;font-size:14px;}

.nav-box .all{width:190px;border:2px transparent solid;border-width:0 2px;margin-right:18px;}

.nav-box .all a,.nav-box .all a:hover{padding-left:20px;padding-right:0;background:url(../images/home_sprite.png) no-repeat 161px -567px;}

.nav-box li.on{position:relative;}

.nav-box li .topDown{position:absolute;width:120px;background:#fff;top:24px;left:0;}

$(document).ready(function(){

$(".top-m .on").hover(function(){

$(".topDown").show();

function(){

$(".topDown").hide();

}

);

/**主菜单鼠标移上时背景颜色加深**/

$(".nav-ul a").mouseover(function(){

$(this).css("background-color","#f01e28");

});

$(".nav-ul a").mouseout(function(){

$(this).css("background-color","#ff2832");

});

<!doctype html>

<head>

<title>当当图书导航</title>

</head>

<body>

<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>

<li><a href="">当当自出版</a></li>

</ul>

</li>

</ul>

</div>

</div>

<li class="all"><a href="">全部商品详细分类</a></li>

</ul>

</div>

</body>

</html>

示例6：背景变化toggleClass

<!DOCTYPE html>

<html>

<title>背景颜色变化</title>

.red{

font-size: 28px;

color: red;

}

</style>

</head>

<body>

<p>我一会显示一会隐藏</p>

$(document).ready(function(){

/* $("input").toggle(function(){$("body").css("background","#ff0000");},

function(){$("body").css("background","#00ff00");},

function(){$("body").css("background","#0000ff");}

)*/

//$("input").click(function(){$("p").toggle();})

$("input").click(function(){$("p").toggleClass("red");})

})

</script>

</body>

</html>

示例7：当当图书导航-显示和隐藏的速度

*{padding:0;margin:0;}

html{color:#404040;font-size:12px;font-family:"Arial","微软雅黑";}

a{text-decoration:none;color:#1a66b3;}

ul{list-style:none;}

.left{float:left;}

.right{float:right;}

.hide{display:none;}

.clearfix{clear:both;overflow:hidden;height:0;}

.wrap{width:1200px;margin:0 auto;}

/**头部**/

.top{height:32px;background:#f9f9f9;padding-top:2px;line-height:32px;border-bottom:1px solid #f2f2f2}

.top,.top a{color:#646464;}

.top a:hover{color:#ff2832;}

.top-l .top-login{color:#ff2832;margin-right:5px;}

.top-m > li{float:left;height:22px;line-height:22px;padding-top:5px;}

.top-m > li.line{width:1px;height:12px;background:#e1e1e1;margin:10px 0 0;padding:0;}

.top-m > li a{display:block;padding:0 8px;}

.top-m > li a.menu-btn{padding-right:27px;background:url(../images/home_sprite.png) no-repeat right -307px;}

.top-m > li a i{margin-right:6px;margin-top:3px;}

.top-m > li.on{position:relative;border:1px #e6e6e6 solid;background:#fff;}

.top-m ul.topDown{position:absolute;border:1px #e6e6e6 solid;border-top:0;width:100%;top:27px;left:-1px;background:#fff;display:none;}

.top-m ul.topDown li{line-height:24px;}

.top-m ul.topDown li a{display:block;padding-left:10px;color:#000;}

.top-m ul.topDown li a:hover{background:#f2f2f2;color:#000;}

.top-m .top-car{width:15px;height:14px;background:url(../images/home_sprite.png) no-repeat -40px -86px;}

.top-m .top-tel{width:11px;height:16px;background:url(../images/home_sprite.png) no-repeat -40px -70px;}

.nav-box{height:36px;line-height:36px;background:#ff2832;color:#fff;}

.nav-box li{float:left;}

.nav-box li a{display:block;padding:0 15px;color:#fff;font-weight:bold;font-size:14px;}

.nav-box .all{width:190px;border:2px transparent solid;border-width:0 2px;margin-right:18px;}

.nav-box .all a,.nav-box .all a:hover{padding-left:20px;padding-right:0;background:url(../images/home_sprite.png) no-repeat 161px -567px;}

.nav-box li.on{position:relative;}

.nav-box li .topDown{position:absolute;width:120px;background:#fff;top:24px;left:0;}

$(document).ready(function(){

$(".top-m .on").hover(function(){

$(".topDown").show("slow");

function(){

$(".topDown").hide("fast");

}

);

/**主菜单鼠标移上时背景颜色加深**/

$(".nav-ul a").mouseover(function(){

$(this).css("background-color","#f01e28");

});

$(".nav-ul a").mouseout(function(){

$(this).css("background-color","#ff2832");

});

<!doctype html>

<head>

<title>当当图书导航</title>

</head>

<body>

<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>

<li><a href="">当当自出版</a></li>

</ul>

</li>

</ul>

</div>

</div>

<li class="all"><a href="">全部商品详细分类</a></li>

</ul>

</div>

</body>

</html>

示例8：淡入淡出效果fadeIn/out

<!DOCTYPE html>

<html>

<title>淡入淡出效果</title>

<style>

body{text-align: center;}

</style>

</head>

<body>

$(document).ready(function() {

$("input[name=fadein_btn]").click(function(){

$("img").fadeIn("slow");

});

$("input[name=fadeout_btn]").click(function(){

$("img").fadeOut(1000);

});

</script>

</body>

</html>

示例9：改变元素高度slideUp/Down

<!DOCTYPE html>

<html>

<title>改变元素高度</title>

body{

margin: 0px;

padding: 0px;

}

h2{

background-color: blue;

color: white;

margin: 0px;

}

</style>

</head>

<body>

<h2>窗边的小豆豆</h2>

<p>本书讲述了作者上小学的一段真实的故事。</p>

<p>作者因淘气被学校退学后，来到巴学园。在小林校长的爱护和引导下，一般人眼里"怪怪"的小豆豆逐渐成了一个大家都能接受的孩子，并奠定了她一生的基础。</p>

<p>这本书不仅给世界千万读者无数的笑声和感动，而且为现代教育的发展注入了新的活力，成为20世纪全球最具影响的作品之一。</p>

</div>

$(document).ready(function() {

$("h2").click(function(){

$(".txt").slideUp("slow");

$(".txt").slideDown("slow");

});

</script>

</body>

</html>

示例10：自定义动画offset、animate

*{padding:0;margin:0;}

.btn-box{width:500px;margin:50px auto;}

button{

margin-right:50px;

font-size:16px;

width:80px;

height:80px;

text-align:center;

line-height:80px;

color:#fff;

font-weight:bold;

border-radius:50%;

}

.btnClick{

display:block;

width:100px;

height:105px;

background:url(../images/btn-bg.png) no-repeat;

margin-left:60%;

margin-top:68px;

}

.bg1{background:url(../images/1.jpg) no-repeat;}

.btn-main{margin-top:60px;}

.container{

position:fixed;

bottom:0;

left:0;

height:35%;

width:100%;

}

.stick{

position:absolute;

left:50px;

bottom:100%;

height:5px;

width:0;

background:#096;

transform:rotate(-90deg);

-ms-transform:rotate(-90deg); /*IE9*/

-moz-transform:rotate(-90deg); /*Firefox*/

-webkit-transform:rotate(-90deg); /*Ssfari and Chrome*/

-o-transform:rotate(-90deg); /*Opera*/

transform-origin:0 100%;

-ms-transform-origin:0 100%;

-moz-transform-origin:0 100%;

-webkit-transform-origin:0 100%;

-o-transform-origin:0 100%;

transition:transform 0.35s linear;

-moz-transition:transform 0.35s linear;

-webkit-transition:transform 0.35s linear;

-o-transition:transform 0.35s linear;

}

.stickDown{

transform:rotate(0deg);

-ms-transform:rotate(0deg);

-moz-transform:rotate(0deg);

-webkit-transform:rotate(0deg);

-o-transform:rotate(0deg);

}

.man{

position:absolute;

left:0px;

bottom:98%;

width:65px;

height:97px;

}

.man img{

position:absolute;

left:0;

top:0;

}

.well-box{

position:absolute;

height:100%;

left: 0px;

}

.well{

position:absolute;

height:100%;

background:#000;

width: 50px;

}

.well-box div:first-of-type{left:0px;}

.well-box div:last-of-type{left: 400px;}

/**

* Created by zongjuan.wang on 2016/7/28.

var stop = true;//按钮是否可以点击

var colWidth ;//设置柱子宽度

function moveMan(){

var stickW = $(".stick").width();//获取倒下棍子的长度

setTimeout(function(){

$(".man").find("img").attr("src","images/stick.gif");

$(".man").find("img").animate({"left":stickW+"px"},1000,function(){

//判断人物是否落下

var wellL = $(".well").eq(1).offset().left;//柱子距离屏幕左侧的距离

var well0 = $(".well").eq(0).offset().left;//柱子距离屏幕左侧的距离

colWidth= $(".well").eq(0).width();

var range = wellL-well0-colWidth;//获取两个柱子之间的距离

if( (stickW < range) || (stickW > wellL)){

$(".man").animate({"bottom":"0px"});

}else{

//如果成功

$(".man").find("img").attr("src","images/stick_stand.png").css({"left":0}).hide();//人物变为初始

$(".stick").removeClass("stickDown").width(0);//棍子变为初始

var oldL = $(".well-box").offset().left;

$(".well-box").animate({"left":-wellL+oldL},500,function(){

$(".man").find("img").show();

stop = false;//按钮可以点击

});//柱子移动

}

});

},600);

}

$(document).ready(function(){

//鼠标按下棍子变长

$(".btnClick").mousedown(function(){

if(stop){

$(".stick").animate({"width":"500px"},2500);//棍子变长

}

});

//鼠标弹起

$(".btnClick").mouseup(function(){

if(stop){

$(".stick").stop();//棍子停止变长

stop = false;

$(".stick").addClass("stickDown");//棍子倒下

moveMan();

}

});

})

<!doctype html>

<head>

<title>英雄难过棍子关</title>

</head>

</p>

</div>

</div>

</body>

</html>

Java_Eastlin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
7jQuery中的事件$即jQuery

#jQuery中的事件课件jQuery事件是对JavaScript事件的封装，常用事件分类1基础事件鼠标事件键盘事件window事件表单事件2复合事件鼠标光标悬停鼠标连续点击hover( )方法toggle( )方法3绑定事件与移除事件绑定事件移除事件4jQuery动画效果jQuery提供了很多动画效果控制元素显示与隐藏改变元素的透明度
复制链接

扫一扫