冰凍三尺非一日之寒--jQuery

 第十七章     jQuery 
    
    http://jquery.cuishifeng.cn/

一.過濾選擇器：

目的：處理更復雜的選擇，是jQuery自定義的，不是CSS3中的選擇器。

語法：jQuery的過濾選擇器借鑑了css中僞類的語法，即選擇器以冒號（：）開始。

　　　　jQuery經常使用的過濾選擇器

　　

選擇器	說明
:animated	全部處於動畫中的元素
:button	全部按鈕，包括input[type=button]、input[type=submit]、input[type=reset]和<button>標記
:checkbox	全部複選框，等同於input[type=checkbox]
:checked	選擇被選中的複選框或單選框
:contains(characters)	選擇全部包含了文本"characters"的元素
:disabled	頁面中被禁用了的元素
:enabled	頁面中沒有被禁用的元素
:file	表單中的文件上傳元素，等同於input[type=file]
:header	選中全部標題元素，例如<h1>~<h6>
:hidden	匹配全部的不可見元素，例如設置爲display:none的元素或input元素的type屬性爲「hidden」的元素
:image	表單中的圖片按鈕，等同於input[type=image]
:input	表單輸入元素，包括<input>、<select>、<textarea>、<button>
:not(filter)	反向選擇
:parent	選擇全部擁有子元素(包括文本)的元素，即除空元素外的全部元素
:password	表單中的密碼域，等同於input[type=password]
:radio	表單中的單選按鈕，等同於input[type=radio]
:reset	表單中的重置按鈕，等同於input[type=radio]和button[type=reset]
:selected	下拉菜單中的被選中項
:submit	表單中的提交按鈕，包括input[type=submit]和button[type=submit]
:text	表單中的文本域，等同於input[type=text]
:visible	頁面中的全部可見元素

二.css位置選擇器

目的：基於元素的位置選擇元素，又不侷限於此。

語法：jQuery的位置選擇器借鑑了css中僞類的語法，即選擇器以冒號（：）開始，能夠看作是CSS爲類的一種擴展

選擇器	說明
:first	第一個元素，例如div p:first選中頁面中全部p元素的第一個，且該p元素是div的子元素
:last	最後一個元素，例如div p:last選中頁面中全部p元素的最後一個，且該p元素是div的子元素
:first-child	第一個子元素，例如ul:first-child選中全部的ul元素，且該ul元素是其父元素的第一個子元素
:last-child	最後一個子元素，例如ul:last-child選中全部的ul元素，且該ul元素是其父元素的最後一個子元素
:only-child	全部沒有兄弟的子元素，例如p:only-child選中全部的p元素，若是該p元素是其父元素的惟一子元素
:nth-child(n)	第n個子元素，例如li:nth-child(3)選中全部li元素，且該li元素是其父元素的第3個子元素（從1開始計數）
:nth-child(odd|even)	全部的奇數號或偶數號的子元素
:nth-child(nX+Y)	利用公式來計算子元素的位置，例如:nth-child(5n+1)選中第5n+1個子元素（n從0開始計數，即1,6,11,...）
:odd或:even	對於整個頁面而言，選中奇數或偶數號元素，例如p:even爲頁面中全部排在偶數位的p元素（從0開始計算）
:eq(n)	頁面中第n個元素，例如p:eq(4)爲頁面中第5個p元素
:gt(n)	頁面中第n個元素以後的全部元素（不包括第n個元素）
:lt(n)	頁面中第n個元素以前的全部元素（不包括第n個元素）

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

$("ancestor descendant")：選取ancestor元素裏的全部descendant元素。

例:$("div span")選取<div>裏的全部的<span>元素。

$("parent>child")選取parent元素下的child元素，與$("ancestor descendant")的區別是$("ancestor descendant")選取的是後代元素。

例:$("div >span")選取<div>下元素名是<span>的子元素。

$("prev+next")選取緊接在prev元素後面的next元素。

例：$(".one+div")選取class爲one的下一個<div>同輩元素。

$("prev~siblings")選取prev元素以後的全部siblings元素。

例：$("#two~div")選取id爲two的元素後面全部<div>同輩元素。

注意：

jquery中next()來代替$("prev+next")選擇器。

jquery中nextAll()來代替$("prev~siblings")選擇器。

$("prev~siblings")和jquery中siblings()的區別：

$("prev~siblings")只能選中"prev"後面的同輩<div>元素。

siblings()與先後位置無關，只有是同輩節點就都能匹配。

    版本：        1.x  1.12        2.x        3.x        轉換：        jquery對象[0]   => Dom對象        Dom對象         => $(Dom對象)            1、查找元素        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)