JavaScript
文章目录
JavaScript是一种脚本语言
1-快速入门
1.1-引入JavaScript
<!--1 内部标签-->
<script>
alert("????");//弹窗
</script>
<!--2 外部引入-->
<script src="js/first.js"></script>
<!-- type默认是JavaScript-->
<script type="text/javascript"></script>
1.2-基本语法
<!-- 内部标签-->
<script>
//严格区分大小写
//1.定义变量 变量类型 变量名 = 变量值;
var num = 1;
//2. 条件控制
if (num==1){
alert(num);
}
//console.log(num) 浏览器控制台打印变量
</script>
浏览器调试F12
1.3-数据类型
数值, 文本, 图形, 音频, 视频…
-
变量
var name = xxx
-
number : js不区分整数小数
123 //整数 1.23 // 浮点数 1.23e3 //科学计数法 -123 //负数 NaN //不是一个数字 Infinity //表示无限大
-
字符串 ‘abc’ “abc”
-
布尔值 true, false
-
逻辑运算
&& || !
与或非 -
比较运算符 !!!
= :赋值
== 等于(类型不一样值一样, 也会判断为true)
=== 绝对等于 (类型一样, 值一样为true)
NaN===NaN (false)
任何数和NaN比较都不相等, 只能通过isNaN(NaN)
来判断
-
浮点数
console.log( (1/3) === (1-2/3) ) : false
尽量避免十三浮点数进行运算, 存在精度问题Math.abs( 1/3-(1-2/3) )<0.000000001 : true
可以使用这种方式
-
null 和 undefined
- null 空
- undefined 未定义
-
数组 java中需使用相同类型, js不需要
var arr = [1,2,3,4,'a',null,true]
尽量使用[] , 提高可读性new Array(1,2,3,4,'a',null,true);
- 取值 arr[0], 如果取值下标越界 arr[8] 报 undefined
-
对象 大括号{}
-
每个属性使用逗号隔开
-
//Person person = new Person(); var person = { name : "xiaoming", age : 17, tags : [1,2,3,4] } //取值 person.name
-
1.4-严格检查模式
- 前提: IDEA 需要设置ES6语法
- 在js中第一行添加
'use strict';
- 局部变量建议使用
let
定义
<script>
'use strict';
let i = 1;
</script>
2-数据类型
2.1-字符串
- 1使用""或’’
let a = '中'
- 2转义字符
\
\' 单引号
\n 换行
\t 空格
\u4e2d \u**** Unicode字符
\x41 :A Ascll字符
- 3多行字符串编写
//使用波浪键符号 ``
let msg = `123123
1231111111111111松松`;
- 4模板字符串
let name = "xm";
let age = 18;
let msg = `你好: ${name},${age} 岁`
![image-20220115183247628](https://gitee.com/xbd_zc/images/raw/master/img/image-20220115183247628.png)
- 5字符串长度
name.length
- 6 字符串不可变
- 7 大小写转换 : 大写
name.toUpperCase()
小写name.toLowerCase()
- 8 获取字符的下标
name.indexOf('x')
- 9 截取字符串
substring()
let name = 'student';
name.substring(1); //tudent, 从坐标1最后一个字符
name.substring(1,3);//tu , 取坐标1-2 ,不含3
2.2-数组
Array可以包含任意的数据类型
let arr = [1,2,3,4,5,6]
1, 长度
arr.length
arr.length = 10; //数组长度赋值大于原长度, 长度变大, 多出来的值是空的, 取出来显示undefined
arr.length = 2; //数组长度赋值小于原长度, 长度变小, 元素会丢失
2, indexOf, 通过元素获得下标索引
arr.indexof(6); //5
3, slice() 截取数组元素, 返回一个新数组, 类似于substring
arr.slice(1,3); //23
4, push() , pop() 在尾部添加元素或去掉元素
push('a','b');//在尾部添加两个元素
pop('a'); //尾部去掉一个
5, unshift() , shift() 在头部添加元素或去掉元素
unshift('a','b');//在头部添加两个元素
shift('a'); //头部去掉一个
6, 排序 sort()
(3) ["B","C","A"]
arr.sort()
(3) ["A","B","C"]
7, 元素反转 reverse()
(3) ["A","B","C"]
arr.reverse();
(3) ["C","B","A"]
8, 拼接数组 concat() , 拼接后返回一个新数组
(3) ["c", "B", "A"]
arr.concat ([1,2, 37)
(6) ["c", "B", "A", 1, 2, 3]
arr
(3) ["c", "в", "А"] //原数组没有改变
9, 连接符 join
打印数组, 使用输入的连接符连接
(3) ["C", "B", "A"]
arr. join('-')
"C-B-A"
10, 多维数组
arr = [[1,2] , [3,4], ["5","6"]];
arr[1][1]
4
2.3-对象
var 对象名={
属性名: 属性值,
属性名:屈性值
属性名: 居性值
}
//定义了一个person对象,它有四个属性!
var person ={
name: "kuangshen",
age: 3,
email: "24736743@qq. com"
score: 0
}
- 取值:
person.name
- 赋值:
person.name = "zs"
1, 动态添加删除属性
delete person.name //删除name
person.haha = "haha" // 添加haha
2,判断属性值是否在对象中 'age'in person
3,判断一个属性是否在这个对象中 hasOwnProperty()
person.hasownProperty('tostring')
false
person.hasownProperty('age')
true
2.4-流程控制 if
if判断
if (num==1){
alert(num);
}else if(){
alert(1)
}else{
alert(2)
}
while循环
//while循环
while(age<100){
age = age+1;
console.log(age);
}
//do while 先执行一遍
do{
age = age+1;
console.log(age);
}while(age<100)
for循环
//for循环
for(let i = 0; i<100; i++){
cousole.log(i);
}
//forEach
var age = [12,3,12,3, 12,3, 12,31,23, 123];
//函数
age.forEach (function (value) {
console.1og(value)
})
//for in
//for(var index in object) {}
for (var num in age){
if (age. hasownProperty(num)){
console.1og("存在")
console. 1og (age[num])
}
}
2.5, Map和Set -ES6新特性
Map
//ES6 Maр
//学生的成绩,学生的名字
// var names = ["tom", "jack","haha"];
// var scores =[100,90,80];
var map = new Map ([['tom ', 100] , ['jack ',90] , ['haha ' ,80]]);
var name =map.get('tom'); //通过key获得value
map.set('admin' , 123456); //新增或修改
map.delete("tom"); //删除
Set: 无序不重复
var set = new Set([3,1,1,1,1,1]); //自动去重 [3,1]
set.add (2); //添加!
set.delete (1); //删除!
console.1og(set. has(3)); //是否包含某个元素!
2.6 ,iterator迭代器
let map = new Map();
map.set("zs",100);
map.set("ls",80);
let iterator = map[Symbol.iterator]();
for (let item of iterator){
console.log(item)
}
2.7-for of遍历 ES6
for in 取下标, for of 取值
var map = new Map([["zs",15],["ls",18],["xm",16]]);
for (let x of map){
console.log(x)
}
3-函数
3.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;
}
}
3.2-调用函数
abs(10);
abs(10,11,23,1231,23);
js可以传递任意个参数, 是一个数组
3.3-参数
抛出异常
如果不存在参数, 可以手动抛出异常
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. 1og("x=>"+x);
for (var i = 0; i<arguments.length; i++){
console.log (arguments [i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
reset ES6
ES6新特性, 获取除了已定义的参数外的所有参数
function aaa(a,b,...rest) {
console.1og("a=>"+a);
console.1og ("b=>"+b);
console.log(rest);
}
3.4-变量的作用域
1,js中var定义变量实际是有作用域的
function gj() {
var x = 1;
x=x+1;
}
x=x+2; //uncaught ReferenceError: x is not defined
- 假设在函数体中声明, 则函数外不可以使用 (想实现需了解闭包)
2,如果两个函数使用了相同的变量名, 只要在函数内部, 不会冲突
function a() {
var x= 1;
x = x + 1;
}
function b() {
var x = 'A';
x = x + 1;
}
3,内部函数可以访问外部函数的成员, 反之则不行
function a() {
var x=1;
//内部函数可以访问外部函数的成员,反之则不行
function b() {
var y = x + 1 ; //2
}
var z = y +1; // uncaught ReferenceError: y is not defined
}
4,内部, 外部函数变量名一致时
函数查找变量从自身所在的函数开, 有"内" (本函数中) 向 “外” 查找
加入内部外部变量重名, 会屏蔽外部函数变量
function a() {
var x = 1;
function b() {
var x = 'A';
console.1og('inner'+x); //innerA
}
console.log ('outer'+x); //outerl
b()
}
b()
5,规范:提升作用域
规范: 所有变量的定义放在函数的头部, 便于维护;
function a(){
var x = 1,
y = x + 1,
a,b,c;
}
6,全局变量
定义在函数外部的变量, 函数内部外部都可以使用
x = 1; //全局变量
function a(){
console.log(x);//1
}
console.log(x);//1
7,全局对象 window *
默认所有的全局变量, 都自动绑定在window对象下, alert函数也是一个window变量
var x = 'abc';
console.log(x);//abc
console.log(window.x);//abc
window.alert(x); //abc
var old_alert = window.alert;
old_alert(x); //abc
winodw.alert = function(){};//相当于重写alert函数
window.alert(123); //无法弹出, alert变成上面的空函数
window.alert = old_alert; //恢复原来的alert函数
window.alert(x); //abc
8,规范:全局变量定义
可以把所有变量定义到同一个全局变量中
//唯一全局变量
var Global = {} ;
//定义全局变量
Global.name = 'xm';
Global.sum = function (a,b){
return a+b;
}
9,局部作用域let-ES6 *
function aaa(){
for (var i = 0; i<100; i++){
console.log(i);
}
console.log(i+1);//这里还能使用i
}
ES6 let关键字, 解决局部作用于冲突
function aaa(){
for (let i = 0; i<100; i++){ //使用let
console.log(i);
}
console.log(i+1);//报错:uncaught ReferenceError: i is not defined
}
10, 常量const-ES6 *
const PI = '3.14'; //只读变量
console.log(PI);//3.14
PI = '123'; //报错:TypeError: Assignment to constant variable. 不可修改
3.5-方法
对象里面就是方法,面向过程没有对象就是函数
var zs = {
name: 'zs',
birth: 2000,
//方法
age: function (){
return new Date().getFullYear()-this.birth;
}
}
//属性
zs.name
//方法, 要带括号
zs.age()
- this代表调用他的对象
function getAge (){
return new Date().getFullYear()-this.birth;
}
var zs = {
name: 'zs',
birth: 2000,
//方法
age: getAge //只需写名字
}
zs.age();//ok
getAge(); //NaN , window里没有birth这个属性
1,apply: 控制this指向
每个函数都有apply
function getAge (){
return new Date().getFullYear()-this.birth;
}
var zs = {
name: 'zs',
birth: 2000,
//方法
age: getAge
}
getAge.apply(zs,[]);//this指向了zs, 参数为空
4-内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
'number
typeof []
"object"
typeof {}
"object"
typeof Math . abs
"function
typeof undefined
"undefined"
4.1-Date
1, 基本使用
var now = new Date; //获取当前日期
now.getFullYear(); //年
now.getMonth(); //月 0-11 月
now.getDate(); //日
now.getDay(); //星期几
now.getHours(); //时
now.getMinutes(); //分
now.getTime(); //时间戳
new Date(1123123123111);时间戳转时间
2, 时间戳转换
now = new Date(1642397974290);
Mon Jan 17 2022 13:39:34 GMT+0800 (中国标准时间)
now.toLocaleString();
'2022/1/17 下午1:39:34'
now.toGMTString();
'Mon, 17 Jan 2022 05:39:34 GMT'
4.2-JSON
JSON间接
早期使用XML文件传输数据
- JSON(JavaScript Object Notation,JS对象简谱)是一种轻量级的数据交换格式
- 简洁和清晰的层次结构使得JSON成为理想的数据交换语言
- 简于人阅读和编写, 同同时也易于机器解析和生成, 并有效地提升网络传输效率
JS一切皆为对象, 任何JS支持的类型都可以用JSON来表示; number,string等等
格式:
- 对象都用
{}
- 数组都用
[]
- 所有的键值对都用
key:value
1,JSON字符串-JS对象转换
var user = {
name : "zs",
age : 18,
sex : '男'
}
//对象转JSON字符串
var json_user = JSON.stringify(user);
//JSON字符串转对象
var obj = JSON.parse('{"name":"zs","age",18,"sex":"男"}');
JSON和JS对象区别
var user = {name:'zs',age:3,sex:'男'}
var json = '{"name":"zs","age",18,"sex":"男"}'
5-面向对象编程
5.1-原型对象
类:模板
对象:具体的实例
在JavaScript中
原型: 对象.__proto__ = 被继承对象
1:class继承 ES6
定义一个类, 属性, 方法
//定义一个学生类
class Student{
comstrictor(name){
this.name = name;
}
hello(){
alert('hello');
}
}
//使用
var xm = new Student("xm");
xm.hello();
继承
class SmStudent extends Student{
constructor(name,grade){
super(name);//需完成父类的name
this.grade = grade;
}
my(){
alert('小学生');
}
}
var zs = new SmStudent("zs",1);
原型链
![image-20220119130111617](https://gitee.com/xbd_zc/images/raw/master/img/image-20220119155231297.png)
6-操作BOM对象 *
操作浏览器对象
window对象(*)
window代表浏览器窗口
window.alert(1)
undefined
window.innerHeight //内部高度
258
window.innerwidth
I
919
window.outerHeight//外部高度
994
window.outerwidth
919
Navigator 不建议使用
navigator,封装了浏览器信息
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36 Edg/95.0.1020.44'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36 Edg/95.0.1020.44'
navigator.platform
'Win32'
- 大多时候,
navigator
不会被人为修改
screen
screen 屏幕分辨率
screen.width
screen.height
location(*)
location 当前页面的URL
host: "localhost:63342"
href: "http://localhost:63342"
protocol: "http:"
reload: ƒ reload()//刷新页面
location.assign('www.baidu.com')//设置新的地址
document
代表当前页面,HTML. DOM文件树
document.title
"必读"
document.title='百度'
"百度"
获取具体的文档树节点
<div id="app">
<p>js</p>
</div>
<script>
var app = document.getElementById('app');
</script>
获取cookie
document.cookie
服务器端可以设置cookie: httpOnly
history
浏览器历史记录
history.back() //后退
history.forward() //前进
7-操作DOM对象 *
浏览器网页–DOM树形结构
- 更新: 更新DOM节点
- 遍历DOM节点: 获得
- 删除
- 添加
1,获得DOM节点
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应css选择器
var h1 = document . getElementsByTagName('h1' );
var p1 = document . getElementById('p1');
var p2 = document. getElementsByClassName('p2');
var father = document . getElementById(' father');
var childrens = father . children; // 获取父书点下的所有子节点
// father. firstChild
// father. LastChild
2,更新节点
操作文本
- 修改文本的值
id.innerText = 'adc'
会覆盖原来的元素 - 解析HTML文本标签:
id.innerHTML = '<h1>123</h1>'
操作js
id.style.color = 'red';
id.style.fontSize = '100px'; // - 变成驼峰命名
3,删除节点
步骤:
- 先获取父节点
- 通过父节点删除
father.removeChild(p1);
//通过要删除的节点获取父元素
p1.parentElement;
//通过下标删除
father.removeChild(father.children[0]);
注意: 删除多个节点的时是动态的, 下标会更新, 可以从后往前删
4,插入节点
append追加:相当于移动元素
<p id="js">js</p>
<div id="list">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<script>
let js = document.getElementById('js'),
list = document.getElementById('list');
</script>
//控制台操作
list.append(js);
createElement, 创建新标签,实现插入
<body>
<p id="js">js</p>
<div id="list">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<script>
let js = document.getElementById('js'),
list = document.getElementById('list');
//通过JS创建一个新节点
var newP = document.createElement("p");//创建一个p标签
//newP.id = 'new_p';//添加ID
newP.setAttribute('id','new_p')
newP.innerText = 'Hello';//添加文字
</script>
</body>
创建一个style标签
//创建一个style标签
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body {background-color: aqua;}';
document.getElementsByTagName('head')[0].appendChild(myStyle);
8-操作表单(验证)
表单是什么, form, DOM数里的一个节点
- 文本框 text
- 下拉框 select
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
1,表单的目的提交信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="post">
<span>用户名:</span> <input type="text" id="username">
<!-- 多选框-->
<p>
<span>性别</span>
<input type="radio" name="sex" value="man", id="man"> 男
<input type="radio" name="sex" value="girl", id="girl"> 女
</p>
</form>
<script>
var input_text = document.getElementById('username');
var man = document.getElementById('man');
var girl = document.getElementById('girl');
//获取输入框的值
input_text.value;
//修改输入框的值
input_text.value = '123';
//单选框取值需判断选中状态
man.checked;//选中为true
man.checked = true;//选中男
</script>
</body>
</html>
2,提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
表单绑定事件
onsubmit="return aaa()" true通过, false不通过
-->
<form action="post" onsubmit="return aaa()">
<span>用户名:</span> <input type="text" id="username" name="username">
<span>密码:</span> <input type="password" id="password">
<input type="hidden" id="md5-pwd" name="password">
<!-- 绑定时间 onclick:被点击-->
<button type="submit">提交</button>
</form>
<script>
function aaa(){
var uname = document.getElementById('username'),
pwd = document.getElementById('password'),
md5_pwd = document.getElementById('md5-pwd');
md5_pwd.value = md5(pwd.value);
//判断表单内容, true通过, false不通过
return true;
}
</script>
</body>
</html>
9-jQuery
jQuery库, 里面有大量的JS函数
公式
$(selector).action()
1,获取jQuery
官网: jquery.com
- 导入项目
<script src="lib/jquery-3.6.0.js"></script>
- 使用cdn导入:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
2,选择器
<script>
//js选择器
document.getElementById();//ID选择器
document.getElementsByTagName();//标签选择器
document.getElementsByClassName();//类选择器
//jQuery css选择器都能使用
$('p').click();//标签选择器
$('$id').click();//id选择器
$('.class').click();//类选择器
</script>
3,事件
- 鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
#div_m{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
mouse: <span id="mouse_m"></span>
<div id="div_m">
移动鼠标
</div>
<script>
//网页元素加载完成后 响应事件
//$(document).ready(function (){ });
//简化后
$(function (){
$('#div_m').mousemove(function (e){
$('#mouse_m').text('x:'+e.pageX+'y:'+e.pageY);
})
});
</script>
</body>
</html>
4,操作DOM
方法写参数就是设置值
不填参数就是获取值
文本操作
<ul id="cc_ul">
<li id="cc_js">JS</li>
<li id="cc_css">CSS</li>
</ul>
<script>
$('#cc_js').text();//JS 获取值
$('#cc_js').text('123');//设置值
</script>
css操作
$('#cc_js').css('color','red');
显示/隐藏元素
$('#cc_js').show();
$('#cc_js').hide();
$('#cc_js').toggle();
5,小技巧
- 1, 看JQuery源码, 看游戏源码
- 2, 巩固HTML. CSS(扒网页, 对应修改)
- 删除对应JS, 找到核心JS, 下载下来学习, 对应修改