JavaScrip整理及常用方法_javascrip 说明:实现从对象中取值的get方法 * 根据对象和传入路径(如果是数组元素-CSDN博客

本文链接：https://blog.csdn.net/m0_53858733/article/details/122270839

本文详细介绍了JavaScript的基础知识，包括变量、数据类型、流程控制、函数、内部对象、面向对象编程以及DOM和BOM操作。还涵盖了jQuery的使用和表单处理。深入浅出地讲解了JavaScript的核心概念，适合初学者和进阶开发者参考。

摘要由CSDN通过智能技术生成

JavaScript

1、JavaScript是什么

用来前端页面简单逻辑和与后端的交互

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是[ECMAScript ](https://baike.baidu.com/item/ECMAScript /1889420)。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。

2、入门

JS代码一般放在html文件< head >中或者< body >最下方

JS代码需要放在< script >标签中

1、JS代码使用方式

内部使用：

<script>
    alert('hello,word');//弹窗
</script>

引用文件：

<script src="js/01-alert.js"></script>

2、调试方法

<script>
    let i = 1;//定义一个局部变量
	alert(i);//通过网页弹窗输出
	console.log(i);//通过网页控制台输出
</script>

在这里插入图片描述

网页控制台使用js代码

在这里插入图片描述

3、数据类型

(1).变量的定义

<script>
      'use strict';//使用严格检查模式
      let i = 1;//局部变量
      var j = 1;//全局变量
      /*
      * var可以定于所有的数据类型
      *     number（整数，浮点数，负数）
      *     字符串（"string",'string'）
      *     Boolean（true，false）
      * 逻辑运算符
      *  * 比较运算符
      * ==(只需要类型等于) 
      * ===(类型和数值都等于)
      * =(等于)
      * */
    </script>

(2).字符串

在这里插入图片描述

(3).数组

数组元素可以包含任意的数据类型

<script>
    'use strict';
    let arr = [1,2,"123",1.0];
    console.log(arr);
</script>

常用方法

.lenght 返回数组长度

.pop() 弹出数组最尾部元素

.push() 在数组尾部压入元素

.slice() 截取从起始位到结束位的元素

.indexOf() 获取指定元素的下标

.unshift() 数组头部压入元素

.shift() 弹出数组头部元素

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

.reverse() 对数组元素进行反转

.concat() 将数组与数组进行拼接

.join() 打印时候使用括号内符号进行连接数组元素

(4).对象

对象的定义

对象属性的赋值

对象属性的取值

JS对象可以实现动态的元素增删

常用方法：

判断某属性是否在对象中存在(从父类中继承到的属性也会返回true)

判断某属性是否为对象的自身属性

对象的定义

<script>
    'use strict'
    var person = {
        name: "xiaozhang",
        age: 21,
        school: "xxx大学"
    }
</script>

对象的取值和赋值

person.name
'xiaozhang'
person.name = "小张"
'小张'

对象的动态增删属性

person.sex = "男"//增加属性
'男'
person
{name: '小张', age: 21, school: 'xxx大学', sex: '男'}
delete person.sex//删除属性
true
person
{name: '小张', age: 21, school: 'xxx大学'}

常用判断

person
{name: '小张', age: 21, school: 'xxx大学'}

'toString' in person
true
person.hasOwnProperty('toString')
false
person.hasOwnProperty('name')
true

(5).流程控制

if()

while()

do{} while()

for循环

遍历数组元素 forEach，for of

遍历数组下标 for in

var arr = [11,2,123,3,12,3,123,12,3,1,23];
arr.forEach(function (value) {
    console.log(value);
})var arr = [1,2,3,4,5];
//forEach遍历数组元素
arr.forEach(function (value) {
    console.log(value);
})
//for of遍历数组元素
for (let number of arr) {
    console.log(number)
}
//for in遍历数组下标
for (let number in arr) {
    console.log(number)
}

(6).Map和 Set

定义

取值赋值

map.set(‘kye’,value)

map.get(‘key’)

set.add()

删除

map.delete(‘kye’)

set.delete()

set中是否存某元素

set.has()

遍历Map和Set需要使用for of

var map = new Map([['小张',100],['小王',80]]);
var set = new Set([1,1,1,22,22,3,3]);
//遍历map和set
for (let x of map) {
    console.log(x);
}
console.log("===============")
for (let x of set) {
    console.log(x);
}

4、函数

(1).定义函数

定义函数的两种方法

函数的调用

如何手动抛出异常

多个入参的获取与处理

定义参数的两种方法

<script>
    function ab(x) {
    console.log(x);
    }
    let abc = function(x){
        console.log(x);
    }
</script>

手动抛出异常

//判断入参是否为数字否则抛出异常
function a1(x){
    if(typeof x !== 'number'){
        throw 'Not a Number!'
    }else{
        return x;
    }
}

多个入参的处理

'use strict'
function a1(x){
    console.log(x);
    if (arguments.length > 1){//arguments 能够获取所有的入参，为一个数组
        for (let i = 0; i< arguments.length ; i++) {
            console.log(arguments[i]);
        }
    }
}
function a2(x,...rest) {//多余的入参会存入到rest中为一个数组
    console.log(x);
    console.log(rest);
}

(2).变量的作用域

javascript 会将所有变量的定义自动提升到最前面

javascript 编写时候注意将所有的变量定义放在最前面

全局变量

在所有的函数中都可以使用

全局对象 window

<script>
    'use strict';
    var x = 23;//这是一个全局变量
    console.log(x);
    console.log(window.x);//window代表全局对象，可以获取所有的全局变量和函数
</script>

规范，将所有自己定义的方法和函数存放在自己定义的全局对象中

<script>
    var MyAppObject = {};//定义唯一的全局变量
    MyAppObject.name = '小张';//在自己的全局变量中增加属性
    MyAppObject.add = function (newName) {//在自己的全局变量中增加函数
        MyAppObject.name = newName;
        return newName;
    }
</script>

局部作用域 let，常量const(只读变量)

(3).方法

理解为定义在对象中的函数即为方法

<script>
    'use strict';
	var person = {
        name:'小张',
        birth:2020,
        age: function () {
            let now = new Date().getFullYear();
            return now-this.birth;
        }
	}
</script>

this关键字指向调用当前函数的对象

可以使用Apply方法来指定某一个方法的this所指向的对象

<script>
    'use strict';
function getAge() {
    let now = new Date().getFullYear();
    return now-this.birth;
};
var person = {
    name:'小张',
    birth:2020,
    age: getAge()
}
getAge();//因为调用这个函数的对象变为了window所以无法找到this关键字下的birth属性
getAge().apply(person,[]);//使用apply指定对象即可使用this关键字
</script>

5、内部对象

标准对象

typeof 用于判断数据类型----基本数据类型：

number、String、boolean，object，function，undfined

(1).Date

<script>
    'use strict';
    var date = new Date();//date 代表当前时间
    date.getFullYear();//年份
    date.getMonth();//月份 0~11
    date.getDate();//几号
    date.getDay();//星期数
    date.getHours();//小时
    date.getMinutes();//分钟
    date.getMilliseconds()//秒
    date.getTime();//时间戳
    date.toLocaleDateString();//获取现在的时间
    var newDate = new Date(1641034918057);//通过时间戳读取时间
</script>

(2).JSON

定义

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

作用

'use strict';
var obj = {
    name:"小张",
    age: 20,
    sex:"男"
}
var newObj = JSON.stringify(obj);//将对象转换为字符串
var oldObj = JSON.parse('{"name":"小张","age":20,"sex":"男"}');//将字符串转换为对象

6、面向对象编程

ES6才引入的

ES6之前想要使用类的思想需要使用原型，语法不是很方便，而且对后端不hi和友好

所以在ES6中引入了Java类的写法，本质上还是原型对象的使用但是写法已经和java基本无差别

面向对象思想

万物皆对象
类是对象的抽象，是模板JS中是原型对象的思想
对象是类的具体实例，有自身的特性

(1).定义类

<script>
    //定义一个学生类
    class Student {
        constructor(name) {
            this.name=name;
        }
        hello(){
            alert('hello'+' '+this.name);
        }
    }
    //两个对象
    var xiaoming = new Student("xiaoming");
    var xiaowang = new Student("xiaowang");
</script>

(2).继承类

//继承Student类
class Pupil extends Student{
    constructor(name,school) {
        super(name);
        this.school = school;
    }

    mySchool(){
        alert(this.name+'='+this.school);
    }
}
//一个对象
var pupil1 = new Pupil('小和','阳光小学');

(3).原型链

在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。
对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。
person → Person → Object

7、操作BOM对象

BOM(Browser Object Model)浏览器对象模型

主要用来操作浏览器

常用的浏览器内核

IE
Chrome
Safari
FireFox

(1).window

window 代表浏览器窗口

获取浏览器窗口高度和宽度
控制弹窗

//内部窗口
window.innerHeight
window.innerWidth
//外部窗口
window.outerHeight
window.outerWidth

(2).screen

可以获取屏幕尺寸

screen.height
screen.width

(3).location

定位，代表当前页面的URL信息

host: "localhost:63342"//主机
hostname: "localhost"//主机名
href: "http://localhost/JavaScript..."//地址
location.assign('https://www.baidu.com/');//修改访问地址

(4).document

文档信息，用于获取节点，代表当前页面操作DOM对象

document.getElementById()//获取文档树节点
document.title()//修改标题
document.cookie//获取cookie

(5).history

代表浏览历史

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

8、操作DOM对象

理解

Dom(Document Object Model) 文档对象，模型

Dom的核心就是对网页文档树节点的增删改

什么是节点，什么是网页文档树？

节点可以理解为网页代码中的标签
文档树就是标签的树形排列

如下图：页面中的html，body，div…所有标签都是该页面树形结构下的一个节点

只要获取节点，就可以实现该节点的修改删除，也可以增加新的节点

修改节点就代表着可以修改该节点的style,内容实现动态变化

文档树

(1).如何获取DOM节点

标签选择器 document.getElementsByTagName(’’)

类选择器document.getElementsByClassName(’’)
id选择器document.getElementById(’’)

<body>
    <div id="father">
      <h1>标题</h1>
      <p id="p1">p1</p>
      <p class="p2">p2</p>
    </div>
<script>
  'use strict';
  /*
  * 获取节点的三种方式
  * 标签选择器
  * 类选择器
  * id选择器
  * */
  var h1 = document.getElementsByTagName('h1');
  var p2 = document.getElementsByClassName('p2');
  var p1 = document.getElementById('p1');
  var father = document.getElementById('father');

  var children = father.children;//获取父节点下的所有子节点
  //father.firstChild 获取子节点的第一个
  //father.lastChild 获取子节点的最后一个
</script>

(2).如何操作DOM节点

仅列举部分

操作节点内文本

.innerText
.innerHTML 使用heml标签

操作节点文本风格

.style.color
.style.fontSize

<div id="div1">
</div>
<script>
  var div1 = document.getElementById('div1');//操作节点需要先获取节点
  div1.innerText = 'day2';//在节点中输入文本内容
  div1.style.color = 'red';//将文本字体修改为红色
  div1.style.fontSize = '40px';//修改字体大小
</script>

删除节点操作

先获取节点
通过需要删除节点的父节点来执行删除操作
节点无法自己删除自己

<script>
  'use strict';
  let p1 = document.getElementById('p1');//子节点
  let father = document.getElementById('father');//父节点
  father.removeChild(p1);//通过父节点删除子节点
</script>

插入节点

追加节点

append(‘节点名’)会将已存在的节点追加到指定节点下

<body>
<h1 id="h1">h1</h1>
<div id="father">
  <p id="p1">p1</p>
  <p id="p2">p2</p>
  <p id="p3">p3</p>
</div>
<script>
  'use strict';
  let father = document.getElementById('father');
  let h1 = document.getElementById('h1');
  //在father节点中追加h1节点
  father.append('h1');
</script>
</body>

追加已有节点

创建一个新的节点并插入

let newP = document.createElement('p');//创建一个空的p标签
newP.id = 'newP';//给该标签一个id
newP.innerText = '这是一个新的p标签';//给标签内加入内容
father.appendChild(newP);//将该标签插入到父节点的子节点中

修改节点属性

可以修改标签内属性的值如：style,name,id,value,action…

动态修改标签属性

h1.setAttribute('style','color:blue');//修改style
h1.setAttribute('id','123');//修改id

9、操作表单

form表单中的常用节点(标签)及属性

文本框 text
下拉框 < select >
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password

获取输入框的值

在这里插入图片描述

<form method="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>
    'use strict';
    let username = document.getElementById('username');
    let radio_boy = document.getElementById('boy');
    let radio_girl = document.getElementById('girl');
	//username.value;
	//radio_boy.checked;
    //radio_girl.checked;    
</script>

提交表单

提交表单时调用函数，并用md5加密密码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post" onsubmit="a()">
    <p>
      <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
      <span>密码：</span><input type="password" id="password" name="password">
    </p>
    <button type="submit" >提交</button>

</form>

<script>
    function a(){
        let username = document.getElementById('username');
        let password = document.getElementById('password');
        password.value = md5(password.value);
    }
</script>

10、jQuery

jQuery是什么？

就是封装了许多js方法的包
方便使用js代码，类似与java的jar包
使用jQuery能够更方便的操作DOM

使用jQuery

cdn引用
本地资源引用

所有代码写法能在以下资源中找到

jQuery帮助文档：https://jquery.cuishifeng.cn/

1.使用jQuery

$(选择器).事件();

使用jQuery完成点击弹窗事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--本地引用-->
    <script src="lib/jquery-3.6.0%20.js"></script>
    <!--cdn引用-->
    <!--<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>-->
</head>
<body>
<a id="a">点击</a>
<script>
  $('#a').click(function (){
    alert('hello,jQuery!');
  })
</script>
</body>

2.选择器

JS选择器使用麻烦，而且只有三种（类选择器，id选择器，标签选择器）

jQuery能更方便使用选择器，而且有更多的选择

<script>
    //JS原生选择器
    document.getElementById();//id选择器
    document.getElementsByClassName();//类选择器
    document.getElementsByTagName();//标签选择器
    //jQuery选择器
    $('#id').click();//id选择器
    $('.class').click();//类选择器
    $('p').click();//标签选择器
</script>

3.事件

鼠标事件

键盘事件

实现动态显示鼠标坐标

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0%20.js"></script>

    <style>
      #divMove{
        width: 500px;
        height: 500px;
        border: 2px solid rebeccapurple;
      }
    </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>

4.操作DOM

修改标签文本

修改标签属性

对节点的增删操作

展示或修改文本内容

$("#l1").text();
$("#l1").text('设置文本内容');

将所有li标签下的文字改为红色

$("li").css("color","red");
增加背景颜色
$("li").css({ "color": "#ff0011", "background": "blue" });

追加

$("li").append("<b>Hello</b>");

JavaScrip整理及常用方法

JavaScript

目录

1、JavaScript是什么

2、入门

3、数据类型

(1).变量的定义

(2).字符串

(3).数组

(4).对象

(5).流程控制

(6).Map和 Set

4、函数

(1).定义函数

(2).变量的作用域

(3).方法

5、内部对象

(1).Date

(2).JSON

6、面向对象编程

(1).定义类

(2).继承类

(3).原型链

7、操作BOM对象

(1).window

(2).screen

(3).location

(4).document

(5).history

8、操作DOM对象

理解

(1).如何获取DOM节点

(2).如何操作DOM节点

9、操作表单

10、jQuery

1.使用jQuery

2.选择器

3.事件

4.操作DOM