length 用来获取字符串的长度
split(’ 分隔符’)用来将字符串拆分成数组
substring(需要截取的第一个字符的索引[,结束的索引号])
startsWith检测是否以某字符开头
endsWith检测是否以某字符结尾
函数
全局作用域：声明在全局的变量或者不使用var声明的变量在整个程序中都是可用的，所以叫全局作用域。
局部作用域：声明在函数体内的变量，在整个函数执行环境和其子函数内都是可用的，但是在函数外访问不到，所以叫局部作用域
显示转换parseInt(‘200px’)--------200单独拿出来去掉后面跟的东西
函数要有返回值，一定要添加return关键字，否则返回值为undefined
arguments 接收所有实参，并保存到arguements数组里
function getSum() {console.log(a + b)return a + b
关键字传参法
let e = getSum(a = 2,b = 3)
console.log(e)
<body><script>// parseInt('200px------200单独拿出来去掉后面跟的东西// getSum(20, 30)------求和function sayHi() {--------立即执行函数console.log('hello,function!')}// 函数必须进行调用，才会执行sayHi()let age = 21// 函数要有返回值，一定要添加return关键字，否则返回值为undefinedfunction getSum() {// console.log(a + b)// return a + b---------返回值// arguments 接收所有实参，并保存到arguements数组里console.log(arguments)let sum = 0console.log(age)for (let i in arguments) {sum += arguments[i]}return sum}let e = getSum(3, 4, 3, 4, 65, 7, 44, 5, 6, 7, 5)console.log(e)</script>
</body>
匿名函数
没有名字的函数
function () {--------匿名函数（）
console.log(‘jiangjia’)
<body><script>// function sayHi(fn) {// fn()// console.log('nihao')// }// function () {// console.log('jiangjia')// }// sayHi(sayHello)// function sayHi()setInterval(function () {-------匿名函数（）console.log('你真傻')}, 1000)</script>
</body>
函数表达式
把函数赋值给变量
立即执行函数方法一 (function () { console.log('liqingyu') })()方法二 (function () { console.log('jiangjia') }())
<body><script>// let a = function getSum() {// console.log('jiangjia')// }// 立即执行函数(function () { console.log('liqingyu') })()// (function () { console.log('jiangjia') }())</script>
</body>
值传递、引用传递
<body><script>// 值传递let a = 10let b = 20function change(x, y) {x = 30;y = 50;}change(a, b);alert(a + "--" + b)let arr = [1, 3, 4, 5]// 引用传递 传地址，发生改变function change2(a) {a.push(1000)}change2(arr)alert(arr)</script>
</body>
默认值参数
<body><script>function getCir(r, PI = 3.14) {return PI * r * r}let a = getCir(3)console.log(a)</script>
</body>
箭头函数
setInterval(() => {console.log(‘i hate you’) }, 1000)
<body><script>// setInterval(function () {// console.log('i love you')// }, 1000)setInterval(() => {console.log('i hate you')}, 1000)</script></body>
递归
<body><script>// 9! // 9*8!function jiecheng(n) {if (n === 1) {return 1} else {return n * jiecheng(n - 1)}}let a = jiecheng(9)alert(a)// 练习：递归求1~n的和// 100+1~99的和 function he(n) {if (n == 1) {return 1} else {return n + he(n - 1)}}alert(he(5))</script>
</body>
数组遍历[ ]
<body><script>let arr = ['a', 2, 3, 4, 5, 6]for (let i = 0; i < arr.length; i++) {console.log(arr[i])}</script>
</body>
字符串的常见方法
<body><script>let str = new String()// let str = '你是who'console.log(str.split('w'))console.log(str.substring(2, 4))------字符串索引console.log(str.startsWith('你'))---布尔值以什么开头console.log(str.endsWith('你'))----布尔值以什么结尾console.log(str.includes('w'))---判断字符串里有没有w</script>
</body>
对象{ }
无序的数据集合
object
<body><script>// let arr = [160, 160]// 对象：无序的数据集合let obj = {uname: 'zhangfei',age: 21,gender: 'nan'}// console.log(obj)// 查找对象元素console.log(obj.uname)console.log(obj['age'])// let obj2 = new Object()let obj2 = {uname: '刘德华',age: 60,sing: function () {console.log('我要唱歌了')}}obj2.sing()</script>
</body>
对象的增删改查
<body><script>let obj = {uname: 'zhangfei',age: 21,gender: 'nan'}// obj.uname// obj['age']// 改：对象.属性名obj.uname = 'GGBond'// 增加 对象.新属性名obj.sing = function () {console.log('sing~')}// delete 对象.属性名delete obj.genderconsole.log(obj)</script>
</body>
对象的遍历
<body><script>let obj = {uname: 'zhangfei',age: 21,gender: 'nan'}for (let k in obj) {console.log(k)console.log(obj[k])}</script>
</body>
数组对象
<body><script>let arrObj =[{uname: 'zs',age: 21},{uname: 'jiangjia',age: 33},{uname: 'lisi',age: 12}]console.log(arrObj)// arrObj[1]['uname']for (let i = 0; i < arrObj.length; i++) {for (let k in arrObj[i]) {console.log(arrObj[i][k])}}</script>
</body>
Math内置对象
- Math.ceil向上取整
console.log(Math.ceil(3.1415)) - Math.floor向下取整
console.log(Math.floor(3.1415)) - Math.abs 绝对值
console.log(Math.abs(-3.12)) - pow 求幂次方
console.log(Math.pow(3.12, 10)) - 开平方根
console.log(Math.sqrt(9)) - 随机数
console.log(Math.random() * 10) 左闭右开
console.log(Math.floor(Math.random() * 11) + 2)----math floor取整
<body><script>console.log(Math.E)console.log(Math.PI)// Math.ceil向上取整console.log(Math.ceil(3.1415))console.log(Math.ceil(3.1415))// Math.floor向下取整console.log(Math.floor(3.1415))// Math.abs 绝对值console.log(Math.abs(-3.12))// pow console.log(Math.pow(3.12, 10))// 开平方根console.log(Math.sqrt(9))// 随机数 // console.log(Math.floor(Math.random() * 11) + 2)let random = Math.floor(Math.random() * (10 - 2 + 1)) + 2console.log(random)</script>
</body>
日期内置对象
<body><script>let date = new Date()// alert(date)let year = date.getFullYear()let month = date.getMonth() + 1let day = date.getDate()let hh = date.getHours()let mm = date.getMinutes()let ss = date.getSeconds()let gg = date.getDay()alert(gg)document.write(`${year}年-${month}月-${day}日 ${hh}:${mm}:${ss}`)let a = 3.234364alert(a.toFixed(4))</script>
</body>
dom
dom对象
浏览器自动生成的
用js将标签拿过来，就叫做dom对象
console.dir-----打印对象
<body><button>提交</button><script>const btn = document.querySelector('button')// console.dir(btn)console.log(typeof (btn))</script>
</body>
获取元素的方法
<body><div>盒子</div><ul><li>1</li><li class="two">2</li><li>3</li><li id="four">4</li></ul><script>// 1、通过css选择器获取 ('字符串') :狂（嘎嘎）推荐const li2 = document.querySelector('.two')console.log(li2)const li = document.querySelector('li')console.log(li)// document.querySelectorAll将所有匹配的元素全部获取到，并存放到伪数组const lis = document.querySelectorAll('li')console.log(lis)for (let i = 0; i < lis.length; i++) {console.log(lis[i])}const li3 = document.querySelector('ul li:nth-child(3)')console.log(li3)// 其他console.log(document.getElementsByTagName('div'))console.log(document.getElementById('four'))console.log(document.getElementsByClassName('two'))</script>
</body>
修改元素内容
<body><div class="one">我是一个即将被更改的盒子</div><div class="two">我是一个即将被更改的盒子</div><script>// 1、获取元素const box1 = document.querySelector('.one')const box2 = document.querySelector('.two')console.log(box1)console.log(box2)// 2、操作box1.innerText = `<h1>jiangjia</h1>`box2.innerHTML = `<h1>chensongjie</h1>`</script>
</body>
随机点名案例
<body><div>jiangjia</div><script>let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']// 1、获取元素const box = document.querySelector('div')// 2、获取随机数 n-0 m---arr.length-1 let random = Math.floor(Math.random() * arr.length)// 3、改内容box.innerHTML = `${arr[random]}`</script>
</body>
修改元素属性
<body><img src="../images/1.webp" alt="刘德华" title="刘德华"><input type="text" placeholder="wedjed" readonly><button disabled>同意该协议</button><script>// 1、获取元素const img = document.querySelector('img')const ipt = document.querySelector('input')const btn = document.querySelector('button')// 改元素属性 对象.属性=值img.src = "../images/2.webp"img.title = "我是个大帅哥"ipt.type = "password"ipt.placeholder = "请输入用户名"ipt.readOnly = falsebtn.disabled = false</script>
</body>
修改元素样式属性
<style>.box1 {width: 300px;height: 300px;background-color: rgb(207, 39, 67);font-size: 50px;}</style>
</head><body><div class="box1">1111</div><div class="box2 box1"></div><script>// 1、获取元素const box2 = document.querySelector('.box2')const div = document.querySelector('.box1')// 2、通过style修改样式div.style.width = '500px'div.style.fontSize = '16px'div.style.backgroundColor = 'pink'// 3、通过添加类名 calssName会将原来的类名删除掉，不建议使用// box2.className = 'box1'// classlist.add（'类名'）追加box2.classList.add('box1')// box2.classList.remove('box1') 移除box2.classList.toggle('box1') //切换：有则删除，没有则添加</script>
</body>
定时器
<body><script>// setTimeout\setInterval 定时器// setTimeout :某段代码或者函数在多久后执行// setTimeout(code||function,time(ms))// 返回值是一个整数，代表定时器编码// let timer = setTimeout('console.log("我是一秒之后执行的代码")', 4000)// console.log(timer)// let timer2 = setTimeout('console.log("我是4秒之后执行的代码")', 1000)// console.log(timer2)// 传的是函数名 // let timer3 = setTimeout(// fn, 3000)// function fn() {// console.log('6666666')// }// setTimeout(函数或一段代码，延迟时间，实参……)// let timer4 = setTimeout(function (a, b) {// console.log(a + b)// }, 2000, 1, 4)let obj = {uname: 'gouxin',a: 3,b: 4,sum: function () {console.log(this)console.log(this.a)}}obj.sum()// setTimeout(obj.sum, 1000)// 定时器的第一个参数如果是对象方法，this不再指向对象，指向全局环境// setTimeout(function () { obj.sum() }, 1000)let a = setTimeout(obj.sum.bind(obj), 1000)clearTimeout(a)// setInterval 间隔一段时间，将代码或者函数执行一次let timer = setInterval(' console.log(\'6666666\')', 1000)clearInterval(timer)let timer2 = setInterval(function (a, b) {console.log(a + b)}, 1000, 2, 3)clearInterval(timer2)</script>
</body>
随机抽奖案例
<style>.wrapper {width: 840px;height: 420px;background: url(./images/bg01.jpg) no-repeat center / cover;padding: 100px 250px;box-sizing: border-box;}</style>
</head><body><div class="wrapper"><strong>年会抽奖</strong><h1>一等奖：<span id="one">???</span></h1><h3>二等奖：<span id="two">???</span></h3><h5>三等奖：<span id="three">???</span></h5></div><script>let arr = ['缑欣', 'jiangjia', 'everyone', 'zhangsan']function getRandom(N, M) {return Math.floor(Math.random() * (M - N + 1)) + N}let random = getRandom(1, 5)alert(random)</script>
</body>
作业：用户注册协议
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><textarea name="" id="" cols="30" rows="10">用户注册协议欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看</textarea><br><button class="btn" disabled>我已经阅读用户协议(5)</button><script>const btn=document.querySelector('.btn')let i=5let n=setInterval(function(){i--btn.innerHTML=`我已经阅读用户协议(${i})`if(i===0){clearInterval(n)btn.disabled=falsebtn.innerHTML='同意'}},1000)</script>
</body>
</html>
