JavaScript

2024-01-08 09:03:54

1、输出语句：

document.write('<h1>我是div标签</h1>')

2、声明变量、提示输入语句：

            let a=+prompt(`请你输出值`)
            console.log(a)

3、数组、常量、布尔值：

            let arr=[1,2,3,4,5]
            const G=12
            let a=true

?4、模版字符串

        let age ='产生的'
        document.write(`刚满${age}岁了`)

5：双等和三等

==  判断是否只是值相等
=== 判断类型和值是否都相等，写三等最好

6、函数声明、匿名函数

function mes(start=0,end=1){
   document.write(start+end)
   
  return 1 
}
mes(50,30)


(function(x,y){

})(1,2)

7、获取DOM元素

document.querySelector('div')  //选取第一个div标签

document.querySelectorAll('')

8、通过ClassList修改样式

        <script>
            const box = document.querySelector('.box')
            box.classList.add('active')
            box.classList.remove('box')
            box.classList.toggle('active') 切换
        </script>

9、自定义标签

        <div class="box" data-id="10">盒子</div>

        <script>
            const box=document.querySelector('.box')
            console.log(box.dataset.id)
        </script>

10、开启定时器，关闭定时器

            let timer=setInterval(function(){
                console.log('112')
            },1000)

            console.log(timer)

            clearInterval(timer)

11、用户倒计时

        <textarea name="" id="" cols="" rows="">
            基础建设打开那就
        </textarea>

        <br>
        <button class="btn" disabled>我已阅读用户协议(5)</button>

        <script>
            const btn = document.querySelector('.btn')
            let i = 5
            let n = setInterval(function(){
                i--
                btn.innerHTML = `我已阅读用户协议(${i})`
                if(i===0){
                    clearInterval(n)
                    btn.disabled=false
                    btn.innerHTML=`同意`
                }
            },1000)
        </script>

12、关闭广告


        <style>
            .box{
                position: relative;
                height: 200px;
                width: 200px;
                background-color: pink;

            }

            .box1{
                position: absolute;
                right: 20px;
                line-height: 20px;
                overflow: hidden;
                cursor: pointer;
                display: inline-block;
            }

        </style>

    </head>

    <body>
        <div class="box">
            我是广告
            <div class="box1">X</div>
        </div>

        <script>
            const box1 = document.querySelector('.box1')
            const box = document.querySelector('.box')
            box1.addEventListener('click',function(){
               box.style.display='none'
            })


        </script>
    </body>

13、正则表达式，边界符^开头，$结尾，*为量词，+重复一次或多次，？零次或1次，{n,m}重复n到m次。

            //定义正则表达式规则
            const str = /丝/
            
            let pipei='黑丝，白丝，我都喜欢'

            console.log( str.test(pipei))
            console.log(str.exec(pipei))

            console.log(/^哈$/.test('哈你哈')) //以哈开头，以哈结尾
            console.log(/^哈*$/.test('哈哈')) //以哈开头，以哈结尾

            console.log(/^[ABC]/.test('p'))

            console.log(/^[0-9]/.test('5'))

            console.log(/^[a-zA-Z0-9]/.test('5'))

            console.log(/^[1-9][0-9]{4,}$/.test('5')) //规定了第一位和后几位

14、箭头函数(使函数表达式更加简洁，替代原本需要匿名函数的地方)

           /*1*/ const fn = () => {        //const fn = function(){console.log(123)}
                console.log(123)
            }

           /*2*/ const f1 = x=>{     //只有一个形参的时候可以省略小括号,x为形参

            }
            f1(1)


           /*3*/ const f2 = x=> x+x     //只有一行代码可以省略大括号

            console.log(f2(1))

文章来源:https://blog.csdn.net/qq_60567426/article/details/135348315
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。