JavaWeb--JQuery2

news/2024/7/11 1:07:56 标签: JQuery
1. 动画
	1. 三种方式显示和隐藏元素
		1. 扩散显示和隐藏方式(默认)
			1. show([speed,[easing],[fn]])
				1. 参数:
					1. speed:动画的速度。三个预定义的值("slow","normal", "fast")或表示动画
					时长的毫秒数值(如:1000)
					2. easing:用来指定切换效果,默认是"swing",可用参数"linear"
						* swing:动画执行时效果是 先慢,中间快,最后又慢
						* linear:动画执行时速度是匀速的
					3. fn:在动画完成时执行的函数,每个元素执行一次。
					$("#div").show(5000,"linear");
			2. hide([speed,[easing],[fn]])
			3. toggle([speed],[easing],[fn])
		
		2. 滑动显示和隐藏方式
			1. slideDown([speed],[easing],[fn])
			2. slideUp([speed,[easing],[fn]])
			3. slideToggle([speed],[easing],[fn])

		3. 淡入淡出显示和隐藏方式
			1. fadeIn([speed],[easing],[fn])  //显示
			2. fadeOut([speed],[easing],[fn]) //隐藏
			3. fadeToggle([speed,[easing],[fn]])


2. 遍历
        1. js的遍历方式
            * for(初始化值;循环结束条件;步长)
        2. jq的遍历方式
         jq遍历出来的每一个元素对象都是js对象
            1. jq对象.each(callback)
                1. 语法:
                    jquery对象.each(function(index,element){});
                        $("div").each(function(index,element){
                            * index:就是元素在集合中的索引
                            * element:就是集合中的每一个元素js对象
                            * this:集合中的每一个元素js对象, this===element //true
                        });
                        index,element参数可有可无
                2. 回调函数遍历返回值:
                    * false: 如果当前function返回为false,则结束循环(break)。通常嵌套if使用
                    * true: 如果当前function返回为true,则结束本次循环,继续下次循环(continue)
            2. $.each(object, [callback]) 核心函数遍历,支持js和jq
            3. for..of: jquery 3.0 版本之后提供的方式,支持js和jq
                for(js元素对象 of 容器对象)
                for(user of users){
                    alert(user.innerHTML);
                }
                
             4.特殊: for...in 遍历json对象,u是字符串,所以user[u]不需要引号
             var user ={name:'zhangsan',age:23}
             for( u in user){
                 console.info( u + ":" + user[u]);
             }
	
3. 事件绑定
	1. jquery标准的绑定方式
		* jq对象.事件方法(回调函数);
		* 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
			* 输入框对象.focus();//空参,让输入框获得焦点
			* 表单对象.submit();//空参,让表单提交
	2. on绑定事件/off解除绑定
		* jq对象.on("事件名称",回调函数)
		* jq对象.off("事件名称")
			* 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
			$("#btn1").on("click",function(){}); //绑定事件
			$("#btn2").on("click",function( $("#btn1").of("click") ){});//解除绑定
		需要off解除绑定的原因:在jq中,对同一个对象的同一事件可以定义多次,则有可能一个事件触发多个
	监听器,所以需要解除绑定上一次的时间。在js中,只会覆盖上一个,不会多次定义
                $("#div").click(function(){alert(1);});
                $("#div").click(function(){alert(2);});
			触发事件会先弹出1,再弹出2
			document.getElementById("div").onclick=function(){alert(1);}
			document.getElementById("div").onclick=function(){alert(2);}
			触发事件只会弹出2
	3. 单击事件切换:toggle
		* jq对象.toggle(fn1,fn2...)
			* 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2.....
			
		 jq对象.toggle(fn1,fn2...)跟jq对象.toggle([speed],[easing],[fn])方法比较:
		如果是空参,表示的就是扩散动画的切换效果,只要带了[speed],[easing]任意一个,那就是扩散动画
