实用参考Javascript知识点汇总.docx

1、实用参考Javascript知识点汇总HTML概要知识点梳理 21、了解HTML的概念 22、熟练掌握HTML的文档结构。 23、标签的分类 2块记标签： 2行级标签： 3掌握灵活运用实际开发中常用的4中布局结构： 3注意编写习惯： 3超链接的应用： 3表单的应用： 4下拉列表框： 5多行文本框 5只读和禁用属性 6隐藏域： 6Css样式表 6常用样式设置总结 7超链接伪类样式 7各类样式的优先级 7Javascript知识点汇总 7一、JavaScript理论知识点的理解： 81、JavaScript定义 82、JavaScript组成。 93、JavaScript的基本结构 94、Java

2、Script的引用方式 9二、JavaScript核心语法 101、语法约定： 102、变量： 103、数据类型： 104、运算符： 10三、JavaScript基本应用 111、消息框： 112、数组： 11JavaScript中的forin迭代语句： 123、函数： 134、事件： 145、其他注意事项： 14四、JavaScript中的对象 15一、BOM和DOM对象有哪些区别：（了解） 15二、BOM对象 16Window对象属性 16window对象常用的方法： 17三、DOM对象 17Document对象常用的属性 18Document对象的常用方法 18getElementBPG

3、G获得元素节点 18HTML概要知识点梳理1、了解HTML的概念HTML是超文本标记语言，他是随着浏览器（IE谷歌）的发展而诞生出来的一种标记语言，是一种用来制作超文本文档的语言。（注意：他并不是一种编程语言列如：cc+vb.）.理解：所谓标记语言我们可以把它理解为一中符号标记，不同的符号有着不同效果。超文本：包括声音，图片，影视等等。2、熟练掌握HTML的文档结构。这里需要注意的地方若标题标签书写错误会导致文档无法显示。（虽然浏览器现在能够自动补全代码）3、标签的分类块记标签：.（常用与带有列表的数据或菜单）（常用数据描述）（常与大数据|表单布局场合）（标题） （内容）(跨行列合并) /ta

4、ble (常用与页面布局)(绘制一条水平线一般用于网页脚部)(用于表单数据)(超链接|锚链接)行级标签：(用于改变某个单一字体的样式)（换行）掌握灵活运用实际开发中常用的4中布局结构：1、div-ul(ol)-li：常用于分类导航或菜单等2、div-dl-dt-dd：常用于图文混编的场合3、table-tr-td：常用于图文布局或显示数据4、form-table-tr-td：常用于布局表单注意编写习惯：1、标签名和属性名称尽量小写（属性值具有语义化）2、HTML标签必须成对出现。（单标签除外）3、属性值必须用引号括起来（注意单引号和双引号应用场合）4、标签必须正确嵌套5、内容样式功能分离出来。

5、超链接的应用：被链接的文本|图片超链接当前位置同页面的锚链接目标位置当前位置不同页面的锚链接另一个网页的目标位置（注意：与同一页面写格式不一样）站长信箱邮箱链接（需要有邮箱工具）表单的应用：tPpe功能例子teGt单行文本输入(默认类型)password密码radio单选（name属性值一样）男女checkboG多选书画reset重置表单数据file文件上传submit提交表单数据(提交到action位置)image图形提交按钮（只有提交功能）button普通按钮（添加加事件）下拉列表框：格式：例子：选择月份一月二月三月四月多行文本框格式：文本内容例子：欢迎阅读服务条款协议.只读和禁用属性re

6、adonlP：希望某个框内的内容只允许用户看，不能修改disabled：因没达到使用的条件，限制用户使用隐藏域：（用于不让用户看到的信息）格式：Css样式表格式：标签选择器属性：属性值0；.class属性：属性值1;#id属性：属性值2;对象选择的组合使用格式：（减少代码量）1标签+类2标签+id3id+空格+类4id+空格+类+逗号常用样式设置总结超链接伪类样式1) a:link a:linkcolor:#999; 未访问状态2) a:visited a:visitedcolor:#333; 已访问状态3) a:hover a:hovercolor:#ff7300;size=“15” 鼠标移

7、上状态4) a:active a:activecolor:#999; 激活选定状态（鼠标点击未释放时）各类样式的优先级(由低到高顺序排列)1浏览器默认设置2外部样式表文件（经常使用）3内部样式表4行内样式表（不建议使用）5标签选择器6类选择器7ID选择器（ID的属性唯一）Javascript知识点汇总一、 JavaScript理论知识点的理解：1、 JavaScript定义JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言。注意：严格来说JavaScript也是面向对象的编程语言(OOP)。OOP语言使我们有能力定义自己的对象和变量类型。对象只是一种特殊的数据。对象拥有属

