一、jQuery 语法:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
1、$(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
<html> <head> <script type="text/javascript" src="jquery-1.7.1.min.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>
2、 jQuery hide() 函数,隐藏 id="test" 的元素。
$("#test").hide();
<html> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#myID").hide(); }); }); </script> </head> <body> <p>If you click on me, I will dispperar</p> <p id="myID">This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html>
3、$("p").hide() 表示隐藏所有 <p> 元素。
4、 $(".test").hide()表示隐藏所有 class="test" 的元素。
<html> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $(".myClass").hide(); }); }); </script> </head> <body> <p>If you click on me, I will dispperar</p> <p id="myID">This is a paragraph.</p> <p class="myClass">This is another paragraph.</p> <button type="button">Click me</button> </body> </html>
二、所有的JQuery函数都位于下面的函数中
$(document).ready(function(){
--- jQuery functions go here ----
});