jQuery要点总结

写在前面：本文是jQuery相关知识要点的总结，便于回顾，更加全面的讲解可参考jQuery参考手册（这里下载）或访问w3school：http://www.w3school.com.cn/

1、jQuery介绍

    (1)jQuery是什么
        是一个js框架，其主要思想是利用jQuery提供的选择器查找操作的节点，然后将找到的节点封装成一个jQuery对象。通过调用jQuery对象的属性或者方法来实现对底层节点的操作，这样做的好处有两个：一是兼容性更好了，另外，代码得到简化。
    (2)编程步骤
        step1,使用jQuery选择器查找要操作的节点。
        step2,调用jQuery对象的方法或者属性。
    (3)一个简单例子 first.html
    (4)jQuery对象与dom对象如何相互转换?
        1)dom对象 ---> jQuery对象
            $(dom对象)
        2)jQuery对象 ---> dom对象
            方式一：$obj.get(0)
            方式二：$obj.get()[0]

2、选择器

    (1)选择器是什么?
        jQuery借鉴了css选择器的语法，用来查找要操作的节点。
    (2)基本选择器  selector
        #id
        .class
        element
        select1,select2..selectn
        *
    (3)层次选择器  selector
        select1 select2:查找所有的后代
        select1>select2:只查找子节点
        select1+select2:下一个兄弟
        select1~select2:下面所有兄弟
    (4)过滤选择器
        1)基本过滤选择器  selector
        :first
        :last
        :not(select) 排除满足select要求的节点
        :even
        :odd
        :eq(index)
        :gt(index)
        :lt(index)
        2)内容过滤选择器  selector
            :contains(text) 匹配包含给定文本的元素
            :empty 匹配所有不包含子元素或者文本的空元素
            :has(select) 匹配含有选择器所匹配的元素的元素
            :parent 匹配含有子元素或者文本的元素
        3)可见性过滤选择器 selector
            :hidden 匹配所有不可见元素，或者type为hidden的元素
            :visible 匹配所有的可见元素
        4)属性过滤选择器 selector
            [attribute]
            [attribute=value]
            [attribute!=value]
        5)子元素过滤选择器  selector
            :nth-child(index/even/odd)
            注意：　下标从1开始。
        6)表单对象属性过滤选择器 selector
            :enabled
            :disabled
            :checked
            :selected
    (5)表单选择器
        :input
        :text      
        :pasword
        :radio
        :checkbox
        :submit
        :image
        :reset
        :button
        :file
        :hidden

3、dom

    1)查询   dom
        找到节点之后，可以读取或者修改节点的html内容,文本,值,属性。
        a, html() 读取或者修改节点的html内容
        b, text() 读取或者修改节点的文本内容
        c, val()   读取或者修改节点的值
        d, attr() 读取或者修改节点的属性
    2)创建  dom
            $(html);
    3)插入节点
        append():作为最后一个孩子添加进来。
        prepend():作为第一个孩子添加进来。
        after():作为下一个兄弟
        before():作为上一个兄弟
    4)删除节点  dom
        remove()
        remove(selector)
        empty():清空节点
    5)数据与行为分离 dom
        即不用修改html文件，通过引入外部的js文件来为页面提供动态效果。
        $(fn); fn是一个函数的名称
        或者
        $(function(){
            //当整个页面加载完毕，会执行这儿的代码。
        });
    6)复制节点 dom
        clone()
        clone(true):使复制的节点也具有行为(将事件处理代码一块复制)
    7)属性操作
        读取：attr('id');
        设置：    attr('id','d1') 或者一次
        设置多个 attr({"id":"d1","class":"s1"});
        删除：removeAttr('id')
    8)样式操作 dom
        获取和设置: attr("class","")    attr("style","")
        追加:addClass('')
        移除:removeClass('')
        或者removeClass('s1 s2')
        或者removeClass()//会删除所有样式
        切换样式：toggleClass,有该样式，就删除，没有，就添加。
        是否有某个样式 hasClass('')
        读取css('')
        设置css('','')或者
        css({'':'','':''})//设置多个样式
    9)遍历节点 dom
        children()/children(select):只考虑子元素，不考虑其它后代元素。
        next()/next(select):下一个兄弟
        prev()/prev(select):上一个兄弟
        siblings()/siblings(select):其它兄弟
        find(select):从当前节点向下查找所有的后代 (满足select要求的)
        parent():父节点            

