浅学JavaScript

最新推荐文章于 2022-11-14 22:18:44 发布

CoolboY61

最新推荐文章于 2022-11-14 22:18:44 发布

阅读量373

点赞数

文章标签： javascript java

本文链接：https://blog.csdn.net/innocentboyyy/article/details/120825688

版权

这篇博客详细介绍了JavaScript的基础知识，包括引入方式、基本语法、数据类型、流程控制、函数、方法、内部对象、面向对象编程以及操作BOM和DOM对象。重点讲解了DOM操作，包括获取、更新、删除和插入DOM节点，同时也提到了jQuery的使用。

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

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript

1. 介绍

JavaScript是一门世界上最流行的脚本语言

2. 入门引入

2.1 引入方式

内部标签：

<script>
    alert("hello world!")
	//……
</script>

外部标签

<script src="js/qj.js"></script>

alert("你好，我是你第一个JavaScript程序！")
//……

2.2 基本语法

    <!--JavaScript严格区分大小写-->
    <script>
        // 1. 定义变量 变量类型  变量名 = 变量值
        var num = 1;
        alert(num);
        // 2. 条件控制
        if (2 > 1) {
            alert("真的！！");
        } else if (3 === 3) {
            alert("假的!!");
        }

        // 3. 浏览器调试常用命令
        // console.log(变量);  打印变量到浏览器的控制台 
    </script>

2.3 数据类型

数值，文本，图形，音频，视频……

命名不可以以数字开头

number 类型 JavaScript不区分整数小数

123 // 整数
123.123 // 小数
1.123e3 // 科学计数法
-99		// 复数
NaN		// not a mumber
Infinity // 表示一个无限大的数字

浮点数有精度问题，尽量避免使用浮点数计算

字符串

'abs'
"abs"

①. 正常字符串使用单引号或者双引号包裹起来

②. 注意转义字符 \

③. 多行字符串编写 `` 该符号是tab上面的飘号
let string = `
你好
我是刘艺
20岁！
`;
④. 模板字符串
let name="刘艺";
let age=3;

let msg = `hello,${name}`;
console.log(msg);
// 注意：msg的内容必须用``(飘号)括起来
⑤. 大小写转换
student.toUpperCase();
student.toLowerCase();
⑥. 字符串截取
student.substring(2,4)
取头不取尾

布尔值
```
true
flase
```
逻辑运算

&& || ！

比较运算符

=
==		等于（类型不一样，值一样，也会判断为true）
===		绝对等于（类型一样，值一样，结果为true）

坚持不要使用“==”判断相等

NaN与所有值都不相等，包括自己

只能通过isNaN（变量）来判断

null和undefined

null：空

undefined：未定义
数组

注意：java数组中存放的必须是相同数据类型的值，而javascript中没有要求
```
<script>
    // 保证代码的可读性，一般使用第一种
    var arr = [1, 2, 3, 4, 5, null, "hello world"];

    new Array(1, 2, 3, 4, 5, null, "hello world");
</script>
```
①. 可以给 arr.length 赋值会改变数组的长度，赋值过小会丢失数据

②. 通过元素获得下标索引 arr.indexof(‘s’);

③. slice（）截取数组的一部分，返回一个新数组类似于Java中的subString

④. push() pop() 尾部操作
```
pop：压入尾部一个元素
push：弹出尾部一个元素
```
⑤. unshift() shift() 头部操作
```
unshift： 压入头部一个元素
shift： 弹出头部一个元素
```
⑥. 排序 sort( );
```
["B","C","A"];
arr.sort();
["A","B","C"];
```
⑦. 拼接数组 concat( );
```
["B","C","A"];
arr.concat([1,2,3]);
["B","C","A",1,2,3];
```
⑧. 连接符join，打印拼接数组，使用指定的字符串连接
```
["B","C","A"];
arr.join('-');
"B-CA"
```

对象

对象是大括号，数组是中括号……

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

若干个键值对

var person = {
    name:"刘艺",
    age: 20,
    tags: ['js','web','java','……']
}
var 对象名 = {
    属性名: 属性值
    属性名: 属性值
    属性名: 属性值
    ……
}

