272
技術社區[雲棲]
jQuery學習筆記（一）簡介、語法、HIDE實例
向您的頁麵添加 jQuery 庫
jQuery 庫位於一個 JavaScript 文件中，其中包含了所有的 jQuery 函數。
可以通過下麵的標記把 jQuery 添加到網頁中：
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
請注意，<script> 標簽應該位於頁麵的 <head> 部分。
庫的替代
Google 和 Microsoft 對 jQuery 的支持都很好。
如果您不願意在自己的計算機上存放 jQuery 庫，那麼可以從 Google 或 Microsoft 加載 CDN jQuery 核心文件。
使用 Google 的 CDN
<head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head>
使用 Microsoft 的 CDN
<head> <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> </head>
我的第一個jQuery程序
$(this).hide()
演示 jQuery 的 hide() 函數，隱藏當前的 HTML 元素。
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果你點擊我，我就消失</p>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
});
</script>
</head>
<body>
<button type="button">Click me</button>
</body>
</html>
演示 jQuery 的 hide() 函數，隱藏所有 <p> 元素。
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading (h)</h2>
<p>This is a paragraph. (p)</p>
<p>This is another paragraph. (p)</p>
<p>如果你點擊我，我就消失</p>
<button type="button">Click me</button>
</body>
</html>
$("#test").hide() 演示 jQuery hide() 函數，隱藏 的元素。
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("#zzk").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>
$(".test").hide() 演示 jQuery hide() 函數，隱藏所有 的元素。
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(".zzk").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 語法
jQuery 語法是為 HTML 元素的選取編製的，可以對元素執行某些操作。
基礎語法是：$(selector).action()
- 美元符號定義 jQuery
- 選擇符（selector）“查詢”和“查找” HTML 元素
- jQuery 的 action() 執行對元素的操作
示例
$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有段落
$("p.test").hide() - 隱藏所有 的段落
$("#test").hide() - 隱藏所有 的元素
提示：jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。在本教程接下來的章節，您將學習到更多有關選擇器的語法。
文檔就緒函數
您也許已經注意到在我們的實例中的所有 jQuery 函數位於一個 document ready 函數中：
$(document).ready(function(){
--- jQuery functions go here ----
});
這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼。
如果在文檔沒有完全加載之前就運行函數，操作可能失敗。下麵是兩個具體的例子：
- 試圖隱藏一個不存在的元素
- 獲得未完全加載的圖像的大小
最後更新：2017-04-02 06:52:21