jQuery（ 一）——基本概念

jQuery基本概念

學習目標：學會如何使用jQuery，掌握jQuery的常用api，能夠使用jQuery實現常見的效果。

 

爲什麼要學習jQuery？

使用javascript開發過程中，有許多的缺點：

1. 不能有多個入口函數-----window.onLoad()
2. 原生JS的API一般太長太難記
3. 原生JS部分代碼冗餘
4. 容錯性
5. 兼容性問題

jQuery初體驗

$(document).ready(function () {
    $("#btn1").click(function () {
        //隱式迭代：偷偷的遍歷，在jQuery中，不需要手動寫for循環了，會自動進行遍歷。
        $("div").show(200);
    });
​
    $("#btn2").click(function () {
        $("div").text("我是內容");
    });
});

 

優點總結：

1. 可以寫多個入口函數
2. 方法易記
3. 代碼冗餘度低
4. 容錯性好
5. 兼容性高（兼容各種主流瀏覽器）

沒有對比，就沒有傷害，有了對比，處處戳中要害。

 

什麼是jQuery?

jQuery的官網 http://jquery.com/ jQuery就是一個js庫，使用jQuery的話，會比使用JavaScript更簡單。

js庫：把一些常用到的方法寫到一個單獨的js文件，使用的時候直接去引用這js文件就可以了。（animate.js、common.js）

 

我們知道了，jQuery其實就是一個js文件，裏面封裝了一大堆的方法方便我們的開發，其實就是一個加強版的common.js，因此我們學習jQuery，其實就是學習jQuery這個js文件中封裝的一大堆方法。

 

jQuery的版本

官網下載地址：http://jquery.com/download/ jQuery版本有很多，分爲1.x 2.x 3.x

大版本分類：

1.x版本：能夠兼容IE678瀏覽器
2.x版本：不兼容IE678瀏覽器
1.x和2.x版本jquery都不再更新版本了，現在只更新3.x版本。
​
3.x版本：不兼容IE678，更加的精簡（在國內不流行，因爲國內使用jQuery的主要目的就是兼容IE678）

關於壓縮版和未壓縮版

jquery-1.12.4.min.js:壓縮版本，適用於生產環境，因爲文件比較小，去除了註釋、換行、空格等東西，但是基本沒有顆閱讀性。
jquery-1.12.4.js:未壓縮版本，適用於學習與開發環境，源碼清晰，易閱讀。

jQuery的入口函數

使用jQuery的三個步驟：

1. 引入jQuery文件
2. 入口函數
3. 功能實現

關於jQuery的入口函數：

//第一種寫法
$(document).ready(function() {
    
});
//第二種寫法
$(function() {
    
});

 

jQuery入口函數與js入口函數的對比

1.  JavaScript的入口函數要等到頁面中所有資源（包括圖片、文件）加載完成纔開始執行。
2.  jQuery的入口函數只會等待文檔樹加載完成就開始執行，並不會等待圖片、文件的加載。

$函數
  $和jQuery完全等價。
      能使用$的地方，就能是jQuery
      console.log($ === jQuery); //true
  $是一個函數,根據傳入的參數不同，實現不同的功能。
     a. 參數是一個函數，功能就是入口函數
        $(function () {

        });

     b. document
        參數是一個對象，DOM對象（元素），會把這個DOM對象轉換成jquery對象

     c. 字符串（最常用）選擇器
        $("#one")    $(".one")

 

jQuery對象與DOM對象的區別（重點）

1. DOM對象：使用JavaScript中的方法獲取頁面中的元素返回的對象就是dom對象。
2. jQuery對象：jquery對象就是使用jquery的方法獲取頁面中的元素返回的對象就是jQuery對象。
3. jQuery對象其實就是DOM對象的包裝集（包裝了DOM對象的集合（僞數組））
4. DOM對象與jQuery對象的方法不能混用。

DOM對象轉換成jQuery對象：【聯想記憶：花錢】

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM對象轉jQuery對象

jQuery對象轉換成DOM對象：

var $li = $(“li”);
//第一種方法（推薦使用）
$li[0]
//第二種方法
$li.get(0)
​

【練習：隔行變色案例.html】

 

選擇器

什麼是jQuery選擇器

jQuery選擇器是jQuery爲我們提供的一組方法，讓我們更加方便的獲取到頁面中的元素。注意：jQuery選擇器返回的是jQuery對象。

jQuery選擇器有很多，基本兼容了CSS1到CSS3所有的選擇器，並且jQuery還添加了很多更加複雜的選擇器。【查看jQuery文檔】

