首页 > 其他分享 >js基础篇一

js基础篇一

时间：2024-10-09 13:44:40浏览次数：10  
标签：console log 元素 基础 js 语法 let 数组

JavaScript

html 骨架

CSS 血肉

js 行为

JavaScript:是一种运行在客户端(浏览器)的一种编程语言，实现人机交互

弱类型的语言

作用：

  • 网页的特效

  • 表单验证

  • 数据交互(ajax)

js书写的位置

  • 行内 写 在开始标签里

  • 内部 写在script标签里 （写在</body>的前面）

    因为代码是从上向下逐行运行的，如果js代码写在html结构前面，就无法操作DOM里的节点，如果一定要放写在前面，就需要一个加载事件来实现等特页面加载完了再执行

    window.onload = function () {
        代码
    }

     

  • 外部 写在后缀是js的文件里

    载入外部js

    <script src="01-test.js">
        // 这里面的代码会被忽略(不会被执行)
        alert('欢迎再次来到js课堂');
    </script>

     

注释：

  • 单行注释 // ctrl+/

  • 多行注释 /* */ alt + shift +a

 

结束符 分号

  • 用英文的分号';'作为结束符

  • 可写，可不写(以团队约定 为主)

js输入输出

输出

  • 弹窗输出 （在并列的代码中优先执行）

    alert('欢迎来到江西南昌');

  • 页面输出

    document.write('欢迎来到南昌雅腾');

  • 控制台输出

    console.log('欢迎来到javascript课堂');

输入

  • 弹窗输入

    console.log(prompt('请输入您的姓名'));

  • 表单输入

    ​

变量

定义：存储数据的容器

变量声明的关键词：let,var,const

关键词let

可以重新赋值，只能先声明后使用,不能重复声明

  • 边声明边赋值

    let num = 1;//边声明边赋值
    console.log(num);

  • 先声明后赋值

    let a;
    a = 10;
    console.log(a);

  • 边声明边赋值同时声明多个

    let b = 12, c = 25;//边声明边赋值同时声明多个
    console.log(b,c);

  • 先声明后赋值，同时声明多个

    let d,e;//先声明后赋值，同时声明 多个
    d = 40;
    e = 30;
    console.log(d,e);

关键词var

可以重复声明(不合理)，可以先使用后声明 (不合理)

var a = 10;
console.log(a);
var a = 30;
console.log(30);
b = 20;
console.log(b);
var b;

关键词const

const声明的变量为常量，不可以重新赋值

const x = 3.14;

数据类型

字面量：在计算科学中，字面量(litera())是计算机描述事/物

方法：typeof 用于检测数据类型

语法：

  • typeof 变量名

  • typeof(变量名)

返回值是数据类型

基础数据类型

  • number 数字型 字面量： 数值

    // 数字型  number
    let num = 10;
    num = 1.23;
    console.log(typeof num);
    console.log(typeof(num));

     

  • string 字符串 字面量： '',"",``,

    let str = 'abc';
    str = "abc";
    str = `abc`;//模板字符串，里面可以识别变量
    let str1 = `str里的内容是${str}`;
    ​
    console.log(typeof str);
    console.log(str1);

    • 字符串的方法：

      • split('分隔符') 根据分隔符把字符串拆成数组元素组成数组

        const countries = ["中国","美国","英国","法国","巴西","墨西哥"];
        let str = countries.join(',');
        console.log(str);
        let arr = str.split(',');
        console.log(arr);

      • indexOf('要查找的字符串') 返回值：从前向后找，找到第一个匹配的下标(索引)，如果没有找到返回-1

        语法：字符串名.indexOf('要查找的字符串')

        ​

         

  • boolean 布尔型 true false

    let boo = true;
    console.log(typeof(boo));

  • undefined 未定义的

    javaScript是弱类型的语言，变量只有在赋值之后才能知道变量是什么数据类型,在变量声明后但未赋值时

    let a;
    console.log(typeof(a));

  • null 空类型

  • function 函数 可以先使用后声明

    声明的关键词：function

    语法：function 函数名(形参1，...){

    执行语言

    }

    函数调用：函数名()

    sayHI();
    function sayHI(){
        console.log('hi~');
    }
    ​
    console.log(typeof(sayHI));

    函数赋初始值

    // 形参赋初始值方法1
    function getSum(x = 0,y = 0){
    ​
        return x + y;
    }
    // 形参赋初始值方法2
    function getSum(x,y){
        x = x||0;
        y = y||0
    ​
        return x + y;
    }
    // let sum = getSum(2,3);
    // console.log(sum);
    let sum = getSum();
    console.log(sum);

    匿名函数

    匿名函数赋值

    // 匿名函数赋值
    let fn = function(){
        console.log('匿名函数赋值');
    ​
    }
    // 调用:
    fn();

    立即执行函数

    立即执行函数前面必须要有结束符

    (function(){
        console.log('立即执行函数');
    })();

    回调函数

    function getSum(x,y){
        x = x||0;
        y = y||0
    ​
        return x + y;
    }
    //求(3+2)*5
    // function getJi(a,b,c,fn){
    //     let sum = fn(a,b);
    //     return sum * c;
    // };
    // console.log(getJi(3,2,5,getSum));
    function getJi(a,b,c){
        let sum = getSum(a,b);
        return sum * c;
    };
    console.log(getJi(3,2,5));

    箭头函数

    语法：let abc = (形参1，...) => {

    函数体

    }

    let abc = (x,y) => {
        //函数体
        console.log(x + y);
    ​
    };
    abc(4,5);
            

    • 如果只有一个形参，小括号可以省略

      let bcd = x => {
          console.log(x*x);            
      }
      bcd(5);

    • 如果函数体只有一句，大括号可以省略

      let bcd = x => console.log(x*x);
      bcd(5);

    • 如果 函数体只有一句且是return,return可以省略

      let bcd = x => x*x;
      console.log(bcd(5));

