当前位置: 萬仟网 > IT编程>开发语言>Jquery > jQuery点击事件和特效

jQuery点击事件和特效

2020年07月24日  | 萬仟网IT编程  | 我要评论
jQuery添加点击事件/*给按钮button绑定点击事件*///方法一$("button").click(function(){ alert("我是点击事件里的弹窗");});//方法二$("button").on("click",function(){ alert("我是第二个点击事件里的弹窗");});/*方法二中用on方法绑定click事件on()方法 提供绑定事件处理程序所需的所有功能on()可在选择元素上绑定一个或多个事件的事件处理函数*//

jQuery事件

  1. 事件绑定
/*
给按钮button绑定点击事件
*/
//方法一
$("button").click(function(){
      alert("我是点击事件里的弹窗");
});
//方法二
$("button").on("click",function(){
      alert("我是第二个点击事件里的弹窗");
});
/*
方法二中用on方法绑定click事件
on()方法 提供绑定事件处理程序所需的所有功能
on()可在选择元素上绑定一个或多个事件的事件处理函数
*/
//例如:给ul中的所有li绑定click事件
$("ul").on("click","li",function(){
      alert("点击ul中的每个里都会弹出我");
});
  1. 事件解绑
//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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号