jQuery選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個元素，你會有很多種方法獲取到。所以我們平時真正能用到的只是少數的最常用的選擇器。

基本選擇器

名稱	用法	描述
ID選擇器	$(“#id”);	獲取指定ID的元素
類選擇器	$(“.class”);	獲取同一類class的元素
標籤選擇器	$(“div”);	獲取同一類標籤的所有元素
並集選擇器	$(“div,p,li”);	使用逗號分隔，只要符合條件之一就可。
交集選擇器	$(“div.redClass”);	獲取class爲redClass的div元素
通用選擇器	$("*");	獲取所有元素

總結：跟css的選擇器用法一模一樣。

層級選擇器

名稱	用法	描述
子代選擇器	$(“ul>li”);	使用>號，獲取兒子層級的元素，注意，並不會獲取孫子層級的元素
後代選擇器	$(“ul li”);	使用空格，代表後代選擇器，獲取ul下的所有li元素，包括孫子等
相鄰兄弟選擇器	$("ul + ol");	使用+號，代表相鄰兄弟選擇器，獲取ul後面緊鄰的兄弟元素ol（相當於篩選選擇器的next方法）
	$("#id ~ li")	使用~號，獲取#id元素後的全部li兄弟元素

跟CSS的選擇器一模一樣。

過濾選擇器

這類選擇器都帶冒號:

名稱	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	獲取到的li元素中，選擇索引號爲2的元素，索引號index從0開始。
:odd	$(“li:odd”).css(“color”, ”red”);	獲取到的li元素中，選擇索引號爲奇數的元素
:even	$(“li:even”).css(“color”, ”red”);	獲取到的li元素中，選擇索引號爲偶數的元素
:selected	$(“select>option:selected”).css(“color”, ”red”);	獲取被選中的option元素
:focus		獲取被獲取焦點的元素
:animated		獲取這正在執行動畫的所有元素
:lt(index)		獲取小於索引號爲2的元素，索引號從0開始
:gt(index)		獲取於索引號爲2的元素，索引號從0開始
:hidden		獲取被隱藏的元素
:visible		獲取可見元素
還有屬性選擇器[ ]	("input[type:text]")	。。。。。

【案例：隔行變色】

<script>
  $(function () {
    //設置奇數行li標籤顏色爲天藍色.
    $('li:odd').css('backgroundColor','skyblue');

    //設置偶數行li標籤背景色爲粉色
    $('li:even').css('backgroundColor','pink');

    //首尾兩行li顯示紅色.
    $('li:eq(0)').css('backgroundColor','red');
    $('li:eq(9)').css('backgroundColor','red');

  });
</script>

篩選選擇器(方法)

篩選選擇器的功能與過濾選擇器有點類似，但是用法不一樣，篩選選擇器主要是方法。

名稱	用法	描述
children(selector)	$(“ul”).children(“li”)	相當於$(“ul>li”)，子類選擇器
find(selector)	$(“ul”).find(“li”);	相當於$(“ul li”),後代選擇器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟節點，不包括自己本身。
parent()	$(“#first”).parent();	查找父親
eq(index)	$(“li”).eq(2);	相當於$(“li:eq(2)”),index從0開始
next()	$(“li”).next()	找下一個兄弟
prev()	$(“li”).prev()	找上一次兄弟
prevAll()	$(“li”).prevAll()	前面所有的兄弟
nextAll()	$(“li”).nextAll()	後面所有的兄弟

【案例：下拉菜單】this+children+mouseenter+mouseleave
<script>
  $(function () {
    //需求: 給一級菜單li設置鼠標移入事件，二級菜單顯示。
    //      給一級菜單li設置鼠標離開事件，二級菜單隱藏。


    //獲取一級菜單li的方式:
    //$('li');//不行
    //$('ul>li');//不行
    //$('.wrap li');//不行
    //$('.wrap>ul>li')//可行的.


    //1.給一級菜單li設置鼠標移入事件，二級菜單顯示。
    $('.wrap>ul>li').mouseover(function () {
      //console.log(this);//誰觸發了鼠標移入事件,那這個this就是誰,this還是一個dom對象.
      // $(this).children('ul').css('display','block');//顯示就是更改display屬性爲block.
      $(this).children('ul').show();//show()方法本質上還是更新display屬性爲block.
    });

    //2.給一級菜單li設置鼠標離開事件，二級菜單隱藏。
    $('.wrap>ul>li').mouseout(function () {
      $(this).children('ul').hide(); //hide()方法本質上還是更新display屬性爲none
    });



    //3.思考題:
    //爲什麼不給一級菜單a標籤設置鼠標移入和離開事件?
    //因爲這樣的話,選不到二級菜單.
    // $('.wrap>ul>li>a').mouseover(function () {
    //   $(this).siblings('ul').show();
    // });
    // $('.wrap>ul>li>a').mouseout(function () {
    //   $(this).siblings('ul').hide();
    // });


  });
</script>
事件改進：
<script>
  $(function () {
    //需求: 給一級菜單li設置鼠標移入事件，二級菜單顯示。
    //      給一級菜單li設置鼠標離開事件，二級菜單隱藏。

    //1.給一級菜單li設置鼠標移入事件，二級菜單顯示。
    var i = 0;
    $('.wrap>ul>li').mouseenter(function () {
      i++;
      console.log(i);
      $(this).children('ul').show();
    });

    //2.給一級菜單li設置鼠標離開事件，二級菜單隱藏。
    $('.wrap>ul>li').mouseleave(function () {
       $(this).children('ul').hide();
    });


    //mouseover  事件在鼠標移動到選取的元素及其子元素上時觸發 。
    //mouseenter 事件只在鼠標移動到選取的元素上時觸發。


    //以後如果有鼠標移入事件,請使用mouseenter,而不是mouseover.
    //鼠標離開事件使用mouseleave,就不要使用mouseout.


  });
</script>

【案例：突出展示】siblings+find
<script>
  $(function () {
    //需求1:給小人物所在的li標籤設置鼠標移入事件:當前li標籤透明度爲1,其他的兄弟li標籤透明度爲0.4
    //需求2:鼠標離開大盒子,所有的li標籤的透明度改成1.


    //獲取小人物們所在的li
    //$('.wrap li')//可以的
    //console.log($('.wrap').find('li'));//可以的

    //需求1:
    $('.wrap').find('li').mouseenter(function () {
        //console.log($(this).css('opacity', 1));//這個css方法有返回值,返回值就是設置這個方法的元素本身.
        $(this).css('opacity', 1).siblings('li').css('opacity',0.4);
    });

    //需求2:
    $('.wrap').mouseleave(function () {
        //$('.wrap').find('li').css('opacity',1);

        //console.log($(this));//在這個離開事件中,this是這整個大盒子.
        $(this).find('li').css('opacity',1);
    });

  });
</script>

【案例：手風琴】next+parent
<script>
    $(function () {
        //需求:點擊標題li標籤,對應的div顯示, 他的兄弟標籤li下面的div隱藏.
        $('.parentWrap>.menuGroup').click(function () {
            //jQuery特性:隱式迭代
            //jQuery特性:鏈式編程,在於一個方法返回的是一個jQuery對象,既然是jQueyr對象就可以繼續點出jQuery的方法來.
            $(this).children('div').show().parent().siblings('li').children('div').hide();
        });

    });
</script>

【案例：淘寶精品】index+eq
<script>
      $(function () {
          //需求1:給左邊的li標籤們設置鼠標移入事件,讓中間索引對應的li顯示,其他的li隱藏.
          //需求2:給右邊的li標籤們設置鼠標移入事件,讓中間索引對應的li顯示,其他的li隱藏.

          //需求1:
          $('#left>li').mouseenter(function () {
              //獲取當前鼠標移入的這個li標籤的索引.
              var idx = $(this).index();//索引:表示的是這個元素在他兄弟元素間的排行.
              //console.log(idx);
              //讓中間索引對應的li顯示,其他的li隱藏.
              //$('#center>li:eq('+idx+')'); //字符串的拼接
              $('#center>li').eq(idx).show().siblings('li').hide();
          });

          //需求2:
          $('#right>li').mouseenter(function () {
              //獲取當前鼠標移入的這個li標籤的索引.
              var idx = $(this).index();
              idx += 9;//9不要寫死,9是左邊li標籤的個數.
              //讓中間索引對應的li顯示,其他的li隱藏.
              $('#center>li').eq(idx).show().siblings('li').hide();
          });




          //因爲age已經成爲字符串的一部分了.不能拿到age變量的值.
          // var age = 18;
          // console.log("我的名字是age");


          //思考題:
          //爲什麼是給li標籤設置鼠標移入事件,而不是給a標籤設置鼠標移入事件?
          //因爲給a標籤設置的話,不能拿到正確的索引.
          // $('#left a').mouseenter(function () {
          //    var idx =  $(this).index();
          //     console.log(idx);
          // });

      });
   </script>