一、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中函数的简单应用
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代码。
如果触发事件时要执行的语句比较多,则可以在事件属性中写入函数调用的语句,而把被调用的函数定义在其他地方。
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代码使用事件:
对象.事件 = 函数名
也就是把对象所拥有的事件当成一个属性,可以被赋值。
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="#" οnclick="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()来表现:
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 数据:
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 }