,此时再定义多个回调函数就会报错。总结:要想绑定事件的重载形式,就只声明回调函数。要想要切换动画的效果,回调函数最多只能有一个。

		* 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
			 <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

4. 插件:增强JQuery的功能
	1. 实现方式:
		1. $.fn.extend(object) 扩展jquery对象
			* 增强通过Jquery获取的对象的功能  $("#id")
		   $.fn.extend({
               max : function(a,b){
                   return a > b? a: b;
               },
                mix : function(a,b){
                   return a < b? a: b;
               },
		   });
		   $("div").max(1,2);
		2. $.extend(object)	  扩展jquery全局对象$
			* 增强JQeury对象自身的功能  $/jQuery
			$.extend({
                 max : function(a,b){
                   return a > b? a: b;
               },
                mix : function(a,b){
                   return a < b? a: b;
               },
			});
			$.max(1,2);

http://www.niftyadmin.cn/n/1490660.html

相关文章

关于Java中获取Class实例的三个方法及其相关问题

Class类简介   在java世界里&#xff0c;一切皆对象。从某种意义上来说&#xff0c;java有两种对象&#xff1a;实例对象和Class对象。每个类的运行时的类型信息就是用Class对象表示的。它包含了与类有关的信息。其实我们的实例对象就通过Class对象来创建的。Java使用Class对…

Java中静态代码块、代码块以及构造函数执行顺序的解决。

在JavaSE的基础笔试题中经常会出现这三个的一个执行顺序&#xff0c;那么他们的执行顺序究竟是怎么样的呢&#xff1f;通过代码我们可以直接看一下最终结果&#xff08;代码如下&#xff09; 最终输出结果如下 可以看出到实际上执行顺序应该是父类静态代码块——>子类静态代…

关于父类子类静态代码块的一些补充。

总结 Java中的静态变量和静态代码块是在类加载的时候就执行的&#xff0c;实例化对象时&#xff0c;先声明并实例化变量再执行构造函数。如果子类继承父类&#xff0c;则先执行父类的静态变量和静态代码块&#xff0c;再执行子类的静态变量和静态代码块。同样&#xff0c;接着…

JavaWeb--maven

maven中自带有tomcat的依赖jar包,版本是6.0的,并且最多只能支持7.0版本的,所以如果servlet-api指定的依赖范围到了运行时,maven就不知道该选择自己自带的还是我们所指定的,就会出异常,所以servlet-api通常指定为<scope>provided</scope> maven中自带的jdk是1.5不支…

Java中双亲委派机制的一点理解

什么是双亲委派机制 当某个类加载器需要加载某个.class文件时&#xff0c;它首先把这个任务委托给他的上级类加载器&#xff0c;递归这个操作&#xff0c;如果上级的类加载器没有加载&#xff0c;自己才会去加载这个类。 类加载器的类别 BootstrapClassLoader&#xff08;启…

JVM中虚拟机栈的一点理解

最近在学习JVM&#xff0c;后面便连更jvm的相关篇章&#xff0c;一来记录学习过程&#xff0c;二来巩固加深理解。 一、虚拟机执行引擎 虚拟机执行引擎是java虚拟机核心组成部分之一。虚拟机是相对于物理机的概念&#xff0c;他们都有代码执行能力&#xff0c;区别在于物理机…

ssm--mybatis1

mybatis的概述:mybatis是一个用java编写的持久层框架,它使用了ORM思想实现了结果集的封装。ORM&#xff1a;Object Relational Mappging 对象关系映射简单的说&#xff1a;就是把数据库表字段和实体类的属性对应起来,让我们可以操作实体类就实现操作数据库表。window下的mysql不…

Java并发中对AQS的一些理解

AQS是java并发中的一种重要基础框&#xff0c;随手记此。 AQS原理 AQS&#xff1a;AbstractQuenedSynchronizer抽象的队列式同步器。是除了java自带的synchronized关键字之外的锁机制。 AQS的全称为&#xff08;AbstractQueuedSynchronizer&#xff09;&#xff0c;这个类在j…