jQuery基础总结

一、初级篇
1、jQuery基础  first.html
    (1)简介
         jQuery是一个js框架，最大的特点是，利用选择器查找要操作的节点，并且将找到的节点
    封装成一个jQuery对象，这样封装的好处有两个：一个是可兼容不同的浏览器，另外，代码也会更简洁。
    (2)编程步骤
        step1,利用选择器(jQuery借鉴了css选择器的
        语法)查找到要操作的dom节点(这些节点会被封装成一个jQuery对象)。
        step2,调用jQuery对象的属性或者方法。
    (3)jQuery对象与dom对象的转换。
        1)dom对象 ---> jQuery对象
            $(dom对象);如：$('#di')
        2)jQuery对象  ---> dom对象
            方式一     $obj.get(0);如var obj=document.getElementById('d1') var $obj=$(obj);
            方式二       $obj.get()[0];如：var $obj=$("d1"); var obj=$obj.get(0) 或 var obj=$obj.get()[0];
            
2、选择器
    1)基本选择器  selector/s1.html
        #id 如：$('#d1')
        .class 如:$('.s1')
        element 如：$('div')
        select1,select2..selectn 如：$('#d1,p,.s1')
        * 如：$('*')所有
    2)层次选择器 selector/s2.html
        select1 select2 查找所有的后代 如：$('#d1 div')找到d1的所有div(包括孙子节点)
        select1>select2 只查找子节点(不包括孙子节点，单纯的直接子节点)
        select1+select2 下一个兄0弟 如（'#d2+div'）
        select1~select2 下面所有的兄弟 eg;$(#d2~div)
    3)过滤选择器
        (1)基本过滤选择器  selector / s3.html
        :first 找到第一个元素 eg;$('#t1 tr:first');找到id为t1的表的第一行
        :last  $('#t1 tr:first') 找到id为t1的表的最后行
        :not(selector) eg；$('tbody tr:not(#tr2)') 找到出了行id为tr2的所有行
        :even 偶数行 eg：$('tbody tr:even')：找到表中行号为偶数的行
        :odd  奇数行 eg：$('tbody tr:odd')：找到表中行号为奇数的行
        :eq(index) 行号为index的行： eg $('tbody tr:eq(1) td:eq(1)')找到tbody的第一行第一列
        :gt(index) eg；$('#t1 tr:gt(1)') 找到行好大于1的所有行
        :lt(index)eg；$('#t1 tr:lt(1)') 找到行好大于1的所有行
        (2)内容过滤选择器  selector / s4.html
            :contains(text) 匹配包含给定文本的元素 eg:$('div:contains(吃饭)')；
            :empty 匹配所有不包含子元素或者文本的空元素 eg：$('div:empty').html('一会儿就吃了');知道到div标签体为空的标                         签给标签体加上内容
            :has(selector) 匹配含有选择器所匹配的元素的元素 eg;$('div:has(span)')；
            :parent 匹配含有子元素或者文本的元素
                         eg：
                        <div>你吃饭了吗</div>
                    <div></div>
                    <div>
                          <span>吃了</span>
                        </div>
                   $('div:parent')：选择了第一个和第三个标签，二第二个则没被选中 ，因为其内容为空
        (3)可见性过滤选择器  selector / s5.html
            :hidden 匹配所有不可见元素，或者type为hidden的元素 eg：$('div:hidden').show('slow');
                         或$('div:hidden').css('display','block');
            :visible 匹配所有的可见元素 eg:$('div:visible').hide('slow');
        (4)属性过滤选择器  selector / s6.html
            [attribute] eg:$('div[id=d1]')选择id为d1的div
            [attribute=value] 属性值为value的元素
            [attribute!=value] 属性值不为value的元素
        (5)子元素过滤选择器 selector /s7.html
            :index:下标从1开始！！！eg:$('ul li:eq(1)')找到ul的第二个子元素
            :nth-child(index/even/odd) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
                         n 可以是数字、关键词或公式。
        (6)表单对象属性过滤选择器 selector /s8.html
            :enabled eg;$('#form1 input:enabled').attr('disabled',true);
            :disabled eg:$('#form1 input:disabled').attr('disabled',false);
            :checked eg:$('#form2 input:checked').val()
            :selected eg:$('#form3 option:selected').val()
    4)表单选择器(这个简单，一看就会)
        :input
        :text      
        :pasword
        :radio
        :checkbox
        :submit
        :image
        :reset
        :button
        :file
        :hidden        
        