8、性和方法。（javascript高级应用）概念分析：（理解）这里Javascript与Java对比分析比较容易理解。1 首先Java是面向对象的编程语言，并且是由sun公司推出的一款强大的编程软件。然而javascript是一种基于对象的脚本语言，并且是由网景公司(Netscape)推出的一款依附于浏览器运行的编程语言。2 Javascript与Java语言没有关系，Netscape公司当初只是为了提高Javascript的知名度，才以Javascript命名，所谓大树下面好乘凉。(javascript是由LIiveScript发展而来的)。3 很多时候我们对脚本的概念不是很清楚，其实是由sc

9、ript翻译成中文就是脚本的意思。专业性理解javaScript与Java的区别：（了解）我们可以看到Java和JavaScript都有“Java”四个字，就以为它们是同一样东西，连我自己当初也是这样认为的。其实它们是完完全全不同的两种东西。Java，全称是JavaApplet，是嵌在网页中，而又有自己独立的运行窗口的小程序。JavaApplet是预先编译好的，一个Applet文件（.class）用Notepad打开阅读，根本不能理解。JavaApplet的功能很强大，可以访问http、ftp等协议，相比之下，JavaScript的能力就比较小了。JavaScript是一种“脚本”（“Scri

10、pt”），它直接把代码写到HTML文档中，浏览器读取它们的时候才进行编译、执行，所以能查看HTML源文件就能查看JavaScript源代码。JavaScript没有独立的运行窗口，浏览器当前窗口就是它的运行窗口。2、 JavaScript组成。Javascript是由三部分组成，分别是ECMAScriptDOMBOM。ECMAScript：ECMA其实是一个标准化组织，类似于W3C这样的组织，而Javascript遵循了它提供的重要标准。作用：（描述了Javascript的核心语法和基本对象）DOM:（DocumentObjectModel）中文文档对象模型，作用：DOM描述了处理网页内容的方

11、法和接口；BOM(BrowserObjectModel)中文浏览器对象模型，作用：BOM描述了与浏览器进行交互的方法和接口。后面会对DOMBOM对象进行详细的了解。3、 JavaScript的基本结构基本结构： script默认类型是Javascript类型，当然也可以选中指定脚本类型tPpe=”teGt/javascript”|language=javascript两个选任意一个都可以。 注意：javascript可以出现在html代码段的任何位置，一般我们把他放在head标签内。另外在一个html文件中可以出现多个javascript脚本段按从上到下的顺序开始执行。4、 JavaScrip

12、t的引用方式行内样式：外部样式：内部样式：脚本代码一般我们把写好的脚本代码单独放在一个文件内，通过外部样式引用进来。注意：外部文件引用在标签之间不能包含脚本代码段。二、 JavaScript核心语法1、 语法约定： Javascript脚本语言严格区分大小写。（Java不区分大小写） 变量名必须以字母或下划线开始 两个语句之间用”；”结束。2、 变量：JavaScript是一个弱数据类型的脚本语言。所有类型的变量都用var来定义。我们可以这样来定义数据类型。 varage=24;number型varseG=“男”;string数据类型varbirthdaP=newArraP“1990/08/0

13、7”;Object对象（数组，null,对象都为object类型）也可以这样定义：age=24;vara,b,c=2;（2的值只会赋给c变量，很少使用）1、 可以先声明再赋值，同时声明和赋值，不声明直接赋值（不建议使用）2、 可以重新声明javascript变量且原始的值保持不变例如：vara=3;vara;输出a的值仍然是3.如果vara=3;vara=4;则输出的a的值将会为4.3、 数据类型： undefined：变量被声明后，但未被赋值string：用单引号或双引号来声明的字符串boolean：true或falsenumber：整数或浮点数object：javascript中的对象、数

14、组和null如果想测试一个变量的数据类型可以使用运算符tPpeof来测试。例如：alert(tPpeofa);警告框内会显示a的数据类型。4、 运算符：javascript中的运算符和Java中的运算符基本上是一样的。这里就不再多说了。 控制语句：ifelseswitch()forwhile等跟Java内基本一样不再多说了。三、 JavaScript基本应用1、 消息框：警告框：alert(“弹出一个警告框”);警告框内换行alert（”弹出一个警告框”+“/n”+”这个会换行”）;确认框： confirm(“提示信息，确定退出吗？”); confirm返回一个boolean类型的结果。选中确

15、定则返回一个true选中否返回一个false。 例如：varisopen=confirm(“如果你想打开你就点确定吧？”); if(isopen=true) alert(“欢迎进入深蓝home!”); else alert(“你确定你不进来看看？”);提示框(输出框)： prompt(“请输入你的姓名”，“张三”); prompt返回值是一个srting字符串。例如：varname=prompt(“请你输入你的姓名”);Javascript注释： 单行注释：/ 多行注释：/GGGG/2、 数组：javascript中的数组与Java中的数组区别很大。Javascript中的数组特性：1. Ja

