jQuery中的事件、动画、表单应用

更新日期: 2019-09-19阅读: 2k标签: 动画

什么是事件?

页面对不同访问者的响应叫做事件。事件处理程序指的是当 html 中发生某些事件时所调用的方法。在事件中经常使用术语 " 触发 " (或 " 激发 " )常用click()方法触发


dom的加载

$(document).ready() 方法与 window.onload () 方法的区别:
方法window.onload$(document).ready()
执行时机必须等待网页中的所有内容加载完毕后(包括图片)才能执行网页中的所有DOM结构绘制完毕后就执行。可能DOM元素关联的东西并没有加载完
编写个数不能同时编写多个能同时编写多个
简化$()

事件绑定

使用bind()方法为每个匹配元素的特定事件绑定事件处理函数。bind() 方法的调用格式: bind(type,[data], fn )

• type: 含有一个或多个事件类型的字符串,由空格分隔多个事件。比如 "click" 或 "submit" ,还可以是自定义事件名。
• data: 作为 event.data 属性值传递给事件对象的额外数据对象
• fn : 绑定到每个匹配元素的事件上面的处理函数
实例:
//事件绑定
$("#btn1").bind("click",function(){
   alert("点我触发bind函数");
})

<button id="btn1">点我触发bind函数</button>

使用 jquery 的 is()方法判断元素是否可见,使用is()方法:

alert($("button").parent().is("body"));
 /*
  * $("#b1").is(":visible") 判断id为d1的元素是否可见
  * 可见返回true,不可见就返回false
  * 
  * next($("#b1").is(":visible"));
  */
alert("#btn2").is(":visible");
$("#btn2").click(function(){
 	if($("#b1").is(":visible")){
 		//$(this).next().css();
 		 $(this).next().hide();
 	}else{
 		$(this).next().show();
 	}
})

合成事件-hover()

hover()模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数。

hover() 方法语法结构为: hover([over,]out)

• over: 鼠标移到元素上要触发的函数
• out: 鼠标移出元素要触发的函数
实例:
$(function(){			
	/*
	 * 合成事件hover()方法的语法结构:
	 *  hover(enter,leave);
	 * 
	 * */
	 $("#btn2").hover(function(){
	 	 $(this).next().show();
	 },function(){
	 	$(this).next().hide();
	 })
})

<button id="btn1">点我触发bind函数</button>
<button id="btn2">隐藏或者显示</button>
<div id="b1" style="display: none;">
	<img src="img/log.jpg"/>
</div>

合成事件-toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个。

$(function(){		
	/*
	 * 合成事件toggle()方法的语法结构:
	 *  toggle(f1,f2,f3,f4....);
	 * 
	 * 有俩个功能:
	 *    1:模拟连续点击(自动点击,不是你手动点击);
	 * 		2.如果元素本身可见,则会自动隐藏,如果本身是隐藏的,则会自动显示
	 * */
	/* $("#btn1").toggle(function(){
	 	alert("触发toggle函数");
	 });*/
	 //带俩个参数的toggle方法
	 $("#btn1").toggle(function(){
	 	  $("#btn1").css("color","turquoise");
	 	 //alert("触发toggle函数");
	 },function(){
	 	//alert("触发toggle2函数")
	 	$("#btn1").css("background-color","deepskyblue");
	 })
})


事件冒泡:

在页面上可以有多个事件,也可以多个元素响应同一个事件。
假设网页上有两个元素,其中一个嵌套在另一个元素里,并且都被绑定了 click 事件,同时 body 元素上也绑定了 click事件。

事件会按照 DOM 层次结构像水泡一样不断向上直至顶端

<style type="text/css">
			#body1{
				background-color: deepskyblue;
			}
			#div1{
				background-color: white;
			}
			#span1{
				background-color: yellow;
			}
		</style>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				 /*
				  *演示事件冒泡
				  *    当一个元素的本身和父类都绑定了相同事件时,它本身触发该事件,则父类也会触发该事件
				  * 解决方法:停止冒泡
				  *      方法1:本身return false;
				  * 	方法2:stopPropagation(); [event是事件对象]
				  */
				 $("#body1").click(function(){
				 	 alert("body的click方法");
				 })
				  $("#div1").click(function(){
				 	 alert("div的click方法");
				 })
				   $("#span1").click(function(){
				 	 alert("span的click方法");
				 	// return false;
				 	event.stopPropagation();
				 })
				 
			})
		</script>
	</head>
	<body id="body1">
		 body
		 <div id="div1">
		 	div
		 	<span id="span1">
		 		span
		 	</span>
		 </div>
	</body>
