一、Jquery入門

1.1 什麼是Jquery

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

jQuery的核心特性可以總結爲：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.2 下載Jquery

去官網下載：

jquery官網

w3school

目前最新的是3.1.1版本。有壓縮版本和不壓縮版本。不壓縮版本一般用到開發階段，壓縮版本用到生產環境。從2.X開始不支持ie9之前的瀏覽器。如果想兼容IE678，則應該使用1.X

1.3 使用Jquery

jquery其實就是一個js文件，使用它就像我們用一個外部js文件一樣使用即可。一般放在html的head中引入。

<script src="./libs/jquery-3.1.1.js" type="text/javascript"></script>

二、Jquery核心基礎

2.1 Jquery的入口

寫js代碼一般等到整個頁面加載完成之後，纔去執行js操作，尤其涉及到對dom的操作。
JQuery的使用也是如此。一般使用下面的入口來完成。

<script type="text/javascript">
    //帶整個文檔加載完畢之後再去執行我們傳入的匿名函數。  document.onload = function () {}
    $(document).ready(function () {
        //jquery代碼
    });
    //上面的入口可以簡寫成如下形式,完全與前面的的等價
    $(function () {

    });
</script>

說明：

$ 是jquery中的對象。我們使用jquery的所有操作，都是在 $ 的基礎上完成的
其實 $ 是 jQuery 對象的簡稱。 $ === jQuery

2.2 JQuery對象和DOM對象的互換

使用JQuery獲得的是JQuery對象，使用原生js獲得的DOM對象，二者是完全不同的對象。使用的時候一定要區別開來。

<script type="text/javascript"> 
    $(function () {    
        var $div = $("#div");//JQuery操作節點，得到的是JQuery節點對象。Jquery對象一般用$開頭來表示
        var div = document.getElementById("div"); //得到的DOM對象

        /*
            DOM對象轉換成JQuery對象
            $(domObj)
         */
        var $div1 = $(div);

        /*
            JQuery對象用兩種方式轉變成DOM對象：
            1、利用數組下標方式
                JQueryObj[0]
            2、利用get方法：
                JqueryObj.get[0]
         */
        var domDiv1 = $div[0];
        var domDiv2 = $div.get(0);     
    }); 
</script>

2.3 onload和JQuery中ready方法的區別

執行時機：onload事件必須等頁面完全加載完畢後才能執行；ready當頁面節點加載完畢後就可以執行。比onload要早一點
添加個數：onload事件只能添加一個，如果添加了多個，則最後執行的onload事件會覆蓋前邊的事件;ready事件可以添加多個，且互相之間不會覆蓋。（onload事件和ready時間之間也不會互相覆蓋）
簡化寫法：onload沒有簡化寫法；ready事件可以簡化爲:$(function(){});

三、JQuery簡單選擇器

JQuery中選擇器的選擇器的思路和CSS的選擇器的思路一樣，就是去選擇元素的。有三種基本選擇器。

3.1 ID選擇器

<script type="text/javascript">
    $(function() {
        //通過id找到元素。注意返回的jquery對象
        var $box = $("#box");
    })
</script>

3.2 標籤選擇器

<script type="text/javascript">
    $(function() {
        //找到標籤名爲a的標籤
        var $a = $('a'); 
    })
</script>

3.3 類選擇器

<script type="text/javascript">     
  $(function() {
      var $link = $(".myLink");
      console.log($link);
})
</script>

四、JQuery進階選擇器

4.1 羣組選擇器(並集)

<script type="text/javascript">
  $(function() {
      var $elements = $(".box,#toBaidu,h1");    //可以同時選中多個元素.不同的選擇器用,隔開
      console.log($elements);
  })
 </script>

4.2 後代選擇器

$(function () {
    var $as = $("p a");   //找到p標籤下的所有a標籤
    console.log($as);
})

4.3 通配符選擇器

