JQuery-基础笔记02
2019-08-12 10:17
351 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42701294/article/details/99289959
JQuery-02
1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数: 1. speed:动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如:1000) 2. easing:用来指定切换效果,默认是"swing",可用参数"linear" * swing:动画执行时效果是 先慢,中间快,最后又慢 * linear:动画执行时速度是匀速的 3. fn:在动画完成时执行的函数,每个元素执行一次。 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]]) 注:上面的3个参数后面可以省略,第二个默认值"swing"
2. 遍历 1. js的遍历方式 * for(初始化值;循环结束条件;步长) 2. jq的遍历方式 1. jq对象.each(callback) 1. 语法: jquery对象.each(function(index,element){}); * index:就是元素在集合中的索引 * element:就是集合中的每一个元素对象 * this:集合中的每一个元素对象 2. 回调函数返回值: * break: 如果当前function返回为false,则结束循环(break)。 * continue: 如果当前function返回为true,则结束本次循环,继续下次循环(continue) 2. $.each(object, [callback]) 3. for..of: jquery 3.0 版本之后提供的方式 for(元素对象 of 容器对象) 注:推荐使用前2个方式 3. 事件绑定 1. jquery标准的绑定方式 * jq对象.事件方法(回调函数); $("div").click(function(){ ...//绑定单击事件 }); * 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。 * 表单对象.submit();//让表单提交 2. on绑定事件/off解除绑定 * jq对象.on("事件名称",回调函数) $("div").on("dblclick",function(){ ....//绑定双击事件 }); * jq对象.off("事件名称") $("div").off("dblclick"); 1,调用者解绑自身上的绑定事件 $("div").off(); 2,如果off方法不传递任何参数,则将组件上的所有事件全部解绑 3. 事件切换:toggle * jq对象.toggle(fn1,fn2...) * 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2..... $("div").toggle(function(){ ...//函数1 },function(){ ...//函数2 }); * 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。 <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
常见事件类型
相关文章推荐
- JQuery学习笔记02-选择器把需要的东西揪出来(基础)
- jQuery基础笔记02
- jQuery基础----02jQuery选择器和事件-选择器
- Jquery基础学习笔记(1)
- PHP基础笔记(02)
- JQuery学习笔记——基础知识和数组以及字符串操作
- Java基础知识强化之网络编程笔记02:Socket通信原理图解
- Python基础知识学习笔记02
- JAVA基础学习笔记 day005_02循环结构
- Java笔记整理-02.Java基础语法
- JQuery使用及基础原理解析相关笔记(二)
- jQuery学习笔记1——基础部分
- Jquery 基础学习笔记
- jQuery学习笔记整理---02部分
- jquery基础教程 笔记
- jquery基础之学习笔记
- Web基础学习笔记-jQuery
- Python学习笔记 02 Python基础
- 笔记 .Net 进阶分享 02 基础操作
- 【知了堂学习笔记】_Jquery基础知识之DOM操作(二)