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