JavaScript基础

概述

avaScript 被用来改进设计、验证表单、检测浏览器、创建 cookies，等等 。

JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，

比如： Internet Explorer、Maxthon、Mozilla、Firefox、Netscape、Chrome 和 Opera等。

常用 1 修改 html 及 css 代码 （2）验证表单

JavaScript和Java没有关系

嵌入方法

内嵌式

理论上 js 可以写在任何第一个地方 但是一般写在 head 标签里或者 body 下

<script type="application/javascript">
alert("内嵌式");
</script>
<script>alert("内嵌式");</script>

外链式

首先新建一个文件类型为.js 的文件，然后在该文件中写 js 语句，通过 script 标

签对引入到 html 页面中。

<script src="js 文件路径地址">这里不能写 js 语句</script>

行内式

直接书写在标签身上，是一个简写的事件，所以又称之为事件属性。 onclick

单击事件

<input type="button" value="点我呀!" onclick="alert('测试');">
<button onclick="alert('测试');">点我呀!</button>

语句

1.编程指令被称为语句。

JavaScript 程序就是一系列的编程语句。

注释：在 HTML 中，JavaScript 程序由 web 浏览器执行。

2.JavaScript 语句由以下构成：

值、运算符、表达式、关键词和注释。

3.用分号（;）分隔 JavaScript 语句。

注释

行注释： // 注释语句 快捷键 ctrl+/

多行注释： / 注释语句 / 快捷键 ctrl+shift+/

注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！

变量

变量是用于存储信息的"容器"

javascript 单双引号没区别

var a=’字符串’;

JavaScript保留关键字

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作

为 Javascript 以后扩展使用。

作用域

局部变量

局部作用域 变量在函数内声明，变量为局部作用域。

function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}

全局变量

变量在函数外定义，即为全局变量。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}

数据类型

数值型：number（凡是数字都是数值型，不区分整数和小数）

字符串：string（凡是引号包裹起来的内容全部都是字符串）

布尔：boolean（true、false）

对象类型：object（特殊取值 null）

未定义型：undefined

对象类型 数组 字典

判断类型

var a = "iamstring.";

var b = 222;

var c= [1,2,3];

var d = new Date();

var e = function(){alert(111);};

var f = function(){this.name="22";};

alert(typeof a) ————> string

alert(typeof b) ————> number

alert(typeof c) ————> object

alert(typeof d) ————> object

alert(typeof e) ————> function

alert(typeof f) ————> function

数字类型

只有一种数字类型，数字 可以是小数 ，也可以的整数

以 0 开头 默认使用 8 进制来表示我的这个数字

以 0x 开头 默认使用 16 进制来表述我的这个数字

如果以-开头 默认以负数

如果我带有 e：以科学计数法来解析我的这个数字

parseInt(..) 将某值转换成数字，不成功则 NaN

parseFloat(..) 将某值转换成浮点数，不成功则 NaN

特殊值：

NaN，非数字。可使用 isNaN(num) 来判断。

Infinity，无穷大。可使用 isFinite(num) 来判断。

字符串型

字符串是存储字符的变量，用来表示文本的数据类型，程序中的字符串是包含

单引号/双引号的，由单引号来界定我双引号中包含的字符串

obj.length 长度

obj.trim() 移除空白

obj.trimLeft()

obj.trimRight)

obj.charAt(n) 返回字符串中的第 n 个字符

obj.concat(value, …) 拼接

obj.indexOf(substring,start) 子序列位置

obj.lastIndexOf(substring,start) 子序列位置

obj.substring(from, to) 根据索引获取子序列

obj.slice(

, end) 切片

obj.toLowerCase() 大写

obj.toUpperCase() 小写

obj.split(delimiter, limit) 分割

obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g 无效)

obj.match(regexp) 全局搜索，如果正则中有 g 表示找到全部，否则只

找到第一个。

obj.replace(regexp, replacement) 替换，正则中有 g 则替换所有，否则只替换第

一个匹配项，

$数字：匹配的第 n 个组内容；

$&：当前匹配的内容；

