<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list">
<li class="liRed">00001</li>
<li>00002</li>
<li>00003</li>
<li class="liRed">00004</li>
<li>00005</li>
<li>00006</li>
<li>00007</li>
<li>00008</li>
</ul>
<input type="text" id="ipt">
<p id="screen"></p>
</body>
</html>
<script>
//dom文档对象模型，document object model
//获取取dom(js中的选择器)
let list=document.getElementById('list')//collection集合，拥有跟数组几乎完全一致的方法等
let liReds=document.getElementsByClassName('liRed')//collection集合，可以理解成是伪数组
let lis=document.getElementsByTagName('li')
//dom都可以做什么
//1.改变html输出流（可以把内容输出到页面上）
document.write(new Date())
//2.改变html内容
liReds[1].innerHTML = '哈哈哈'
//3.改变html属性
list.title = '123456'
//4.改变html样式
liReds[1].style.color='red'
//5.使用事件
// 鼠标事件:onmouseover,onmouseenter,onmousedown,onmouseup,onmousewheel,onmousemove,onmouseleave,onmouseout,onlclick
// 键盘事件:onkeydown,onkeyup,onkeypress(不咋用)
// 窗口事件:onload.onscroll
// 表单事件:onfocus,onblur,onsubmit
let ipt=document.getElementById('ipt')
let screen=document.getElementById('screen')
/*ipt.oninput = function () {
screen.innerHTML = ipt.value
}*/
ipt.onchange=function () {
console.log(111)
screen.innerHTML=ipt.value
}
/*
onchange与onblur区别：change失去焦点打印，前提内容改变！！！，onbulr只要失去焦点就打印
*/
//字符串
let str1=''
let str2=""
let str3=`是Es6里的新语法`
//写一个函数可以生成随机的颜色
function randColor(){//rgb颜色随机
// return `rgb(${parseInt(Math.random()) * 256},${parseInt(Math.random()) * 256},${parseInt(Math.random()) * 256})`
return "rgb("+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')'
}
/* let A1=randColor()*/
list.style.background=randColor()
list.style.color=randColor()
let str4='I am a student!'
// charAt()返回在指定位置的字符,空格也占位置,几乎不用，用str[3]来代替
console.log(str4.charAt(3))
console.log(str4[3])
//const连接两个字符串生成新字符串
console.log(str4.concat(str3))//一般不用，用+更号
let num=123
console.log(String(num)+'')//JavaScript的奇迹淫巧之快速把数字转为字符串
//endWith() 判断当前字符串是否以指定字符串结尾,区分大小写q,返回布尔值
console.log(str4.endsWith('nt!'))
console.log(str4.startsWith("I"))
//indexOf返回某字符串在当前字符串首次出现的位置。如果没有则返回-1
console.log(str4.indexOf('a'))
// lastIndexOf()使用方法与上相同，返回某字符串在当前字符串最后出现的位置
//includes 查找字符川是否存在指定的字符串
console.log(str4.includes('a'))
//match查找到一个或者多个正则表达式的匹配
console.log(str4.match( /\ba\b/))//不加g，查找到第一个结果就输出，找到第一个一后不结束继续找，直到把所有满足的字符串都都找出来为止
//如果找不到返回null
//repeat 复制字符串的指定次数并连接在一起返回
console.log(str4.repeat(3))
/*replace在字符串中查找对应的二字符串，然后替换成新内容*/
console.log(str4.replace(/am/g,'是'))
//**可以用正则，正则后面可以加g则所有满足条件的字符串都将被替换
// replaceAll
console.log(str4.replaceAll('a','b'))
//不能用正则，所有a都将被替换
//search查找字符串中满足正则的字符串，返回索引
let str5="abcdeFG1234567hijklmn"
console.log(str5.search(/\d{7}/))
// slice从字符串中截取某部分
console.log(str5.slice(7,14))
// split以某字符为界限，切割字符串，生成新数组
console.log(str5.split(''))//以空为界限切割字符串
// substring() 从字符串中提取两个索引间的字符串
console.log(str5.substring(7,14))
// substr 从字符串中，从指定位置,提取指定数量的字符串
console.log(str5.substr(7,14))
//生成新的字符串，把原有的字符串改成小写
console.log(str5.toLowerCase())
//生成新的字符串，把原有的字符串改成大写
console.log(str5.toUpperCase())
let str6=' abc def '
console.log(str6.trim())//去掉字符串两边的空格
//toString
let a=123
console.log(a.toString())
console.log(String(a))
console.log(a+'')
//数组方法 unshift，shift，push，pop，splice
// concat()连接两个或更多的数组，并返回结果
//copyWithin从数组指定位置拷贝元素到另一个指定位置
// every()判断数组中是否所有元素都满足回调函数中的条件，满足返回true
let arr= [2,4,6,8,10]
console.log(arr.every(item=>item=>item%2==0))
//能被4整除，不能被100整除，或者被400整除是闰年
let years=[2000,2004,2008]
console.log(years.every(item => item%4===0||item%100!==0||item%400===0))
//过滤 筛选filter
let arr2=[1,2,3,4,5,6,7,8,9]
let arr3=arr2.filter(item => item % 2 ===1)//
console.log(arr3)
let arr4=arr3.map(item => item * 2)
console.log(arr4)
let total =arr4.reduce((pre,next)=>pre + next,0)
console.log(total)
//一行搞定
arr2.filter(item => item % 2 ===1).map(item => item * 2).reduce((pre,next)=>pre + next,0)
var brr=[]
for(var i=0;i<arr2.length;i++){
if (arr2[i] % 2 === 1){
brr.push(arr2[i])}
}
console.log(brr)
for (var i=0;i<brr.length;i++){
brr[i]=brr[i] * 2
}
console.log(brr)
var result = 0
for (var i = 0;i<brr.length;i++){
result = result+brr[i]
}
console.log(result)
console.log(typeof '112'==='string')
let arr7=['a','b','c']
arr7.every(item=>typeof item==='string')
//find
console.log(arr2)
console.log(arr2.find(item=>item===10))
//判断数组中是否有某个值，如果是undefined，否则没有
const arr8=[
{account:123456,password:'abcdefg'},
{account:123457,password:'abcdefg'},
{account:123458,password:'abcdefg'},
{account:123459,password:'abcdefg'},
]
console.log(arr8.find(item=>item.account===123458))
for (var i=0;i<arr8.length;i++){
if (arr8[i].account===123458){
console.log(arr8[i])
}
}
//findIndex查找对应元素的索引
console.log(arr8.findIndex(item=>item.account===123458))
//forEach
arr2.forEach((item,index)=>arr[index] = item *2)//跟map几乎一致，但没有返回值，不能链式调用
console.log(arr2)
//from
aarr2=Array.from(arr2,item=>item/2)
console.log(arr2)
//includes 判断数组中是否包含指定的值
//indexOf 搜索数组中的值，并返回它所在的位置
//lastIndexOf 返回最后出现的位置
//isArray
console.log(typeof arr8)//数组就是一个对象
console.log(Array.isArray(arr2))//返回true说明是一个数组
if (typeof arr8==='object'&&Array.isArray(arr8[0])===false){
console.log('是对象')
}
console.log(typeof arr8[0]==='object'&&arr8[0]===undefined)
console.log(typeof arr8[0]==='object'&&!arr8[0])
// 弱类型转换 null,undefined,'',NaN,0 被转换为布尔值false
//join 数组转化为字符串
console.log(arr2)
console.log(arr2.join())
//反转数组
console.log(arr2.reverse())
//反转字符串（需要将字符串先转化为数组）
let strA='a,b,c,d,e,f,g'
console.log(strA.split(',').reverse().join())
let strB='ABCDefghi'
console.log(strB.split('').reverse().join(''))
//map()映射
//pop() push() shift() unshift()
//reduceRight 从右往左计算
//slice() 选取数组中的一部分1，返回新数组
// some() 检测数组中是否有元素符合指定条件，跟includes相同
//sort() 对数组元素排序
let arr9=['Banana','Orange','Apple','Mango']
arr9.sort()//默认按照升序排列
console.log(arr9)
let arr10=[8,7,45,3,9,97]
arr10.sort()//默认按照字母升序排列
console.log(arr10)
//按照数字升序排列
console.log(arr10.sort((next,pre)=>next-pre))
console.log(arr10.sort((next,pre)=>pre-next))
let arr11=['a','b','c','d','e','f','g','h','i','j','k']
console.log(arr11.sort(()=>Math.random()-.5))
//Object对象
let obj1={
name:'小明',
age:18,
hobbies:['吃饭','睡觉','打豆豆'],
able:function () {
console.log('正在学习')
}
}
console.log(obj1.name)
console.log(obj1['age'])
obj1.hobbies.map(item=>console.log(item))//map有返回值，会生成一个新数组
obj1.hobbies.forEach(item=>console.log(item))//更优
obj1.able()
var test=1 //var可以重复声明，let不可以
var test=2
var j=3
for (j=0;j<arr11.length;j++){
console.log(j)//内存泄漏
}
console.log(j)
let test2=1
//let test2=2// let 不允许重复声明
let m=3
for(let m=0;m<arr11.length;m++){
}
console.log(m)
//作用域：全局/局部作用域，Es6新增块级作用域
var n=1
function xxx() {
console.log(n)// undefined暂时性死区，作用域内，一旦var/let声明了变量，那么此作用域就不会向外查找该变量
var n//var 存在变量提升，作用域内，后面声明了某变量，则在前面也可以使用之，只不过其值为undefined
n=2
console.log(n)//2
}
xxx()
console.log(n)//1
let x=1
function yyy() {
console.log(x)//1
x=2
console.log(x)//2
}
yyy()
console.log(x)//2
let p =1
function ppp() {
/*console.log(p)*///报错 p在这里不存在，不是undefined，但由于局部作用域内声明了p，所以暂时性死区，不会向外界获取p
let p=2//不存在变量提升
console.log(p)//
}
ppp()
console.log(p)//
</script>
浙公网安备 33010602011771号