取对象的值

person.name;
person.age;
……

对象赋值 使用一个不存在的对象属性，不会报错，undefined

person.name = "陈翔"
person.age = "19"

动态删除属性

delete person.name
true
person

动态的添加

person.haha = "haha"

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

判断属性值是否在对象中 XXX in XXX

person.hasOwnProperty('person')
true

Map和Set

Map

var map = new Map([["Tom",100],["jerry",95],["admin",90]])
// get
var name = map.get("Tom");
console.log(name);
// set
map.set("ChenXiang",199);
console.log(map);

var set = new Set([3,2,1,34,5,1,1,3,4,2]);
// add
set.add(100);
// delete
set.delete(2);
// has
set.has(3);

遍历Map和Set

for (let x of map) {
    console.log(x);
}
for (let x of set) {
    console.log(x);
}

2.4 严格检查

‘use strict’

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

</body>
</html>

3. 流程控制

3.1 if判断

if () {

}else if () {

}else if () {
    
}

3.2 循环

// 1.while循环
while(){
      
}
// 2.for循环
for( ; ; ){
    
}

4. 函数

区别函数和方法：方法是函数在对象中的名称

4.1 定义函数

定义方式一：绝对值函数

function abs(X) {
    if(X > 0) {
        return "正"; 
    } else {
        return "负";
    }
}

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

定义方式二：

var abbs = function (X) {
    if(X > 0) {
        return "正";
    } else {
        return "负";
    }
}

4.2 调用函数

abs(10); // 正

abs(-10); //负

参数问题：JavaScript可以传任意个参数

可以手动抛出异常

if(typeof X!== 数据类型) {
    throw '数据类型出错';
}

4.3 变量的作用域

在javascript中声明的var变量其实是由作用域的

假设在函数体中声明，则在函数体外不可用

function qj(){
    var x = 1;
    x = x + 1;
}
x = x + 2;
// Uncaught ReferenceError: x is not defined

**养成习惯：**所有的变量都定义在函数的头部，不要乱放，便于代码的维护

全局变量 / 局部变量 / 全局对象window

var x = 'X';
alert(x);
alert(window.x);
// 默认情况下，所有的全局变量都是window的属性

由于所有的全局变量都会绑定到window下，当两个不同js文件使用相同的全局变量会发生冲突

// 定义唯一全局变量
var liuyi = {};

// 定义局部变量
liuyi.name = 'LIUYI'；
liuyi.add = function (a,b) {
    return a + b;
}

把自己的代码全部放入自己定义的唯一变量名中，降低变量名冲突的问题~（jQuery）

局部作用域：let

使用 let 声明变量时，该变量为局部变量

常量：const

使用 const 声明变量时，该变量为常量，不允许修改！！！

5. 方法

方法就是将函数放在对象的里面，对象只有两个东西：属性和方法

