jquery 基础

 

 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 库
posted @ 2017-11-02 16:37  千彧  阅读(133)  评论(0)  编辑  收藏  举报