17
JavaScript – 深深深深

Javascript 培训第四节 深入了解

  • Upload
    liziqi7

  • View
    692

  • Download
    11

Embed Size (px)

Citation preview

Page 1: Javascript 培训第四节 深入了解

JavaScript – 深入了解

Page 2: Javascript 培训第四节 深入了解

刘遵强 | [email protected]

Page 3: Javascript 培训第四节 深入了解
Page 4: Javascript 培训第四节 深入了解

Undefined Null Boolean Number String

数组的使用• 定义

– var arr=[12, 5, 8, 9];– var arr=new Array(12, 5, 8, 9);– 没有任何差别, [] 的性能略高,因为代码短

• 获取、设置– arr[ 序号 ]

数组的属性• length

– 既可以获取,又可以设置– 例子:快速清空数组

数组基础数组基础

Page 5: Javascript 培训第四节 深入了解

添加、删除元素添加、删除元素数组的方法

• 添加– push( 元素 ) ,从尾部添加– unshift( 元素 ) ,从头部添加

• 删除– pop() ,从尾部弹出– shift() ,从头部弹出

Page 6: Javascript 培训第四节 深入了解

排序、转换排序

• sort([ 比较函数 ]) ,排序一个数组– 排序一个字符串数组– 排序一个数字数组

转换类• concat( 数组 2)

– 连接两个数组• join( 分隔符 )

– 用分隔符,组合数组元素,生成字符串– Splice() 字符串转数组

Page 7: Javascript 培训第四节 深入了解

splice• splice( 开始 , 长度 , 元素… )• 先删除,后插入

删除• splice( 开始 , 长度 )

插入• splice( 开始 , 0, 元素… )

替换数组使用原则:数组中应该只存一种类型的变量

Page 8: Javascript 培训第四节 深入了解

JS 事件初步 (1)

this 关键字• 当前发生事件的元素

– 例子:输入框高亮– onfocus 、 onblur

this 注意事项• 只有事件处理函数中才能用 this• 不能用 this :行间、定时器中、非事件处理函数、绑

定事件处理函数

• 添加、替换、删除• 不能添加多个,不然会相互覆盖——事件绑定

Page 9: Javascript 培训第四节 深入了解

JS 事件初步 (2)

事件绑定• IE 方式

– attachEvent( 事件名称 , 函数 ) ,绑定事件处理函数– detachEvent( 事件名称 , 函数 ) ,解除绑定

• DOM 方式– addEventListener( 事件名称 , 函数 , 捕获 )– removeEventListener( 事件名称 , 函数 , 捕获 )

• 绑定匿名函数,会无法删除• 绑定事件和 this

Page 10: Javascript 培训第四节 深入了解

课程应用多图片展开 ( 静态 )

• 层级处理3D 图片轮换 ( 静态 )

• ?

Page 11: Javascript 培训第四节 深入了解

数组常用方法this 的用法动态绑定事件处理函数

Page 12: Javascript 培训第四节 深入了解
Page 13: Javascript 培训第四节 深入了解
Page 14: Javascript 培训第四节 深入了解

本课练习 (1)

基础• 当前输入框高亮显示• 数组练习:各种数组方法的使用• 事件练习:封装兼容性添加、删除事件的函数

Page 15: Javascript 培训第四节 深入了解

本课练习 (2)

选做• 评分系统

Page 16: Javascript 培训第四节 深入了解
Page 17: Javascript 培训第四节 深入了解

2012 年 08 月 02 日