js速成笔记

怼烎@ 2022-10-28 14:21 175阅读 0赞

一，基本信息

1，变量声明：全局变量var，局部变量let，常量const

2，alert(“警告框”)；console.log("控制台输出")

3，变量类型：string ，number，Boolean，null，undefined

4，==只关注值不关注类型的相等，===必须一模一样

二，字符串string类型

1，字符串的拼接可以使用   +  号

2，常用的方法：

name.subString(0,5)//获得字符串的子窜。

name.split('填写分割的字符') //对字符串进行分给存入数组

name.length()//字符串name的长度为

name.toUpperCase()小写转大写的函数在console和alert中有

可以多个方法复用：name.subString(0,5).toUpperCase();

三，数组：

const fruits=['apple','orange','pear','10',true];//创建数组方法一
        const numbers=new Array(1,2,3,4,5);//创建数组方法二
        fruits[5]='banana';//数组赋值
        fruits.push('bigo');//数组添加元素
        fruits.pop('banana');//数组移除元素
        console.log(Array.isArray(fruits))//判断是否是数组
        console.log(fruits.indexOf('apple'));//获取元素的下标
    
        console.log(fruits);
        console.log(numbers);

四，集合

五，函数与类

六，元素选择，css样式修改，点击事件，鼠标事件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        #test{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            display: block;
        }
        img{
            background-color: black;
            height: 20px;
            width: 20px;
        }
        body{
            background-color: green;
        }
    </style>
    <body>
        <img id="btn" src=""/>
        <div id="test"></div>
        <ul id="container">
            <li class="testLi">a</li>
            <li class="testLi">b</li>
            <li class="testLi">c</li>
            <li class="testLi">d</li>
        </ul>
        <span class="msg"></span>
        <input id="input" type="text"/>
        
    </body>
    <script>
    console.log(window);//可以查看函数
    
    //单元素选择器
    const testDiv1=document.getElementById('test');
    const testDiv2=document.querySelector('#test');
    console.log(testDiv2);
    
    //多元素选择器
    const testLi1=document.querySelectorAll('.testLi');//得到的是一个数组
    const testLi2=document.getElementsByClassName('testLi');//得到的是一个集合
    //遍历得到的数组
    console.log(testLi1);
    testLi1.forEach(function(li){
        console.log(li);
    })
    
    
    const ul=document.querySelector('#container');
    ul.firstElementChild.remove();//移除元素
    ul.children[1].innerHTML='<h1>小米</h1>';//修改第二个元素
    ul.lastElementChild.textContent='asd';//修改最后一个元素的值
    
    ul.children[1].style.color='red';//修改元素的css样式并修改它的值
    
    
    //绑定点击事件click实现功能，鼠标移入mouseover，鼠标移出事件mouseout
    
    ul.children[1].addEventListener('mouseover',function(){
        if(this.style.color==='red')
        {
            this.style.color='blue';
            document.querySelector('#test').style.background = 'yellow';
            const input = document.querySelector('#input').value;//获取input中的值
            let msg=document.querySelector('.msg');
           if(input===''){
            msg.classList.add('error');
            msg.innerHTML='请输入密码';
        
           }else{
            console.log(input);
            msg.innerHTML='';
            document.querySelector('#test').style.background = 'black';
            const li=document.createElement('li');
            li.appendChild(document.createTextNode(`${input}`));
            ul.appendChild(li);
           }
    
        }
        else{
            this.style.color='red';
            
        }
        
    })
    
    
    
        show();
        function show(){
            let btn=document.getElementById("btn");
            let test=document.getElementById("test");
            btn.onclick=function(){
                if(test.style.display=='none'){
                    test.style.display='block';
                }
                else{
                    test.style.display='none'
                }
                
            }
        }
    </script>
    </html>

七，补充

1，添加属性，和移除属性
    update_sort_select[j].setAttribute('selected','selected');
    update_sort_select[j].removeAttribute('selected');