技術文章 » JavaScript互動式網頁設計 • 【第6章 初識jQuery】

JavaScript互動式網頁設計 • 【第6章 初識jQuery】

2020-11-13 11:01:23

全部章節   >>>>

本章目錄

6.1 jQuery概述

6.1.1 初識 jQuery

6.1.2 jQuery 基本功能

6.1.3 搭建 jQuery 開發環境

 6.1.4 編寫一個簡單的 jQuery 應用

6.1.5 jQuery程式碼的特點

6.1.6 實踐練習

6.2 jQuery 基本選擇器

6.2.1 jQuery 選擇器概述

6.2.2 基本選擇器

6.2.3 實踐練習

6.3 過濾選擇器

6.3.1 基本過濾選擇器

6.3.2 內容過濾選擇器

6.3.3 可見性過濾選擇器

6.3.4 屬性過濾選擇器

6.3.5 實踐練習

6.4 層次選擇器和表單選擇器

6.4.1 層次選擇器

6.4.2 表單選擇器

6.4.3 實踐練習

總結:

6.1 jQuery概述

6.1.1 初識 jQuery

為了解決開發過程中的相容性問題，產生了許多JavaScript庫，目前被頻繁使用的JavaScript庫包括 jQuery、Prototype、Spry 和 Ext JS

其中使用最廣泛的JavaScrip庫是jQuery, 是於2006年建立的一個JavaScript庫

  • 集 JavaScript、CSS、DOM 和 Ajax 於一體的強大框架體系
  • 它的主旨是以更少的程式碼實現更多的功能（Write less,do more）

6.1.2 jQuery 基本功能

jQuery 基本功能

  • 存取和操作 DOM 元素
  • 對頁面事件的處理
  • 大量外掛在頁面中的運用
  • 與 Ajax 技術的完美結合
  • 大幅提高開發效率

6.1.3 搭建 jQuery 開發環境

  • 下載 jQuery 檔案庫（http://jquery.com）
  • 引入 jQuery 檔案庫

在頁面<head></head> 標籤對中加入如下程式碼：

<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

範例：單擊按鈕時，隱藏的 <div> 逐漸放大並顯示出來

<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
      $("#btn").click(function() {
        $("#info").show(2000);//show(2000) 表示用 2 秒顯示標籤
      });
   });
</script>
<input type="button" value=" 顯示 " id="btn"/>
<div id="info"  style= "display:none">
    <img src="../img/mobile.jpg" width="350"/>
</div>

6.1.4 編寫一個簡單的 jQuery 應用

  • $(document).ready(function(){ }); 類似JavaScript程式碼:window.οnlοad=function(){   }
  • $(document).ready 在頁面框架下載完畢後就執行；而 window.onload 必須在頁面全部載入完畢（包括下載圖片）後才能執行
  • $(document).ready(function(){   }) 可以簡寫成 $(function(){   })
  • $("#btn").click(function(){   });  使用 click() 方法，將函數繫結到指定元素的 click 事件中，單擊按鈕時，繫結的函數就會執行

6.1.5 jQuery程式碼的特點

範例：單擊 <h3> 標籤時，切換屬性值，同時後面的兄弟元素會切換其顯示或隱藏狀態

<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
      $("h3").click(function() {
        $(this).toggleClass("highLight").next("ul").toggle();
      });
    });
</script>

  • $符號標誌：是JQuery物件的簡寫形式，$()等效於jQuery()，是jQuery程式的標誌
  • 隱式迴圈：當使用jQuery查詢符合要求的元素後，無須一一遍歷每一個元素，直接通過jQuery命令操作符合要求的元素
  • 鏈式書寫：可以將針對於同一個物件多個操作命令寫在一個語句中，還可以插入換行和空格

6.1.6 實踐練習

 

6.2 jQuery 基本選擇器

6.2.1 jQuery 選擇器概述

使用jQuery選擇器可以選擇頁面元素，並生成jQuery物件，能夠使用jQuery中的方法。jQuery 對頁面元素的選擇完全繼承了 CSS 選擇器的語法規則

6.2.2 基本選擇器

基本選擇器是由標籤 id、class、標籤名和多個選擇符組成

選擇器

功能

返回值

#id

根據 id 屬性值選取元素

單個元素

.class 

根據 class 屬性值選取元素

元素集合

element

根據給定的標籤名選取元素 

