JavaScript

合集 - HTML(6)

1.盒子模型2024-02-142.HTML2024-02-223.jQuery2024-02-22

4.JavaScript2024-02-22

5.CSS2024-02-226.Bootstrap2024-02-23

收起

JavaScript

• JavaScript（简称 JS）是一种用于网页交互的脚本语言，通常用于在网页上添加动态功能、交互性和响应式设计。它是一种基于对象和事件驱动的脚本语言，由 Netscape 公司（现在属于 Mozilla 公司）在1995年首次引入，最初被设计为在客户端执行。

（1）var let 变量

• 关键字var

var name = 'heart';

• 关键字let

let name = 'heart';

• var和let的区别

var n = 10
for (var n=0;n<5;n++){
    console.log(n)
}
//0 1 2 3 4
 
let n = 10
for (let n=0;n<5;n++){
    console.log(n)
}
// 10
 
```
var在for循环里面定义也会影响到全局
let在局部定义只会在局部生效
```

（2）const 常量

```python中没有真正意义上的常量 默认全大写就是表示常量
js中是有真正意义上的常量的 无法修改```
const pi =3.14

（3）数据类型

（1）数值类型(number)

var a = 11
var b = 11.11
// 如何查看当前数据类型
typeof a;
"number"
 
// 特殊的 NaN:数值类型 表示的意思是"不是一个数字" not a number
 
// 类型转换
parseInt()
parseFloat()
 
parseInt('123123') 
// 123123
 
parseInt('11.11') 
// 11
 
parseInt('123asd123') 
// 123
 
parseInt('asd123') 
// NaN
 
parseFloat('11.11') 
// 11.11

（2）字符类型(string)

var s ='heart'
typeof s
"string"
 
var s1="""god""" // 不支持三引号
 
// 模版字符串
// 模版字符串除了可以定义多行文本之外还可以实现格式化字符串操作
// 书写${} 会自动去前面找大括号里面的变量名对应的值 如果没有定义直接报错
var s2=`
asdasd
zxczxc
qweqwe
`
 
typeof s2
"string"
 
var name='heart'
var age =18
var sss=`my name is ${name},my age is ${age}`
sss
 
'my name is heart,my age is 18'
 
// js里字符串推荐用加号做拼接
name+age
"heart18"

（1）常用方法

（3）布尔值

• 在js中布尔值全是小写的

var t = true
typeof t
'boolean'

• 布尔值是false的有哪些
  • 空字符串、0、null、undefined、NaN

（4）null与undefined

• null 表示值为空 一般都是指定或者清空一个变量时使用

name='heart'
name=null

• undefined 表示声明了一个变量 但是没有做初始化操作(没有给值)

（5）Object 对象

js中一切皆对象

（1）数组对象

• (类似于python里面的列表) []

var l = [11,22,33,44,55]
typeof l
"object"

（2）自定义对象

• (类似于python里面的字典) {}

// 第一种创建方式
// 定义一个包含属性和方法的自定义对象
var person = {
    name: 'heart', // 属性名为 name，属性值为 'John'
    age: 18,      // 属性名为 age，属性值为 30
    sayHello: function() { // 方法名为 sayHello，值为一个函数
        console.log('Hello, my name is ' + this.name);
    }
};
 
// 访问对象属性和方法
console.log(person.name);   // 输出: John
console.log(person.age);    // 输出: 30
person.sayHello();          // 输出: Hello, my name is John
 
// 第二种创建方式 需要使用关键字 new
var d1 = new Object() // {}
d1.name = 'heart'
d1.age = '18'
d1['hobby'] = 'music'
 
console.log(d1); // 打印整个对象 {name: 'heart', age: '18',hobby: 'music'}
console.log(d1.name); // 打印对象的 name 属性值 heart
console.log(d1.age); // 打印对象的 age 属性值 18
console.log(d1.hobby); // 打印对象的 hobby 属性值 music

（1）常用方法

（3）Date对象

• Date 对象用于处理日期和时间。

let t1 = new Date()
d1 // Thu Feb 22 2024 15:17:54 GMT+0800 (中国标准时间)
 
t1.toLocaleString() // '2024/2/22 15:17:54'
 
