JS-小结

最新推荐文章于 2024-10-18 17:51:23 发布
最新推荐文章于 2024-10-18 17:51:23 发布
阅读量1.7k 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45701514/article/details/122716540
版权

js

数据类型

  1. number 不区分小数和整数, NaN(not a number),Infinity(无穷大)
  2. 字符串
  3. 布尔值 true/false
  4. null/undefined
  5. 数组 var = arr[1,2,3,“hello”,true]
  6. 对象 var person={
    name:“czx”,
    age:3,
    tag:[“java”,“c”,“js”]
    }

继承

<!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>

<body>
    <script>
        class Student {
            constructor(name) {
                this.name = name;
            }
            hello() {
                console.log('hello world')
            }
        }
        class XiaoStudent extends Student {  
            constructor(name, grade) {
                super(name);
                this.grade = grade;
            }
            myGrade() {
                alert("我是一名小学生");
            }
        }
        var czx = new Student('czx');
        var xiaohong = new XiaoStudent("xiaohong", "小学生");
        czx.hello();
    </script>
</body>

</html>

比较运算符

  1. =
  2. == 等于（类型不一样，值也一样，也会判断true）
  3. === 决定等于（类型一样，值一样才会为true）

‘use strict’ 严格检查模式

局部变量建议使用let去定义

Map和Set

<!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>

<body>
    <script>
        var map = new Map([
            ["k1", "v1"],
            ["k2", "v2"]
        ]);

        console.log(map.get("k1"));
        map.set('admin', 123456);
        var set = new Set([3, 2, 1, 1, 2, 3, 4]);
    </script>
</body>

</html>

iterator ES6

<!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>

<body>
    <script>
        var arr = [1, 3, 45, 5];
        for (let x of arr) {
            console.log(x);
        }
        var map = new Map([
            ["k1", "v1"],
            ["k2", "v2"],
            ["k3", "v3"]
        ]);
        for (let x of map) {
            console.log(x);
        }
        var set = new Set([3, 2, 1, 1, 2, 3, 4]);
        for (let x of set) {
            console.log(x);
        }
    </script>
</body>

</html>

函数

rest

<!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>

<body>
    <script>
        function out(a, b, ...rest) {
            console.log("a=>" + a);
            console.log("b=>" + b);
            console.log(rest); //剩下的参数放放进rest数组
        }
    </script>

</body>

</html>

JSON

操作BOM对象

  <script>
    location.assign("http://www.baidu.com"); //设置新的地址
  </script>

操作DOM对象

<!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>

<body>
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
    <div id="box"></div>

    <script>
        //获取节点
        var h1 = document.getElementsByTagName('h1');
        var p1 = document.getElementById('p1');
        var p2 = document.getElementsByClassName('p2');
        var div = document.getElementById('box');

        //更新节点
        p1.innerText = '6666';
        div.innerHTML = '<strong id="11">1234</strong>';
        div.style.color = 'red'

        //删除节点  通过父节点删除子节点
        //div.remove('11');

        //插入节点
        var create = document.createElement('p');
        create.id = 'new';
        create.innerText = '插入的节点';
        div.append(create);
    </script>

</body>

</html>

操作表单

<!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>
    <script src="../js/md5.js"></script>
</head>

<body>
    <form action="post">
        <p>
            <span>用户名:</span><input type="text" id="username" name="username">
        </p>
        <p>
            <span>密码:</span><input type="password" id="password" name="password">
        </p>
        <input type="button" value="提交" onclick="aaa()">
    </form>
    <script>
        function aaa() {
            var username = document.getElementById('username');
            var pwd = document.getElementById('password');
            console.log(username.value);
            pwd.value = md5(pwd.value);
            console.log(pwd.value);

        }
    </script>

</body>

</html>

Jquery

事件

<!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>
    <script src="../js/jquery-3.4.1.js"></script>
    <style>
        #move {
            width: 500px;
            height: 500px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    mouse:
    <span id="mouseMove"></span>
    <div id='move'>
        在这里动鼠标试试
    </div>
    <script>
        //当网页元素加载完毕后，响应事件
        $(function() {
            $('#move').mousemove(function(e) {
                $('#mouseMove').text("x:" + e.pageX + "y:" + e.pageY)
            })
        });
    </script>
</body>

</html>

操作DOM

<!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>
    <script src="../js/jquery-3.4.1.js"></script>
</head>

<body>
    <ul id='ul'>
        <li class="js">js</li>
        <li name='python'>python</li>
    </ul>
    <script>
        $('ul li[name=python]').text('111');
        $('ul li[name=python]').css("color", "red");
    </script>
