JQuery 高级
动画
- 默认显示和隐藏方式
- show([speed,[easing],[fn]])
- hide([speed,[easing],[fn]])
- toggle([speed],[easing],[fn]) –
切换显示和隐藏
- 滑动显示和隐藏方式
- slideDown([speed],[easing],[fn])
- slideUp([speed,[easing],[fn]])
- slideToggle([speed],[easing],[fn])–
切换显示和隐藏
- 淡入淡出显示和隐藏方式
- fadeIn([speed],[easing],[fn])
- fadeOut([speed],[easing],[fn])
- fadeToggle([speed,[easing],[fn]])–
切换显示和隐藏
上述方法的参数详解:
- speed:动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如:1000)
- easing:用来指定切换效果,默认是"swing",可用参数"linear"
- swing:动画执行时效果是 先慢,中间快,最后又慢
- linear:动画执行时速度是匀速的
- fn:在动画完成时执行的函数,每个元素执行一次。
示例:
<script>//隐藏divfunction hideFn(){/* $("#showDiv").hide("slow","swing",function(){alert("隐藏了...")});*/
/*//默认方式$("#showDiv").hide(5000,"swing");
*/
/*//滑动方式$("#showDiv").slideUp("slow");*///淡入淡出方式$("#showDiv").fadeOut("slow");}//显示divfunction showFn(){/*$("#showDiv").show("slow","swing",function(){alert("显示了...")});*//*//默认方式$("#showDiv").show(5000,"linear");*/
/*//滑动方式$("#showDiv").slideDown("slow");*///淡入淡出方式$("#showDiv").fadeIn("slow");}//切换显示和隐藏divfunction toggleFn(){/*//默认方式$("#showDiv").toggle("slow");
*//*//滑动方式$("#showDiv").slideToggle("slow");
*///淡入淡出方式$("#showDiv").fadeToggle("slow");}</script>
遍历
jq的遍历方式
- jq对象.each(callback)
-
语法:
jquery对象.each(function(index,element){});- index:就是元素在集合中的索引
- element:就是集合中的每一个元素对象(也可用this表示)
-
回调函数返回值:
- true:如果当前function返回为false,则结束循环(break)。
- false:如果当前function返回为true,则结束本次循环,继续下次循环(continue)
-
//1.获取所有的ul下的livar citys = $("#city li");//2. jq对象.each(callback)citys.each(function (index,element) {//3.1 获取li对象 第一种方式 thisalert(this.innerHTML);//或者alert($(this).html());//3.2 获取li对象 第二种方式 在回调函数中定义参数 index(索引) element(元素对象)alert(index+":"+element.innerHTML);//或者alert(index+":"+$(element).html());//判断如果是上海,则跳出本次循环if("上海" == $(element).html()){//如果当前function返回为false,则结束循环(break)。//如果返回为true,则结束本次循环,继续下次循环(continue)return true;}
- $.each(object, [callback])
$.each(citys,function () {alert($(this).html());}
- for…of :jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象)
for(li of citys){alert($(li).html());}
事件绑定
- jquery标准的绑定方式
- jq对象.事件方法(回调函数);
- 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。如(让文本输入框获得焦点)
- 表单对象.submit();—让表单提交
- on绑定事件/off解除绑定
- jq对象.on(“事件名称”,回调函数)
- jq对象.off(“事件名称”)
- 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
- 事件切换:toggle
-
jq对象.toggle(fn1,fn2…)
- 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2…
-
注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。