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、 JavaScript的引用方式9二、 JavaScript核心语法101、 语法约定：102、 变量：103、 数据类型：104、 运算符：10三、 JavaScript基本应用111、 消息框：112、 数组：11JavaScript中的for in 迭代语句：123、 函数：134、 事件：145、 其他注意事项：14四、 JavaScript中的对象15一、 BOM和DOM对象有哪些区别：（了解）15二、 BOM对象16Window 对象属性16window对象常用的方法：17三、 DOM对象17Document对象常用的属性18Document对象的常用方法18getElementByxx获得元素节点18HTML概要知识点梳理 1、了解HTML的概念HTML是超文本标记语言，他是随着浏览器（IE 谷歌）的发展而诞生出来的一种标记语言，是一种用来制作超文本文档的语言。（注意：他并不是一种编程语言列如：c c+ vb.）. 理解：所谓标记语言我们可以把它理解为一中符号标记，不同的符号有着不同效果。 超文本：包括声音，图片，影视等等。 2、熟练掌握HTML的文档结构。 这里需要注意的地方 若标题标签书写错误会导致文档无 法显示。（虽然浏览器现在能够自动补全代码） 3、标签的分类 块记标签： . （常用与带有列表的数据或菜单） （常用数据描述） （常与大数据|表单布局场合） （标题） （内容） (跨行列合并) /table (常用与页面布局) (绘制一条水平线 一般用于网页脚部) (用于表单数据) (超链接 | 锚链接)行级标签： (用于改变某个单一字体的样式)（换行）掌握灵活运用实际开发中常用的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、内容 样式 功能 分离出来。 超链接的应用： 被链接的文本 | 图片 超链接 当前位置 同页面的锚链接 目标位置 当前位置 不同页面的锚链接 另一个网页的目标位置 （注意：与同一页面写格式不一样） 站长信箱 邮箱链接（需要有邮箱工具）表单的应用： type功能例子text单行文本输入(默认类型)password密码radio单选（name属性值一样）男女checkbox多选书画reset重置表单数据file文件上传submit提交表单数据(提交到action位置)image图形提交按钮（只有提交功能）button普通按钮（添加加事件）下拉列表框： 格式： 例子： 选择月份 一月 二月 三月 四月 多行文本框格式： 文本内容 例子： 欢迎阅读服务条款协议. 只读和禁用属性readonly：希望某个框内的内容只允许用户看，不能修改disabled：因没达到使用的条件，限制用户使用 隐藏域：（用于不让用户看到的信息） 格式： Css样式表 格式： 标签选择器属性：属性值0； .class 属性：属性值1; #id 属性：属性值2; 对象选择的组合使用格式：（减少代码量）1 标签+类2 标签+id3 id+空格+类4 id+空格+类+逗号常用样式设置总结 超链接伪类样式1) a:linka:linkcolor:#999;未访问状态2) a:visiteda:visitedcolor:#333;已访问状态3) a:hovera:hover color:#ff7300; size = “15”鼠标移上状态4) a:activea:active color:#999;激活选定状态（鼠标点击未释放时）各类样式的优先级(由低到高顺序排列)1 浏览器默认设置2 外部样式表文件（经常使用） 3 内部样式表 4 行内样式表（不建议使用） 5 标签选择器6 类选择器7 ID选择器（ID的属性唯一）Javascript知识点汇总一、 JavaScript理论知识点的理解：1、 JavaScript定义JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言。 注意：严格来说JavaScript 也是面向对象的编程语言 (OOP)。OOP 语言使我们有能力定义自己的对象和变量类型。对象只是一种特殊的数据。对象拥有属性和方法。（javascript高级应用）概念分析：（理解）这里Javascript与 Java对比分析比较容易理解。 首先Java是面向对象的编程语言，并且是由sun公司推出的一款强大的编程软件。然而javascript是一种基于对象的脚本语言，并且是由网景公司(Netscape)推出的一款依附于浏览器运行的编程语言。 Javascript与Java语言没有关系，Netscape公司当初只是为了提高Javascript的知名度，才以Javascript命名，所谓大树下面好乘凉。(javascript是由LIiveScript发展而来的)。 很多时候我们对脚本的概念不是很清楚，其实是由script翻译成中文就是脚本的意思。 专业性理解javaScript与Java的区别：（了解） 我们可以看到Java 和JavaScript 都有“Java”四个字，就以为它们是同一样东西，连我自己当初也是这样认为的。其实它们是完完全全不同的两种东西。Java，全称是Java Applet，是嵌在网页中，而又有自己独立的运行窗口的小程序。Java Applet 是预先编译好的，一个Applet 文件（.class）用Notepad 打开阅读，根本不能理解。Java Applet 的功能很强大，可以访问http、ftp等协议，相比之下，JavaScript 的能力就比较小了。JavaScript 是一种“脚本”（“Script”），它直接把代码写到HTML 文档中，浏览器读取它们的时候才进行编译、执行，所以能查看HTML 源文件就能查看JavaScript 源代码。JavaScript 没有独立的运行窗口，浏览器当前窗口就是它的运行窗口。2、 JavaScript组成。Javascript是由三部分组成，分别是ECMAScript DOM BOM 。ECMAScript：ECMA其实是一个标准化组织，类似于W3C这样的组织，而Javascript遵循了它提供的重要标准。作用：（描述了Javascript的核心语法和基本对象）DOM:（Document Object Model）中文文档对象模型，作用：DOM 描述了处理网页内容的方法和接口；BOM(Browser Object Model)中文浏览器对象模型，作用：BOM 描述了与浏览器进行交互的方法和接口。后面会对 DOM BOM 对象进行详细的了解。3、 JavaScript的基本结构基本结构：script默认类型是Javascript类型，当然也可以选中指定脚本类型type=”text/javascript”|language=javascript两个选任意一个都可以。注意：javascript可以出现在html代码段的任何位置，一般我们把他放在head标签内。另外在一个html文件中可以出现多个javascript脚本段按从上到下的顺序开始执行。4、 JavaScript的引用方式行内样式：外部样式：内部样式：脚本代码一般我们把写好的脚本代码单独放在一个文件内，通过外部样式引用进来。注意：外部文件引用在 标签之间不能包含脚本代码段。二、 JavaScript核心语法1、 语法约定： Javascript脚本语言严格区分大小写。（Java不区分大小写）变量名必须以字母或下划线开始两个语句之间用”；”结束。2、 变量：JavaScript是一个弱数据类型的脚本语言。所有类型的变量都用var来定义。我们可以这样来定义数据类型。var age = 24; number型var sex = “男”; string数据类型var birthday = new Array “1990/08/07”; Object对象（数组，null,对象都为object类型）也可以这样定义： age = 24 ; var a,b,c=2;（2的值只会赋给c变量，很少使用）1、 可以先声明再赋值，同时声明和赋值，不声明直接赋值（不建议使用）2、 可以重新声明javascript变量且原始的值保持不变例如： var a = 3; var a; 输出a的值仍然是3.如果 var a = 3; var a = 4 ; 则输出的a的值将会为4.3、 数据类型：undefined：变量被声明后，但未被赋值string：用单引号或双引号来声明的字符串boolean：true或falsenumber：整数或浮点数object：javascript中的对象、数组和null如果想测试一个变量的数据类型可以使用运算符typeof来测试。例如： alert(typeof a ); 警告框内会显示a的数据类型。4、 运算符：javascript中的运算符和Java中的运算符基本上是一样的。这里就不再多说了。控制语句：if else switch() for while 等跟Java内基本一样不再多说了。三、 JavaScript基本应用1、 消息框：警告框：alert(“弹出一个警告框”);警告框内换行 alert（”弹出一个警告框”+“/n”+”这个会换行”）;确认框：confirm(“提示信息，确定退出吗？”);confirm返回一个boolean类型的结果。选中确定则返回一个true 选中否返回一个false。例如：var isopen =confirm(“如果你想打开你就点确定吧？”); if(isopen=true) alert(“欢迎进入深蓝home!”); elsealert(“你确定你不进来看看？”);提示框(输出框)：prompt(“请输入你的姓名”，“张三”);prompt返回值是一个srting字符串。 例如：var name = prompt(“请你输入你的姓名”);Javascript注释：单行注释： /多行注释： /* */2、 数组：javascript中的数组与Java中的数组区别很大。Javascript中的数组特性：1. Javascript中的数组定义长度不固定。可以二次追加数据。2. Javascript同一个数组可以保存不同数据类型的数据。定义格式：var name = new Array(4);var name = new Array(“张三”，“李四”，“王五”);var name = new Array(“刘一锅”，25);/可以是不同的数据类型一般不这么做！获取数组中的数据：可以使用下标的形式去访问数组内的原素。如： name0也可以直接获取数组内的数据alert(name);（Java中这样取的是地址额）数组常用属性和方法：调用方法： 数组名。属性名； 或 数组名。方法名；属性： length属性name.length 则会返回数组name中数组元素的个数。常用方法：join() 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔可以理解为将数组转换成string类型的字符串。如：var name = new Array(“小龙女”,”杨过”,”杨康”); Object数据类型 name.join(“-”); string数据类型 其中 为可选项 默认一 ，为分割符且分割符也会成为字符串的一部分。push()向数组尾部添加新元素，并返回新的数组的长度值。例：name.push(“欧阳锋”); 返回值为 4；sort() 对数组进行排序，但是排序功能不够太完善，所以很少使用(首位不能为最大数)toString() 将数组转换成字符串并返回结果。JavaScript中的for in 迭代语句：作用：遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。例：var name = new Array(“张三”，“李四”，“王五”);for(x in name) alert(“学生的姓名分别是”+namex);其中x 返回的是数组中的下标，类似于Java中的增强for循环3、 函数：Javascript中常用的系统函数：isNaN() 判断一个常量或变量不是一个数值 var age = 23; isNaN(age) 结果为： falseNumber()把一个对象(object类型的数据)转换成数字，如果转换的的是非数值型数据则会返回一个NaN(Not a Number非数字) Number(name0);parseInt(string)把一个字符串转换成一个整数并返回解析的整数。注意：如果被解析的字符串开头不是以数字开头则会返回值为NaN(空格除外)且解析出来的数组只是开头的连续的数字。String() 函数把对象的值转换为字符串。JavaScript中的自定义函数：在js中自定义函数中包含一些脚本代码，这些代码只有当该函数被调用的时，该脚本代码才会被执行。（一般为事件调用）自定义函数的定义： 无参函数:functions 函数名()js脚本代码； 调用方法： onclick=函数名(); 事件名 = 函数名（）； 有参函数: function 函数名（参数1，参数2）脚本代码return 调用方法： onclick=函数名（实参1，实参2)； 匿名函数：（有函数没有函数名就叫匿名函数） var sum = function（）脚本代码段； 调用方法： onclick=sum();4、 事件： 属性当以下情况发生时，出现此事件onabort图像加载被中断onblur元素失去焦点onchange用户改变域的内容onclick鼠标点击某个对象ondblclick鼠标双击某个对象onerror当加载文档或图像时发生某个错误onfocus元素获得焦点onkeydown某个键盘的键被按下onkeypress某个键盘的键被按下或按住onkeyup某个键盘的键被松开onload某个页面或图像被完成加载onmousedown某个鼠标按键被按下onmousemove鼠标被移动onmouseout鼠标从某元素移开onmouseover鼠标被移到某元素之上onmouseup某个鼠标按键被松开onreset重置按钮被点击onresize窗口或框架被调整尺寸onselect文本被选定onsubmit提交按钮被点击onunload用户退出页面注意：其中onload事件在一个html页面中只能存在一个起作用。（最后一个）且只能在脚本段内和body标签内使用。5、 其他注意事项：在Javascript中可以忽略多个空格，为了代码的可阅读性可以添加适当的空格。在javascript中对大小写很敏感。在javascript中如果想换行则可以使用 进行换行（一般很少使用）如： alert(“欢迎你哈雷”)；但是不能alert (“欢迎你哈雷”)；/这里的换行只能在字符串中使用。有时候需要使用一些特殊符号，这时就要使用反斜杠转义特殊符号。单引号双引号&和号反斜杠n换行符r回车符t制表符b退格符f换页符 四、 JavaScript中的对象一、 BOM和DOM对象有哪些区别：（了解）前面我们已经说过javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格也有很大差异。1. DOM （Brower Object Model）是W3C 的标准； 所有浏览器公共遵守的标准2. BOM （Document Object Model）是各个浏览器厂商根据 DOM在各自浏览器上的实现;表现为不同浏览器定义有差别,实现方式不同3. window 是 BOM 对象，而非 js 对象；DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：1. 弹出新的浏览器窗口 2. 移动、关闭浏览器窗口以及调整窗口大小 3. 提供 Web 浏览器详细信息的定位对象 4. 提供用户屏幕分辨率详细信息的屏幕对象 5. 对 cookie 的支持 6. IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。二、 BOM对象BOM模型：BOM 描述了与浏览器进行交互的方法和接口。BOM对象常用的对象与方法：1、 Window对象：表示在浏览器中打开的窗口。Window对象常用的方法与属性：Window 对象属性Window常用的属性：(这三个属性有分别是三个对象)History 该对象包含用户（在浏览器窗口中）访问过的 URL。Location 该对象包含有关当前 URL 的信息。 Document 每个载入浏览器的 HTML 文档都会成为 Document 对象。history 对象方法方法描述back()加载 history 列表中的前一个 URL。forward()加载 history 列表中的下一个 URL。go()加载 history 列表中的某个具体页面。使用方法：window.history.back();跟后退功能一样，如果history列表内没有访问记录。则此功能无效。也可以省略掉window直接写成history.back();其中go()跟前个方法功能类似，如果go(-1) 同back(),为正数时，则同forward（）作用。Location对象的方法：属性描述assign()加载新的文档。reload()重新加载当前文档。(刷新)replace()用新的文档替换当前文档。用法：location.assign(URL); 这里的URL指的是统一资源定位器，就是我们通常说的网址，当然在这里还可以是一个网页文件的路径地址。 例如：location.assign(“c:/index.html | http:/www.baidu.com”); location.reload(); 相当于刷新location.replace(New url); 跳转到指定的页面document对象会在DOM对象中细说。window对象常用的方法：方法描述alert()显示带有一段消息和一个确认按钮的警告框。clearInterval()取消由 setInterval() 设置的 timeout。clearTimeout()取消由 setTimeout() 方法设置的 timeout。close()关闭浏览器窗口。confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。open()打开一个新的浏览器窗口或查找一个已命名的窗口。prompt()显示可提示用户输入的对话框。setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。setTimeout()在指定的毫秒数后调用函数或计算表达式。三、 DOM对象DOM模型：DOM 描述了处理网页内容的方法和接口；Document对象常用的属性使用方法： 对象.属性名 属性名称 说 明 referrer 返回载入当前文档的文档的URL URL 返回当前文档的URLDocument对象的常用方法 方法名称 说 明 getElementById() 返回对拥有指定id的第一个对象的引用 getElementsByName() 返回带有指定名称的对象的集合getElementsByTagName() 返回带有指定标签名的对象的集合 write() 向文档写文本、HTML表达式或JavaScript代码getElementByxx获得元素节点 getElementById() 寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.var oElement = document.getElementById ( sID ) 该方法只能用于 document 对象getElementsByName() 寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。getElementsByTagName()寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。 var elements = document.getElementsByTagName(tagName); var elements = element.getElementsByTagName(tagName);该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。 var container = document.getElementById(“sid”); var elements = container.getElementsByTagName(“p”);