欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery点击事件和特效

程序员文章站 2022-03-02 23:39:26
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点击事件和特效
更多事件绑定方法及特效应用请参考 jQuery API

本文地址:https://blog.csdn.net/lipeiwen1998/article/details/107519867

相关标签: jquery