jQuery 語法實例
- $(this).hide()
- 演示 jQuery hide() 函數，隱藏當前的 HTML 元素。
- $("#test").hide()
- 演示 jQuery hide() 函數，隱藏 id="test" 的元素。
- $("p").hide()
- 演示 jQuery hide() 函數，隱藏所有 <p> 元素。
- $(".test").hide()
- 演示 jQuery hide() 函數，隱藏所有 class="test" 的元素。
jQuery 語法
jQuery 語法是爲 HTML 元素的選取編制的，可以對元素執行某些操作。
基礎語法是：$(selector).action()
- 美元符號定義 jQuery
- 選擇符（selector）“查詢”和“查找” HTML 元素
- jQuery 的 action() 執行對元素的操作
示例
$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有段落
$("p.test").hide() - 隱藏所有 class="test" 的段落
$("#test").hide() - 隱藏所有 id="test" 的元素
文檔就緒函數
您也許已經注意到在我們的實例中的所有 jQuery 函數位於一個 document ready 函數中：
$(document).ready(function(){
--- jQuery functions go here ----
});
這是爲了防止文檔在完全加載（就緒）之前運行 jQuery 代碼。
jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取 <p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取 id="demo" 的第一個 <p> 元素。
jQuery 屬性選擇器
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
jQuery CSS 選擇器
jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。
下面的例子把所有 p 元素的背景顏色更改爲紅色：
實例
$("p").css("background-color","red");
jQuery 名稱衝突
jQuery 使用 $ 符號作爲 jQuery 的簡介方式。
某些其他 JavaScript 庫中的函數（比如 Prototype）同樣使用 $ 符號。
jQuery 使用名爲 noConflict() 的方法來解決該問題。
var jq=jQuery.noConflict()，幫助您使用自己的名稱（比如 jq）來代替 $ 符號。
example：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
var jq=jQuery.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>結論
由於 jQuery 是爲處理 HTML 事件而特別設計的，那麼當您遵循以下原則時，您的代碼會更恰當且更易維護：
- 把所有 jQuery 代碼置於事件處理函數中
- 把所有事件處理函數置於文檔就緒事件處理器中
- 把 jQuery 代碼置於單獨的 .js 文件中
- 如果存在名稱衝突，則重命名 jQuery 庫
