jQuery 零基礎到入門
阿新 • • 發佈：2018-11-08
jQuery
是一個 JavaScript 庫，封裝了常用的開發功能，和一些需要的方法，來提高開發效率。
- 用法
1. 下載 jQuery-1.12.4.js 放到 js 資料夾下面
- 官網有兩個版本的 js 庫
-
jquery-1.12.4.js // 具有程式碼程式設計規範，即程式碼可以看，有註釋 jquery-1.12.4-min.js // 由以上 js 程式碼壓縮，去掉了無關空格，換行，註釋，變數命名更短 網頁載入速度更快
2. index.html 匯入 js 庫
-
<script type="text/javascript" src="./js/jquery-1.12.4.js"></script> //
HTML5 已將 JavaScript 設定為預設指令碼語言，可如下編寫 <script> // js程式碼 </script>
3. 將 js 程式碼寫在 DOM載入完成事件處理函式中。
-
$(function(){ // js 程式碼 });以上程式碼等同於
-
$(document).ready(function(){ // js 程式碼
// 此程式碼會在 頁面 DOM 載入完成後 觸發 DOMContentLoad 事件 而執行，而不用等待圖片載入完成。。。
// 可以寫多個 $(function(){}); 且都會執行
// 優於 window.onload() ， load事件 必須要等到頁面所有資源都載入完成才會觸發
// window.onload(); 如果寫多個，則只會生效最後一個 });
還等同於
$().ready(function(){
// js 程式碼 jQuery 預設引數是 document
});
// 一個網頁的載入順序是：
// 1. 域名載入
// 2. HTML 載入 DOM 這裡載入完了就觸發 DOMContentLoad 事件
// 3. 載入 js、css// 4. 載入圖片、視訊等等資源， 這裡載入完了就觸發 load 事件
// 用法 document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);
-
- jQuery 的兩把利器
- jQuery 核心物件 $ jQuery
- 做為物件使用，呼叫 jQuery 的方法
- $.each();
- 隱式遍歷陣列
-
$.each(arr, function(index, eleVal){ console.log("arr["+index+"] : "+eleVal); });
- $.trim();
- 去掉字串首尾空格
-
$.trim(" 哈啊 "); // "哈啊"
- $.type();
- 判斷資料的型別
-
$.type(jQuery); // "object" 證明 jQuery 也是一個物件
- $.isArray();
- 判斷是否是陣列
-
$.isArray( $("#content") ); // false 證明 jQuery 的 css選擇器得到的是 類陣列物件
- $.isFunction()
- 判斷資料是否是函式
-
$.isFunction(jQuery); // true 證明 jQuery 也是一個函式
- $.each();
- 這兩個是庫提供給外界的 介面
- 做為物件使用，呼叫 jQuery 的方法
- jQuery 核心物件 $ jQuery
-
-
- 列舉物件的屬性
-
for(var eleIndex in aObj ){ console.log(aObj[eleIndex]); }
-
- 列舉物件的屬性
-
-
- jQuery 核心函式
- jQuery();
- jQuery 提供給使用者的 API 介面 有兩個變數
-
jQuery(); //等價於 $();
-
- jQuery 提供給使用者的 API 介面 有兩個變數
-
- 多庫共存
- 由於除了 jQuery 庫，其他的庫可能也使用了 $ 作為 API 介面，
- jQuery 提供了 .noConflict() 函式，釋放對 $ 的所有權，還可以指定新的變數作為介面
-
var myJQ = jQuery.noConflict(); // 此行以下程式碼， myJQ(); 等同於 jQuery();
此行程式碼以後，$ 就可以供其他庫呼叫了。
-
- 多庫共存
- jQuery物件 轉成 DOM 物件
- jQuery物件，使用 $("#id") 這樣的選擇器獲取到的物件
- 為了區別於 DOM 物件，變數命名以 $ 開頭
-
var $firstA = $("#content a:nth-child(1)");
- jQuery物件，使用 $("#id") 這樣的選擇器獲取到的物件
-
- 轉為 DOM 物件，
-
$("#content a:first")[0]; // 返回對應 DOM 物件 因為 jQuery 使用 css 選擇器獲取元素時，總是返回一個類陣列物件，成員為獲取到的一個或多個元素 // 或者 $firstA[0]; // 返回對應 DOM 物件 // 或者 $("#content a:first").get(0); $firstA.get(0);
-
- 轉為 DOM 物件，
- 操作 jQuery 物件 的二值屬性
.prop("checked", true);
.prop("checked", false)；
-
-
$("input:checked").prop("checked", false); $("input:checked").prop("selected", false); $("input:checked").prop("disable", false); $("input:checked").prop("enable", false);
-
- 元素的 高度/寬度
-
// content 支援設定 $("#box").height(); $("#box").width(); // content+padding 不支援設定 $("#box").innerHeight(); $("#box").innerWidth(); // content+padding+border 不支援設定 $("#box").outerHeight(); // 如果傳入 true 則獲取 content + padding+border+margin $("#box").outerWidth(true);
-
- 獲取/設定 元素 的位置
- 相對於網頁頁面左上角 .offset()
- 讀取位置
-
$("#box").offset().top; $("#box").offset().left;
-
- 讀取位置
- 相對於網頁頁面左上角 .offset()
-
-
- 設定位置
-
$("#box").offset({ top: 100, left: 200 });
-
- 設定位置
-
-
- 相對於父元素左上角 .position()
- 讀取位置
-
$("#box").position().top; $("#box").position().left;
-
- 讀取位置
- 相對於父元素左上角 .position()
-
-
- 設定位置
-
$("#box").position({ top: 100, left: 200 });
-
- 設定位置
-
- 移除元素 .remove()
-
// <body> <div id="box"> 我是一個div </div> </body>
$("#box").remove();
// <body> </body>
-
- 移除元素文字內容 .empty();
-
// <p>哈哈哈哈哈</p> $("p").empty(); // <p></p>
-
- 事件繫結 .on("click", func1); 與解綁 .off("click", func1);
- on 還可以用於事件委派（根據事件冒泡原理實現: 子元素的事件，會向祖先元素傳遞）
-
$("#ulList").on("click", "li", function(){ alert("I am "+ $(this).text() ); });
-
-
- jQuery 函式的 this 總是返回 DOM物件
- 如果要使用 jQuery 物件的方法，需要 $() 轉換成 jQuery 物件
- jQuery 函式的 this 總是返回 DOM物件
- 滑鼠移入/移除事件
- 只在移入繫結元素時觸發，移入子元素不重複觸發
在移入繫結元素時觸發，移入子元素