jQuery -- 光陰似箭（一）：初見 jQuery -- 基本用法，語法，選擇器
jQuery -- 知識點回顧篇（一）：初見jQuery -- 基本用法，語法，選擇器
1. 使用方法
jQuery 庫位於一個 JavaScript 檔案中，其中包含了所有的 jQuery 函式。
網頁需要使用到 jQuery 時，需要先在網頁中引入 jQuery 的 js檔案。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> </head> <body> </body> </html>
2. jQuery 語法
jQuery 語法是通過選取 HTML 元素，並對選取的元素執行某些操作。
基礎語法形式： $(selector).action()
例： $("p").hide() - 隱藏所有 <p> 元素
$("#myInfo").hide() - 隱藏所有 id="myInfo" 的元素
寫法：
所有 jQuery 函式位於一個 document.ready 的函式中。如下圖。
這是為了防止文件在完全載入（就緒）之前執行 jQuery 程式碼，即在 DOM 載入完成後才可以對 DOM 進行操作。
如果在文件沒有完全載入之前就執行函式，操作可能失敗。
$(document).ready(function(){ // 程式碼部分寫在這裡 });
也可以簡寫成下面這樣：
$(function(){ // 這裡寫程式碼 });
舉例：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("button").click(function(){ $("#myDiv1").html("Hello JQuery World"); $("#myDiv1").css("background-color","green"); }); }); </script> </head> <body> <button type="button">點選</button> <div id="myDiv1">Hello</div> </body> </html>
3. 基本選擇器
(1) 元素選擇器: jQuery 元素選擇器基於元素名選取元素。
舉例：使用元素選擇器選擇所有<p>元素，將其隱藏。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <button type="button">點選</button> <p>p元素1</p> <p>p元素2</p> <div id="myDiv1">Hello</div> </body> </html>
(2) #id 選擇器: jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器
舉例：使用 #id 選擇器選擇 id="myDiv1"的元素，將其隱藏。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("button").click(function(){ $("#myDiv1").hide(); }); }); </script> </head> <body> <button type="button">點選</button> <p>p元素1</p> <p>p元素2</p> <div id="myDiv1">Hello</div> </body> </html>
(3) .class 選擇器: jQuery 類選擇器可以通過指定的 class 查詢元素。
舉例：使用類選擇器選擇Class=“myClass1”的元素，將其隱藏。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("button").click(function(){ $(".myClass1").hide(); }); }); </script> </head> <body> <button type="button">點選</button> <p>p元素1</p> <p>p元素2</p> <div id="myDiv1">Hello</div> <div Class="myClass1">你好</div> </body> </html>