let t1 = new Date('2200/11/11 11:11:11')
t1.toLocaleString() // '2200/11/11 11:11:11'
 
// 内置方法
let t2 = new Date();
t2.getDate() // 获取日
t2.getDay() // 获取星期
t2.getMonth() // 获取月份(0-11)
t2.getFullYear() // 获取完整的年份
t2.getHours() // 获取小时
t2.getMinutes() // 获取分钟
t2.getSeconds() // 获取秒
t2.getMilliseconds() // 获取毫秒
t2.getTime() // 获取毫秒数(时间戳)

（4）JSON对象

• JSON是一种用于数据交换的轻量级数据格式

JSON.stringify() ======> 相当于Python的 dumps 序列化
JSON.parse() ======> 相当于Python的 loads 反序列化

（5）RegExp对象(正则)

• 在 JavaScript 中，RegExp 对象是用于处理正则表达式的内置对象

在 JavaScript 中，RegExp 对象是用于处理正则表达式的内置对象。正则表达式是一种用来匹配字符串模式的工具，它可以用于搜索、替换和提取字符串中的特定部分。RegExp 对象可以用来创建和操作正则表达式。

以下是一些使用 RegExp 对象的常见操作：

1. 使用正则表达式字面量创建 RegExp 对象：

const pattern = /pattern/;

2. 使用 RegExp 构造函数创建 RegExp 对象：

const pattern = new RegExp('pattern');

3. 使用正则表达式进行匹配：

const pattern = /pattern/;
const str = 'some string with pattern';
const result = pattern.test(str); // 匹配成功返回 true，否则返回 false

4. 使用正则表达式进行搜索和替换：

const pattern = /pattern/g;
const str = 'some string with pattern';
const newStr = str.replace(pattern, 'replacement');

5. 获取匹配的字符串：

const pattern = /pattern/;
const str = 'some string with pattern';
const match = str.match(pattern); // 返回匹配的字符串数组

6. 获取匹配的位置：

const pattern = /pattern/;
const str = 'some string with pattern';
const index = str.search(pattern); // 返回第一个匹配的位置，若未找到则返回 -1

7. 切分字符串：

const pattern = /[\s,]+/;
const str = 'some, string with spaces';
const parts = str.split(pattern); // 使用正则表达式进行字符串切分

8. 提取匹配的子字符串：

const pattern = /pattern/;
const str = 'some string with pattern';
const match = pattern.exec(str); // 返回匹配的子字符串

（6）Math对象

• Math 对象是一个内置的全局对象，提供了许多数学计算相关的方法和常量。

• 常用方法

  • Math.abs(x)：返回一个数的绝对值。

  • Math.ceil(x)：对一个数进行上舍入。

  • Math.floor(x)：对一个数进行下舍入。

  • Math.round(x)：把一个数四舍五入为最接近的整数。

  • Math.max(x1, x2, ..., xn)：返回一组数中的最大值。

  • Math.min(x1, x2, ..., xn)：返回一组数中的最小值。

  • Math.pow(x, y)：返回 x 的 y 次幂。

  • Math.sqrt(x)：返回一个数的平方根。

  • Math.random()：返回一个介于 0（包括）与 1（不包括）之间的随机数。

const absValue = Math.abs(-5); // absValue 的值为 5
const ceilValue = Math.ceil(3.14); // ceilValue 的值为 4
const floorValue = Math.floor(3.14); // floorValue 的值为 3
const roundValue = Math.round(3.5); // roundValue 的值为 4
const maxValue = Math.max(10, 20, 30); // maxValue 的值为 30
const minValue = Math.min(10, 20, 30); // minValue 的值为 10
const powValue = Math.pow(2, 3); // powValue 的值为 8
const sqrtValue = Math.sqrt(16); // sqrtValue 的值为 4
const randomValue = Math.random(); // randomValue 的值为介于 0 到 1 之间的随机数
const piValue = Math.PI; // piValue 的值为 3.141592653589793
const eValue = Math.E; // eValue 的值为 2.718281828459045
 
// Math.PI：表示圆周率的常量。
// Math.E：表示自然对数的底数的常量。

（6）运算符

（1）算术运算符

