一、基本概念
1.基本概念
- jQuery是一個JavaScript函數庫
- jQuery庫包含以下功能：HTML 元素選取/HTML 元素操作/CSS 操作/HTML 事件函數/JavaScript 特效和動畫/HTML DOM 遍歷和修改/AJAX/Utilities
- jQuery還提供了大量的插件
- jQuery兼容於所有主流瀏覽器
2.jQuery語法
- 基礎語法： $(selector).action()
- 美元符號定義 jQuery
- 選擇符（selector）“查詢"和"查找” HTML 元素
- jQuery 的 action() 執行對元素的操作
3.寫法
$(document).ready(function(){ // 開始寫 jQuery 代碼... });
$(function(){ // 開始寫 jQuery 代碼... });
4.選擇器
- 標籤選擇器
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); - id選擇器
$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); - .class選擇器
$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
5.獨立文件如何使用jQuery文件
<head> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="my_jquery_functions.js"></script> </head>
6.jQuery事件
- 頁面對不同訪問者的響應叫做事件。
- 事件處理程序指的是當 HTML 中發生某些事件時所調用的方法
舉例：在元素上移動鼠標、選取單選按鈕、點擊元素
7.典型例子
- 點擊事件
$("p").click(function(){ $(this).hide(); });
- 雙擊事件
$("p").dblclick(function(){ $(this).hide(); });
- 當鼠標指針穿過元素時，會發生 mouseenter 事件
$("#p1").mouseenter(function(){ alert('您的鼠標移到了 id="p1" 的元素上!'); });
- 當鼠標指針移動到元素上方，並按下鼠標按鍵時，會發生 mousedown 事件
`$("#p1").mousedown(function(){ alert("鼠標在該段落上按下！"); });
hover()方法用於模擬光標懸停事件。
$("#p1").hover( function(){ alert("你進入了 p1!"); }, function(){ alert("拜拜! 現在你離開了 p1!"); } );`