$(function() {
  var $all = $("*");   //獲取當前文檔中所有元素的
  console.log($all);
  alert($all.length);
})

五、JQuery高級選擇器

5.1 後代選擇器和find方法

jquery對象.find(選擇器)：是jquery對象的方法，表示找到這個標籤下的所有的指定的選擇器的元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                var $allLi1 = $(".box li");
                console.log($allLi1);
                //找到 class是box的元素下面的所有的li標籤元素
                var $allLi2 = $(".box").find("li"); // 效果等同於前面的後代選擇器。
                console.log($allLi2);
            })
        </script>
    </head>
    <body>
        <div class="box">
            <ul>
                <li>第一個li的內容</li>
                <li>第二個li的內容</li>
                <li>第三個li的內容</li>
            </ul>
        </div>
    </body>
</html>

5.2 子元素選擇器和children方法

<script type="text/javascript">
    $(function () {
        var $divs = $(".box>div"); //子元素選擇器
        console.log($divs);
        // 找到.box 元素下的所有直接子元素。只找兒子不找孫子。 和子元素選擇器後果一樣。
        // children方法也可以帶參數，代表表示這個選擇器選中的子標籤
        var $children = $(".box").children(); 
        console.log($children);

        var $cc = $(".box").children(".item1");
        console.log($cc);  
    })
</script>

5.3 Next選擇器( + )和next方法

<script type="text/javascript">
    $(function () {
        //next選擇器其實就是兄弟選擇器.
        //找到.box .item2 後的 是 .item3的緊挨着的下一個兄弟
        var $nextDiv1 = $(".box .item2 + .item3");
        console.log($nextDiv1);
        //同next選擇器. 可以跟參數，也可以不跟參數。有參數 表示下一個兄弟必須滿足這個條件,否則就拉到
        //不跟參數表示如果有下一個兄弟就返回，沒有拉到
        var $nextDiv2 = $(".box .item2").next(".item3");
        console.log($nextDiv2);
    })
</script>

5.4 nextAll選擇器( ~ )和nextAll方法

<script type="text/javascript">
    $(function () {
        //獲取.item2的所有的同輩div標籤  注意：不包括.item這個標籤
        var $divs = $(".item2~div");
        console.log($divs);
        //也可以使用nextAll方法，效果同上。  可以不跟參數，表示後面的所有同輩元素
        var $divss = $(".item2").nextAll("div");
        console.log($divss);
    })
</script>

5.5 prev方法和prevAll方法

<script type="text/javascript">
    $(function () {
        //找到緊挨着這個的上一個同輩div元素。 如果不是div則拉到。 
        //也可以不給參數，表示返回上一個同輩元素
        var $prev = $(".item2").prev("div");
        console.log($prev);
        //獲取.item5的所有的前面的同輩div元素。
        var $prevAll = $(".item5").prevAll("div");
        console.log($prevAll);
    })
</script>

5.5 sibling方法

<script type="text/javascript">
    $(function () {
        //sibling獲取的是所有同輩標籤
        var $sibling = $(".item2").siblings();
        console.log($sibling);
    })
</script>

六、屬性選擇器

與元素的屬性相關的選擇器。屬性選擇器必須用 [ ] 括起來。

<script type="text/javascript">
    $(function () {
        // 找到有id屬性的所有元素
        var $ids1 = $("[id]");
        console.log($ids1);
        //找到.box的所有後代中有id屬性的元素
        var $ids2 = $(".box [id]");
        console.log($ids2);

        //找到id等於id的元素
        var $ids3 = $("[id=id4]");
        console.log($ids3);
        //id不是box的都會被選中，沒有id屬性的也算進去
        var $ids4 = $("[id!=box]");
        console.log($ids4)
        // id屬性以b開頭的
        var $ids5 = $("[id^=b]");
        console.log($ids5)

        // id屬性的值包含子字符串b的
        var $ids6 = $("[id*=b]");
        // 包換單詞bb
        var boxs = $("[class~=bb]")
        console.log($ids6)     
    })