4、事件处理

    (1)回顾
        1)如何绑订事件处理代码
            a, 绑订到html标记上面。比如  <input type="button" onclick="f1();"/>
            b,绑订到dom对象上。比如  obj.onclick=f1;
        2)事件对象 event
            a,如何获得事件对象?
                只需要给事件处理函数传递一个参数。 比如 <input type="button" onclick="f1(event);"/>
            b,事件对象的作用?
                b1,找到事件源(发生该事件的那个对象)
                    e.target ||  e.srcElement
                b2,获得鼠标点击的坐标
                    e.clientX  e.clientY
                b3,取消事件冒泡  event
                    子节点产生的事件会依此向上抛出给相应的父节点。
                    e.cancelBubble = true;
        (2)jQuery中如何处理事件
            1)如何绑订事件处理代码?
                方式一:$obj.bind(事件类型,事件处理函数);
                比如:
                    $obj.bind('click',fn);
            　方式二:简写形式
                比如:
                    $obj.click(fn);    
            2)事件对象
                a,如何获得事件对象?
                    只需要给事件处理函数传递一个任意的变量。
                比如:
                        $obj.click(function(e){
                            e就是jQuery对底层事件对象的封装
                        });
                b,事件对象的作用?
                    b1, 获得事件源
                            var obj = e.target;
                            obj是一个dom对象。
                    b2,获得鼠标点击的坐标
                            e.pageX  e.pageY
                    b3,取消事件冒泡
                            e.stopPropagation();
            3)合成事件 
                a,hover　模拟光标悬停事件
                b,toggle  模拟鼠标连续单击事件
            4)模拟操作 
                a,trigger(事件类型)
                比如
                        $obj.trigger('focus');
                b,简化形式
                比如
                       $obj.focus();

5、动画

    1)show/hide  animate
        a,作用：通过同时改变元素的宽度和高度来实现显示或者隐藏。
        b,用法:
            $obj.show([速度],[回调函数]);
            注意：
                速度有两种形式
                    'slow','normal','fast'
                    或者毫秒数 800
                回调函数
                    当整个动画执行完毕之后，会调用这个函数。　
    2)slideDown/slideUp
        a,作用：通过改变元素的高度来实现显示或者隐藏。
        b,用法：同上。
    3)fadeIn(淡入)/fadeOut(淡出)
        a,作用：通过改变元素的不透明度(opacity)来实现显示或者隐藏。
        b,用法：同上。
    4)animate
        用法:        $obj.animate({},speed,[callback]);
                {} : 描述动画执行完成之后节点的样式。
                speed: 速度，单位是毫秒。
                callback:回调函数。

6、类数组

    1)类数组是什么?
        jQuery对象包含的那些dom对象。
    2)类数组的属性
        length属性:dom对象的个数
    3)类数组常用方法 array
        a,each(): 用来遍历类数组。each函数每次从类数组中取一个元素。可以给each函数传递一个参数(也是一个函数，在该函数里面，this表示正在被访问的那个dom对象)。
        b,eq(i): 从类数组中取下标等于i的dom对象，返回值是 一个jQuery对象。
        c,index(obj或者$obj):返回dom对象或者jQuery对象在类数组中的下标。
        d,get():将类数组转换成一个真正的dom对象组成的数组。
        e,get(i):从类数组中取下标等于i的dom对象,返回值就是原始的dom对象。

7、ajax支持    

    1)load    order.jsp
        a,作用：向服务器发送异步请求，并且将服务器返回的数据直接添加到符合要求的节点之上。
        b,用法:
            $obj.load(url,[data]);
             url:请求地址
             data:请求参数,有两种形式：
                     请求字符串：username=zs&age=22
                     对象: {'username':'zs','age':22}
        c,load方法如果没有请求参数，会发送get请求，如果有请求参数，会发送post请求。
    2)$.get或者$.post  stock.jsp
        a,作用：向服务器发送异步请求(get或者post)
        b,用法:
            $.get(url,data,callback,type);
             url:请求地址
             data:请求参数,有两种形式：
                     请求字符串：username=zs&age=22
                     对象: {'username':'zs','age':22}
             callback: 形式如下
                     function(data,status),其中data是服务器返回的数据，status是服务器处理的状态描述。
             type:服务器返回的数据类型，可以是:
                     html: html内容
                     text:文本
                     json:json字符串
                     xml:xml文档
                     script: javascript脚本    
    3)$.ajax
        a,作用：可以同步或者异步向服务器发送请求。
        b,用法:
            $.ajax({选项参数});
                url: 请求地址
                type:请求方式
                data:请求参数
                dataType:服务器返回的数据类型
                success:服务器处理正常调用的函数，形式 function(data,status),其中data是服务器返回的数据，status是服务器处理的状态描述。
                error:服务器处理失败调用的函数。
                async:值为true时，发送异步(缺省),值为
                          false，发送同步请求。