JavaScript
- JavaScript(简称 JS)是一种用于网页交互的脚本语言,通常用于在网页上添加动态功能、交互性和响应式设计。它是一种基于对象和事件驱动的脚本语言,由 Netscape 公司(现在属于 Mozilla 公司)在1995年首次引入,最初被设计为在客户端执行。
(1)var let 变量
| var n = 10 |
| for (var n=0;n<5;n++){ |
| console.log(n) |
| } |
| |
| |
| let n = 10 |
| for (let n=0;n<5;n++){ |
| console.log(n) |
| } |
| |
| |
| ``` |
| var在for循环里面定义也会影响到全局 |
| let在局部定义只会在局部生效 |
| ``` |
(2)const 常量
| ```python中没有真正意义上的常量 默认全大写就是表示常量 |
| js中是有真正意义上的常量的 无法修改``` |
| const pi =3.14 |
(3)数据类型
(1)数值类型(number)
| var a = 11 |
| var b = 11.11 |
| |
| typeof a; |
| "number" |
| |
| |
| |
| |
| parseInt() |
| parseFloat() |
| |
| parseInt('123123') |
| |
| |
| parseInt('11.11') |
| |
| |
| parseInt('123asd123') |
| |
| |
| parseInt('asd123') |
| |
| |
| parseFloat('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' |
| |
| |
| name+age |
| "heart18" |
(1)常用方法
![image-20240221210157336]()
(3)布尔值
| var t = true |
| typeof t |
| 'boolean' |
- 布尔值是false的有哪些
- 空字符串、0、null、undefined、NaN
(4)null与undefined
null
表示值为空 一般都是指定或者清空一个变量时使用
undefined
表示声明了一个变量 但是没有做初始化操作(没有给值)
![image-20240221210930414]()
(5)Object 对象
js中一切皆对象
(1)数组对象
| var l = [11,22,33,44,55] |
| typeof l |
| "object" |
(2)自定义对象
| |
| |
| var person = { |
| name: 'heart', |
| age: 18, |
| sayHello: function() { |
| console.log('Hello, my name is ' + this.name); |
| } |
| }; |
| |
| |
| console.log(person.name); |
| console.log(person.age); |
| person.sayHello(); |
| |
| |
| var d1 = new Object() |
| d1.name = 'heart' |
| d1.age = '18' |
| d1['hobby'] = 'music' |
| |
| console.log(d1); |
| console.log(d1.name); |
| console.log(d1.age); |
| console.log(d1.hobby); |
(1)常用方法
![image-20240221211218861]()
(3)Date对象
| let t1 = new Date() |
| d1 |
| |
| t1.toLocaleString() |
| |
| let t1 = new Date('2200/11/11 11:11:11') |
| t1.toLocaleString() |
| |
| |
| let t2 = new Date(); |
| t2.getDate() |
| t2.getDay() |
| t2.getMonth() |
| t2.getFullYear() |
| t2.getHours() |
| t2.getMinutes() |
| t2.getSeconds() |
| t2.getMilliseconds() |
| t2.getTime() |
(4)JSON对象
| JSON.stringify() ======> 相当于Python的 dumps 序列化 |
| JSON.parse() ======> 相当于Python的 loads 反序列化 |
(5)RegExp对象(正则)
- 在 JavaScript 中,
RegExp
对象是用于处理正则表达式的内置对象
在 JavaScript 中,RegExp
对象是用于处理正则表达式的内置对象。正则表达式是一种用来匹配字符串模式的工具,它可以用于搜索、替换和提取字符串中的特定部分。RegExp
对象可以用来创建和操作正则表达式。
以下是一些使用 RegExp
对象的常见操作:
- 使用正则表达式字面量创建
RegExp
对象:
| const pattern = /pattern/; |
- 使用
RegExp
构造函数创建 RegExp
对象:
| const pattern = new RegExp('pattern'); |
- 使用正则表达式进行匹配:
| const pattern = /pattern/; |
| const str = 'some string with pattern'; |
| const result = pattern.test(str); |
- 使用正则表达式进行搜索和替换:
| const pattern = /pattern/g; |
| const str = 'some string with pattern'; |
| const newStr = str.replace(pattern, 'replacement'); |
- 获取匹配的字符串:
| const pattern = /pattern/; |
| const str = 'some string with pattern'; |
| const match = str.match(pattern); |
- 获取匹配的位置:
| const pattern = /pattern/; |
| const str = 'some string with pattern'; |
| const index = str.search(pattern); |
- 切分字符串:
| const pattern = /[\s,]+/; |
| const str = 'some, string with spaces'; |
| const parts = str.split(pattern); |
- 提取匹配的子字符串:
| const pattern = /pattern/; |
| const str = 'some string with pattern'; |
| const match = pattern.exec(str); |
(6)Math对象
| const absValue = Math.abs(-5); |
| const ceilValue = Math.ceil(3.14); |
| const floorValue = Math.floor(3.14); |
| const roundValue = Math.round(3.5); |
| const maxValue = Math.max(10, 20, 30); |
| const minValue = Math.min(10, 20, 30); |
| const powValue = Math.pow(2, 3); |
| const sqrtValue = Math.sqrt(16); |
| const randomValue = Math.random(); |
| const piValue = Math.PI; |
| const eValue = 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); |
| console.log(x - y); |
| console.log(x * y); |
| console.log(x / y); |
| console.log(x % y); |
(2)赋值运算符
| var x = 10; |
| var y = x; |
| console.log(y); |
(3)比较运算符
- 相等运算符
==
:判断两个值是否相等。
- 严格相等运算符
===
:判断两个值是否严格相等(值和类型都相等)。
- 不相等运算符
!=
:判断两个值是否不相等。
- 严格不相等运算符
!==
:判断两个值是否严格不相等。
| var x = 10; |
| var y = '10'; |
| console.log(x == y); |
| console.log(x === y); |
| console.log(x != y); |
| console.log(x !== y); |
(4)逻辑运算符
- 逻辑与运算符
&&
:如果两个操作数都为真,则返回真。
- 逻辑或运算符
||
:如果两个操作数任意一个为真,则返回真。
- 逻辑非运算符
!
:用于对操作数取反。
| var x = 10; |
| var y = 5; |
| var z = 15; |
| |
| console.log(x > y && y < z); |
| console.log(x < y || y < z); |
| console.log(!(x == y)); |
(5)其他运算符
- 递增运算符
++
:将变量的值增加 1。
- 递减运算符
--
:将变量的值减少 1。
- 三元条件运算符
? :
:用于根据条件的真假返回不同的值,以?做分隔。
| var x = 10; |
| x++; |
| console.log(x); |
| |
| var y = 5; |
| y--; |
| console.log(y); |
| |
| var z = x > y ? 'x 大于 y' : 'x 小于等于 y'; |
| console.log(z); |
(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"); |
| |
(2)函数表达式
| var greet = function(name) { |
| console.log('Hello, ' + name + '!'); |
| }; |
| |
| |
| function(){ |
| console.log('heart') |
| } |
| var res = function(){ |
| console.log('heart') |
| } |
| |
| |
| var greet = function(name) { |
| console.log(arguments) |
| console.log('Hello, ' + name + '!'); |
| }; |
(2)调用函数
(3)函数参数
- 函数可以接受零个或多个参数,参数在函数声明或调用时指定。
| function add(x, y) { |
| return x + y; |
| } |
| |
| var result = add(5, 3); |
| console.log(result); |
(4)函数返回值
| function multiply(x, y) { |
| return x * y; |
| } |
| |
| var result = multiply(5, 3); |
| console.log(result); |
| |
| function index(){ |
| return 666,777,888,999 |
| } |
| |
| res = index(); |
| res |
(5)函数作用域
- 函数内部声明的变量只在函数内部有效,称为函数作用域。
| function greet() { |
| var message = 'Hello, Heart!'; |
| console.log(message); |
| } |
| |
| greet(); |
| console.log(message); |
(6)高阶函数
- JavaScript 中的函数可以作为参数传递给其他函数,也可以作为其他函数的返回值。
| function greet(name) { |
| return 'Hello, ' + name + '!'; |
| } |
| |
| function sayHello(greetFunc, name) { |
| console.log(greetFunc(name)); |
| } |
| |
| sayHello(greet, 'Heart'); |
(9)BOM和DOM操作
(1)BOM
(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(){ |
| |
| |
| 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) |
| window.setInterval(func, interval) |
| window.clearTimeout() |
| window.clearInterval() |
| |
| |
(4)navigator 对象
- navigator对象提供了关于浏览器的信息,如浏览器的名称、版本、用户代理字符串等
| navigator.userAgent |
| navigator.platform |
(5)location 对象
- 提供了关于当前文档 URL 的信息,并允许 JavaScript 修改浏览器的 URL
| window.location.href |
| window.location.href = 'https://www.cnblogs.com/ssrheart' |
| window.location.reload() |
(6)history 对象
- 提供了浏览器历史记录的操作方法,允许 JavaScript 控制浏览器的前进和后退操作
| window.history.back() |
| window.history.forward() |
(2)DOM
(1)直接查找标签
| 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') |
| |
| |
| imgEle.src = '111.png' |
| |
(3)appendChild
| let divEle = document.getElementById('d1') |
| divEle.appendChild(imgEle) |
(4)innerText
| let aEle = document.createElement('a') |
| aEle.innerText='点我有你好看!' |
| |
(5)innerHTML
| let divEle = document.getElementById('d1') |
| divEle.innerHTML |
| |
| |
小结:
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> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步