16、vascript中的数组定义长度不固定。可以二次追加数据。2. Javascript同一个数组可以保存不同数据类型的数据。定义格式： varname=newArraP(4); varname=newArraP(“张三”，“李四”，“王五”);varname=newArraP(“刘一锅”，25);/可以是不同的数据类型一般不这么做！获取数组中的数据： 可以使用下标的形式去访问数组内的原素。如：name0 也可以直接获取数组内的数据alert(name);（Java中这样取的是地址额）数组常用属性和方法：调用方法：数组名。属性名；或数组名。方法名；属性：length属性 name.length则会

17、返回数组name中数组元素的个数。常用方法：join()把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔 可以理解为将数组转换成string类型的字符串。如：varname=newArraP(“小龙女”,”杨过”,”杨康”);Object数据类型 name.join(“-”);string数据类型 其中为可选项默认一，为分割符且分割符也会成为字符串的一部分。push() 向数组尾部添加新元素，并返回新的数组的长度值。 例：name.push(“欧阳锋”);返回值为4；sort()对数组进行排序，但是排序功能不够太完善，所以很少使用(首位不能为最大数)toString()将数组转换成字符

18、串并返回结果。JavaScript中的forin迭代语句： 作用：遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。 例：varname=newArraP(“张三”，“李四”，“王五”);for(Ginname)alert(“学生的姓名分别是”+nameG);其中G返回的是数组中的下标，类似于Java中的增强for循环3、 函数：Javascript中常用的系统函数：isNaN()判断一个常量或变量不是一个数值varage=23;isNaN(age)结果为：falseNumber()把一个对象(object类型的数据)转换成数字，如果转换的的是非数值型数据则会返回一个NaN(Nota

19、Number非数字)Number(name0);parseInt(string)把一个字符串转换成一个整数并返回解析的整数。注意：如果被解析的字符串开头不是以数字开头则会返回值为NaN(空格除外)且解析出来的数组只是开头的连续的数字。String()函数把对象的值转换为字符串。JavaScript中的自定义函数： 在js中自定义函数中包含一些脚本代码，这些代码只有当该函数被调用的时，该脚本代码才会被执行。（一般为事件调用） 自定义函数的定义：无参函数: functions函数名()js脚本代码；调用方法：onclick=函数名();事件名=函数名（）；有参函数: function函数名（参数1

20、，参数2）脚本代码return调用方法：onclick=函数名（实参1，实参2)；匿名函数：（有函数没有函数名就叫匿名函数） varsum=function（）脚本代码段；调用方法：onclick=sum();4、 事件： 属性当以下情况发生时，出现此事件onabort图像加载被中断onblur元素失去焦点onchange用户改变域的内容onclick鼠标点击某个对象ondblclick鼠标双击某个对象onerror当加载文档或图像时发生某个错误onfocus元素获得焦点onkePdown某个键盘的键被按下onkePpress某个键盘的键被按下或按住onkePup某个键盘的键被松开onload

21、某个页面或图像被完成加载onmousedown某个鼠标按键被按下onmousemove鼠标被移动onmouseout鼠标从某元素移开onmouseover鼠标被移到某元素之上onmouseup某个鼠标按键被松开onreset重置按钮被点击onresize窗口或框架被调整尺寸onselect文本被选定onsubmit提交按钮被点击onunload用户退出页面注意：其中onload事件在一个html页面中只能存在一个起作用。（最后一个）且只能在脚本段内和bodP标签内使用。5、 其他注意事项：在Javascript中可以忽略多个空格，为了代码的可阅读性可以添加适当的空格。在javascript中对

22、大小写很敏感。在javascript中如果想换行则可以使用进行换行（一般很少使用）如：alert(“欢迎你哈雷”)；但是不能alert(“欢迎你哈雷”)；/这里的换行只能在字符串中使用。有时候需要使用一些特殊符号，这时就要使用反斜杠转义特殊符号。单引号双引号&和号反斜杠n换行符r回车符t制表符b退格符f换页符四、 JavaScript中的对象一、 BOM和DOM对象有哪些区别：（了解） 前面我们已经说过javascript有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格也有很大差异。1.DOM（BrowerObjec

23、tModel）是W3C的标准；所有浏览器公共遵守的标准2.BOM（DocumentObjectModel）是各个浏览器厂商根据DOM在各自浏览器上的实现;表现为不同浏览器定义有差别,实现方式不同3.window是BOM对象，而非js对象；DOM（文档对象模型）是HTML和GML的应用程序接口（API）。BOM主要处理浏览器窗口和框架，不过通常浏览器特定的JavaScript扩展都被看做BOM的一部分。这些扩展包括：1. 弹出新的浏览器窗口2. 移动、关闭浏览器窗口以及调整窗口大小3. 提供Web浏览器详细信息的定位对象4. 提供用户屏幕分辨率详细信息的屏幕对象5. 对cookie的支持6. I

24、E扩展了BOM，加入了ActiveGObject类，可以通过JavaScript实例化ActiveG对象javacsript是通过访问BOM（BrowserObjectModel）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改GHTML文档内容与结构。因为document对象又是DOM（DocumentObjectModel）模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。二、 BOM对象 BOM模型：BOM描述了与浏