</html>


阻止默认行为

网页中的元素有自己默认的行为,例如,单击超链接后会跳转、单击提交按钮后表单会提交,有时需要阻止元素的默认行为。
在 jQuery 中,提供了 preventDefault () 方法来阻止元素的默认行为。
实例:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				 //阻止点击之后跳转
				 $("#a1").click(function(){
				 	 alert("你正在阻止a标签的默认行为");
				 	 //return false;  		//方法一
				 	 event.preventDefault(); //方法二
				 })
				 /*
				  * 写一个登录表单,设置如果用户名不满足正则表达式的要求,阻止请求服务
				  * 正则判断是否满足符合规则
				  * 
				  */ 
				  $(":submit").click(function(){
				  	var na=$("#na").val();
				     var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; 
				       if(!uPattern.test(na)){
				       	    alert("你正在阻止a标签的默认行为");
				       	    return false;
				       }
				  	
				  })
				     
			})
		</script>
	</head>
	<body>
		<a href="http://baidu.com" id="a1">跳转百度</a>
		<form action="http://baidu.com" method="post">
			用户名<input type="text" id="na"/><br/>
			密码<input type="password" id="pa" /><br/>
			  <button type="submit">登录</button>
			
		</form>
	</body>
</html>


事件对象的属性

事件对象: 当触发事件时, 事件对象就被创建了. 在程序中使用事件只需要为函数添加一个参数

event.type : 获取事件的类型
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                 /*
                  * 事件对象:对事件对象的常用属性进行封装
                  * 1.event.type获取事件的类型(也就是事件名称)
                  * 2. event.preventDefault();  阻止默认的事件行为 (在IE中无效)
                  * 3. event.stopPropagation() 阻止事件冒泡
                  *  4.event.target  获取触发事件的元素(获取触发的目标)
                  * 5.event.pageX / event.pageY 获取事件光标的X和Y的坐标
                  * 6.event.which  获取鼠标的按键(左键返回1,中键返回2,右键返回3)
                  */
                 $("#a1").click(function(){
                      //alert(event.pageX+","+event.pageY);
                       alert(event.which);
                      return false;
                 })
                  
            })
        </script>
    </head>
    <body>
        <a href="http://baidu.com" id="a1">查看事件对象的属性</a>
         
    </body>
</html>


移除事件:

在绑定事件的过程中,不仅可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#btn1").one("click", function() {
					$("#test").append("<p>我的绑定函数1</p>");
				}).one("click", function() {
					$("#test").append("<p>我的绑定函数2</p>");
				}).one("click", function() {
					$("#test").append("<p>我的绑定函数3</p>");

				})
			})
		</script>
	</head>

	<body>
		<button id="btn1">绑定函数</button>
		<div id="test">

		</div>
	</body>

</html>


One()方法

one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除. 即在每个对象上, 事件处理函数只会被执行一次.

on()与bind()的差别

jQuery从1.7+版本开始,提供了on()和off()进行事件处理函数的绑定和取消。

两者的区别就在于是否支持selector这个参数值。如果使用on的时候,不设置selector,那么on与bind就没有区别了。


jQuery的动画

隐藏和显示元素-show()方法和hide()方法
hide(): 在HTML文档中,为一个元素调用hide()方法会将该元素的display样式改为 none,代码功能同css("display", "none")。
show(): 把元素隐藏后,可以使用show ()方法将元素的 display 样式改为先前的显示状态("block"或"inline"或其他除了"none"之外的值)。
$(function(){
$("div").hover(function(){
	$(this).next().show();
},function(){
	$(this).next().hide();
})
})
</script>
淡入和淡出-fadeIn()方法和fadeout()方法
fadeIn(), fadeOut(): 只改变元素的透明度. fadeOut()会在指定的一段时间内降低元素的不透明度,直到元素完全消失(“display:none”),fadeIn()则相反。
滑上和滑下-slideUp()方法和slideDown()方法
slideDown(),slideUp():只会改变元素的高度,如果一个元素的display属性为 none,当调用slideDown()方法时,这个元素将由上至下延伸显示,slideUp()方法正好相反,元素由下至上缩短隐藏。

自定义动画方法animate()

使用animate()方法来自定义动画,其语法结构为:
animate(params,[speed],[fn])
params:一组包含作为动画属性和终值的样式属性和及其值的集合,比如{property1:”value1”, property2:”value2”,..}
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

