jquery總結

jQuery

http://jquery.cuishifeng.cn/

模塊 《=》類庫
DOM/BOM/JavaScript的類庫

版本：
    1.x  1.12
    2.x
    3.x

轉換：
    jquery對象[0]   => Dom對象
    Dom對象         => $(Dom對象)


一、查找元素
    DOM
        10左右
    jQuery：
        選擇器，直接找到某個或者某類標籤
        1. id
            $('#id')
        2. class
            <div class='c1'></div>
            $(".c1")
        3. 標籤
            <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')

        4. 組合a
            <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')

            $('a,.c2,#i10')

        5. 層級
            $('#i10 a') 子子孫孫
            $('#i10>a') 兒子

        6. 基本
            :first
            :last
            :eq()
        7. 屬性
            $('[alex]')       具有alex屬性的所有標籤
            $('[alex="123"]') alex屬性等於123的標籤


            <input type='text'/>
            <input type='text'/>
            <input type='file'/>
            <input type='password'/>

            $("input[type='text']")
            $(':text')

        實例： 
            多選，反選，全選
            - 選擇權
            - 
                $('#tb:checkbox').prop('checked');        獲取值
                $('#tb:checkbox').prop('checked', true);  設置值
            - 
                jQuery方法內置循環： $('#tb:checkbox').xxxx

            - $('#tb:checkbox').each(function(k){
                    // k當前索引
                    // this，DOM，當前循環的元素 $(this)

                })
            - var v = 條件 ? 真值 : 假值


        篩選


            $('#i1').next()
            $('#i1').nextAll()
            $('#i1').nextUntil('#ii1')

            <div>
                <a>asdf</a>
                <a>asdf</a>
                <a id='i1'>asdf</a>
                <a>asdf</a>
                <a id='ii1'>asdf</a>
                <a>asdf</a>
            </div>

            $('#i1').prev()
            $('#i1').prevAll()
            $('#i1').prevUntil('#ii1')


            $('#i1').parent()
            $('#i1').parents()
            $('#i1').parentsUntil()

            $('#i1').children()
            $('#i1').siblings()
            $('#i1').find()
            $('li:eq(1)')
            $('li').eq(1)
            first()
            last()
            hasClass(class)

    文本操作：
            $(..).text()           # 獲取文本內容
            $(..).text(“<a>1</a>”) # 設置文本內容

            $(..).html()
            $(..).html("<a>1</a>")

            $(..).val()
            $(..).val(..)
    樣式操作：
            addClass
            removeClass
            toggleClass

    屬性操作：
            # 專門用於做自定義屬性
            $(..).attr('n')
            $(..).attr('n','v')
            $(..).removeAttr('n')

            <input type='checkbox' id='i1'  />


            # 專門用於chekbox,radio
            $(..).prop('checked')
            $(..).prop('checked', true)

            PS: 
                index 獲取索引位置

    文檔處理：
            append
            prepend
            after
            before

            remove
            empty

            clone
    css處理

        $('t1').css('樣式名稱', '樣式值')
        點贊：
             - $('t1').append()
             - $('t1').remove()
             - setInterval
             - 透明度 1 》 0
             - position
             - 字體大小，位置
    位置：
        $(window).scrollTop()  獲取
        $(window).scrollTop(0) 設置
        scrollLeft([val])

        offset().left                 指定標籤在html中的座標
        offset().top                  指定標籤在html中的座標

        position()                    指定標籤相對父標籤(relative)標籤的座標
        <div style='relative'>
            <div>
                <div id='i1' style='position:absolute;height:80px;border:1px'></div>
            </div>
        </div>


        $('i1').height()           # 獲取標籤的高度 純高度
        $('i1').innerHeight()      # 獲取邊框 + 純高度 + ？
        $('i1').outerHeight()      # 獲取邊框 + 純高度 + ？
        $('i1').outerHeight(true)  # 獲取邊框 + 純高度 + ？

        # 純高度，邊框，外邊距，內邊距

    事件
        DOM： 三種綁定方式
            jQuery：
                $('.c1').click()
                $('.c1').....

                $('.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(){

                })

            阻止事件發生
                return false

            # 當頁面框架加載完成之後，自動執行
            $(function(){

                $(...)

            })

    jQuery擴展：
        - $.extend        $.方法
        - $.fn.extend     $(..).方法

        (function(){
            var status = 1;
            // 封裝變量
        })(jQuery)


二、操作元素

===》實例：

作業：
一：
(‘i1’).height()           # 獲取標籤的高度 純高度$\text{(‘i1’).height() \# 獲取標籤的高度 純高度}$ (‘i1’).innerHeight() # 獲取邊框 + 純高度 + ？
(‘i1’).outerHeight()      # 獲取邊框 + 純高度 + ？$\text{(‘i1’).outerHeight() \# 獲取邊框 + 純高度 + ？}$ (‘i1’).outerHeight(true) # 獲取邊框 + 純高度 + ？

        # 純高度，邊框，外邊距，內邊距

二、所有實例敲一遍

三、編輯框