js速成笔记

最新推荐文章于 2024-02-06 07:03:40 发布

陈建江！

最新推荐文章于 2024-02-06 07:03:40 发布

阅读量573

点赞数 1

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_44841312/article/details/113727045

版权

js 专栏收录该内容

2 篇文章 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);

const todos=[//定义数组
    {
        id:1,
        text:'go shopping with my mom',
        isCompleted:true,
    },
    {
        id:2,
        text:'play basketball with my friend',
        isCompleted:true,
    },
    {
        id:3,
        text:'doing my homework',
        isCompleted:false,
    }
    ];

    console.log(todos[2].text);//调取里面的值
    const todosJSON=JSON.stringify(todos);//转化成json格式
    console.log(todosJSON);
    //数组的遍历
    for(let i=0;i<todos.length;i++){
        console.log(`print the numbet ${i}`);
        console.log(todos[i].text);
    }
    for(let todo of todos){
        console.log(todo.text);
    }

    //使用forEach map filer来遍历
    todos.forEach(function(todo){
        console.log(todo.text);
    })

    const todoText=todos.map(function(todo){
        return todo.text;
        
    })
    console.log(todoText);

    const todoCompleted=todos.filter(function(todo){
        return todo.isCompleted===true;//选择器，选择符合条件的
    }).map(function(todo){
        return todo.text;
    })

    console.log(todoCompleted);

四，集合

const person={//集合的定义

        firstName:'john',
        lastName:'jike',
        age:10,
        hobby:['music','sport','sharing good foods'],
        address: {
            street:'新华路',
            city:'寿宁县',
            province:'福建省'
        }
    }
    //集合内容的获取
    console.log(person);
    console.log(person.age);
    console.log(person.hobby[2]);
    console.log(person.address.city);
    //集合信息的赋值到集合外
    const {firstName,lastName}=person;
    console.log(firstName,lastName);
    //集合信息的添加
    person.email='190806647@qq.com';
    console.log(person);

五，函数与类


function add(num1,num2){//参数不需要在前面声明变量类型
    return num1+num2;
}
let adds=add(5,6);
console.log(adds);

class person{
    constructor (name,age,sex,birth){
    this.name=name;
    this.age=age;
    this.sex=sex;
    this.birth=new Date(birth);//日期格式
    }
}
parseFloat('123')//将字符串转化成浮点数
parseInt('123')//将字符串转化成整数

const person1=new person('建江','20','男','1998-04-03');//创建对象
const person2=new person('小美','22','女','1997-04-02');
console.log(person1);
console.log(person2.birth);

六，元素选择，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');

陈建江！

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
js速成笔记

一，基本信息1，变量声明：全局变量var，局部变量let，常量const2，alert(“警告框”)；console.log("控制台输出")3，变量类型：string ，number，Boolean，null，undefined4，==只关注值不关注类型的相等，===必须一模一样二，字符串string类型1，字符串的拼接可以使用 + 号2，常用的方法： name.subString(0,5)//获得字符串的子窜。 name.split('填写分割的...
复制链接

扫一扫