JAVASCRIPT 语言

JAVASCRIPT语言 教师：朱振宇

一、JavaScript基础 • 1.1、JavaScript的语法 • 1.2、变量 • 1.3、数据类型 • 1.4、条件语句 • 1.5、循环语句 • 1.6、函数

1.1 JavaScript的语法 • 1、区分大小写 • 2、弱类型变量 var age =25; varmyName=“zhuzhenyu”; var school =“cjxy” ; var male =true; • 3、每行结尾的分号可有可无 • 4、括号用于代码块 if(myName== “zzy”){ var age = 18; alert(age); } • 5、注释的方式与C语言、Java相同

1.2 变量 • JavaScript中变量是通过var关键字（variable的缩写）来声明的。 • 首字符必须是字母（大小写均可）、下划线（_）或者美元符号（$）。 • 余下的字母可以是下划线、美元符号、任意字母或者数字字符。 • 变量名不能是关键字或者保留字。

1.3 数据类型 • 字符串（例：字符.html） • 数值 • 布尔值 • 数组

1.4 条件语句 • 比较操作符 • 逻辑操作符 • if语句 • switch语句

1.5 循环语句 • while语句 • for语句 for( vari=0; i<n; i++){ //循环代码段 }

1.6 函数 • function functionName([arg0,arg1,…, argN]){ statements [return [expression]] } 例：function sayName(sName){ alert(“Hello”+sName); } sayName(“大家好”);

二、DOM模型 • 2.1. DOM模型框架 • 2.2、DOM模型中的节点 • 2.3、使用DOM • 2.4、innerHTML

2.1DOM模型框架 • 文档对象模型DOM（Document Object Module）定义了用户操作文档对象的接口，可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新，它使得用户对HTML有了空前的访问能力。

2.1DOM模型框架 <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM Page</title> </head> <body> <h2><a href="#zzy">标题1</a></h2> <p>段落1</p> <ul id="myUl"> <li>JavaScript</li> <li>DOM</li> <li>CSS</li> </ul> </body> </html>

2.1DOM模型框架

2.2 DOM模型中的节点 • 元素节点 • 文本节点 • 属性节点 <a title=“CSS” href=“http://www.cjc.edu.cn”> 昌吉学院</a>

2.3 使用节点 • 访问节点(例)getElementsByTagName(例：访问节点1.html)getElementById (例：访问节点2.html) • 父子关系 • 节点的属性 • 创建新节点

2.4 innerHTML • innerHTML这个属性由于使用方便，也得到了目前主流浏览器的支持 • 该属性表示某个标记之间的所有内容，包括代码本身 • 该属性可以读取，同时还可以设置

三、JavaScript事件 • 3.1、事件流 • 3.2、事件监听 • 3.3、事件对象

3.1 事件流 • 冒泡型事件 • 捕获型事件

3.2 事件监听 • 简单的通用方法 • IE的方法 • 标准DOM的方法

3.3 事件对象 • IE浏览器中事件对象是window对象的一个属性eventoP.onclick=function(){varoEvent=window.event;} • DOM中规定event对象必须作为唯一的参数传给事件处理函数oP.onclick=function(oEvent){ //…..}

四、表格与表单 • 4.1、动态控制表格 • 4.2、表单基础 • 4.3、文本框

4.1、动态控制表格 • 动态添加 • 动态删除

4.2、表单基础 • 可以通过document.form集合来引用表单，例如一个name属性为“myForm1”的表单可以用如下语句来获得：document.forms[”myForm1″]。 • 基本的表单元素

4.3、文本框 • 控制字符个数 • 单行文本框的maxlength属性 • 自动选择文本 • 鼠标经过时自动聚焦，并且能够选中默认值以便用户直接删除

五、jQuery概述 • 5.1 jQuery概述 • 5.2 jQuery中的“$” • 5.3 选择器

5.1 jQuery概述 • jQuery是一个优秀的JavaScript框架 • 主要提供如下功能 • - 访问页面框架的局部 • - 修改页面的表现 • - 更改页面的内容 • - 响应事件 • - 为页面添加动画 • - 与服务器异步交互 • - 简化常用的JavaScript操作 • 隔行变色的表格 • - CSS的实现方法 • - JavaScript的实现方法 • - jQuery的实现方法 • 下载并使用jQuery • - 官方网站（http://jquery.com/） • - 不需要任何安装过程

5.2 jQuery的“$” • 选择器 • 功能函数前缀 • window.onload • 　 - window.onload的冲突 • - ready()方法$(document).ready(function(){ //… $(function(){ //…}); • 创建DOM元素

5.3选择器 • 属性选择器 • 位置选择器

六、jQuery控制页面 • 6.1 标记的属性 • 6.2 元素的样式 • 6.3 页面的元素 • 6.4 jQuery处理事件

6.1 标记的属性 • 获取属性的值 • 设置属性的值

6.2 元素的样式 • 添加CSS类 • 动态切换

6.3 页面的元素 • 直接获取、编辑内容 • 克隆元素

6.4 jQuery处理事件 • 事件监听 • 移除事件监听

七、jQuery动画特效 • 7.1 元素的显示与隐藏 • 7.2 渐入渐出的变幻 • 7.3 幻灯片效果

7.1 元素的显示与隐藏 • show()和hide()

7.2渐入渐出的变幻 • show()和hide() • fadeIn()和 fadeOut()

7.3 幻灯片效果 • slideUp()和slideDown()来模拟PPT中的类似幻灯片拉窗帘的特效

JAVASCRIPT 语言