3、dom操作
    1)查询   dom / d1.html
        利用选择器找到节点之后，可以获取节点的html内容、文本内容、属性值、value值。
        a, html() innerHTML,包含了节点之间的所有内容
        b, text() innerText,只有文本
        c, attr()     访问某个属性    
        d, val()     value属性值
        以上四个方法，也可以修改。
    2)创建   dom / d2.html
        $(html);
    3)插入节点  dom / d2.html
        append():作为最后一个孩子追加进来。
        prepend():作为第一个孩子追加进来。
        after():作为下一个兄弟添加进来。
        before():作为上一个兄弟添加进来。
    4)删除节点   dom / d3.html
        remove()
        remove(selector)
        empty():清空节点
    5)数据与行为分离 dom / d4.html d5.html
        将javascript代码写到.js文件里面，然后html文件引入
    相应的js文件就可以了。这样，方便代码的维护。
        $(fn);
        fn是一个函数，我们经常使用匿名函数，比如
        $(function(){
           //当整个页面加载完毕，会执行这儿的代码。
        });
    6)复制节点  dom / d6.html
        clone()
        clone(true):使复制的节点也具有行为(将事件
        处理代码一块复制)
    7)属性操作
        读取：attr('');
        设置：    attr('','') 或者一次设置多个 attr({"class":"s1","style":"color:red;"});
        删除：removeAttr('')
    8)样式操作  dom / d7.html
        获取和设置: attr("class","")    或者 attr("style","");
        追加:addClass('')
        移除:removeClass('')
        或者removeClass('s1 s2')
        或者removeClass()//会删除所有样式
        是否有某个样式 hasClass('')
        切换样式：toggleClass,有该样式，就删除，没有，
        就添加。
        读取css('')
        设置css('','')或者
        css({'':'','':''})//设置多个样式
    9)遍历节点  dom / d8.html
        children()/children(selector):只考虑子元素，
        不考虑其它后代元素。
        next()/next(selector):下一个兄弟
        prev()/prev(selector):上一个兄弟
        siblings()/siblings(selector):其它兄弟
        find(selector):查找所有的后代
        parent():父节点
二、初级应用篇
1、事件处理
    (1)知识点回顾
        1)事件绑订
            a,绑订事件处理函数到html标记上面，比如
            <input type="button" οnclick="f1();"/>
            b,绑订事件处理函数到dom对象上，比如
            obj.οnclick=f1;
        2)如何获得事件对象
            <input type="button" οnclick="f1(event);"/>
        3)事件对象的作用   event / e1.html
            a,找到事件源
                var obj = event.srcElement;  ie
                var obj = event.target;  ff,chrome
            b,获得鼠标点击的坐标
                 event.clientX
                 event.clientY
            c,停止事件冒泡
        4)事件冒泡   event / e2.html
            a,什么是事件冒泡
                子节点产生的事件会依次向上抛出给相应的
            父节点。
            b,停止事件冒泡
                event.cancelBubble = true;
    (2)jQuery处理事件
        1)事件绑订   event / e3.html
            a, 正式写法
                $obj.bind(事件类型,处理函数);        
            比如:
                    $obj.bind('click',function(){
                        //事件处理代码
                    });
            b,简写形式
                比如:
                        $obj.click(function(){
                            //事件处理代码
                        });
        2)如何获得事件对象 event / e4.html    
            只需要给事件处理函数传递任意一个变量。
            比如:
                $obj.click(function(e){
                            e:是jQuery对底层的事件对象的
                        封装，封装的目的是为了兼容浏览器。
                        });
        3)事件对象的作用 event / e4.html
            a,找到事件源
                    e.target
            b,获得鼠标点击的坐标
                    e.pageX
                    e.pageY
            c,停止事件冒泡  event / e5.html
                    e.stopPropagation();
        4)合成事件  event / e6.html  e7.html
            a,hover(mouseenter,mouseleave) :模拟光标进入、移出。
            mouseenter函数用来处理光标进入产生的事件，
            mouseleave函数用来处理光标移开产生的事件。
            b,toggle(fn1,fn2,fn3...): 模拟连续单击事件。
            第一次点击，执行fn1,第二次点击，执行fn2,
            依此类推，如果执行到最后一个函数，再次点击，
            又从第一个开始执行。
        5)模拟操作  event / e8.html
            $obj.trigger(事件类型)
            比如:
                    $obj.trigger('focus');
            或者也可以简写为:
                    $obj.focus();