</body>

</html>
zhixuChen200
关注
专栏目录
JS函数表达式-小结
桃树林
05-23 855
    在JS中，函数表达式是一种非常有用的技术。使用函数表达式可以无须对函数命名，从而实现动态编程。匿名函数，也称拉姆达函数，是一种使用JavaScript函数的强大方式。函数表达式的特点：函数表达式不同于函数声明。函数声明必须有函数名称， 而函数表达式不需要。没有名字的函数表达式也称匿名函数。在无法确定如何引用函数的情况下，递归函数就会变得比较复杂。递归函数应该始终使用arguments.ca...
JavaScript脚本语言--要点小结
Blue
03-24 157
JavaScript--要点小结
javascript学习小结
greenHand176438的博客
10-07 1692
已经学了一段时间javaScript,在针对性的学习这块儿的时候，认为js就是属性、事件、方法，的混合使用。下面对js做个简单的总结。javascript又称js是一种用来交互的弱类型脚本语言，js大致分为以下几部分。 第一部分变量 在es6之前以var进行声明用来存储一个变化数据，可以用来做一个中转的容器方便以后的开发进行使用 变量的类型包括为以下几种： ...
JavaScript小结
weixin_44037272的博客
01-28 910
JavaScript 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，是一种被嵌入HTML网页之中的基于对象和事件驱动编程的脚本语言。脚本实际上是一段程序，用来完成某些特殊功能。JavaScript功能：1、可以将文本动态的放入HTML页面。2、可以对事件做出响应。3、可以读写HTML元素。4、可被用来验证用户输入的数据。5、可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。6、可被用来创建cookies，用来存储和取回位于访问者的计算机中的信息。
JS-DOM小结
Anoddguy的博客
09-05 278
10-25 js刷题小结
weixin_50249353的博客
10-25 98
10-25
JS-事件小结
Anoddguy的博客
09-05 239
Node.js学习小结
qq_37056751的博客
01-28 427
Node.js学习小结 学习node.js，需要一些计算机网络预备知识： 1.HTML、CSS、JavaScript 2.TCP/IP、HTTP协议、W3C 大概是以上这些，在学习的过程中有不会的可以随时去查资料。 学习网址：菜鸟教程 Node.js简介 简单的说，Node.js 就是运行在服务端的、异步事件驱动的、基于谷歌Chrome V8 引擎的JavaScript。 安装Node.js 这里就不在赘述了，有兴趣的朋友可以去“菜鸟教程”的网站上看一下，里面教程很详细。接下来我重点说下我认为Node.j
SpreadJS使用小结
annier_11的博客
11-02 4172
SpreadJS，可嵌入您系统的在线Excel 纯前端表格控件，功能布局与 Excel 高度类似
javascript学习小结--01
qq_27150251的博客
03-16 1724
javascript简史；javascript组成
wuxiumu#Write-maintainable-code#08-小结1
07-25
5.8 小结对象在 JavaScript 中被称为引用类型的值，而且有一些内置的引用类型可以用来创建特定的对象，现简要总结如下：引用类型与传统面向对象程序设计中
JavaScript事件学习小结(五）js中事件类型之鼠标事件
11-22
JavaScript事件学习小结(五）js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结（一）事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结（四）event的公共成员...
Angular.JS中指令ng-if的注意事项小结
12-10
前言 ng-if指令可以根据表达式的值true/false在DOM中真正生成或真正移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则对应元素的一个克隆将被重新插入DOM中。...
JS-常用功能
qq_40950398的博客
10-18 132
汇总一些常用的js功能
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 754
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 582
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
源码好优多
10-16 761
请联系我获取更详细的演示视频。
2024 Bootstrap 秘籍：基础详解、实战案例与优化技巧
最新发布
weimengen的博客
10-18 536
本文介绍了使用 Bootstrap 构建网站的技巧。涵盖了 Bootstrap 的基础知识，包括响应式设计原理、HTML 结构、CSS 类作用和 JavaScript 插件。详细阐述了安装与使用方法、布局规划、组件选择及自定义样式等方面，并为每个知识点提供了丰富案例。掌握这些技巧，开发者能构建出高质量、美观且响应式的网站。
JavaScript每日小结：深入理解Array对象
在本文档中，我们将深入探讨JavaScript中关于数组的基础知识和常用方法，这对于JavaScript初学者和进阶开发者都是十分有价值的参考资料。以下是对每个知识点的详细解释： 1. **数组常用方法** - `toString()` 方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zhixuChen200

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值