Jquery 笔记（十一）

1、jQuery介绍
     (1)jQuery是什么?
          是一个js框架，其主要思想是利用jQuery提供的选择器查找要操作的节点,然后将找到的节点封装成 一个jQuery对象。封装成jQuery对象的目的有两个：
                 一是为了兼容不同的浏览器，另外，也简化了代码。
     (2)编程的基本步骤  first.html
          step1, 利用选择器查找节点。选择器类似与css选择器。
          step2, 调用jQuery对象的方法或者属性。
     (3) jQuery对象与dom对象之间的相互转换 first.html。
          a,  dom对象 ---> jQuery对象
                    $(dom对象)
          b, jQuery对象 ---> dom对象
                    方式一:      $obj.get(0)
                    方式二:       $obj.get()[0]    
                   
2、选择器
     1)基本选择器  
          #id
          .class
          element
          selector1,selector2..selectorn
          *
     2)层次选择器  
          select1 select2
          select1>select2
          select1+select2
          select1~select2
     3)过滤选择器
          (1)基本过滤选择器 selector / s3.html
          :first
          :last
          :not(selector)
          :even
          :odd
          :eq(index)
          :gt(index)
          :lt(index)
          (2)内容过滤选择器 selector
               :contains(text)  
匹配包含给定文本的元素
               :empty  匹配所有不包含子元素或者文本的空元素
               :has(selector)  匹配含有选择器所匹配的元素的元素
               :parent 匹配含有子元素或者文本的元素
          (3)可见性过滤选择器 selector
               :hidden 匹配所有不可见元素，或者type为hidden的元素
               :visible 匹配所有的可见元素
          (4)属性过滤选择器  
               [attribute] 
               [attribute=value]
               [attribute!=value]
          (5)子元素过滤选择器 
               :nth-child(index/even/odd)
          (6)表单对象属性过滤选择器
          
10403
     :enabled
               :disabled
               :checked
               :selected
     4)表单选择器
          :input
          :text
          :pasword
          :radio
          :checkbox
          :submit
          :image
          :reset
          :button
          :file
          :hidden
3、dom操作
     1)查询  dom / d1.html
          a,查询或者修改节点的html内容
               html()
          b,查询或者修改节点的文本
               text()
          c,查询或者修改节点的属性
               attr()
          d,查询或者修改节点的值
               val()
          2)创建  
               $(html)
          3)插入节点 
               append(): 向每个匹配的元素内部追加内容
               prepend(): 向每个匹配的元素内部前置内容
               after(): 在每个匹配的元素之后插入内容
               before(): 在每个匹配的元素之前插入内容
          4)删除节点  dom / d3.html
               remove()
               remove(selector)
               empty():清空节点
          5) 将javascript代码与html分离 dom / d4.html
               $(fn);
          6)复制节点   dom /d5.html
               clone()
               clone(true): 使复制的节点也具有行为(将事件处理代码一块复制)
          7)属性操作
               读取：attr('id');
               设置：     attr('id','d1') 或者一次
               设置多个 attr({"id":"d1","class":"s1"});
               删除：removeAttr('id')
          8)样式操作 dom / d6.html
               获取和设置: attr("class","")    
或者 attr("style","")
               追加: addClass('s1')
               移除: removeClass('s1')
               或者 removeClass('s1 s2')
               或者removeClass() //会删除所有样式
               切换样式：toggleClass,有该样式，就删除，没有，就添加。
               是否有某个样式  hasClass('s1')
               读取  css('font-size')
               设置 css('font-size','60px')或者 
   css({'':'','':''})        //设置多个样式
          9)遍历节点 dom / d7.html
               children()/ children(selector)
只考虑子元素，不考虑其它后代元素。
               next()/next(selector)下一个兄弟
               prev()/next(selector):前一个兄弟
               siblings()/siblings(selector)其它兄弟
               find(selector):从当前节点开始查找后代。    
               parent():父节点