• 加法运算符 +：将两个值相加。
• 减法运算符 -：将一个值减去另一个值。
• 乘法运算符 *：将两个值相乘。
• 除法运算符 /：将一个值除以另一个值。
• 求余运算符 %：返回除法的余数。

var x = 10;
var y = 5;
 
var z = 10;
var res1 = z++; //先赋值 后自增
var res2 = ++z; //先自增 后赋值 
res1 10
z 11
res2 12
 
console.log(x + y); // 输出: 15
console.log(x - y); // 输出: 5
console.log(x * y); // 输出: 50
console.log(x / y); // 输出: 2
console.log(x % y); // 输出: 0

（2）赋值运算符

• 赋值运算符 =：将右边的值赋给左边的变量。

var x = 10;
var y = x;
console.log(y); // 输出: 10

（3）比较运算符

• 相等运算符 ==：判断两个值是否相等。
• 严格相等运算符 ===：判断两个值是否严格相等（值和类型都相等）。
• 不相等运算符 !=：判断两个值是否不相等。
• 严格不相等运算符 !==：判断两个值是否严格不相等。

var x = 10;
var y = '10';
console.log(x == y);  // 输出: true
console.log(x === y); // 输出: false
console.log(x != y);  // 输出: false
console.log(x !== y); // 输出: true

（4）逻辑运算符

• 逻辑与运算符 &&：如果两个操作数都为真，则返回真。
• 逻辑或运算符 ||：如果两个操作数任意一个为真，则返回真。
• 逻辑非运算符 !：用于对操作数取反。

var x = 10;
var y = 5;
var z = 15;
 
console.log(x > y && y < z); // 输出: true
console.log(x < y || y < z); // 输出: true
console.log(!(x == y));      // 输出: true

（5）其他运算符

• 递增运算符 ++：将变量的值增加 1。
• 递减运算符 --：将变量的值减少 1。
• 三元条件运算符 ? :：用于根据条件的真假返回不同的值，以？做分隔。

var x = 10;
x++;
console.log(x); // 输出: 11
 
var y = 5;
y--;
console.log(y); // 输出: 4
 
var z = x > y ? 'x 大于 y' : 'x 小于等于 y';
console.log(z); // 输出: x 大于 y

（7）流程控制

• 在 JavaScript 中，流程控制用于控制代码的执行顺序，使程序能够根据条件执行不同的代码块或重复执行特定的代码块。JavaScript 中常见的流程控制结构包括条件语句和循环语句。

（1）条件语句

（1）if 语句

var x = 10;
if (x > 5) {
    console.log('x 大于 5');
} else {
    console.log('x 小于等于 5');
}

（2）else if 语句

var x = 10;
if (x > 10) {
    console.log('x 大于 10');
} else if (x === 10) {
    console.log('x 等于 10');
} else {
    console.log('x 小于 10');
}

（3）switch 语句

var day = 'Monday';
switch (day) {
    case 'Monday':
        console.log('星期一');
        break;
    case 'Tuesday':
        console.log('星期二');
        break;
    default:
        console.log('其他日期');
}

（2）循环语句

（1）for 循环

for (var i = 0; i < 5; i++) {
    console.log('当前值为：' + i);
}

（2）while 循环

var i = 0;
while (i < 5) {
    console.log('当前值为：' + i);
    i++;
}

（3）do...while 循环

var i = 0;
do {
    console.log('当前值为：' + i);
    i++;
} while (i < 5);

do...while和while的区别

• while ：先判断条件是否满足，再执行循环体内的代码。
• do...while ：先执行循环体内的代码，再判断条件是否满足。

（4）forEach 循环（数组专用）

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(item) {
    console.log('当前值为：' + item);
});

（3）控制流语句

（1）break 语句

用于跳出循环或 switch 语句。

（2）continue 语句

用于跳过当前循环中的剩余代码，继续执行下一次循环。

（3）return 语句

用于退出当前函数的执行，并返回指定的值。

（8）函数

• JavaScript 中的函数是一种可重复使用的代码块，用于执行特定的任务或计算。函数允许将一系列语句封装在一个单独的单元中，并可以通过函数名调用该单元的代码。函数在 JavaScript 中是一种特殊的对象类型，可以作为值进行传递，也可以作为对象的属性或数组的元素存储。

