初学jQuery知识梳理

绪论

jQuery是一套跨浏览器的类库, 集成了JavaScript/DOM/BOM的类库,支持链市编程,大大地简化了JavaScript与HTML之间的操作.完整详细的API文档可以看这里jQuery中文文档.下面我就主要归纳一下自己学到的且常用的知识点.
其他知识

jQuery目前有1,2,3版本系列:
1.x  (兼容性最好)
2.x
3.x  (功能最齐全)
    1.x和2.x版本系列在有些的jQuery的API处理上并不彻底.例如给HTML的勾选框(checkbox)添加属性(attr)"checked='checked'"时,有的时候便会勾选不上.

一.查看元素

在使用DOM来查找HTMl的标签元素时,使用的常用属性大概在10个左右,而且不能直接找到标签中的自定义属性.总的来说,相比于jQuery,DOM找到标签元素的效率更低.

选择器(直接找到某个或者某类标签)
1.id:

    例:
        $('#id')      //根据id属性寻找标签.

2.class:

      例:$('.class')     //根据class属性寻找标签

3.标签

例子1:

                <div id='i10' class='c1'>
                    <a>f</a>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <div class='c2'> </div>
                </div>

$('a')        //找到所有a标签

4.组合

                <div id='i10' class='c1'>
                    <a>f</a>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <div class='c2'> </div>
                </div>

$('a, .c2, #i10')     //组合查找多个标签

5.层级

$('#i10 a')        //查找id为i10的标签中所有孩子标签中的a标签
$('#i0>a')         //查找id为i10的标签的儿子标签中的a标签

6.基本

:first      //标签中的第一个标签元素。
:last      //标签中的最后一个标签元素。
:eq()   //根据索引值找到标签元素。例：$('#i1 a:eq(0)')   //找到id为'i1'的标签下的孩子a标签中的第一个

7.属性

$('[alex]')       //寻找具有alex属性的所有标签
$('[alex="123"]')      //寻找alex属性等于123的标签
$(':text')       //寻找属性tpye为text的input标签

8.筛选

            例：<div>
                <a>asdf</a>
                <a>asdf</a>
                <a id='i1'>asdf</a>
                <a>asdf</a>
                <a id='i2'>asdf</a>
                <a>asdf</a>
              </div>
            $('#i1').next()        //下一个标签
            $('#i1').nextAll()  //当前标签以后的所有兄弟标签
            $('#i1').nextUntil('#i2')  //从当前标签到属性id为‘i2’的标签之间的标签（往后寻找）

            $('#i1').prev()        //上一个标签
            $('#i1').prevAll()  //当前标签以前的所有兄弟标签
            $('#i1').prevUntil('#i2')  //从当前标签到属性id为‘i2’的标签之间的标签（往前寻找）


            $('#i1').parent()  //父标签
            $('#i1').parents()  //所有的父亲和祖父标签
            $('#i1').parentsUntil()  

            $('#i1').children()    //子标签
            $('#i1').siblings()    //所有的兄弟标签
            $('#i1').find()        //在所有还在标签中寻找

二.操作元素

1.文本操作:

            $(..).text()           # 获取文本内容
            $(..).text(“<a>1</a>”) # 设置文本内容

            $(..).html()       //获取文本内容(连标签一起)
            $(..).html("<a>1</a>") //设置文本内容(连标签一起)

            $(..).val()        //具有value属性标签的才能使用
            $(..).val(..)

2.样式操作

            addClass     //添加指定class属性值
            removeClass  //移除指定class属性值
            toggleClass  //当指定class属性值存在时,该方法将其移除;当指定class属性值不存在时,该方法将其添加.

3.属性操作

            # 专门用于做自定义属性
            $(..).attr('n')        //获取属性值
            $(..).attr('n','v')    //新增或重新设置属性值

4.css处理

$('t1').css('样式名称', '样式值')

5.文档处理

            append   //向每个匹配的元素内部（孩子）追加内容。
            prepend  //向每个匹配的元素内部（孩子）前置内容
            after    //在每个匹配的元素之后（兄弟）插入内容。
            before   //在每个匹配的元素之前（兄弟）插入内容。

            remove   //从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
            empty   //删除匹配的元素集合中所有的子节点。（包括自身的文本内容）

            clone   //克隆匹配的DOM元素并且选中这些克隆的副本

其他

1.prop

            # 专门用于chekbox,radio
            $(..).prop('checked')
            $(..).prop('checked', true)

2.索引

            #index 获取索引位置
            $(..).index()

3.位置

        $(window).scrollTop()  //获取最外层页面的滚动条位置
        $(window).scrollTop(0) //设置最外层页面的滚动条位置
        scrollLeft([val])      //获取匹配元素相对滚动条左侧的偏移。

        offset().left                 //获取指定标签在html中的坐标
        offset().top                  //获取指定标签在html中的坐标
        offset({ top: 10, left: 30 })  //设置指定标签的位置.

        position()                    //获取指定标签相对父标签(relative)标签的坐标

5.高度

        $('i1').height()           # 获取标签的高度(纯高度)
        $('i1').innerHeight()      # 纯高度
        $('i1').outerHeight()      # 获取上下边框宽度 + 纯高度
        $('i1').outerHeight(true)  # 获取上下边框边框 + 纯高度

        # 纯高度，边框，外边距，内边距

6.事件的绑定方式

                $('.c1').click()

                $('.c1').bind('click',function(){})
                $('.c1').unbind('click',function(){    })

                *******************
                $('.c').delegate('a', 'click', function(){})   //委托：立即绑定立即执行。
                $('.c').undelegate('a', 'click', function(){})

                $('.c1').on('click', function(){})
                $('.c1').off('click', function(){})

7.扩展

    $.extend        $.方法
    $.fn.extend     $(..).方法

小技巧

1.当一个标签绑定多个事件，阻止后面默认事件发生（可以用于表单验证）

                例.DOM:<a onclick="return a()"></a>
                        function a(){
                            return false
                            }
                    jQuery:$("a").click(function(){
                        return false
                        })
2.当页面框架加载完成之后（不需要等页面所有元素完全加载完毕后），自动执行JavaScript
            $(function(){
                $(...)
            })
3.解决多个js文件引入时造成的全局变量重名冲突.
    (function(){
            var status = 1;
            // 封装变量
        })(jQuery)

如有错误知识点, 希望大家能给我指出, 我会认真改过来(如果真错了)