文章目录

1、什么是JavaScript
2、快速入门
- 2.1、引入JavaScript
- 2.2、语法入门
- 2.3、数据类型
- 2.4、严格检查格式
3、数据类型
- 3.1、字符串
- 3.2、数组
- 3.3、对象
- 3.4、流程控制
- 3.5、Map和set
- 3.6、iterator
4、函数
- 4.1、定义函数
- 4.2、变量作用域
- 4.3、方法
5、对象
- 5.1、Date
- 5.2、JSON
6、面向对象编程
7、操作BOM对象（重点）
8、操作DOM对象（重点）
9、操作表单（验证）
10、jQuery

1、什么是JavaScript

JavaScript

2、快速入门

2.1、引入JavaScript

1、内部标签

<script>//。。。。。
</script>

2、外部引入

abs.js

//。。。。

test.html

<script src="abs,js"></script>

测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--scrpt标签内，写JavaScript代码-->
<!--    <script>-->
<!--        alert('hello');-->
<!--    </script>--><!--    外部标签-->
<!--    注意：script必须成对出现--><script src="js/qj.js"></script><!--不用定义type,也默认是JavaScript--><script trpe="text/javascript"></script></head>
<body><!--也可以放这里-->
</body>
</html>

2.2、语法入门

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    严格区分大小写--><script>//1.定义变量  变量类型  变量名 = 变量值；var num = 1;//alert(num);//2.条件控制if(2>1){alert("true");}//console.log(score) 在浏览器的控制台打印变量</script></head>
<body></body>
</html>

2.3、数据类型

number

js不区分小数和整数，Number

123 // 整数123
123.1 // 浮点数123.1
1.23e3 // 科学计数法
-99 // 负数
NaN // not a number
Infinity // 表示无穷大

字符串

‘abc’ “abc”

布尔值

true false

逻辑运算符

！

比较运算符

=
==  等于(类型不同，值一样。也会判断为true)
===  绝对等于(类型一样，值一样，结果为true)

这是js一个缺陷，尽量不要使用==比较

须知：

NaN===NaN，这个与所有数值都不相等，包括本身
只能通过isNaN(NaN)来判断

浮点数问题

console.log(1/3===(1-2/3))

尽量避免使用浮点数进行运算

console.log(Math.abs(1/3-(1-2/3))<0.0000000001)

null和undefined

null为空
undefined未定义

数组

//保证代码可读性，尽量使用[]
var arr=[1,2,3,4,"heel",null]new Array(1,2,3,"hello",null)

取数组下标：如果越界 undefined

对象

对象是大括号，数组是中括号[]

每个属性之间用逗号隔开，最后一个不需要

var person={name:"gx",age:18,tags:['java','yd','...']
}

取值

person.name;

2.4、严格检查格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--
'use strict'严格检查模式，预防JavaScript的随意性
局部变量建议使用ler去定义
必须写在第一行
--><script>'use strict'//全局变量let i=1;</script>
</head>
<body></body>
</html>

3、数据类型

3.1、字符串

正常使用单引号或双引号
注意转义字符

\'
\n
\t
\u####    unicode字符
\x41      Ascll字符

多行字符串编写

//tab 上面
var msg=`helloworldaaaa`

模板字符串

let name="gx";
let age=18;
let msg=`nihao,${name}`

字符串长度

str.length

字符串的不可变
大小写转换

//注意这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()

sutdent.indexOf() 获取下标
student.substing()

//[),包含左侧，不包含右侧student.substing(1)    //从第一个字符截取到最后一个字符student.substing(1，3)   //包含第一个不包含底三个

3.2、数组

Array可以包含任意类型

1、长度

arr.length

注意：给arr.length赋值，数组大小会变化，数值过小，元素会丢失

2、indexOf，下标索引

字符串的"1"和数字 1 是不同的

3、slice()截取Array的一部分，返回一个新数组类似于String的substing()

4、pop()压入尾部，push()压入头部

5、unshift()压入头部，shift()yaruweibu

6、排序sort()

7、元素反转reverse()

8、concat()尾部添加一个数组

并没有修改数组

9、连接符join

打印拼接数组，使用特定的字符连接

3.3、对象

若干键值对

var 对象名={属性名：属性值，属性名：属性值，属性名：属性值
}
//定义了一个person对象
var person={name:"gao",age:18,email:"11111@qq.com",score:0
}

js中对象，{…}表示一个对象，键值描述属性xxx：xxx多个属性之间使用逗号，最后一个属性不加逗号

1、对象赋值

person.name="gx"

2、使用一个不存在的对象属性，不会报错

person.haha
undefined

3、动态的删减属性,通过delete删除对象属性

