1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> demo1 </TITLE> 5 <script type="text/javascript" type="text/javascript" src="jquery-3.1.1.min.js"></script> 6 <script type="text/javascript"> 7 /* 8 Jquery 基础语法：$(selector).action() 9 10 美元符号定义 jQuery 11 选择符（selector）“查询”和“查找” HTML 元素 12 jQuery 的 action() 执行对元素的操作 13 14 */ 15 16 $(document).ready(function(){ 17 //实例中的所有 jQuery 函数位于一个 document ready 函数中： 18 //这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。 19 $("button").click(function(){ 20 $(this).hide(); 21 $("#h1").hide(); 22 $(".h2").hide(); 23 $("p").hide(); 24 }); 25 26 $("#h1").click(function(){ 27 $(this).hide(); 28 }); 29 30 $(".h2").click(function(){ 31 $(this).hide(); 32 }); 33 34 $("p").click(function(){ 35 $(this).hide(); 36 }); 37 }); 38 </script> 39 </HEAD> 40 41 <BODY> 42 <button type="button">Click me</button><br/> 43 <h id="h1">Test Head 1</h> <br/> 44 <h class="h2"> Test Head 2</h> 45 <p class="p1">test paragraph 1</p> 46 <p class="p2">test paragraph 2</p> 47 </BODY> 48 </HTML>
由于javascript有些其他库函数也用$开头为避免混淆可以使用使用名为 noConflict() 的方法来解决该问题。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <html> 3 <head> 4 <script src="jquery-3.1.1.min.js"></script> 5 <script> 6 jq = $.noConflict(); 7 jq(document).ready(function(){ 8 jq("button").click(function(){ 9 jq("p").text("jQuery 仍在运行！"); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <p>这是一个段落</p> 16 <button>测试 jQuery</button> 17 </body> 18 </html>
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
- 把所有 jQuery 代码置于事件处理函数中
- 把所有事件处理函数置于文档就绪事件处理器中
- 把 jQuery 代码置于单独的 .js 文件中
- 如果存在名称冲突，则重命名 jQuery 库