本文介绍了JavaScript在ASP.NET中的使用方法，包括HTML中嵌入JS、函数应用、事件驱动及浏览器对象使用。同时，深入探讨了jQuery的基础知识、选择器、动画效果及排序插件的应用，并对比了jQuery与传统JS在事件绑定上的区别。
JavaScript、jQuery在ASP.NET中的应用
一、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
}
扫一扫
1825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