（1）定义函数

（1）函数声明

// 无参
function functionName() {
    // 代码体
    console.log('Hello' + '!');
}
 
// 有参
function functionName(name) {
    // 代码体
    console.log('Hello, ' + name + '!');
}
 
// 箭头函数
var functionName = (name) => {
    // 代码体
    console.log('Hello, ' + name + '!');
}
functionName("Heart");
// Hello, heart!

（2）函数表达式

var greet = function(name) {
    console.log('Hello, ' + name + '!');
};
 
// 匿名函数
function(){
    console.log('heart')
}
var res = function(){
    console.log('heart')
}
 
// 关键字 arguments 能够获取到函数接收到的所有的参数
var greet = function(name) {
    console.log(arguments)
    console.log('Hello, ' + name + '!');
};

（2）调用函数

greet('Heart'); // 输出: Hello, Heart!

（3）函数参数

• 函数可以接受零个或多个参数，参数在函数声明或调用时指定。

function add(x, y) {
    return x + y;
}
 
var result = add(5, 3);
console.log(result); // 输出: 8

（4）函数返回值

• 函数可以返回一个值，使用 return 关键字。

function multiply(x, y) {
    return x * y;
}
 
var result = multiply(5, 3);
console.log(result); // 输出: 15
 
function index(){
    return 666,777,888,999
}
 
res = index();
res //999 只能拿到最后一个

（5）函数作用域

• 函数内部声明的变量只在函数内部有效，称为函数作用域。

function greet() {
    var message = 'Hello, Heart!';
    console.log(message);
}
 
greet(); // 输出: Hello, Heart!
console.log(message); // 报错：message is not defined

（6）高阶函数

• JavaScript 中的函数可以作为参数传递给其他函数，也可以作为其他函数的返回值。

function greet(name) {
    return 'Hello, ' + name + '!';
}
 
function sayHello(greetFunc, name) {
    console.log(greetFunc(name));
}
 
sayHello(greet, 'Heart'); // 输出: Hello, Heart!

（9）BOM和DOM操作

（1）BOM

• BOM 是浏览器对象模型，js代码操作浏览器

（1）window 对象

• window对象表示浏览器窗口，是 BOM 的核心对象之一，提供了浏览器的各种功能和属性

