html和js扩展 

<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>
posted @   Charme  阅读(43)  评论(0)  编辑  收藏  举报
相关博文：
·  关于我进行两周实训课进行知识总结
·  jQuery
·  JavaScript学习记录3
·  HTML标签以及HTML新增标签和扩展
·  JS变量提升1
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae