jQuery的下載使用
jQuery下載地址：jquery.com。
使用方式：將下載下來的文件如jquery.js嵌入到HTML文件中。
<script typpe="text/javascript" src="jquery.js"></script>
jQuery之操作元素內容
$(ID)替代了document.getElementById(ID);
通過$(ID).val()取得value屬性內容，$(ID).val(" ")設置value屬性內容，如文本框，密碼框，文本域，下拉列表等。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery練習</title> <script typpe="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function fun(){ var name = $(uname).val(); alert("姓名："+name); $(uage).val("18"); } </script> </head> <body> 姓名：<input type="text" name="uname" id="uname"/> <input type="button" name="btn" id="btn" value="提交" onclick="fun()" /><br/> 年齡：<input type="text" name="uage" id="uage" value="提交后顯示年齡"/> </body> </html>
通過$(ID).text()取得元素內容，$(ID).text(" ")設置元素內容。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery練習之元素內容設置</title> <script typpe="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function fun(){ var obj = $(myDiv1).text(); alert("myDiv1中的內容是"+obj); alert("設置myDiv2中的內容為Hello World!"); $(myDiv2).text("Hello World!"); } </script> </head> <body> <div id="myDiv1">啦啦啦</div> <div id="myDiv2"></div> <input type="button" name="btn" id="btn" value="設置" onclick="fun()" /> </body> </html>
用text()方法時不能加入HTML元素，所有的HTML元素需要轉義，但是通過$(ID).html(" ")在設置元素內容的同時會保留HTML元素標簽處理。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery練習之元素內容(包含標簽)設置</title> <script typpe="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function fun(){ $(myDiv).html("<h1>Hello World!</h1>"); } </script> </head> <body> <div id="myDiv"></div> <input type="button" name="btn" id="btn" value="設置" onclick="fun()" /> </body> </html>
jQuery之頁面加載處理
原始的加載頁面方法是：
window.onload = function(){};
學習jQuery之后使用$(document).ready(function(){ })來替代，其簡略的寫法是$(function(){ })，或者把$換成jQuery，即jQuery(document).ready(function(){ }),其簡略的寫法是jQuery(function(){ })。
jQuery之基礎選擇器
jQuery最強大的方便之處就是強大的元素選擇功能，可以根據各種形式來選擇。比如：根據ID、根據樣式、根據父子關系、根據祖先關系、屬性的內容。
| NO | 選擇器 | 描述 | 返回結果 |
| 1 | #ID | 取得指定ID的內容，相當於document.getElementById(ID) | 單個元素 |
| 2 | 元素名稱 | 根據指定的標簽名稱取得對應的元素，相當於document.getElementsByTagName() | 元素集合 |
| 3 | .class | 具備有指定樣式的元素 | 元素集合 |
| 4 | * | 取得所有的元素，包括html,head等元素 | 元素集合 |
| 5 | 元素名稱，元素名稱，…… | 取得與指定元素名稱相同的元素 | 元素集合 |