delete person.name

4、添加属性，直接给新的属性添加值即可

person.haha="haha"

5、判断属性值是否在对象中

'age' in person
//继承
'toString' in person

6、判断一个属性自身是否有这个对象hasOwnProperty()

person.hasOwnProperty('toString')false
person.hasOwnProperty('age')true

3.4、流程控制

if 判断

循环

var age=[12,3,12,1,45,6,7,945,3]
//函数
age.forEach(function (value){console.log(value)
})

3.5、Map和set

Map：

var map =new Map([['qq',100],['ww',90],['ee',80]]);
var name=map.get('qq');
map.add('aa',1111);//新增
map.delete('qq');//删除
console.log(name);

Set：无序不重复集合

set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素

3.6、iterator

//通过for of
var arr=[3,4,5]
for(var x of arr){console.log(x)
}

遍历map

var map = new Map([['qq', 100], ['ww', 90], ['ee', 80]]);for (let x of map) {console.log(x)}

遍历Set

var set = new Set([1, 2, 3])
for (let x of set) {console.log(x)
}

4、函数

4.1、定义函数

定义方式以

function abs(x){if(x>0){return x;}else{return -x;}}

一旦执行到return代表函数结束

如果没有执行到return，函数执行完也会返回，结果为undefined

定义方式二

匿名函数

var abs = function(x){if(x>0){return x;}else{return -x;}}

调用函数

abs(10)
abs(-10)

javaScript可以传递任意参数，也可以不传参数

不传参如何规避

手动抛出异常

var abs = function (x) {//手动抛出异常if (typeof x !== 'number') {throw 'not a number'}if (x > 0) {return x;} else {return -x;}
}

arguments

代表传递进来的所有参数是一个数组

var abs = function (x) {console.log("x=>" + x);for (var i = 0; i < arguments.length; i++) {console.log(arguments[i]);}if (x > 0) {return x;} else {return -x;}
}

rest

获取处理参数外所有的参数

function aaa(a,b,...rest){console.log("a=>"+a);console.log("b=>"+b);console.log(rest);
}

rest参数只能写在最后面，用…标识

4.2、变量作用域

在JavaScript中，var定义的变量实际有作用域的。

在函数体中声明，在函数体外无法调用

function qj(){var x=1;x=x+1;
}
x=x+2;

如果两个函数使用相同的变量名，只要在函数内部就不冲突

function qj(){var x=1;x=x+1;
}
function qj2(){var x='A';x=x+1;
}

内部函数可以访问外部函数成员，外部函数不可以访问内部成员

内部函数和外部函数变量名相同

function qj(){var x=1;function qj2(){var x='A';console.log('inner'+x);}console.log('outer'+x);qj2();
}
qj()//输出结果：
//outer1
//innerA

在JavaScript中函数查找变量从自身开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数变量

提升变量作用域

  function qj(){var x="x"+y;console.log(x);var y='y';}
qj();

结果：xundefined

说明：js自动提升了y的声明，但不会提升y的赋值

所有的变量定义在函数头部

全局变量

默认所有的全局变量都会自动绑定在window对象下

alert()本身也是一个window的变量

var x='xxx';window.alert(x);var old_alert=window.alert;//old_alert(x);window.alert=function (){}
//alert失效
window.alert(123);//恢复
window.alert=old_alert;
window.alert(456);

JavaScript实际上只有一个作用域，任何变量（函数也会视为变量）没有在函数范围内找到就会在全局范围找，如果还没有就会报错

规范

由于所有的全局变量都会绑到window上，如果不同的js文件，使用相同的全局变量就会冲突为减少冲突将将全局变量绑定到唯一全局变量上

//唯一全局变量
var gaoApp={};
//定义全局变量
gaoApp.name="gx";
gaoApp.add=function(a,b){return a+b;
}

局部作用域

function aaa(){for(var i=0;i<100;i++){console.log(i);}console.log(i+1);//101
}

let关键字，为了减少局部作用于冲突

function aaa(){for(let i=0;i<100;i++){console.log(i);}console.log(i+1);//Uncaught ReferenceError: i is not defined
}

常量

4.3、方法

方法就是把函数放在对象内部

var gx={name:"gao",birth:1999,age:function (){var now=new Date().getFullYear();return now-this.birth;}
}//调用
gx.age()

分开写

function getAge(){var now=new Date().getFullYear();return now-this.birth;
}
var gx={name:"gao",birth:1999,age:getAge
}

5、对象

5.1、Date

基本使用

var now=new Date();
now.getFullYear();
now.getMonth();
now.getDate();
now.getDay();
now.getHours();
now.getMinutes();
now.getSeconds();now.getTime();