引用数据类型

  • 数组 有序的存储一组数据 字面量 []

    声明方式：

    const arr = new Array(1,2,3,4);// 第一种实例化
    const arr = [4,8,'a',true];

    数组的特点：

    • 数组里的每一个数据称为数组元素

    • 每一个数组元素都有 一个下标(索引)，且是从0开始

    • 第一个数组都有一个长度，length指个是数组元素的个数

    • 数组元素最大的下标(索引)为length-1

    读取指定下标的数组元素：

    数组名[下标]

    修改指定下标的数组元素：

    数组名[下标] = 新的值

    在数组的最后增加一个数组元素

    数组名[数组长度] = 新值

    arr[arr.length] = false;

    • 数组的方法

      • forEach()

        语法：数组名.forEach(（item（数组元素）,index（索引）) =>{

        函数体}）

        arr.forEach((element,index) => {
            console.log(element);
        ​
        })

      • push(新元素) 在数组的最后追加一个新元素 返回值 ：追加后数组的长度

        语法：数组名.push(新元素) 

        const stu = ['tom','berry','ketty','rose','jake'];
        for(let i = stu.length-1;i >=0; i--){
            result.push(stu[i]);
        }

      • unshift(新元素) 在数组的前面插入一个新元素 返回值：添加后数组的长度

        语法：数组名.unshift(新元素)

        const stu = ['tom','berry','ketty','rose','jake'];
        for(let i = 0;i <stu.length;i++){
            result.unshift(stu[i]);
        }
        console.log(result);

      • pop() 删除最后一个数组元素 返回值:被删除的元素

        语法：数组名.pop()

        let a = result.pop();
        console.log(result);
        console.log(a);

      • shift() 删除数组的第一个元素 返回值：被删除的元素

        语法：数组名.shift()

        let a = result.shift();
        console.log(result);
        console.log(a);

      • splice(startIndex,num,新的数组元素) 在任意位置删除任意个数或添加任意个数的元素

        语法：数组名.splice(startIndex,num,新的数组元素1，...)

        返回值：被删除的元素组成的数组

        • startIndex：开始索引 开始删除的索引(包含的)

        • num:删除的数组元素的个数

        • 新的数组元素：有多少个新的数组元素直接都写在第二个参数之后

          // let a = result.splice(0,1)
          let a = result.splice(0,0,'tony','ammy','jerry')
          console.log(result);
          console.log(a);

      • reverse() 返回值：把原数组反转过来的新数组

        语法：数组名.reverse()

        let a = stu.reverse();
        console.log(a);

      • join('分隔符') 把数组元素用分隔符连接成一个字符串 返回值：通过分隔符连接 的字符串

        语法：数组名.join('分隔符')

        const countries = ["中国","美国","英国","法国","巴西","墨西哥"];
        let str = countries.join(',');
        console.log(str);

      • indexOf('要查找的字符串') 返回值：从前向后找，找到第一个匹配的下标(索引)，如果没有找到返回-1 字符串通用

        语法：数组名.indexOf('要查找的字符串')

        countries = ["中国","法国","美国","英国","法国","巴西","墨西哥"];
        a = countries.indexOf('法国');
        console.log(a);

        last

      • lastIndexOf('要查找的字符串') 返回值：从后向前找，找到第一个匹配的下标(索引)，如果没有找到返回-1 字符串通用

        语法：数组名.lastIndexOf('要查找的字符串')

        countries = ["中国","法国","美国","英国","法国","巴西","墨西哥"];
        a = countries.lastIndexOf('法国');
        console.log(a);

      • includes('要查找的字符串'); 返回值：布尔值，有返回true,反之false 字符串通用

        语法：数组名.includes('要查找的字符串')

        countries = ["中国","法国","美国","英国","法国","巴西","墨西哥"];
        a = countries.includes('英国');
        console.log(a);

      • filter(fn(callback) 过滤 返回值：符合过滤条件的数组元素组成的新数组

        语法：数组名.filter(function(element,index) {

        return 过滤条件

        })

        const deposit = [
            {"id":1,"names":"小明", "money":8000},
            {"id":2,"names":"小李", "money":9000},
            {"id":3,"names":"小张", "money":6000},
            {"id":4,"names":"小陈", "money":10000},
            {"id":5,"names":"小王", "money":7000},
            {"id":6,"names":"小毛", "money":5000},
            {"id":7,"names":"小赵", "money":5600},
            {"id":8,"names":"小彭", "money":7888},
        ];
        const newDeposit = deposit.filter(item=>item.money >= 7000)
        console.log(newDeposit);

         

 

  • 对象 以键值对的方式存储的一组数据

    • 声明方法

      实例化

      const obj = new Object({name:'张三',age:18});
      console.log(obj);

      字面量{}

      const obj = {
          uname:'kety',
          age:18,
          singsong:function(){
              console.log('song');
      ​
          }
      };

    • 读取元素的值

      console.log(obj.uname);
      console.log(obj['uname']);

    • 修改元素的值

      obj.uname = 'tom';

    • 新增元素

       obj.gender = 'male';

    • 删除元素

      delete obj.gender;

    • 方法的调用 

      obj.singsong();

       

运算

算术运算

+，-，*，/，%，++，--

赋值运算

+=，--，*=，/=，%=，=

比较运算

>,<,>=,<=,==,!=,===,!==

==:只比较值

===：比较值和数据类型

let a = 10;
let str = '10';
console.log(a == str);//true
console.log(a != str);//false
console.log(a === str);//false

逻辑运算

与&&,或||,非!

连接运算

+，只要+的一端是字符串，结果就是字符串

语句

条件语句

语法：

if(条件){

条件成立执行的语句

}else{

}

Math对象

数学对象，有许数学的方法

random()方法

Math.random() 静态方法返回一个大于等于 0 且小于 1 的伪随机浮点数，并在该范围内近似均匀分布，然后你可以缩放到所需的范围。其实现将选择随机数生成算法的初始种子

DOM tree

DOM:document object model 文档对象模型

JS选择器

  • getElementById(id名)

    语法： document.getElementById('id名') 通过id名来获取DOM元素

    const outer = document.getElementById('outer');
    console.dir(outer)

  • getElementsByClassName('类名'); 通过类名来获取DOM元素，获得的是一个元素集合(伪数组)，需要读取元素需要遍历集合或用下标读取,获得的是html元素集合，不可以用forEach

    语法：document.getElementsByClassName('类名');

    const box = document.getElementsByClassName('box');
    console.dir(box[0]);
    box[0].style.background = 'blue';

  • document.getElementsByTagName('标签名'); 通过标签名来获取DOM元素，获得的是一个元素集合(伪数组)，需要读取元素需要遍历集合或用下标读取,,获得的是html元素集合，不可以用forEach

    语法： document.getElementsByTagName('标签名');

    const div = document.getElementsByTagName('div');
    console.dir(div[0]);

  • document.querySelector('CSS选择器') 通过CSS选择器获得DOM元素(只选择一个)

    const box = document.querySelector('#outer');
    console.dir(box);

  • document.querySelectorAll('CSS选择器') 通过CSS选择器获得DOM元素(css选择器能选中多少个，js就能获得多少个) 获得的是一个节点集合 可以用forEach

const box = document.querySelectorAll('.box');
console.dir(box);
box.forEach(item=>console.log(item));

js元素属性的操作

  • 元素自有属性及html5之前的自定义属性

    • 获得

      语法：对象名.属性名

      img.title

    • 设置或修改

      语法：对象名.属性名 = '新值 '

      img.title = '阳光下的向日葵'

  • html5的自定义属性 data-自定义的属性名

    • 获得

      语法：对象名.dataset.自定义的属性名

      console.log(img.dataset.flag);

    • 设置或修改

      语法：对象名.dataset.自定义的属性名 = '新值'

      img.dataset.flag = 'off';

元素CSS的操作

注：JS只能操作元素的内联(行内)样式

  • 获得

    语法：对象名.style.css属性名

    console.log(box.style);

  • 设置或修改

    语法：对象名.style.css属性名 = '新值'

    box.onclick = function(){
        if(this.dataset.flag == 'on'){
            this.style = 'color:black;font-size:16px;';
            // this.style.color = 'black';
            // this.style.fontSize = '16px';
            this.dataset.flag = 'off';
        }else {
            this.style = 'color:red;font-size:26px;';
            this.dataset.flag = 'on';
        }
    }

元素类的操作

className

  • 获得

    语法：对象名.className 返回的是类名的字符串

    const outer = document.querySelector('.outer');
    console.log(outer.className);

  • 设置或修改 完全覆盖式的修改

    语法：对象名.className = '新的值'

    outer.className = 'outer one';

classList

  • 获得

    语法：对象名.classList 返回值：类名组成的集合

    console.log(outer.classList);

  • 添加类

    语法：对象名.classList.add('类名')

    如果需要添加 多个，就传多个参数 就可以

    outer.classList.add('two','three');

  • 删除类：

    语法：对象名.classList.remove('类名')

    outer.classList.remove('three','two');

  • 切换类 同一个类名有或无的切换

    outer.classList.toggle('one');

元素的内容的操作

元素内容=>innerHTML

元素内容：指的是从开始标签到结束标签之间的内容

  • 获得

    语法：对象名.innerHTML

    const box1 = document.querySelector('.box1');
    console.log(box1.innerHTML);

  • 设置或修改

    语法：对象名.innerHTML = "新的值" 完全覆盖式的修改 会解析标签

    box1.innerHTML = "<span>我是span元素<span>";

文本内容 => innerText

  • 获得

    语法：对象名.innerText

    console.log(box1.innerText);

  • 设置或修改

    语法：对象名.innerText = "新的值" 不会解析标签

    box1.innerText="<span>我是span元素<span>";

     

表单内容=>value

  • 获得

    语法：对象名.value

    input.addEventListener('keyup',function(){
        console.log(this.value);
    ​
    })

  • 设置或修改

    语法：对象名.value = "新的值"

    input.value = "关键词";

计(延)时器 setTimeout

过多长时间后做什么

语法：setTimeout(回调函数,延时时长); 返回值 ：当前计时器（包括：setTimeOut和setInterval）的id

let timer = setTimeout(function(){
    document.querySelector('.box').style.display = 'none';
},3000)

清除(停止)计时器

clearTimeout(计时器的名称);

计时器 setInterval

每隔多久执行一次

语法：setIntervalt(回调函数,间隔时长); 返回值 ：当前计时器（包括：setTimeOut和setInterval）的id

let i = 0;
let timer = setInterval(function(){
    i++;
    if(i > 10 ){
        clearInterval(timer);
        // 清除(停止计时器)
    }else{
        console.log(i);
    }
},1000);

清除(停止)计时器

clearInterval(计时器的名称);

 

事件

on+事件名 = 函数

事件监听

事件：在编程时系统内发生的动作或发生的事情如：单击，鼠标移入....

事件的监听：让程序检测是否有事件产生，一量有事件触发就立即 调用 一个函数来响应，也称为绑定事件或注册事件

事件监听三要素

  • 事件源：哪个DOM元素被事件触发了 谁(who)

  • 事件类型：用什么方式触发 如：click,mouseenter... 怎么做？

  • 事件调用的函数：要做什么 做什么？

语法：

对象名.addEventListener(参数1，参数2，参数3)

  • 参数1 事件名 string

  • 参数2 回调函数 (用于写事件触发后需要实现的功能的逻辑)

  • 参数3 是否有捕获机制 布尔值 false（默认值）冒泡 true :捕获

冒泡：当一个元素的事件被触发时，同样的事件将会在该元素的祖先中依次被触发，这个过程叫冒泡

事件对象：事件的回调函数的第一个参数为事件对象，一般用e,event表示

事件对象里存储着与事件相关的属性和方法

event.stopPropagation();
//阻止事件流(由大到小是捕获，由小到大是冒泡)

委托事件

子元素把本应该绑定在元素本身的事件委托给其祖先元素

const ul = document.querySelector('.box>ul');
const lis = document.querySelectorAll('.box>ul>li');
ul.addEventListener('click',function(event){
    even.preventDefault();
    // 阻止默认行为
    console.dir(event.target)
    if(event.target.tagName == 'A'){ 
        lis.forEach(element => {
            element.classList.remove('active');
        });
        event.target.parentElement.classList.add('active');
​
    }
})
 

 

标签：console,log,元素,基础,js,语法,let,数组
From： https://www.cnblogs.com/njhwy/p/18454055

相关文章

  • 基于Node.js+vue高校竞赛信息管理系统(开题+程序+论文) 计算机毕业设计
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容研究背景随着高等教育的快速发展，各类学科竞赛已成为培养学生创新能力、实践能力和团队协作精神的重要途径。然而，传统的高校竞赛信息管理方式往往依赖于人工操作和纸......
  • 基于Node.js+vue房产维修网(开题+程序+论文) 计算机毕业设计
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容研究背景随着城市化进程的加速，房地产行业迎来了前所未有的发展机遇，同时也面临着巨大的挑战。房产作为人们生活中不可或缺的资产，其维护与保养日益受到重视。然而，传统......
  • 基于Node.js+vue服装商城(开题+程序+论文) 计算机毕业设计
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容研究背景随着互联网的迅猛发展和电子商务的普及，人们的购物方式发生了翻天覆地的变化。传统的线下服装购物模式虽然能够提供直观的试穿体验，但在商品选择、价格比较、......
  • Nuxt.js 应用中的 page：finish 钩子详解
    title:Nuxt.js应用中的page：finish钩子详解date:2024/10/9updated:2024/10/9author:cmdragonexcerpt:page:finish是Nuxt.js中用于处理页面加载完成事件的钩子，特别是与Suspense机制相关。这个钩子允许开发者在页面加载完成后执行自定义操作，以优化用户体验或进行......
  • Vue组件开发基础教程
    首发于公众号[小白讲前端]欢迎关注1.环境搭建安装Node.js:确保你的机器上已安装了Node.js。安装VueCLI:打开命令行工具，运行npminstall-g@vue/cli来全局安装VueCLI。2.创建项目在命令行中执行:vuecreatemy-vue-appcdmy-vue-app这将创建一个新的Vue项......
  • 五行强度得分_喜用神api免费接口_json数据八字五行强弱接口
    本API接口基于深厚的八字学原理，为用户提供详尽的五行（金、木、水、火、土）强弱分析、五行打分评估，以及精准的喜用神判断。用户只需输入自己的八字信息，即可获得全面而深入的命理解读。‌一、核心功能‌‌五行强弱分析‌：依据用户八字，精准分析五行在命盘中的分布与强弱状态。揭示五......
  • 我的AI学习 基础篇
    我的AI学习：基础`今年的诺贝尔物理奖给了搞机器学习和神经网络的人了。因为这两位奠定了AI的基础。所以观点：基于机器学习、神经网络的是AI。AI大模型(LLM)，也叫大语言模型，这里我列几个网站，也是我平常遇到问题经常在上面访问的，不妨大家点进去看看GPT：https://chatgpt.com/......
  • 【优化】js 的代码质量与整洁度
    前言为什么代码要整洁？代码质量与整洁度成正比。有的团队在赶工期的时候，不注重代码的整洁，代码写的越来越糟糕，项目越来越混乱，生产力也跟着下降，那就必须找更多人来提高生产力，开发成本越来越高。整洁的代码是怎样的？清晰表达意图、消除重复、简单抽象、能通过测试。换句话说......
  • （分享源码）计算机毕业设计必看必学 上万套实战教程手把手教学JAVA、PHP，node.js，C++、pyth
    摘要信息化社会内需要与之针对性的信息获取途径，但是途径的扩展基本上为人们所努力的方向，由于站在的角度存在偏差，人们经常能够获得不同类型信息，这也是技术最为难以攻克的课题。针对社区防疫管理等问题，对社区防疫管理系统进行研究分析，然后开发设计出基于Django框架的社区防......
  • Vue.js组件开发：构建可复用、可维护的前端应用
    Vue.js作为一个流行的前端框架，以其简洁、高效和灵活的特性赢得了众多开发者的青睐。而组件化开发是Vue.js的核心理念之一，它使得我们能够构建出结构清晰、易于维护的大型应用。本文将深入探讨Vue.js组件开发的各个方面，帮助你掌握组件开发的精髓。1.什么是Vue.js组件？Vue.js......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99