window.innerWidth // 浏览器窗口的高度
window.innerWidth // 浏览器窗口的宽度
window.outerWidth // 获取浏览器窗口的外部宽度
window.outerHeight // 获取浏览器窗口的外部高度
window.screen.width // 获取屏幕的宽度
window.screen.height // 获取屏幕的高度
window.moveTo(x, y) // 移动浏览器窗口到指定位置
window.moveBy(x, y) // 相对于当前位置移动
window.onload=function(){//里面放需要等待页面加载完毕之后执行的代码}
// 这个方法是放在head里的script里的
    
window.open('https://www.cnblogs.com/ssrheart','','height=400px,top=400px,left=400px') // 新建窗口打开页面 第二个参数写空即可 第三个参数写新建的窗口的大小和位置
window.close // 关闭当前窗口

（2）弹出框

window.alert(message) // 显示一个包含消息和一个确认按钮的警告框
window.confirm(message) // 显示一个包含消息、确认和取消按钮的对话框，返回用户的选择（是或否）
window.prompt(message, defaultText) // 显示一个包含消息、文本输入框和确认按钮的对话框，返回用户输入的文本

（3）计时器

window.setTimeout(func, delay) // 在指定延迟后执行一次 毫秒为单位 3000=3秒
window.setInterval(func, interval) // 每隔一段时间执行一次(循环)
window.clearTimeout() // 取消定时任务 如果想要清除定时任务 需要提前用变量指代定时任务
window.clearInterval() // 取消循环任务
// let t = setTimeout(func,3000);
// clearTimeout(t)

（4）navigator 对象

• navigator对象提供了关于浏览器的信息，如浏览器的名称、版本、用户代理字符串等

navigator.userAgent // 包含用户代理字符串，它是一个描述浏览器的字符串，可以用来识别用户使用的浏览器和操作系统
navigator.platform // 返回浏览器运行所在的操作系统平台，如 "Win32"、"MacIntel" 等

（5）location 对象

• 提供了关于当前文档 URL 的信息，并允许 JavaScript 修改浏览器的 URL

window.location.href // 获取或设置当前页面的 URL
window.location.href = 'https://www.cnblogs.com/ssrheart' // 跳转到指定的url
window.location.reload() // 刷新页面

（6）history 对象

• 提供了浏览器历史记录的操作方法，允许 JavaScript 控制浏览器的前进和后退操作

window.history.back() // 回退到上一页
window.history.forward() // 前进到下一页

（2）DOM

• DOM 是文档对象模型，js代码操作标签

（1）直接查找标签

• id查找

var element = document.getElementById("myElement");

• 类查找

var elements = document.getElementsByClassName("myClass");

• 标签查找

var elements = document.getElementsByTagName("div");

（2）间接查找标签

let divEle = document.getElementByClassName('c1')[0] // 注意是否需要索引值

• 获取子元素列表

let divEle = document.getElementById('d1')
divEle.children

• 获取第一个子元素

let divEle = document.getElementById('d1')
divEle.firstChild

• 获取最后一个子元素

let divEle = document.getElementById('d1')
divEle.lastChild

• 获取当前元素前一个

let divEle = document.getElementById('d1')
divEle.previousSibling

• 获取当前元素后一个

let divEle = document.getElementById('d1')
divEle.nextSibling

（3）节点操作

（1）createElement

• 创建标签

let imgEle = document.createElement('img')

（2）setAttribute

• 设置标签属性

let imgEle = document.createElement('img')
imgEle.setAttribute('username','heart')
// <img username="heart">
 
imgEle.src = '111.png' // 标签自带的属性可以直接.设置
// <img username="heart" src="111.png">

（3）appendChild

• 标签内添加元素(尾部追加)

let divEle = document.getElementById('d1')
divEle.appendChild(imgEle)

（4）innerText

• 设置标签内的文本

let aEle = document.createElement('a')
aEle.innerText='点我有你好看!'
// <a>点我有你好看!</a>

（5）innerHTML

• 表示元素HTML内容

let divEle = document.getElementById('d1')
divEle.innerHTML
// <a href="https://www.cnblogs.com/ssrheart">点我有你好看!</a>
// <p id ="p1"></p>

小结：

innerText 不识别html标签

innerHTML 识别html标签

（6）insertBefore

• 添加到指定标签上面

let aEle = document.createElement('a')
let divEle = document.getElementById('d1')
let pEle = document.getElementById('p1')
divEle.insertBefore(aEle,pEle)

（4）获取值操作

（1）value

• 获取值

let inputEle = document.getElementById('d1')
inputEle.value

（2）files[0]

• 获取用户上传的文件

let fileEle = document.getElementById('d2')
fileEle.files[0]

（5）class操作

（1）classList

• 获取标签所有的类属性

let divEle = document.getElementById('d1')
divEle.classList

（2）classList.remove

• 移除某个类属性

let divEle = document.getElementById('d1')
divEle.classList.remove()

（3）classList.add

• 添加某个类属性

let divEle = document.getElementById('d1')
divEle.classList.add('')

（4）classList.contains

• 检测某个类属性

let divEle = document.getElementById('d1')
divEle.classList.contains('')

（5）classList.toggle

• 有则删除 无则添加

let divEle = document.getElementById('d1')
divEle.classList.toggle('')

（6）css操作

（1）css选择器查找单个

var element = document.querySelector("#myElement .myClass");

（2）css选择器查找所有

var elements = document.querySelectorAll(".myClass");

（3）.style操作

let divEle = document.getElementById('d1')
divEle.style.color = 'red'
divEle.style.fontSize = '28px'
divEle.style.backgroundColor = 'yellow'

（7）事件

• 达到某个事先设定的条件，自动触发的动作

（1）绑定事件的两种方式

<button onclick="func1()">点击我1</button>
<button id="b1">点击我2</button>
 
<script>
    // 第一种方法
    function func1() {
        alert("111")
    }
    // 第二种方法
    let btnEle = document.getElementById('b1');
    btnEle.onclick = function (){
        alert("222")
    }
</script>