$`：位于匹配子串左侧的文本；

$’：位于匹配子串右侧的文本

$$：直接量$符号

布尔类型

一般是用在流程控制语句中，字符串和数字类型都是无穷多个，然而我们的布

尔数据类型只有两个：true 和 false

这两个个值一般用于说明某个事物是真或者假

js 一般用布尔类型来比较所得到的结果

布尔类型仅包含真假，

== 比较值相等

!= 不等于

=== 比较值和类型相等

!=== 不等于

|| 或

&& 且

null

null

关键字 null 是一个特殊的值，它表示变量为空值，用来定义空的或者是不存在

的引用。

如果试图去引用一个没有定义的值，就会返回一个 null。

这里注意一点：null 并不等于"" 或者 0

undefined

这个值表示变量不含有值，没有定义的值，或者被定义了一个不存在的属性值

！null 和 undefined 区别：

null 它表示一个变量被赋予一个空值，而 undefined 是表示变量还没有被赋值

数组

1、数组内可以存放任意数据类型的数据（本质上它也是对象）

2、数组元素不赋值的情况下 值为 undefined

3、如果数组打印的时候，元素不赋值""

4、访问数组范围之外的元素，不会出现越界的问题，undefined

5、定义数组大小，照样可以添加更多元素

定义数组的方法

1、var arr=[]//定义一个空数组

2、var arr=[10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"]]//定义的

同时赋值

3、var arr=new Array();//定义一个空数组

4、var arr = new Array(10,20,{"name":"tomy","age":19},0.1,"string",true,

["aaa","bbb"])//定义的同时赋值

5、var arr=new Array(10)//定义一个长度为 10 的数组

数组的操作

obj.length 数组的大小

obj.push(ele) 尾部追加元素

obj.pop() 尾部获取一个元素

obj.unshift(ele) 头部插入元素

obj.shift() 头部移除元素

obj.splice(start, deleteCount, value, …) 插入、删除或替换数组的元素

obj.splice(n,0,val) 指定位置插入元素

obj.splice(n,1,val) 指定位置替换元素

obj.splice(n,1) 指定位置删除元素

obj.slice( ) 切片

obj.reverse( ) 反转

obj.join(sep) 将数组元素连接起来以构建一个字符串

obj.concat(val,..) 连接数组

obj.sort( ) 对数组元素进行排序

函数

JavaScript 函数语法

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

圆括号可包括由逗号分隔的参数：

var x = myFunction(7, 8); // 调用函数，返回值被赋值给 x
function myFunction(a, b) {
return a * b; // 函数返回 a 和 b 的乘积
}

普通函数

function func(arg){
return arg+1;
}
var result = func(1);
console.log(result); var result = func(1);
console.log(result);

匿名函数（没有名字的函数）

setInterval(function(){
console.log(123);
},500)

自执行函数（创建函数并自动执行）

(function(arg){
console.log(arg);
})(1);

字典

字典 是一种以键-值对形式存储数据的数据结构

var dict = {‘k1′:"moonsec",’k2′:’moon’,’age’:18};

输出字典元素

for(var item in dict){

console.log(dict[item]);

}

获取指定元素

dict[‘age’] 获取 key 为 age 的元素

赋值

dict[‘age’]=10

删除元素

delete dict[‘one’];

delete dict.age;

JS的序列化和反序列化

Json 与字符串的转换

把对象转为字符串

JSON.stringify()

把字符串转为数组

newli = JSON.parse()

序列化 即 js 中的 Object 转化为字符串

使用 toJSONString

var last=obj.toJSONString(); //将 JSON 对象转化为 JSON 字符

使用 stringify

var last=JSON.stringify(obj); //将 JSON 对象转化为 JSON 字符

反序列化 即 js 中 JSON 字符串转化为 Object

转义

decodeURI( ) URl 中未转义的字符

decodeURIComponent( ) URI 组件中的未转义字符

encodeURI( ) URI 中的转义字符

encodeURIComponent( ) 转义 URI 组件中的字符

escape( ) 对字符串转义

unescape( ) 给转义字符串解码

URIError 由 URl 的编码和解码方法抛出

eval

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

时间

Date 对象

var myDate = new Date();

myDate.getYear(); //获取当前年份(2 位)

myDate.getFullYear(); //获取完整的年份(4 位,1970-????)

myDate.getMonth(); // 获 取 当 前 月 份 (0-11,0 代 表 1 月 ) 所 以 获 取 当 前 月 份 是

myDate.getMonth()+1;

myDate.getDate(); //获取当前日(1-31)

myDate.getDay(); //获取当前星期 X(0-6,0 代表星期天)

myDate.getTime(); //获取当前时间(从 1970.1.1 开始的毫秒数)

myDate.getHours(); //获取当前小时数(0-23)

myDate.getMinutes(); //获取当前分钟数(0-59)

myDate.getSeconds(); //获取当前秒数(0-59)

myDate.getMilliseconds(); //获取当前毫秒数(0-999)

myDate.toLocaleDateString(); //获取当前日期

var mytime = myDate.toLocaleTimeString(); //获取当前时间

myDate.toLocaleString( ); //获取日期与时间

加一天

var dateTime = new Date();

dateTime=dateTime.setDate(dateTime.getDate()+1);

dateTime=new Date(dateTime);

dateTime=dateTime.setDate(dateTime.getDate()+1);

面向对象

JavaScript 是一种基于原型的语言，它没类的声明语句，比如 C+ +或 Java 中用

的。这有时会对习惯使用有类申明语句语言的程序员产生困扰。相反，JavaScript

可用方法作类。定义一个类跟定义一个函数一样简单。在下面的例子中，我们定

义了一个新类 Person。

方法一

function Person(name) {
//构造函数里面的方法和属性
this._name = name;
this.getName = function () {
console.log(this._name);
};
this.setName = function (name) {
this._name = name;
};
}
var p = new Person("张三");
p.getName(); // 张三
p.setName("李四");
p.getName(); // 李四

对于上述代码需要注意：

Person 充当的构造函数

this 代指对象

创建对象时需要使用 new

方法二

// 定义类 class Person {
//类的构造函数，实例化的时候执行，new 的时候执行
constructor(name) {
this._name = name;
}
getName() {
console.log(this._name);
}
setName(name) {
this._name = name
}
}
let p = new Preson('张三')
p.getName(); // 张三
p.setName('李四');
p.getName(); // 李四

原型

我们所创建的每一个函数，解析器都会向函数中添加一个属性 prototype

这个属性对应着一个对象，这个对象就是我们所谓的原型对象

如果函数作为普通函数调用时 prototype 没有任何作用

当函数以构造函数调用时，它所创建的对象中都会有一个隐含的的属性

指向该构造函数的原型 我们可以通过proto来访问该属性

我们可以将对象中公有的内容，统一设置到原型对象中

function Persion(username,age){
}
//console.log(Persion.prototype);
var p = new Persion();
console.log(p.__proto__ == Persion.prototype);

定义原型变量和原型变量

function Persion(username,age){
}
//console.log(Persion.prototype);
Persion.prototype.a = '女';
Persion.prototype.Sayname=function(){
return Persion.name;
}
var p1 = new Persion('moonsec');
var p2 = new Persion();
alert(p1.Sayname());

运算符

用于执行程序代码运算，会针对一个以上操作数来进行

算数运算符

• • • / % ++ —

字符串拼接使用“+”

比较运算符

<

==

！=

<=

=

=== 全等于：将数值以及数据类型一并比较

！==不全等于：将数值以及数据类型一并比较

赋值运算符

=

+=

-=

*=

/=

%=

a=a+2;==>a+=2

a=a-2;==>a-=2

a=a2;==>a=2

a=a/2;==>a/=2

a=a%2;==>a%=2

逻辑运算符

&& 全真为真

|| 一个为真就是真

！ 取反

三元运算符

表达式 1?表达式 2:表达式 3

当我的表达式 1 成立时 执行表达式 2 否则执行表达式 3

var max = 2>1?'>':'<';
console.log(max);

流程控制语句

if语句

if(条件){

函数体

}

if else语句

if(条件){

函数体 1

}else{

函数体 2

}

if else if else 语句

if(条件 1){

}else if(条件 2){

}else if(条件 n){

}else{

}

switch语句

switch(表达式) {

case n:

代码块

break;

case n:

代码块

break;

default:

默认代码块

}

switch (new Date().getDay()) {
case 6:
text = "今天是周六";
break;
case 0:
text = "今天是周日";
break;
default:
text = "期待周末~";
}

循环结构

while 循环

先判断条件 当条件成立 再执行

while(循环成立条件){

….

}

do while循环

do…while 循环:不论条件成不成立 先执行一遍 再判断

do{

…..

}while(循环成立条件)

for循环

for in循环

continue：

跳过当前循环，直接进入循环的下一个步骤

break:

结束循环

JS操作DOM

什么是DOM

在JavaScript中，DOM（Document Object Model）是HTML和XML文档的编程接口。它将整个页面表示为一个树形结构，其中每个节点都是一个对象，代表文档中的一个部分，如元素、属性或文本等。下面我将以一个简单的HTML文档为例，绘制其对应的DOM结构图，并附上详细的注释说明。

HTML 示例

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p id="intro">This is a simple web page.</p>
    <div class="content">
        <p>Here is some more information.</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</body>
</html>

DOM 结构图

Document (根节点)
│
├── doctype (文档类型声明)
│
└── html (HTML文档的根元素)
    ├── head
    │   └── title
    │       └── "Sample Page" (文本节点)
    │
    └── body
        ├── h1
        │   └── "Welcome to My Website" (文本节点)
        │
        ├── p (id="intro")
        │   └── "This is a simple web page." (文本节点)
        │
        └── div (class="content")
            ├── p
            │   └── "Here is some more information." (文本节点)
            │
            └── ul
                ├── li
                │   └── "Item 1" (文本节点)
                │
                ├── li
                │   └── "Item 2" (文本节点)
                │
                └── li
                    └── "Item 3" (文本节点)

注释解释

• Document：这是DOM树的最顶层节点，代表了整个文档。
• doctype：描述了文档遵循的DTD（文档类型定义），在这个例子中指定了这是一个HTML5文档。
• html：HTML文档的实际根元素。
• head 和 body：<html> 的两个直接子元素，分别包含头部信息和主体内容。
• title：位于<head>内部，用来设置网页标题。
• h1, p, div, ul, li 等标签都对应着DOM中的元素节点。每个这样的节点都可以通过JavaScript来访问和修改。
• 文本节点：这些节点包含了实际可见的文字内容。例如，在<h1>下的“Welcome to My Website”就是一个文本节点。
• 属性：虽然没有在上述结构图中明确标出，但像id="intro"这样的属性也可以作为特定元素节点的一部分被访问到。
  此图展示了如何从HTML转换成DOM树，并且每种类型的节点如何组织在一起形成完整的网页结构。通过JavaScript，开发者可以很容易地操作这些节点以实现动态更新页面的效果。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

DOM查找元素

document 获取节点的基本方法

document.getElementById(‘id’); //通过 id 来获取元素,返回指定的唯一元素。

document.getElementsByName("name"); //通过 name 来获取元素，返回

name=’name’的集合。

.document.getElementsByClassName("classname") //用 classname 来获取元素，返

回的是一个 class="classname"的集合(不兼容 IE8 及以下)。

document.getElementsByTagName(‘div’); //用元素的标签获取元素，返回所有标签

=“div”的集合。

查找

直接查找

var obj = document.getElementById(‘id’);

间接查找

文件内容操作

innerText 仅文本

innerHTML 全内容

value

input value 获取当前的值

select 获取选中的 value 的值

document.getElementById(‘s1’).selectedIndex=1

Textarea 获取 value 的值

操作

样式操作

className 列出样式 字符串

classList 列出样式 返回数组

classList.add 增加样式

classList.remove 删除样式

obj.style.fontSize=’16px’;

属性操作

获取属性

getAttribute()

增加设置一个属性

添加属性

setAttribute(‘xxx’,’alexe’)

删除属性

removeAttribute(value)

创建标签 并添加到 html 中

第一种方式 字符串方式

insertAdjacentHTML()
<input type="button" value="+" onclick="add();"/>
<div id="div1">
<p><input type="text"/></p>
</div>
<script>
function add(){
var tag="<p><input type='text'></p>"
document.getElementById('div1').insertAdjacentHTML('beforeEnd'
,tag);
}
</script>
</body>

有四种值可用：

beforeBegin: 插入到标签开始前

afterBegin:插入到标签开始标记之后

beforeEnd:插入到标签结束标记前

afterEnd:插入到标签结束标记后

第二种方式 对象的方式

document.createElement
<input type="button" value="+" onclick="add2();"/>
<div id="div1">
<p><input type="text"/></p>
</div>
<script>
function add(){
var tag="<p><input type='text'></p>"
document.getElementById('div1').insertAdjacentHTML('beforeEnd'
,tag);
}
function add2(){
var tag =document.createElement('input');
tag.setAttribute('type','text');
tag.style.color='red';
var p =document.createElement('p');
p.appendChild(tag)
document.getElementById('div1').appendChild(p);
}
</script>appendChild 在节点后面增加一个子节点

提交表单

任何标签都可以通过 dom 提交

getElementById('id').submit()
<form id='f1' action="https://www.moonsec.com/">
<input type="submit" value="提交" />
<input type="button" value="botton" onclick="Sub();"
/>
<a onclick="Sub();">提交</a>
</form>
<script>
function Sub(){
document.getElementById('f1').submit();
}
</script>

其他

console.log 终端输出

alert 弹出框

confirm 确认框 标题 true false

url 和刷新

location.href 获取 url

location.href =’url’ 重定向

location.reload() 重新加载

定时器

setInterval()
clearInterval()
<input id="i1" type="text" />
<input type="button" value="停止" onclick="stop();">
<script>
function setTime(){
var tag = new Date();
document.getElementById('i1').value=tag;
}
var obj=setInterval('setTime()','500');
function stop(){
clearInterval(obj);
}

只执行一次

setTimeout()
clearTimeout()
<div id="status"></div>
<input type="button" value="删除" onclick="Delele();">
<script>
function Delele(){
document.getElementById('status').innerText="已删除";
setTimeout(function(){
document.getElementById('status').innerText="";
},5000)
}
</script>

事件

绑定事件两种方式

a.直接标签绑定 直接标签绑定 onclick=”

先获取 dom 对象，然后进行绑定

document.getElementById(‘xxx’).onclick()

更新: 2025-04-23 10:51:11
原文: https://www.yuque.com/yuhui.net/network/fdkif7310oxy0lkv