5.2、JSON

在JavaScript中一切皆为对象，任何js支持的类型都可以用JSON表示；number，string

格式：

对象用{}
数组用[]
所有的键值对，都是用key：value

JSON字符串和js转换

var user={name:"gx",age:3,sex:"man"
}
//对象转为JSON字符串
var jsonUser=JSON.stringify(user);//json支符串转为对象
var obj=JSON.parse('{"name":"gx","age":3,"sex":"man"}');

6、面向对象编程

原型对象

类：模板

对象：具体表现

原型：

var Student={name:"gx",age:3,run:function (){console.log(this.name+"run...")}
}
var xiaoming={name:"xiaoming"
}//原型对象
xiaoming.__proto__=Student;var Bird={fly:function (){console.log(this.name+"fly...")}
}xiaoming.__proto__=Bird;

function Student(name){this.name==name;
}
//给student增加方法
Student.prototype.hello=function (){alert("hello")
}

class继承

//ES6之后
//定义一个学生类
class Student{constructor(name) {this.name=name;}hello(){alert("hello")}
}var xiaoming=new Student("xiaoming");

继承

class Student{constructor(name) {//构造this.name=name;}hello(){alert("hello")}
}class xiaoStudent extends Student{constructor(name,grade) {super(name);this.grade=grade;}myGrade(){alert('小学生')}
}var xiaoming=new Student("xiaoming");
var xiaohong=new xiaoStudent("xiaohong",1);

原型链

__ proto __

7、操作BOM对象（重点）

浏览器介绍

BOM：浏览器对象模型

IE 6~11
chrome
Safati
FireFox

三方

QQ浏览器

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
460
window.innerWidth
2144
window.outerHeight
1173
window.outerWidth
2151
//浏览器窗口

Navigator

Navigator封装了浏览器的信息

screen

screen.width
2144screen.height
1206

location(重要)

location代表当前页面URL信息

host: "newtab.firefoxchina.cn"
href: "https://newtab.firefoxchina.cn/newtab/as/activity-stream.html"
protocol: "https:"
//设置新的地址
location.assign()

document

document代表当前页面

document.title

获取具体的文档树节点

<dl id="app"><dt>java</dt><dd>javaSE</dd><dd>javaEE</dd>
</dl><script>var d1 = document.getElementById('app');
</script>

获取cookie

document.cookie

服务器端可以设置cookie：httpOnly

history

history代表浏览器的历史记录

history.back()//后退
history.forward()//前进

8、操作DOM对象（重点）

DOM：文本对象模型

核心

更新：更新DOM节点
遍历DOM节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个DOM节点

要操作一个DOM节点首先要获取这个DOM节点

<div id="father"><h1>标题一</h1><p id="p1">p1</p><p class="p2">p2</p>
</div><script>var h1 = document.getElementsByTagName("h1")var p1 = document.getElementById("p1")var p2 = document.getElementsByClassName("p2")var father = document.getElementById("father")</script>

更新节点

<div id="id1"></div>
<script>var id1=document.getElementById("id1")
</script>

==id1.innerText=“123”==修改文本的值
==id1.innerHTML="< strong >123< /strong >"==可以解析HTML文本标签
==id1.style.color=‘red’==修改颜色
==id1.style.fontSize=‘200px’==修改大小

删除节点

步骤：先获取父节点，再删除子节点

<div id="father"><h1>标题一</h1><p id="p1">p1</p><p class="" P2>p2</p>
</div><script>var self=document.getElementById("p1")var father =p1.parentElement;father.removeChild(self)
</script>//删除是一个动态过程；删除节点时，children时刻在变化
father.removeChild(father.children[0])

插入节点

我们获得某个DOM节点，假如DOM是空的则可使用innerHTML就可以添加一个元素

如果DOM不为空，则使用：

appendChild添加，已存在节点

<p id="js">javascript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">javaEE</p><p id="me">javaME</p>
</div><script>var js=document.getElementById('js');var list=document.getElementById('list')list.appendChild(js)
</script>

创建一个节点

<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="" type="text/css"><script type="text/javascript" src=""></script>
</head>
<body>
<p id="js">javascript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">javaEE</p><p id="me">javaME</p>
</div><script>var js = document.getElementById('js');var list = document.getElementById('list')//通过js创建一个节点var newP = document.createElement("p")//创建一个标签pnewP.id = "newp";newP.innerText = "aaa"//list.appendChild(newP)newP.setAttribute('id','newP')var myScript=document.createElement('script')myScript.setAttribute('type','text/javascript')//创建一个style标签var myStyle=document.createElement('style')//创建一个空style标签myStyle.setAttribute("type",'text/css');myStyle.innerHTML='body{background-color:chartreuse}';//设置标签内容document.getElementsByTagName('head')[0].appendChild(myStyle)</script></body>

insert

<script>
var ee = document.getElementById('ee')
var js = document.getElementById('js')
var list = document.getElementById('list')
list.insertBefore(js, ee)
</script>

9、操作表单（验证）

表单是什么 form DOM树

<form action="post"><p><span>用户名：</span><input type="text" id="username"></p><p><span>性别：</span><input type="radio" name="sex" value="man" id="boy">男<input type="radio" name="sex" value="woman" id="girl">女</p>
</form><script>var input_text=document.getElementById('username')var boy_radio=document.getElementById('boy')var girl_radio=document.getElementById('girl')//得到输入框的值input_text.value//修改输入框的值input_text.value="123"//对于单选框，多选框的值固定，boy_radio.value只能获取当前的值boy_radio.checked //返回当前的结果，是否为true，如果为true，则被选中girl_radio.checked=true;//赋值
</script>

提交表单

<!--表单绑定提交事件
οnsubmit=绑定一个提交检测的函数，true，false
将这个结果返回给表单，使用onsubmit接收
-->
<form action="#" method="post" onsubmit="return aaa()"><p><span>用户名：</span><input type="text" id="username" name="username"></p><p><span>密码:</span><input type="password" id="input-password"></p><input type="hidden" id="md5-password" name="password"><button type="submit" onclick="aaa()">提交</button>
</form><script>function aaa(){var uname=document.getElementById('username')var pwd=document.getElementById('input-password')var md5pwd=document.getElementById("md5-password")md5pwd.value=md5(pwd.value)//可以校验判断表单内容，true就是通过，false阻止提交return true}
</script>

10、jQuery

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script scr="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<!--
公式：$(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>document.getElementById('id')//选择器就是css的选择器$('#test-jquery').click(function (){alert('hello');})
</script></body>
</html>

选择器

<script>//标签document.getElementsByTagName()//iddocument.getElementById()//类document.getElementsByClassName()//jQuery  css中的选择器它都能用$("p").click();$("#id1").click();$(".class").click();</script>

事件

$(select).action()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script><style>#divMove{width: 500px;height: 500px;border:1px solid #48e32c;}</style>
</head>
<body>
<!--获取鼠标的一个坐标-->mouse:<span id="mouseMove"></span>
<div id="divMove">点击
</div><script>//当网页元素加载完毕后响应事件$(function (){$('#divMove').mousemove(function (e){$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)})});
</script>
</body>
</html>

操作DOM

节点文本操作

<body>
<ul id="test-ul"><li class="js">javascript</li><li name="python">python</li>
</ul><script>$('#test-ul li[name=python]').text();//获得值$('#test-ul li[name=python]').text('设置值');//获得值$('#test-ul').html();//获得值$('#test-ul').html('<strong>123</strong>');//获得值//css的操作$('#test-ul li[name=python]').css("color","red");//文本显示和隐藏的本质：dispay：none$('#test-ul li[name=python]').show();$('#test-ul li[name=python]').hide();
</script>

JavaScript基本用法相关推荐

JavaScript:switch用法
JavaScript:switch用法基本语法 switch(n){ case 1: 代码块1 break; 代码块2 语句: break; default: 代码块3 break; } 先定义一个 ...
javascript:void(0)和javascript:;的用法
一.JavaScript:void(0) 我们经常会使用到 javascript:void(0) 这样的代码,那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢 ...
Javascript Promise用法详解
1.约定本文的 demo 代码有些是伪代码,不可以直接执行. 没有特殊说明,本文所有 demo 都是基于 ES6 规范. Object.method 代表是静态方法, Object#method 代 ...
javascript call用法及好处
javascipt 中 Call的用法及好处 javascript call可以改变当前函数的作用域, 基本用法如下 function Person(name){this.name = name; } ...
javascript opener 用法
window.opener 的用法在一般的用法中,只是用来解决关闭窗口时不提示弹出窗口, 而对它更深层的了解一般比较少. 其实 window.opener是指调用window.open方法的窗口. ...
javascript this用法小结
this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascript中,由于 javascript的动态性(解释执行,当然也有简单的预编译 ...
Javascript typeof用法
在js里用到数组,比如多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组. if(document.mylist.length != "undefined" ...
55个javascript经典用法
1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border οncοntextmenu ...
javascript 基本用法
1.javascript简介*基于对象和事件驱动的语言,应用于客户端-基于对象提供了很多对象,可以直接拿过来使用-事件驱动html做网站静态效果,javascript能够呈现动态效果-客户端:专门指浏 ...

JavaScript基本用法