《锋利的JQuery》读书笔记(三)

三、JQuery中的事件和动画

1、$(document).ready()  执行时机——DOM就绪

2、load()方法

    【1】如果绑定window   $(window).load() 所有元素都加载完才执行

    【2】如果绑定元素， 元素加载完就执行

3、$(this) 将当前的DOM元素转成JQuery对象

4、is()方法用于判断

5、绑定事件 bind() ——形式 bind("click",function(){})

6、绑定事件的简写：去掉bind() ,直接 .click(function(){})

7、合成事件两个

   hover() ——>鼠标悬停切换

   toggle()——>鼠标单击切换，可见状态切换

8、事件冒泡

    【1】定义：后代中事件触发会逐级向上触发父级的事件

     【2】停止事件冒泡：

              bind("click",function(event){

               ........

               event.stopPropagation();   //写上这句就不会触发上级的事件了

                });

     【3】阻止默认的行为：点击按钮会提交、点击链接会跳转

            event.preveentDefault();

     【4】以上两种情况可以直接用一句话搞定：return false;

 

9、事件对象

【1】event.type() 事件类型

【2】event.preventDefault() 阻止默认事件

【3】event.stopPropagation()停止事件冒泡

【4】event.target 获得触发事件的元素

【5】event.pageX()/event.pageY() 鼠标的x,y 坐标

【6】event.which 鼠标单击哪个键（1，左 2、中  3、右）

【7】event.metakey()   获得<ctrl>按键

 

10、移除事件  unbind()

[1]unbind(type) 移除特定的一类事件

[2]unbind(type,func()) 移除某个事件

[3]unbind() 移除所有事件

 

one() 绑定的事件只触发一次

 

11、模拟操作 trigger()

 

12、bind的其他功能

绑定多个事件

添加事件命名空间

相同事件名称，不同命名空间的执行方法

 

13、JQuery的动画

【1】可见、不可见

show()或 show(1000)

hide() 或hide(1000)

【2】淡入淡出

fadeIn()

fadeOut()

【3】高度变化

slideUp()

sildeDown()

【4】animate()方法

animate(样式，速度，动画完成时的方法)————都是可选的

14、多重动画：按照动画的顺序与动画拆开写

15、动画回调函数：解决动画结束后欲改变CSS样式或执行某些行为的方法

16、stop()停止元素的动画

       stop(true) 停止多个连续的动画

      stop(true,true) 停止当前动画并到达当前动画的末状态

17、判断是否处于动画状态

$(element).is(":animated") 返回布尔值

 

18、其他动画

 toggle() 切换隐藏、可见

slideToggle() 切换改变高度的隐藏、可见

fadeTO(600，0.2)  0.6秒调整到指定的2%不透明度

五、JQuery 对表单表格的操作

1、focus()获取焦点 blur()失去焦点

2、height() 设置或获取元素的高度

3、scrollTop ——可用于animate的属性， 例如 scrollTop:"+=50"  向上滚动

4、提交表单前去触发验证事件可用 trigger("event") ——>会冒泡    triggerHandler("event") ——>不会冒泡

5、保存皮肤时可以考虑用 cookie保存用户选项

 

六、JQuery与AJax

1、Ajax的不足：

【1】浏览器对XMLHttpRequest支持不足

【2】破坏“前进”“后退”按钮

【3】对搜索引擎支持不足

【4】开发和调试工具缺乏

2、JQuery Ajax的层次

最底层：$.ajax

第二层：load(),$.get(), $.post()

第三层：$.getScript(),$.getJSON()

 

3、load()方法 ————主要用于获取静态文件

【1】load(url)

【2】load(url,attr,func()) 

【3】load(url,fun())

 

4、$.get()  $.post()—————用于获取动态内容

【1】全局函数而非只对jQuery对象操作

【2】格式：$.get(url,data,callback,type)

                $.post(url,data,callback,type)

 【3】回调函数格式： function(data,textstatus){}

                              date:返回的内容，可以是XML,JSON,HTML

                              textstatus:success,error,notmodified,timeout           只有成功才会调用callback 回调函数

 

 【4】回调函数的处理

        如果是HTML，则直接插入

        如果是XML，则处理，转化成HTML

        如果是JSON，则处理，转化成HTML

【5】post与get的区别

       get有参数，Post没有参数

       get传输数据不能大于2KB，post无此限制

       get请求的数据会被缓存，有安全问题，Post不会

       获取方式不同

 

 

5、$.getScript()与$.getJSON()

【1】$.getScript() 直接加载js文件，并添加回调函数 直接使用

【2】$.getJSON() 直接加载json文件，并添加回调函数。

 

6、$.ajax方法

【1】格式：$.ajax(options)

【2】参数以key/value的形式存在

【3】常用参数：url/type/timeout/data/dataType/beforeSend/complete/success/error/global

 

7、序列化元素

【1】serialize()  将DOM元素内容序列化为字符串

【2】serializeArray() 将DOM元素序列化后返回JSON格式数据

【3】$.param()  序列化的核心

 

8、全局事件

ajaxStart()

ajaxStop()

ajaxComplete()

ajaxError()

ajaxSend()

ajaxSuccess()

 

如不想触发全局事件，将global置为false