元素集合

*

選取所有元素，包括 html 和 body 

元素集合

selector1,selector2,…,selectorN 

將每一個選擇器匹配到的元素合併後一起返回

元素集合

範例：使用jQuery 顯示元素並設定其樣式

<script type="text/javascript">
   $(function() {
      // 選取 <div> 和 <span> 元素，合併選取
      $("div,span").css("display","block");
      // 根據 id 屬性值選取元素
      $("#one").css("color","#f30");
      // 根據給定的標籤名選取元素
      $("span").css("font-size","20px");
      // 根據 class 屬性值選取元素
      $("div.two").css("background-color","#ccc");
      $("#one,span").css("border-style","dashed");
   });
</script>
<div id="one"> 設定了 div 的 id 屬性 </div>
<div class="two"> 設定了 div 的 class 屬性 </div>
<span>SPAN</span>

6.2.3 實踐練習

 

6.3 過濾選擇器

6.3.1 基本過濾選擇器

過濾選擇器附加在所有選擇器的後面，通過特定的過濾規則來篩選出一部分元素，書寫時以冒號（：）開頭

過濾選擇器可以分為

  • 基本過濾選擇器
  • 內容過濾選擇器
  • 可見性過濾選擇器
  • 屬性過濾選擇器

選擇器

功能

返回值

first() 或 :first

獲取第一個元素

單個元素

last() 或 :last 

獲取最後一個元素

單個元素

:not(selector) 

獲取除給定選擇器之外的所有元素

元 素 集 合， 如$("li:not(.title)") 獲 取class 不是 title 的 <li> 元素

:even

獲取索引值為偶數的元素，索引號從 0 開始

元素集合

:odd

將每一個選擇器匹配到的元素合併後一起返回

元素集合

:eq(index)

獲取索引值等於 index 的元素，索引號從 0 開始

單個元素，如 $(「li:eq(1)」) 獲取索引等於 1 的 <li> 元素

:gt(index)

獲取索引值大於 index 的元素，索引號從 0 開始

元素集合，如 $("li:gt(1)") 獲取索引大

於但不包括 1 的 <li> 元素

:lt(index)

獲取索引值小於 index 的元素，索引號從 0 開始

元素集合，如 $("li:lt(1)") 獲取索引小

於但不包括 1 的 <li> 元素

:header 

獲取所有標題元素，如 h1~h6 

元素集合

:animated

獲取正在執行動畫效果的元素

元素集合

範例：使用基本過濾器定位 DOM 元素，改變元素樣式

<script type="text/javascript">
   $(function() {
      $("#btnTitle").click(function() {
        // 單獨使用過濾選擇器，等同於附加在基本選擇器 * 的後面
        $(":header").css("color","#f00");});
      $("#btnEven").click(function() {
        // 獲取索引值為偶數的 <li> 元素
        $("li:even").css("color","#00f");});
      $("#btnOdd").click(function() {
        // 獲取索引值為奇數的 <li> 元素
        $("li:odd").css("color","#f93");});
     });</script>

6.3.2 內容過濾選擇器

內容過濾選擇器根據元素中的文字內容或所包含的子元素特徵來獲取元素

選擇器

功能

返回值

:contains(text)

獲取含有文字內容為 text 的元素

元素集合

:empty

獲取不包含後代元素或者文字的空元素

元素集合

:has(selector)

獲取含有後代元素為 selector 的元素 

元素集合

:parent 

獲取含有後代元素或者文字的非空元素 

元素集合

在 :contains(text) 內容過濾選擇器中，如果引數 text 內容出現在匹配元素的任何後代元素中，也認為該元素含有文字內容 text。如果引數 text 使用英文字母，則有大小寫的區別

<input>、<img>、<br> 和 <hr> 等標籤屬於不包含後代元素和文字的空元素

範例：使用內容過濾選擇器查詢 DOM 元素，改變元素樣式

     $(function() {
      $("#btnContain").click(function() {
	    // 獲取含有文字內容為 A 的 div
        $("div:contains('A')").css("background-color","#f00");
      });
      $("#btnEmpty").click(function() {       
        $("div:empty").css("background-color","#0f0"); //獲取不包含後代元素或文字的div
      });
      $("#btnHas").click(function() {       
        $("div:has(span)").css("background-color","#00f"); //獲取含有後代元素為span的元素
      });
      $("#btnParent").click(function() {
	    //獲取含有後代元素或者文字的div元素
        $("div:parent").css("background-color","white"); }); });