</script>

七、過濾選擇器

使用特定的過濾規則來篩選出所需的DOM元素。過濾選擇器的語法和css中的僞類的寫法一樣，都是用:開頭。

7.1 基本過濾選擇器

<script type="text/javascript">
    $(function() {
        //所有的div元素中的第一個div
        var $first = $("div:first");
        console.log($first);
        // 所有div元素中的最後一個div
        var $last = $("div:last");
        console.log($last);
        //所有div元素中，class不是box的div
        console.log($("div:not(.box)"));
        // 所有的div元素中，索引是偶數的div
        console.log($("div:even"));
        // 所有div元素中，索引是奇數的div
        console.log($("div:odd"));
        // 所有div元素中，索引是0的div
        console.log($("div:eq(0)"));  // equal
        // 所有的div元素中，索引大於0的div
        console.log($("div:gt(0)"));  // great than
        //所有的div元素中 索引小於3的div
        console.log($("div:lt(3)"));
        //獲取所有的標題元素   h1 h2 ...
        console.log($(":header"));
        //獲取當前取得焦點的元素
        console.log($(":focus"));
    })
</script>

7.2 內容過濾選擇器

選擇器	描述
:contains(text)	選取含有文本內容爲text的元素
:empty	選取不包含子元素或文本的元素
:has(selector)	選擇與指定的選擇匹配的元素
:parent	選取含有子元素或文本的元素

<script type="text/javascript">
    $(function() {
        //選取包含文本 "標籤" 的div元素。 如果div的子元素滿足，那麼這個div也算。
        console.log($("div:contains(標籤)"));
        //選取，沒有子標籤或文本的div元素
        console.log($("div:empty"));
        //選取有 後代 是.item2的div元素
        console.log($("div:has(.item2)"))
        // 選取有文本或子元素的所有元素。  也就是能當爹的元素
        console.log($(":parent"));
    })
</script>

7.3 可見性選擇過濾器

根據元素的可見狀態來選取。

選擇器	描述
:hidden	選取所有不可見的元素。包括input的type屬性是hidden，display是none。
:visible	選取所有可見的元素。如果一個元素的visibility是hidden也會被選中。

<script type="text/javascript">
    $(function() {
        console.log($("div:visible"));
        console.log($("div:hidden"));
    })
</script>

7.4 子元素過濾選擇器

選擇器	描述
:nth-child(index/even/odd/equation)	匹配其父元素下的第N個子或奇偶元素.這個選擇器和之前說的基礎過濾(Basic Filters)中的 eq() 有些類似,不同的地方就是前者是從0開始,後者是從1開始.
:first-child	相當於nth-child(1)
:last-child	返回父元素的第一個子元素
:only-child	如果父類元素僅僅有一個子元素就返回

<script type="text/javascript">
    $(function() {
        // 從p元素的父元素的所有子元素中查找。如果第2個元素是p，則返回這個p元素，如果不是p則不返回這個子元素
        console.log($("p:nth-child(2)"));
        //從p元素的父元素的所有子元素中查找。如果第一個元素是p則返回這個p元素。否則不返回
        console.log($("p:first-child"));
        console.log($("p:last-child"));
        console.log($("div:only-child"));
    });
</script>

八、表單選擇器

爲了更加方便的操作表單，jquery專門添加的表單選擇器

<script type="text/javascript">
    $(function() {
        //獲取所有的input、button、select、textarea
        console.log($(":input"));
        //選取所有的單行文本框 (type=text)
        console.log($(":text"));
        console.log($(":password"));
        console.log($(":radio"));
        console.log($(":checkbox"));
        console.log($(":submit"));
        console.log($(":button"));     
    });
</script>

站內首發文章

做人要厚道2013

發佈了79 篇原創文章 · 獲贊 375 · 訪問量 29萬+

私信關注

jQuery系列1---豐富的選擇器