'use struct'
var liuyi = {
    name: '刘艺',
    birth: 2001,
    // 方法
    age: function () {
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}
// 属性
liuyi.name;
// 方法,方法一定要带()
liuyi.age();

当代码拆开时：

function getAge() {
    var now = new Date().getFullYear();
    return now - this.birth;
}
var liuyi = {
    name: '刘艺',
    birth: 2001,  
    age: getAge()
}
// liuyi.getAge() 20
// getAge() NaN 因为方法在外面，所以this调用的是window的birth

6. 内部对象

6.1 Date

基本使用

var now = new Date();
// Wed May 19 2021 09:32:01 GMT+0800 (中国标准时间)
now.getFullYear(); // 年
now.getMonth(); // 月
now.getDate(); // 日
now.getDate(); // 星期
now.getHours(); // 时
now.getMinutes(); // 分
now.getSeconds(); // 秒
// 时间戳 现在的时间到 1970-01-01 00:00:00 的毫秒数
now.getTime();
// 将时间戳转换为时间
new Date(now.getTime());

// 获取当前时间
now.toLocaleString();
// "2021/5/19上午9:40:56"

6.2 JSON

一种轻量级的数据交换格式

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

对象用{}
数组用[]
所有的键值对使用 key：value 格式

JSON 和 JS对象的相互转换

var user;
user = {
    name: "刘艺",
    age: 3,
    sex: '男'
};
// {name: "刘艺", age: 3, sex: "男"}

// 对象转换为JSON字符串
var JSONuser = JSON.stringify(user);
// '{"name":"刘艺","age":3,"sex":"男"}'

// 将JSON字符串转换为对象
var obj = JSON.parse('{"name":"刘艺","age":3,"sex":"男"}');
// {name: "刘艺", age: 3, sex: "男"}

7. 面向对象编程

class继承

7.1 定义一个类

// ES6之后出现的class
// 定义一个学生的类
class Bird {

    constructor(name) {
        this.name = name;
    }

    fly() {
        alert('誒，飞飞飞！！！');
    }
}

var maque = new Bird('麻雀');
var zhuque = new Bird('朱雀');

7.2 继承

class BigBird extends Bird{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }

    myIntroduction() {
        alert('我是' + this.name + ',我是' + this.grade + "的……");
    }
}
// 鸟中哈士奇：鲸头鹳 鸟纲
var jingtouguan = new BigBird('鲸头鹳','鸟纲');

8. 操作BOM对象

BOM：浏览器对象模型

JavaScript 的诞生就是为了能够让他在浏览器中运行！！！！

对象：

window：代表浏览器窗口

window.alert(2)
undefined
window.innerHeight
150
window.innerWidth
1029
window.outerHeight
651
window.outerWidth
1045

navigator：封装了浏览器的信息 (不建议使用)

navigator.appName
	"Netscape"
navigator.appVersion
	"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) 		Chrome/90.0.4430.212 Safari/537.36"
navigator.userAgent
	"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like 		Gecko) 	Chrome/90.0.4430.212 Safari/537.36"
navigator.platform
	"Win32"

大多数的时候，不会用到该对象，因为会被人为修改！

screen：代表屏幕分辨率，像素点

screen.width
1920
screen.height
1080

location（重要）：代表当前页面的URL信息

location.host
	"localhost:63342"
location.href
	"http://localhost:63342/JavaScript/text02/6.class%E7%BB%A7%E6%89%BF.html?		_ijt=mk5hbiaqpkd3d52pntvdeicogb"
location.protocol
	"http:"
location.reload // 刷新网页
	ƒ reload() { [native code] }
location.assign // 设置新的地址
	ƒ assign() { [native code] }

document：代表当前的页面，HTML DOM文档树

document.title // 获取标题
	"Title"
document.title='LIUYI`s BLOG' // 设置标题
	"LIUYI`s BLOG"

// 获取cookie
document.cookie
	"_xsrf=2|3a0624b9|1bffcf9ac1ebb7afcddfa215b87ac101|1618978641"

history 代表浏览器的历史记录（不建议使用）

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

9. 操作DOM对象（重点*）

核心：

浏览器网页就是一个DOM的树形结构！

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

要操作一个DOM，首先得先获取它

9.1 获取DOM

获的DOM节点

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    // 对应基本选择器
    var h1 = document.getElementsByTagName('h1');
    // 对应id选择器
    var p1 = document.getElementById('p1');
    // 对应类选择器
    var p2 = document.getElementsByClassName('p2');

    var father = father.children;   // 获取父节点下所有的子节点
    // father.firstChild
    // father.lastChild

</script>

这是原生的，后期 jQuery 用的多

9.2 更新DOM

更新DOM节点

id1.innerText = '123'； 更新id1中的值
id1.innerHTML = '<strong>123</strong>'； 更新id1中的HTML

操作JS，操作台获取到目标ID，对目标ID进行扫错

ID . style. 类型 = ‘参数值’；

id1.style.color = 'red'；
id1.style.fontsize = '20px'；
id1.style.padding = '2em'；

9.3 删除DOM

删除DOM节点

