JQuery学习

1. JQuery库:是一个优秀的JavaScript脚本库,是一个轻量级的js库,兼容CSS3,还兼容各种浏览器,JQuery把一些工具方法或对象方法封装到类库中,方便用户使用。

1.1 功能:

(1)取得文档中的元素:如:获取选择器等

(2)修改页面的外观:如:改CSS

(3)改变文档的内容:如:追加修改文档等

(4)响应用户的交互操作:如:jQuery事件

(5)为页面添加动态效果:如:jQuery动画

(6)无需刷新页面从服务器获取信息:如:简化Ajax操作

(7)简化常见的JavaScript任务:如:迭代和数组操作等

1.2 语法:通过选取HTML元素,并对其执行某些操作:$(selector).action()

(1)$:就是jQuery对象的别名,$()就是jQuery()

(2)选择符(selector):查询和查找HTML元素,即构造jQuery对象

(3)action():执行对元素的操作

示例:

$(this).hide--->隐藏当前元素

$("p").hide--->隐藏所有<p>元素

$("p.test>").hide--->隐藏所有class="test"的<p>元素

$("#test").hide--->隐藏所有id="test"元素

1.3 Dom对象和jQuery对象

(1) 传统的js都是首先获取Dom对象,使用this引用事件源对象,this也是常见的Dom对象,这里获取的Dom对象只有有限的属性和方法

(2) Query对象可以说是Dom对象的扩充,无论是一个还是一组,都封装成jQuery对象,jQuery对象拥有丰富的属性和方法,这是jQuery所特有的

(3) Dom对象和jQuery对象的相互转换

(4) jQuery中的Dom操作

(5) jQuery动态修改页面的外观

(6) jQuery事件机制

(7) jQuery动画

7.1 基本动画函数:1.show("speed")2.hide("speed")3.toggle("speed")

speed参数:fast,slow,normal或者表示动画时长的毫秒数值

7.2 滑动动画函数:slideDown("speed"),slideUp("speed"),slideToggle("speed")

7.3 淡入淡出动画函数:fadeIn()=show(),fadeOut()=hide(),fadeTo(0-1):动画渐变到指定透明度

7.4 自定义动画函数:

animate(): 用于创建自定义动画

语法: $(selector).animate({params},speed,callback)

params: 必需的参数,定义形成动画的css属性

speed: 可选参数,规定效果的时长,可以取:"fast,slow,毫秒值..."

callback: 可选参数,动画完成后所执行的函数名称

7.5 停止动画

stop(): 用于在动画或效果完成前对他们进行停止

语法: $(selector).stop(stopAll,goToEnd)

stopAll: 可选参数,是否应该清除动画队列,默认是false,即仅停止活动动画,允许任何排在队列的动画向后执行

goToEnd: 可选参数,是否立即完成当前动画,默认是false