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

转载于:https://www.cnblogs.com/MR_ke/archive/2010/02/26/1674093.html

JQuery的摸索之路（二比较）相关推荐

自动化测试工程师摸索之路---数据准备(网络爬虫)- 测试篇
需求验证爬取数据自动化测试工程师摸索之路-数据准备(网络爬虫) 的准确性测试方法描述为了更全面展示图片, 删除序号列, 所属项目列, 需求参考列, 案例类型列, 预期结果列, 备注列模板: ...
App项目实战之路(二):API篇
原创文章,转载请注明:转载自Keegan小钢并标明原文链接:http://keeganlee.me/post/practice/20160812 微信订阅号:keeganlee_me 写于2016- ...
Sharepoint摸索之路
接触Windows SharePoint有一段时间咯,一直忙来忙去的,学得也不好,学得更是基础的基础,但是我的学习过程真的让人吸取...我想现在这个Windows SharePoint的应用也会被 ...
jQuery相当于对 javascript二次开发，所以基于 jQuery实现的各种插件直接调用即可...
jQuery相当于对 javascript二次开发,所以基于 jQuery实现的各种插件直接调用即可转载于:https://www.cnblogs.com/npk19195global/p/4482 ...
使用jQuery的插件qrcode生成二维码（静态+动态生成）及常见问题解决方法
使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法参考文章: (1)使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法 (2)https: ...
H5案例分享：jquery.qrcode.js生成简易二维码
近期做项目需要生成二维码,并且解码获取信息,jquery.qrcode.js生成二维码比较的方便,写个教程分享给大家.欢迎大家测试留言,我会改进代码. 现在二维码越来越流行啦,支付扫二维码,关注扫二维 ...
jQuery带logo的网页二维码生成
jquery生成带logo的二维码非常非常简单主要引用utf.js/jquery.qrcode.js jquery.qrcode.js是下载之后修改过的,如果大家想要可以去我的网盘下载链接地址:h ...
六级考研单词之路-二十一
title: 六级考研单词之路-二十一 date: 2020-12-08 11:31:40 tags: 六级考研单词之路 Day21 1.steak[n.牛排,肉排] 2.rice[n.米饭] 3.s ...
ES进阶之路二(ES7-ES12)
简介 JavaScript是世界上发展最快的编程语言之一,不仅可以用于编写运行在浏览器的客户端程序,随着Node.js的发展,JavaScript也被广泛应用于编写服务端程序.而随着JavaScrip ...

JQuery的摸索之路（二比较）

JQuery的摸索之路（二比较）相关推荐

最新文章

热门文章