javascript笔记

1、javascript笔记一、Javascript概述(知道)a.一种基于对象和事件驱动的脚本语言b.作用： 给页面添加动态效果c.历史： 原名叫做livescript.W3c组织开发的标准叫ECMAscipt.d.特点： 1). 弱势语言 2). 由浏览器直接解析执行。（函数不能直接执行） 3). 是一个解释性语言 4). 交互性（它可以做的就是信息的动态交互） 5). 安全性（不允许直接访问本地硬盘） 6). 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关e . javascript和java的一些区别： 1). javascript是一个解释性语言,java是编译解释性语言 2

2、). javascript是一个弱势语言，Java是一个强势语言 3). 在页面上引入的方式不同javascript代表用引入，Java代码 4). JS是基于对象，Java是面向对象。二、JavaScript语言组成(了解) EcMAScript + BOM + DOM ECMAScript: 规定了一些语法，变量，for循环等等结构 BOM: Browser object Model 浏览器对象模型 DOM: Document object Model 文档对象模型三、JavaScript与Html的结合方式(掌握)Javascript与HTML的结合方式有三种：1.采用事件来调用，代码写

3、在字符串中点击2.采用定义函数的方式: 用function来定义函数 function fun() alert(你好) ;3.采用外部js文件.利用引入四、JavaScript基本语法(掌握)* 定义变量：采用var关键字来定义.定义的变量的类型是由给定的值来决定的。* 数据类型： undifined,表示未定义类型。 Number类型。代表了一切数字类型 String类型。字符串类型 Boolean类型。布尔类型 Function类型。函数类型 Null类型。 object ：对象类型. * 判断变量的类型 : 1. 采用typeof函数判断 :typeof(a) = string 2. 采

4、用instanceof运算符： a instanceof String* 三大结构a.顺序结构b.选择结构c.循环结构 for,while,do.while * 运算符1.一元运算符 +(正号) - + - 2.二元运算符 +(加法) - * / %3.三元运算符 ？ ：4.等号 = 判断的是内容,= 全等于 ,判断类型和内容 * 类型的转换1. Number转String : 3 + 2. Number转Boolean ：在javascript中，非0为真，0为假。如果变量为null或者undefined，也为假.3. String转Number:a. parseInt,parseFloat

5、b. 乘以1即可五、JavaScript 函数的定义（掌握）* 函数的定义有三种方式： 1.采用function关键字来定义2.采用匿名的方式来定义3.采用new Function()的方式(了解,不推荐)* 函数的调用：1.函数调用的时候参数可以传递多个，可以和函数定义的形参个数不符合2.如果函数重名了，那么调用的时候一定是调用最后一个，与参数无关。* 推荐： 定义函数的不要重名。函数劫持：改变函数本身的作用.六、JavaScript 全局函数(掌握)全局函数：1.isNaN (掌握)：用来判断变量是否是数字类型的字符串NaN: not a Number ,不是一个数字2.parseInt,

6、parseFloat3.eval(掌握): 把字符串转换成数字4.escape(): 编码5.unescape(): 解码6.encodeURI(): 对网址（URL）进行编码7.decodeURI(): 对网址（URL）进行解码七、JavaScript常用对象介绍（掌握）* Array对象 数组对象，进行数组操作定义方式1.采用new的方式2.采用中括号来定义数组的长度可以随时改变特点： 1.javascript中数组的大小可以随时改变2.javascript中数组的下标可以是任意对象。方法： 1.join() : 把数组的所有元素放入一个字符串. 默认用逗号连接2.push() : 向数组

7、的末尾添加一个元素4.reverse() :反转3.shift() : 删除并返回数组的第一个元素4.sort() ; 排序 .默认同类型的数据相比较.* String对象 - 字符串类型的引用类型String对象： 方式：substr: 截取字符串 两个参数第一个是下标，第二个是长度substring: 截取字符串 两个参数第一个是下标，第二个是下标toUppercase:toLowercase:indexOf:charAt() :replace():* Number对象 - 数字原始类型引用类型Num对象：1. random() : 获得随机数0,1)2. ceil() : 返回大于等于次

8、数的最大整数3. floor() : 返回小于等于次数的最大整数4. round(): 返回四舍五入后的整数* Boolean对象 - 布尔原始类型引用类型 * Math对象 执行数学任务* Date对象 用于处理日期和时间Date对象： 代表一个时间方法： getXXX() : 拿到年月日* RegExp 对象正则表达式对象 正则表达式写法： 1. new的方式 var r = new RegExp(ab) ; 2. 采用/正则表达式/ (推荐) var r = /ab/ ;DOM笔记1.BOM的概述 browser object modal :浏览器对象模型。 浏览器对象：window对象

9、。 Window 对象会在 或 每次出现时被自动创建。2. window的属性 innerHeight: innerWidth: IE不支持通用写法：document.body.clientWidth document.body.clientHeight self :等同于window对象 parent：是打开窗口的父窗口对象 opener：是打开窗口的父窗口对象。2种情况下使用opener: 1.使用winodw.open()方法打开的页面 2.超链（里面的target属性要设置成_blank）2种情况下使用parent: 1.iframe 框架 2.frame 框架 frames: 数组类

