JavaScript、jQuery在ASP.NET中的应用

来源：互联网发布：宝洁电商的优化编辑：程序博客网时间：2024/05/16 01:06

一、JavaScript（帮助文档）

1.在Web页面中使用JavaScript的方法

（1）、在HTML中嵌入JavaScript：

如： <script language="javascript"> document.write("Hello World!");</script>

（2）、链接JavaScript文件：

如： //网页文件
<script language="javascript" src="JScript.js"> </script>

// JScript.js 文件
document.write("Hello Word!");

2.Javascript中函数的简单应用

代码

 1 <script language="javascript">
 2             function Max(x,y)
 3             {
 4                 if(x>y)
 5                   return x;
 6                 else
 7                   return y;
 8             }
 9             var z;
10             z = Max(100,200);
11             document.write("Max(100,200)="+z);
12  </script>

3.Javas中的事件驱动使用方法

（1）、通过HTML标记使用事件：

许多HTML标记允许加上以事件名为名的属性。对应的属性值就是JavaScript代码。
如果触发事件时要执行的语句比较多，则可以在事件属性中写入函数调用的语句，而把被调用的函数定义在其他地方。

代码

 1 <script language="javascript" type="text/javascript">
 2            function Message()
 3            {
 4                alert('红色');
 5            }
 6  </script>
 7  <table style="width: 100%">
 8      <tr>
 9          <td style="background-color: blue" onclick="alert('蓝色');">
10          &nbsp;</td>
11      </tr>
12      <tr>
13           <td style="background-color: red" onclick="Message();">
14           &nbsp;</td>
15      </tr>
16 </table>

（2）、通过JavaScript代码使用事件：

对象.事件 = 函数名
也就是把对象所拥有的事件当成一个属性，可以被赋值。

代码

 1 <table style="width: 100%">
 2             <tr>
 3                 <td style="background-color: blue" id="blue">
 4                     &nbsp;</td>
 5             </tr>
 6             <tr>
 7                 <td style="background-color: red" id="red">
 8                     &nbsp;</td>
 9             </tr>
10  </table>
11 
12  <script language="javascript" type="text/javascript">
13            function Message()
14            {
15               if(this.id == "blue")     alert('蓝色');
16               else                             alert('红色');
17            }
18            document.all("blue").onclick=Message;
19            document.all("red").onclick=Message;
20  </script>

4.浏览器对象

部分常用的浏览器对象如：窗口对象（window）、文档对象（document）、表单对象（form）其使用见帮助文档。

二、jQuery（帮助文档）

1.什么是jQuery

jQuery是一套Javascript脚本库。脚本库能够帮助我们完成编码逻辑,实现业务功能. 使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮.同时网络上丰富的jQuery插件也让我们的工作更加容易。

2.jQuery的使用

如:$(document).ready(function() {
       $("a").click(function() {
            alert("Hello jQuery!");
       });
});

注：DOM = Document Object Model，文档对象模型，根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。

     $(document).ready(…)表示DOM载入后开始执行的事件。
     $("a") 是一个jQuery选择器(selector),在这里，它选择所有的a标签（即<a></a>），$号是 jQuery “类”(jQuery "class")的一个别称，因此$()构造了一个新的jQuery 对象(jQuery object)。
     click() 函数是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法. 类似功能：
     <a href="#" onclick="alert('Hello world')">Link</a>

优点：用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的。

3.jQuery的几个实例

（1）、jQuery提供两种方式来选择html的elements
          第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$(“div > ul a”)）；
          第二种是用jQuery对象的几个methods(方法)。
          这两种方式还可以联合起来混合使用。

（2）、Animate me(让我生动起来):使用FX

如，一些动态的效果可以使用 show() 和 hide()来表现:

代码

 1 $(document).ready(function() { 
 2       $("a").toggle(function() { 
 3             $(".stuff").hide('slow'); 
 4       }, function() { 
 5             $(".stuff").show('fast'); 
 6      }); 
 7 }); 
 8 $(document).ready(function() { 
 9       $("a").toggle(function() { 
10              $(".stuff").animate({ 
11                    height: 'hide', opacity: 'hide' 
12              }, 'slow'); 
13       }, function() { 
14              $(".stuff").animate({ 
15                    height: 'show', opacity: 'show' 
16              }, 'slow'); 
17       }); 
18 });

（3）、Sort me(将我有序化):使用tablesorter插件(表格排序)
三、补充：JSON

和 XML 一样，JSON 也是基于纯文本的数据格式。由于 JSON 天生是为 JavaScript 准备的，因此，JSON 的数据格式非常简单，您可以用 JSON 传输一个简单的 String，Number，Boolean，也可以传输一个数组，或者一个复杂的 Object 对象。JavaScript 处理 JSON 数据：

代码

1 function handleJson() {
2 　var j={"name":"Michael","address":
3 　　　    {"city":"Beijing","street":" Chaoyang Road ",  
4                   "postcode":100025}
5 　};
6 　document.write(j.name);
7 　document.write(j.address.city);
8 }