JQuery的摸索之路（二比较）

1.修改text1里的值为‘abc’

   我们传统的做法是：

 

1 window.document.form1.Text1.value=‘ABC’;

 

再精简的做法是

 

document.getElementById(‘Text1’).value=‘ABC’;
document.all(‘Text1’).value=‘ABC’;  //(只支持IE)

JQuery的写法是：

 

1 $(‘#Text1’).val(‘ABC’);

 

2.按下按钮显示隐藏div的内容：

传统的做法

 

 1 function button1_onclick() {
 2     var div1=document.getElementById('div1');
 3     if(div1.style.display=='')
 4     {
 5         div1.style.display='none';
 6     }
 7     else
 8     {
 9         div1.style.display='';
10     }
11 }
12  

JQuery做法

 

1 $('#button2').click(function(){
2      $('#div2').toggle(); 
3 });
4  

html代码：

 

代码 
 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryDemo1.aspx.cs" Inherits="JqueryDemo1" %>
 2 
 3  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 
 5  <html xmlns="http://www.w3.org/1999/xhtml">
 6  <head runat="server">
 7  <script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script>
 8  <style>
 9 .d1
10  {
11     background-color:Red;
12     color:White;
13     }
14  </style>
15 <script type="text/javascript" language=javascript>
16 function button1_click()
17 {
18 var div1=document.getElementById("div1");
19 if(div1.style.display=='')
20 {
21 div1.style.display="none";
22 }
23 else
24 {
25 
26 div1.style.display='';
27 }
28 
29 }
30 
31 $(document).ready(function(){
32 $('#Button2').click(function()
33 {
34 $('#div2').toggle();
35 });
36 }
37 )
38 
39 $(document).ready(
40 function(){
41 //给div1加class d1
42 $('#Button1').click(
43 function(){
44 $('#div1').addClass('d1');
45 })
46 //给所有div加 class d1
47 $('#Button2').click(
48 function()
49 {
50 $('div').addClass('d1');
51 
52 }
53 )
54 
55 }
56 )
57 
58 
59 </script>
60     <title>未命名頁面</title>
61 </head>
62 <body>
63     <form id="form1" runat="server">
64     <input id="Button1" type="button" value="button" onclick="return button1_click()" />
65     <div id="div1" runat="server">
66     div1<br />
67        div1<br />
68           div1<br />
69              div1<br />
70                 div1<br />
71                    div1<br />
72     </div>
73     <input id="Button2" type="button" value="button" />
74         <div id="div2" runat="server">
75     div1<br />
76        div1<br />
77           div1<br />
78              div1<br />
79                 div1<br />
80                    div1<br />
81     </div>
82     </form>
83 </body>
84 </html>
85

 

posted on 2010-02-26 11:54  MR_ke  阅读(644)  评论(3)  编辑  收藏  举报

导航