4、jQuery如何处理事件

     1)事件绑订   event / e1.html

          bind(type,fn)

          type:事件类型

          fn:事件处理函数

     2)绑订方式的简写形式

          click(function(){

          });

     3)合成事件 event/e2.html  e3.html

          hover(enter,leave) : 模拟光标悬停事件

          toggle(fn1,fn2...)：模拟鼠标连续单击事件

     4)事件冒泡 event/ e4.html

          a,什么是事件冒泡?

               子节点产生的事件会依次向上抛给相应的父节点。

          b,如何取消事件冒泡?

               event.cancelBubble = true;

          c, 如何获得事件对象?

               只需要给事件处理函数添加event作为参数，比如

               <a href...  onclick="clickA(event);">

          d, 事件对象的作用?

               作用1： 找到事件源

                    event.target;    firefox,chrome支持

                    event.srcElement;  ie支持

                    event.target || event.srcElement

               作用2:   获得鼠标点击的坐标

                         event.clientX;

                         event.clientY;

          (1)获得事件对象 event / e5.html

               只需要给事件处理函数传一个参数。

          click(function(event){

          });

          (2)事件对象的作用 

               a,获得事件源

                         event.target;

               b,获得鼠标点击的坐标

                         event.pageX

                         event.pageY

               c,事件类型

                         event.type

          (3)停止冒泡   event / e6.html

                         event.stopPropagation()

          (4) 停止默认行为

                         event.preventDefault()

          5)模拟操作 event / e7.html

               trigger('click')

2、动画

     1)、show(), hide()        animate / a1.html

          a,作用: 通过同时改变元素的宽度和高度来实现显示或者隐藏。

          b,用法:

               show(速度,[callback])

               速度: 'slow','normal','fast',也可以用毫秒数               callback: 当整个动画执行完毕之后，会立即调用这个函数(回调函数)。

     2)、slideUp() slideDown()  animate / a1.html

          a,作用：通过改变元素的高度来实现显示或者隐藏

          b,用法：同show

     3)、fadeIn() fadeOut()  animate / a2.html

          a,作用：通过改变不透明度来实现显示或者隐藏

          b,用法：同show

     4)、自定义动画 animate animate / a3.html

          用法:

               animate(params,speed,[callback])

                    params: 是一个javascript对象，描述了

                    动画完成之后元素的样式。

                    比如:

                         {'left':'500px','top':'200px'}

                    speed:速度，单位是毫秒

                    callback:回调函数，也就是说，当整个

                    动画执行完毕之后会执行。

3、类数组的操作  array/a1.html

     所谓类数组，指的是jQuery对象里面包含的所有的dom对象。可以利用jQuery对象提供的一些方法 和属性来对这些dom对象进行遍历。

     1)属性

          length: 获得dom对象的个数。

     2)方法

          a,  each(fn(i)):

               循环遍历每一个元素, i表示被迭代的对象的下标。this代表被迭代的dom对象，$(this)代表被迭代的jquery对象。

          b,eq(index)：

               返回index位置处的jquery对象

          c,index(obj)：

               返回下标，其中obj可以是dom对象或者

               jquery对象。

          d,get()：返回dom对象组成的数组

          e,get(index)：返回index位置处的dom对象。

4、jQuery对ajax的支持
     1)load

          a,作用： 将服务器返回的数据直接添加到符合要求的节点之上。
          b,用法:

                    $obj.load(请求地址,[请求参数]);

                    请求地址: 服务器端某个组件的地址，比如

                                        ***.do

                    请求参数: 有两种形式

                                   请求字符串： "username=zs&age=22"

                                   对象:  {'username':'zs','age':22}

          注意:

                    如果没有请求参数，则load方法会发送get请求，如果有参数，则发送post请求。

     2)$.get

          a, 作用： 向服务器发送get请求。

          b,用法:

               $.get(请求地址,[请求参数],[callback],[服务器返回的数据类型]);

               callback: 是一个函数，格式callback(data,status),其中，可以通过data获得服务器返回的数据,status是一个状态的描述。

               服务器返回的数据类型: 可以是

                    html : html内容

                    text: 文本

                    json: json字符串

                    xml: xml文档

                    script: javascript脚本

     $.post

          a, 作用：向服务器发送post请求。

          b,用法：同$.get

     3)$.ajax

          用法:

               $.ajax({});

          可以添加的参数:

               url(string):    请求地址

               type(string):       GET/POST

               data(object/string):           请求参数

               dataType(string) :    预期服务器返回的数据类型。

               同$.get一样。

               success(function):        请求成功后调用的回调函数，有两个参数：function(data,textStatus),其中，data是服务器返回的数据，textStatus 描述状态的字符串。

               error(function):             请求失败时调用的函数。

               async: true(缺省)/false:                当值为false,发送同步请求。

       keyup事件有一个bug, 某些浏览器在切换到中文输入法以后，keyup事件会失效。为解决这个问题，可以使用input(非ie浏览器支持)和propertychange(ie支持)事件来解决。