jQuery-03-个人学习笔记

jQuery-03-个人学习笔记

 

一、jQuery动画效果

1、显示与隐藏

show（）-显示

无参版本-不具有动画效果

show（speed，callback）有参版本-具有动画效果

speed-设置动画执行的时长，单位为毫秒（三个预定义值-slow | normal | fast）

callback-当动画执行完毕后执行的函数

hide（）-隐藏

无参版本-不具有动画效果

hide（speed，callback）有参版本-具有动画效果

speed-设置动画执行的时长，单位为毫秒（三个预定义值-slow | normal | fast）

callback-当动画执行完毕后执行的函数

2、滑动效果

slideUp（）-向上滑动

可以不传递参数-底层具有默认时长（执行的效果依然具有动画效果）

参数

speed-设置动画执行的时长，单位为毫秒（三个预定义值-slow | normal | fast）

callback-当动画执行完毕后执行的函数

slideDown（）-向下滑动

可以不传递参数-底层具有默认时长（执行的效果依然具有动画效果）

参数

speed-设置动画执行的时长，单位为毫秒（三个预定义值-slow | normal | fast）

callback-当动画执行完毕后执行的函数

3、淡入淡出

fadeIn（）-淡入

可以不传递参数-底层具有默认时长（执行的效果依然具有动画效果）

参数

speed-设置动画执行的时长，单位为毫秒（三个预定义值-slow | normal | fast）

callback-当动画执行完毕后执行的函数

fadeOut（）-淡出

可以不传递参数-底层具有默认时长（执行的效果依然具有动画效果）

参数

speed-设置动画执行的时长，单位为毫秒（三个预定义值-slow | normal | fast）

callback-当动画执行完毕后执行的函数

4、切换动画

toggle（）--- show（）+hide（）

slideToggle（）--- slideUp+slideDown（）

fadeTo--- fadeIn（）+fadeOut（）

5、自定义动画

a、animate（params, [duration], [easing], [callback]）

params-设置动画样式（css属性）

duration-设置动画执行时长，单位为毫秒

callback-动画执行完毕后的函数

b、animate（params, options）

6、并发与排队效果

并发效果-多个动画效果同时执行

animate({attrName:attrValue},{duration:time}).animate({attrName:attrValue},{duration:time,queue:false});

排队效果-多个动画效果按照先后顺序执行

animate({attrName:attrValue},time) .animate({attrName:attrValue},time).animate({attrName:attrValue},time)...

二、jQuery类数组操作-jQuery对象是数组对象

1、查看jQuery底层代码 -证明jQuery是数组对象

var jQuery=function(selector,context){

   return new jQuery.fn.init(selector,context);

}

var init=jQuery.fn.init=function(selector,context){

   return jQuery.,makeArray(selector,this);

}

var makeArray=function(arr,results){

   var ret=[ ];

   return ret;

}

window.jQuery=window.$=jQuery

2、属性

length-获取当前数组的长度（当前jQuery对象包含多少个DOM对象）

3、方法

get(index)-根据角标返回DOM对象

eq(index)-根据角标返回DOM对象

:eq()选择器的作用一致

index(obj)-根据DOM对象返回对应角标

4、隐式迭代

概念

隐式迭代-jQuery的遍历（在遍历的过程中，只关注入口和出口）

 

var arr=[];//数据就是入口
for(var i=0;i<arr.length;i++){
   var ele=arr[i];//数组的每个元素就是出口
}

显式迭代-例如for循环（在遍历的过程中，从开始到结束控制遍历的所有过程）

5、jQuery的遍历

each（callback）-对象方法

$.each(obj,callback)-全局函数

三、使用插件

1、概念

作用-为了扩展或简化jQuery的开发

特点-数量多

目的-掌握jQuery插件的使用方法，掌握如何学习jQuery插件的使用

2、使用

a、在HTML页面中引入外部文件（引入jQuery文件，引入jQuery插件文件）

b、在HTML页面中定义 容器（元素）

c、在JavaScript代码中使用插件提供的API方法

3、插件

日历插件

表单验证插件

树菜单插件

四、jQuery UI-集成页面特效

五、开发插件-原理

1、对象方法插件-$( ).each( )

$.fn.extend( )

2、全局函数插件-$.each( )

$.extend( )

3、选择器插件-目前几乎不用

这一类插件扩展jQuery选择器的用法