fn:在动画完成时执行的函数,每个元素执行一次

toggle()方法

toggle()方法可以切换元素的可见状态。如果元素是可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的。
toggle()会同时改变元素的高度、宽度和透明度
slideToggle()方法
slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。
fadeTo()方法
fadeTo()方法可以把元素的不透明度以渐近的方式调整到指定的值(0–1之间)。这个动画只调整元素的不透明度,即匹配的元素的高度和宽度不会发生变化。
fadeToggle()方法
fadeToggle()方法通过不透明度变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度
动画方法说明:
方法名说明

hide()show()

同时修改多个样式属性,即高度、宽度、不透明度

fadeIn()和fadeOut()

只改变不透明度

slideUp()和slideDown()

只改变高度

fadeTo()

只改变不透明度

toogle()

用来代替hide()方法和show()方法,所以会同时修改多个样式属性,即高度、宽度、不透明度

slideToggle()

用来代替slideUp()方法和slideDown()方法,所以只能改变高度

fadeToggle()

用来代替fadeIn()和fadeOut()方法,所以只能改变不透明度

animate()

属性自定义动画的方法,以上各种动画方法实质内部都调用了animate()方法。此外,直接使用animate()方法还能自定义其他的样式属性,例如:“left”、”marginLeft”,”scrollTop”等


表单应用:

一个表单有3个基本组成部分:

•表单标签:包含处理表单数据所用的服务器程序URL以及数据提交到服务器的方法。

•表单域:包含文本框、密码框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

•表单按钮:包括提交按钮、复位按钮和一般按钮,用于将数据传送到服务器上或者取消传送,还可以用来控制其他定义了处理脚本的处理工作。

attr()和prop()方法区别: 

attr的返回值要么是checked要么是undefined,prop的返回值只有true和false。

prop()函数的结果:

      1.如果有相应的属性,返回指定属性值。

      2.如果没有相应的属性,返回值是空字符串。

attr()函数的结果:

      1.如果有相应的属性,返回指定属性值。

      2.如果没有相应的属性,返回值是undefined。

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()


链接: https://fly63.com/article/detial/5424

纯CSS3实现各种表情动画

CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画

Vue.js动画笔记_vue实现动画效果

Vue.js中的元素动画或页面跳转动画有多种实现方式比如:1、自己手动写CSS3动画来实现2、使用第三方CSS动画库如:Animate.css3、在构子函数中操作DOM4、使用第三方Js动画库如:Velocity.js。

新手引导动画的4种实现方式

尽量多的列举出新手引导动画的实现方式, 昨天稍微总结了一下, 实现了4种.源码在最后,如果想直接看结果的,可以拉到最后去看.这里假设所有的弹出层都是基于页面上原有的元素

为何 Canvas 内元素动画总是在颤抖?

在项目中我们可能对动画进行锁帧,帧率可能是 60 或者 30,如果我们想保证渲染不抖动,在匀速直线运动中,我们尽量保证我们设置的速度要是帧率的倍数,或者保证平均每帧移动的像素点是一样的

前端开发常用css动画代码

常用的CSS动画效果,在实际开发中经常需要用到移动、大小、闪烁、渐显、渐隐等动画效果,这篇文章就整理了些常见的动画效果分享给大家,一遍收藏使用。

css环形滚动_内容加载的环形滚动动画效果

创建一个没有背景的圆,然后声明透明度为0.1的黑色边框(看起来是灰色),修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画,并让该动画无限播放(infinite)即可

css transition 实现滑入滑出

transition是css最简单的动画。 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!!但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? transition可以做到。

动画函数的绘制及自定义动画函数

制作动画效果离不开动画运动函数,而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理,Tween.js划分出了不同的动画类型,每种动画类型里面都包含以下的缓动类型:ease in 先慢后快、ease out 先块后慢、ease in out 先慢后快再慢

超酷的CSS3 loading预加载动画特效

这是一款超酷CSS3 loading预加载动画特效。该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成。HTML结构:4种loading预加载动画的HTML结构分别如下

Vue 动画的封装

js提供的钩子动画before-enter、enter、after-enter,用这种方法写,所有的动画都写在了组件里,外部只需要调用这个fade组件就可以了,也不需要全局去写一些样式了,这种动画的封装是比较推荐的一种动画封装,因为它可以把所有动画的实现完整的封装在一个组件中

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!