10、型，代表子窗口的window对象的集合,可以通过frames索引拿到子窗口的window对象。示例：父子窗口相互传参. open方法，是打开一个页面. 对话框： 1)消息框 alert() ; 2)确认框 confirm() ; 3)输入框 prompt() ; (了解) 定时器： setTimeout ,setInterval 定时器： 1.setTimeout() :只会调用1次 2.setInterval() ：每隔一段时间调用1次 3. history对象 a. forward()前进 b. back() 后退 c. go(n) 正数是前进，负数是后退.4. location对象。 1

11、.href 属性： 是指要连接到其他的URL写法一、window.location.href=demo_window对象的close方法.html ；写法二、window.location=demo_window对象的close方法.html ；2.reload方法: 刷新写法： window.location.reload() ；5.常用事件鼠标移动事件onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定 onmouseover : 鼠标悬停事件onmouseout : 鼠标移出事件 鼠标点击事件onclick 加载与卸载事件 onload ,onunloa

12、d聚焦与离焦事件onfocus, onblur键盘事件onkeypress,onkeyup,onkeydown提交与重置事件onsubmit,onreset选择与改变事件 一、知识回顾* BOM 概述* BOM 的各个对象 * window对象 innerHeight，innerWidth document.body.clientWidth,document.body.clientHeight,selfopener :超链和window.open() parent : iframe和frameframes: 三种对话框： alert(),prompt(),confirm()定时器： setTi

13、meout(),setInterval() 模态窗口： showModalDialog() ,showModelessDialog() * History对象forward() ,back(),go()* Location对象.二、内容* 事件（掌握，明白每个事件发生的时机）鼠标移动事件* onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定 * onmouseover : 鼠标悬停事件鼠标悬停事件： 当鼠标移动到某个控件上面的时候发生this: 把this写在那个标签里面就代表那个标签对象this.style.backgroundColor : 当调用样式表

14、中的属性的时候，如果属性中间有横杠，则应去掉. 示例： 当鼠标移动到p标签上的时候，p标签改变样式 (参见demo01_鼠标悬停事件.html)* onmouseout : 鼠标移出事件鼠标移开事件： 当鼠标从控件上移开的时候示例参见(demo_02_鼠标移开事件.html ; * 鼠标点击事件onclick : 当鼠标单击某个控件时发生示例： 当单击按钮时，在中显示字符串 冠希哥来了 参见(demo03_鼠标单击事件.html)* 加载与卸载事件 onload ,onunload加载事件(onload) : 在整个页面的元素加载完毕之后发生卸载事件(onunload) : 是在页面关闭时发生

15、 注意： onload和onunload事件必须写在body或者图片标签里面 示例参见（demo04_加载卸载事件.html） * 聚焦与离焦事件onfocus, onblur聚焦事件：是在控件获得焦点的时候发生离焦事件：是在控件失去焦点的时候发生示例： 文本框获得焦点的时候改变样式，失去焦点时变回原样(参见demo05_聚焦离焦事件.html)* 键盘事件onkeypress,onkeyup,onkeydownonkeypress: 按下键盘按键并松开onkeydown : 按下按键发生onkeyup: 松开按键示例参见（demo06_键盘事件.html）* 提交与重置事件onsubmit,

16、onreset提交事件： 是在点击提交按钮后发生。(必须写在form表单中)重置事件： 是在点重置交按钮后发生。示例： 提交表单中的数据(检查):如果是陈冠希：通过，否则不能提交数据（参见demo07_提交重置事件.html）* 选择与改变事件 onselect:onchange:onselect: 只能用于输入框. 当选择输入框中的文本时发生onchange: 用于select和文本框.对于下拉框是在选项发生变化的时候发生对于文本框是在文本框的内容发生变化并且失去焦点时发生示例： 当选择文本框的内容时，弹出文本框的内容下拉框的selectedIndex属性：代表选中某项的索引 参见(demo

17、08_选择与改变事件.html)DOM技术1.Dom概述？* 什么是DOM？ docuemnt object model 文档对象模型* 它的作用？ 重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目* 分类？ Core DOM : 定义了一套标准的针对任何结构化文档的对象 XML DOM : 定义了一套标准的针对 XML 文档的对象 HTML DOM : 定义了一套标准的针对 HTML 文档的对象。 *.xml介绍？expensible markup language : 可扩展标记语言.张无忌232.DOM树* 结点 : 文档中的每个成分都是一个节点.(包括文本也是节点)*

18、.结点的属性a. nodeName（节点名称） 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document b. nodeValue（节点值） 对于文本节点，nodeValue 属性包含文本。对于属性节点，nodeValue 属性包含属性值。nodeValue 属性对于文档节点和元素节点是不可用的。c. nodeType（节点类型） : nodeType 属性可返回节点的类型。标签节点的类型值是 1属性节点的类型值是 2文本节点的类型值是 3*. 结点的分类整个文档是一个文档节点 每个 XML 标签是一个元素节点 包含在 XML 元素中的文本是文本节点 每一个 XML 属性是一个属性节点 注释属于注释节点 *.结点的关系只有父子和兄弟关系parentNode : 父节点childNodes ：所有的子标签firstChild ：第一个儿子lastChild ：最后一个儿子nextSibling ：下一个兄弟节点previousSibling ：上一个兄弟节点*. 对结点进行CRUD操作*.查找结点？两种方式： a. 采用节点之间的关系去拿 根节点： document.documentElement ; b. 采用方法去拿