6.3.3 可見性過濾選擇器

可見性過濾選擇器根據元素是否可見的特徵來獲取元素

選擇器

功能

返回值

:hidden

選取不可見元素

元素集合，如 $(":hidden") 選取所有隱藏的元素

:visible

選取可見元素 

元素集合，如 $(":visible") 選取所有可見的元素

不可見元素包括：css 樣式中 display 屬性值為 none 的元素、type 屬性值為 hidden 的 <input> 元素及寬高設定為 0 的元素

範例：使用可見性過濾選擇器鎖定 DOM 元素，改變元素樣式

     <script type="text/javascript">
    $(function() {
      $("#btnShow").click(function() {
        $(".pic:hidden").show().addClass("current");
      });
      $("#btnHidden").click(function() {
        $(".pic:visible").hide();
      });
    });
  </script>
    <img src="../img/mobile.jpg" class="pic"/>
  <p><input type="button" value=" 顯示 " id="btnShow"/>
  <input type="button" value=" 隱藏 " id="btnHidden"/></p>

6.3.4 屬性過濾選擇器

屬性過濾選擇器根據元素的某個屬性獲取元素，以「[」號開始、以「]」號結束

選擇器

說明

返回值

[attribute]

獲取擁有該屬性的所有元素，如 $('li[title]') 表示獲取所有包含title 屬性的 <li> 元素

元素集合

[attribute=value]

獲取某屬性值為 value 的所有元素，如 $('li[title=test2]') 表示獲取所有包含 title 屬性且屬性值等於 test2 的 <li> 元素

元素集合

[attribute!=value]

獲取某屬性值不等於 value 的所有元素，如 $('li[title!=test2]') 表示獲取所有包含 title 屬性且屬性值不等於 test2 的 <li> 元素

元素集合

[attribute^=value]

選取屬性值以 value 開頭的所有元素，如 $('a[href^="mailto:"]') 表示獲取所有包含 href 屬性，且屬性值以 mailto: 開頭的 <a> 元素

元素集合

[attribute$=value]

選取屬性值以 value 結束的所有元素，如 $('a[href$=".zip"]') 表示獲取所有包含 href 屬性，且屬性值以 .zip 結尾的 <a> 元素

元素集合

[attribute*=value]

選 取 屬 性 值 中 包 含 value 的 所 有 元 素， 如 $('a[href*="jquery.com"]') 表示獲取所有包含 href 屬性且屬性值中包含 jquery.com的 <a> 元素

元素集合

[selector1][selector2]…[selectorN]

合併多個選擇器，滿足多個條件，每選擇一次將縮小一次範圍，如 $('li[id][title^=test]') 選取所有擁有屬性 id 且屬性 title 以 test開頭的 <li> 元素

元素集合

範例：使用屬性過濾選擇器鎖定 DOM 元素，全選篩選框

<script type="text/javascript">
    $(function() {// 頁面載入事件
      $("input[type='button']").click(function() {
      	      $("input[name='songs']").attr("checked","checked");
      });
    });
</script>
<p>
    請選擇喜歡的歌曲：<br/>
    <input type="checkbox" name="songs"/> 小幸運
    <input type="checkbox" name="songs"/> 非酋
    <input type="checkbox" name="songs"/> 佛系少女
    <input type="checkbox" name="songs"/> 醉赤壁
</p>
<input type="button" value=" 全選 "/>

6.3.5 實踐練習

 

6.4 層次選擇器和表單選擇器

6.4.1 層次選擇器

層次選擇器通過 DOM 元素之間的層次關係獲取元素，其主要的層次關係包括後代、父子、相鄰和兄弟關係。層次選擇器由兩個選擇器組合而成

名稱

語法

功能

返回值

後代選擇器

selector1  selector2

從 selector1 的後代元素裡選取 selector2

