jQuery点击事件和特效
程序员文章站
2022-06-15 15:02:50
jQuery添加点击事件/*给按钮button绑定点击事件*///方法一$("button").click(function(){ alert("我是点击事件里的弹窗");});//方法二$("button").on("click",function(){ alert("我是第二个点击事件里的弹窗");});/*方法二中用on方法绑定click事件on()方法 提供绑定事件处理程序所需的所有功能on()可在选择元素上绑定一个或多个事件的事件处理函数*//...
jQuery事件
- 事件绑定
/*
给按钮button绑定点击事件
*/
//方法一
$("button").click(function(){
alert("我是点击事件里的弹窗");
});
//方法二
$("button").on("click",function(){
alert("我是第二个点击事件里的弹窗");
});
/*
方法二中用on方法绑定click事件
on()方法 提供绑定事件处理程序所需的所有功能
on()可在选择元素上绑定一个或多个事件的事件处理函数
*/
//例如：给ul中的所有li绑定click事件
$("ul").on("click","li",function(){
alert("点击ul中的每个里都会弹出我");
});
- 事件解绑
//off()在选择元素上移除一个或多个事件的事件处理函数
$("button").off("click");
jQuery特殊效果
使用jQuery实现的淡入淡出、显示隐藏、向下展示向上卷起三个特效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 300px;
height: 300px;
background: blue;
border: 10px solid palevioletred;
font-size: 30px;
font-family: "楷体";
margin: 10px;
display: none;
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var btn1 = $(".btn1");
var btn2 = $(".btn2");
var btn3 = $(".btn3");
var div1 = $("#div1");
//淡入淡出
btn1.click(function(){
/* if(div1.css("display") == "none"){
div1.fadeIn(2000);
}else{
div1.fadeOut(2000);
}; */
div1.fadeToggle(2000);
});
//显示隐藏
btn2.click(function(){
/* if(div1.css("display") == "none"){
div1.show(200);
}else{
div1.hide(200);
} */
div1.toggle(200);
});
//向下展开,向上卷起
btn3.click(function(){
/* if(div1.css("display") == "none"){
div1.slideDown(200);
}else{
div1.slideUp(200);
} */
div1.slideToggle(200);
});
})
</script>
</head>
<body>
<button type="button" class="btn1">点击淡入淡出</button>
<button type="button" class="btn2">点击显示隐藏</button>
<button type="button" class="btn3">点击向下展开,向上卷起</button>
<div id="div1">
桃之夭夭，灼灼其华
</div>
</body>
</html>
jQuery链式调用
<script type="text/javascript">
$(function(){
//链式调用
$(".continer").children("ul").slideDown(3000).children("li").eq(2).children("a").css("textDecoration","none").next("b").css({fontFamily:"楷体",
fontSize:"30px"}).parent().prev().css("color","red");
})
</script>
<body>
<div class="continer">
<ul>
<li>01</li>
<li>02</li>
<li>
<a href="">03</a>
<b>雨打梨花深闭门，忘了青春，误了青春。</b>
</li>
<li>04</li>
<li>05</li>
</ul>
</div>
</body>
代码效果：
更多事件绑定方法及特效应用请参考 jQuery API
本文地址：https://blog.csdn.net/lipeiwen1998/article/details/107519867
上一篇： jQuery选择器详细介绍