【javascript学习】js语法基础大全-js教程-PHP中文网

本文系统的整理了javascript的语法，知识点很全，较基础，在学习的时候可以作为参考，复习也很系统，不用去翻看书籍了，书籍的知识点很散乱，翻看完很浪费时间，如果不嫌弃可以收藏下来以防备忘，能对大家有帮助就是我继续写文章的动力，我也很乐意同大家分享我的知识。

1-1学习JavaScript的起点就是处理网页，我们先学习如何使用DOM进行简单操作。

我是第一段文字

我是第二段文字

document.write("hello"); # 输出文本 document.getElementById("p1").style.color="blue"; # 第一段文字变蓝色了 登录后复制 1-2 内部引用

1-3 外部引用

1-4 一般放在网页的head或者body部分：

放在 部分

最常用的方式是在页面中head部分放置 元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。

放在 部分

JavaScript代码在网页 读取到该语句的时候就会执行 。果是通过事件调用执行的function那么对位置没什么要求的。

1-5 JavaScript语句是发给浏览器的命令。

1-6 注释 // or /* */

1-7 var 变量名 区分大小写

1-8 if语句

if(条件) 注意：没有分号哦。 { 条件成立时执行的代码 } else { 条件不成立时执行的代码 } 登录后复制 1-9 函数

function add2(){ var sum = 3 + 2; alert(sum); } 登录后复制 调用： add2()

1-10 字符串方法+

2-2 alert

在点击对话框"确定"按钮前，不能进行任何其它操作。

消息对话框通常可以用于调试程序。

alert输出内容，可以是字符串或变量，与document.write 相似。

2-3 confirm

confirm 消息对话框通常用于 允许用户做选择的动作 ，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

var mymessage=confirm("你喜欢JavaScript吗?"); 登录后复制 2-4 promte

弹出消息对话框，通常用于 询问一些需要与用户交互的信息 。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。

prompt(str1, str2); 登录后复制 参数：

str1: 要显示在消息对话框中的文本，不可修改

str2：文本框中的内容，可以修改

对话框中点击确定按钮，文本框中的内容将作为函数返回值；对话框中点击取消按钮，将返回null

2-5 打开新窗口

window.open([URL], [窗口名称], [参数字符串]) 登录后复制 参数：

URL ：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

窗口名称 ：可选参数，被打开窗口的名称。

该名称由字母、数字和下划线字符组成。

"_top"、"_blank"、"_self"具有特殊意义的名称。

_blank：在新窗口显示目标网页

_self：在当前窗口显示目标网页

_top：框架网页中在上部窗口中显示目标网页

相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。

name 不能包含有空格。

参数字符串 ：可选参数，设置窗口参数，各参数用逗号隔开。

window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes') 登录后复制 2-6 关闭窗口

window.close(); //关闭本窗口 或 window.close(); //关闭本窗口 登录后复制 关闭 新建的窗口

var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中 mywin.close(); 登录后复制 注意:上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口。

2-7 略

3-1

认识DOM文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

元素节点：上图中 、 、 等都是元素节点，即标签。

文本节点:向用户展示的内容，如 ... 中的JavaScript、DOM、CSS等文本。

属性节点:元素属性，如 标签的链接属性href="http://www.imooc.com"

3-2 通过ID获取元素

document.getElementById(“id”) 登录后复制 该示例打印并非理想结果，是因为从浏览器读取html文件来说，是从上到下读取的：如果将JavaScript放在head中，HTML文件读取时会先读取并执行JavaScript的内容，然后才会执行body标签内的内容；如果放在body标签内，HTML文件读取时，会先读取在JavaScript前面的内容，再读取JavaScript的内容；

从上面这个原理与课程结合进行分析：

结果为null是因为，JavaScript没有找到id名为“con”的标签，所以返回null。

结果为 [object HTMLParagraphElement] ，则说明JavaScript找到了id名为“con”的标签，以对象的形式返回该标签

但是我们发现在HTML中明明存在id=“con”的标签，这又是怎么回事？这是因为，前面说的浏览器读取HTML文件，是从上到下读取的：

如果将JavaScript放在id=“con”的标签之前，这就导致了浏览器在读取HTML文件时，JavaScript先读取，读取完JavaScript后，才开始读取到id=“con”的标签，这就是说JavaScript读取时是没有读取到id=‘con’的标签，只能返回null，表示没有读取到该标签

如果将JavaScript放在id=“con”的标签之后，在浏览器读取HTML文件时，先读取到了id="con"的标签，才读取JavaScript，这时由于id="con"的标签名存在，JavaScript可以发现，所以以对对象的形式（[object HTMLParagraphElement]）返回该标签

要返回正确的结果应该在前后加双引号或者在mychar变量后加上.innerHTML

3-3 innerHTML属性

获取元素内容

var mychar= document.getElementById("con"); document.write("原标题:"+mychar.innerHTML+" "); //输出原h2标签内容 mychar.innerHTML = 'Hello world!' document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容 登录后复制 3-4 改变 HTML样式

Object.style.property=new style; //Object是获取的元素对象 登录后复制

3-5 显示和隐藏

Object.style.display = value 登录后复制

3-6 控制class属性 元素

object.className = classname 注意中间有个大写的N 登录后复制 进阶内容 2-2

变量取名 规则：

必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下:

变量名区分大小写，如:A与a是两个不同变量。

不允许使用JavaScript关键字和保留字做变量名。

2-9 “&&”表示and 操作符

2-10 "||" 或

2-11 "!" 否

2-12 操作符之间的 优先级 （高到低）:

算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

如果同级的运算是按从左到右次序进行,多层括号由里向外。

3-1 数组

3-2

var myarray= new Array(8); //创建数组，存储8个数据。 登录后复制 注意：

1.创建的新数组是空数组， 没有值，如输出，则显示undefined 。

2.虽然创建数组时，指定了长度，但实际上 数组都是变长的 ，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。

3-3 添加元素

只需 使用下一个未用的索引 ，任何时刻可以不断向数组增加新元素。

myarray[5]=88; //使用一个新索引，为数组增加一个新元素 登录后复制 3-6 length属性

myarray.length; //获得数组myarray的长度 登录后复制 相关推荐：

JavaScript学习笔记之基础语法

整理Javascript基础语法学习笔记

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

【javascript学习】js语法基础大全