元素集合，如 $(「#nav span」) 表示選取 #nav下所有的<span>元素

子選擇器

selector1>selector2

從 selector1 的子元素裡選取 selector2

元素集合，如("#nav>span")表示選取 #nav 的子元素<span>

相鄰元素選擇器

selector1+selector2

從 selector1 後面的第一個

兄弟元素裡選取 selector2

元素集合，如 $("h2+dl") 表示選取緊鄰<h2>元素之後的同輩元素 <dl>

同輩元素選擇器

selector1~selector2

從 selector1 後面的所有兄

弟元素裡選取 selector2

元 素 集 合， 如 $("h2~dl") 表 示 選 取<h2> 元素之後所有的同輩元素<dl>

selector1 selector2 與 selector1>selector2 所選擇的元素集合是不同的，前者的層次關係是祖先與後代，而後者是父子關係

selector1+selector2 可以使用 jQuery 物件的 next() 方法代替

selector1~selector2 從 selector1 後面的所有兄弟元素裡選取 selector2，不能獲取前面部分，可以使用nextAll() 方法代替。而 siblings() 方法獲取全部的相鄰元素，不分前後

selector1 selector2 與 selector1:has(selector2) 雖然這兩個選擇器都要求 selector2 是 selector1 的後代元素，但是前者最終選取的是後代元素，後者最終選取的是擁有這些後代元素的元素

範例：使用層次選擇器鎖定 DOM 元素

<script type="text/javascript">
    $(function() {// 頁面載入完畢事件
      // 設定標題的顏色
      $(":header").css("color","red");
      // 設定第一層無序列表的字型顏色
      $(":header+ul>li").css("color","green");
      // 設定第二層無序列表的字型顏色
      $(":header+ul>li>ul>li").css("color","blue");
    });
</script>
html程式碼略

6.4.2 表單選擇器

選擇器

功能

返回值

:input

獲取 <input><textarea><select><button> 元素 

元素集合

:text 

獲取符合 [type=text] 的 <input> 元素

元素集合

:password

獲取符合 [type=password] 的 <input> 元素

元素集合

:radio

獲取符合 [type=radio] 的 <input> 元素 

元素集合

:checkbox

獲取符合 [type=checkbox] 的 <input> 元素 

元素集合

:image

獲取符合 [type=image] 的 <input> 元素 

元素集合

:file

獲取符合 [type=file] 的 <input> 元素

元素集合

:hidden 

參考「可見性過濾選擇器」 

元素集合

:button

獲取 <button> 元素和符合 [type=button] 的 <input> 元素

元素集合

:submit

獲取符合 [type=submit] 的 <input> 元素 

元素集合

:reset

獲取符合 [type=reset] 的 <input> 元素

元素集合

表單物件屬性過濾選擇器

表單物件屬性過濾選擇器也是專門針對表單元素的選擇器，它屬於過濾選擇器的範疇，可以附加在其他選擇器的後面，主要功能是對所選擇的表單元素進行過濾

選擇器

功能

:enabled

選取可用的表單元素

:disabled

選取不可用的表單元素

:checked

選取被選中的 <input> 元素

:selected

選取被選中的 <option> 元素

範例：使用表單選擇器和表單物件屬性過濾選擇器鎖定 DOM 元素

$(function() {// 頁面載入完畢事件
    $("#pa :button").click(function() {
        // 選擇器 #pa 後的空格表示獲取後代元素
        $("#pa :text:enabled").css("border","1px solid red");
    });
    $("#pb :button").click(function() {
        $("#pb :radio:checked").parent().css("background-color","#63c");
    });
    $("#pc :button").click(function() {
        $("#pc :checkbox:checked").parent().css("background-color","#63c");
    });
    $("#pd :button").click(function() {
        var info = " 你最喜歡的球星是："
        info += $("#pd :input option:selected").val();
        alert(info);
    }); 
});

6.4.3 實踐練習

總結:

  • jQuery程式碼的特點：」$」標誌、隱式迴圈、鏈式書寫
  • jQuery中基本選擇器有「#id」、「.class」、「element」和「*」
  • 基本過濾選擇器有「:first」、「:last」、「:not」、「:even」、「：odd」、「:eq」、「:gt」、「:lt」、「:header」和「：animated」
  • 內容過濾選擇器有「：contains」、「:empty」、「:has」和「:parent」 可見性過濾選擇器有「：hidden」和「:visible」
  • 屬性過濾選擇器有「[attribute]」、「[attribute=value]」和「 [attribute=!value]」等
  • 層次選擇器有「selector1 selector2」、「 selector1> selector2」、「 selector1 +selector2」和「 selector1 ~selector2」
  • 表單選擇器有「:input」、「:text」、「:password」、「:radio」和「:checkbox」等