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);
JavaWeb--JQuery2
猜你喜欢
转载自blog.csdn.net/qq_42514129/article/details/83984161
今日推荐
周排行