步骤：先获取父节点，再通过父节点删除自己

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    // 获取父节点
    var self = document.getElementById('p1');
    var father = p1.parentElement;
	father.removeChild(p1)
    
    // 删除是一个动态的过程
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

注意：删除多个节点的时候，child属性是一直变化的，数组下标会前推

9.4 插入DOM

插入DOM节点

当获得了一个DOM节点，当DOM为空时，我们通过innerHTML 就可以增加一个元素了，但是当这个DOM有元素时，此方法不可取，这个插入操作会覆盖原本的元素

<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中的ID唯一所以添加后div外的JS会进入到div中，外面的就消失了，保证了ID的唯一性
    list.append(js);
    
    // 创建一个新的标签，添加不存在的新节点
    var newP = document.createElement('p');
    newP.id = 'newP';
    newP.innerText = '你好啊！'; 
    
    list.append(newP);
    
    
    // 创建新节点
    var myStyle = document.createElement('script');
    myStyle.setAttribute('type','text/javascript');
    // myStyle.setAttribute('属性名','属性值');
</script>

插入方式
- document.insertBefore(要被移动的节点，目标节点)

10. 操作表单（验证*）

表单 form 也是DOM树中的一个节点

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

表单的目的：提交信息

获得要提交的信息

对于输入框

变量名.value;

<form action="" method="post">
    <p>
        <span>用户名：</span>
        <input type="text" id="username">
    </p>
</form>

<script>

    var input_text = document.getElementById('username');
    // 获取输入框的值
    input_text.value;
    // 修改输入框的值
    input_text.value = '123';

</script>

对于单 / 多选框

变量名.checked;

<form action="" method="post">
    <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 boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');

    // 对于单选框，多选框等固定的值，boy_radio.value 只能取到当前固定好的值
    boy_radio.checked; // 返回boolean 为true则此时被选中，反之未选中
    girl_radio.checked = true;

</script>

eg：性别选择框，用户选择后我们可以只用判断一个，一个为true则被选中，若他为false则选中的是另外一个

提交表单

<!--表单绑定事件 和 按钮绑定事件二选一就可以了-->

<!--
表单绑定提交事件:
通过onsubmit 来绑定一个检测的函数，函数返回true/false
将这个结果返回给表单,使用 onsubmit 接收
-->
<form action="#" method="post" onsubmit="check()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password" name="password">
    </p>
    <!--按钮绑定提交事件：
    onclick 被点击时进行的操作
    onclick绑定检测函数
    -->
    <button type="submit" onclick="check()">提交</button>
</form>
<script>
    function check() {
        var name = document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(name.value);
        pwd.value = md5(pwd.value);
        console.log(pwd.value);
    }
</script>

11. jQuery

一个 JavaScript 的函数库

初识jQuery 公式： $(选择器).action

eg:

<!--在head中导入jQuery-->
<script src="lib/jquery-3.6.0.js"></script>

<body>
<!--公式：$(select选择器: id / class / 标签).action-->
<a href="" id="test-jQuery">点我</a>

<script>
    /*绑定点击 a 标签时的 函数*/
    $('#test-jQuery').click(function () {
        alert('Hello,im jQuery!');
    })
</script>

选择器

JS原生选择器

// 标签选择器
document.getElementsByTagName();
// id选择器
document.getElementById();
// 类选择器
document.getElementsByClassName();

jQuery 的选择器很多，css的选择器都可以使用

$('p1').click();        // 标签选择器
$('#id1').click();      // id选择器
$('.class1').click();   // class选择器

事件

鼠标事件，键盘事件……

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #divMove {
            height: 500px;
            width: 500px;
            border: 1px solid red;
        }
    </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>

操作DOM

文本操作

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    // 通过jQuery操作DOM
    // text()有值即为设置值，没有值即为获得值
    $('#test-ul li[name=python]').text(); 
    $('#test-ul li[name=python]').text('获得值');

    $('#test-ul').html();
    $('#test-ul').html('<strong>获得值</strong>>');
</script>

css操作

$('#test-ul li[name=python]').css("color","red");

元素的显示和隐藏 show 和hide

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();