2、动画
    1)show() hide()   animate / a1.html
        a,作用：通过同时改变元素的宽度和高度来
        显示或者隐藏。
        b,用法:
            $obj.show(执行时间,[回调函数]);
                执行时间可以有两种形式:
                    'slow','normal','fast'
                    或者毫秒数：比如 800
            回调函数会在整个动画执行完毕之后执行。
    2)slideUp() slideDown() :  animate /a1.html
        a,作用：通过改变元素的高度来显示或者隐藏。
        b,用法:同上。
    3)fadeIn() fadeOut(): animate / a2.html
        a,作用，通过改变不透明度来显示或者隐藏。
        b,用法:同上。
    4)自定义动画   animate / a3.html
    animate(params,执行时间,[回调函数])
        用法:
                params:是一个javascript对象，描述了
                动画执行完毕之后元素的样式。
                执行时间只能用毫秒。

3、类数组的操作  array / a1.html
    所谓类数组，指的是jQuery对象包含的那些节点。
    length属性：节点的个数。
    each(fn): 用来遍历类数组，其中,fn可以添加
    一个参数，表示正在遍历的元素的下标(从0 开始)。
    在fn函数里面，this表示正在遍历的dom节点。
    eq(index):获得下标等于index的jQuery对象。
    index(obj或者$obj): 获得dom节点或者jQuery对象
    在类数组中的下标。
    get(): 获得jQuery对象包含的所有的dom节点,
    返回值是一个数组。
    get(index):获得下标等于index的dom对象。
    
4、jQuery对ajax编程的支持
    1)load    price.jsp
        a,作用:将服务器返回的数据直接添加到符合
        要求的节点之上。
        b,用法:
            $obj.load(请求地址,[请求参数]);
            比如:
                $obj.load('price.do','flight=CA1000');
                请求参数有两种形式:
                    请求字符串:  username=tom&age=22
                    对象:    {'username':'tom','age':22}
        load方法如果有参数，会发送post请求，没有参数，
        发get请求。
    2)$.get和$.post   stock.jsp
        用法:
            $.get(url,[data],[callback],[type]);
            url:请求地址
            data:请求参数
            callback:回调函数，用来处理服务器返回的
            数据的。格式如下
                function(data,status){
                    data: 服务器返回的数据
                    status: 状态描述
                }
            type:服务器返回的数据类型，有以下几种:
                html: html文档
                text: 文本
                json: json字符串
                xml:     xml文档
                script: javascript脚本
    3)$.ajax
    
5、缓存问题
    1)什么是缓存问题
        ie浏览器提供的ajax对象，当发送get请求时，会
    检查请求地址是否访问过，如果访问过，不再发请求。
    2)解决方式
        a,方式一
            在请求地址后面添加一个随机数
        比如:    'price.do?' + Math.random();
        b,方式二
            发送post请求
三、中级应用篇（待续）
四、高级应用篇（待续）