jQuery 語法
jQuery 語法是爲 HTML 元素的選取編制的,可以對元素執行某些操作。
基礎語法是:$(selector).action()
- 美元符號定義 jQuery
- 選擇符(selector)“查詢”和“查找” HTML 元素
- jQuery 的 action() 執行對元素的操作
示例
$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有段落
$("p.test").hide() - 隱藏所有 class="test" 的段落
$("#test").hide() - 隱藏所有 id="test" 的元素
jQuery 事件
下面是 jQuery 中事件方法的一些例子:
Event 函數 | 綁定函數至 |
---|---|
$(document).ready(function) | 將函數綁定到文檔的就緒事件(當文檔完成加載時) |
$(selector).click(function) | 觸發或將函數綁定到被選元素的點擊事件 |
$(selector).dblclick(function) | 觸發或將函數綁定到被選元素的雙擊事件 |
$(selector).focus(function) | 觸發或將函數綁定到被選元素的獲得焦點事件 |
$(selector).mouseover(function) | 觸發或將函數綁定到被選元素的鼠標懸停事件 |
下面是一個簡單的例子
<html>
<head><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//當鼠標停留在此段落時背景顏色將會變化
$("p").mouseover(function(){
$("p").css("background-color","yellow")
})
//將此段落的背景顏色設爲紅色
$("p").css("background-color","red")
//class爲test的操作
$("p.test").hide();
//id爲test的操作
$("#test").hide();
$("button").click(function(){
$("p").hide();
})
})
</script>
</head>
<body>
<h2>你好</h2>
<p>點擊我會隱藏哦</p>
<!class為test的將會隱藏 -->
<p class="test">一開始我就隱藏</p>
<!id爲test的將會隱藏 -->
<p id="test">一開始我就隱藏</p>
<button type="button">
hello!點擊我!
</button>
</body>
</html>