js——数组 注册 事件 对象 节点 字符串

最新推荐文章于 2024-10-02 05:39:15 发布
最新推荐文章于 2024-10-02 05:39:15 发布
阅读量150 收藏
点赞数
分类专栏： 学习笔记 js 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64948861/article/details/125088640
版权

数组的应用

1.数组

代码如下（示例）：

<!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>
        // let arr = [];
        // arr.push({ name: "张三", age: 18, sex: "男" })
        // arr.push({ name: "张三1", age: 19, sex: "女" })
        // arr.push({ name: "张三2", age: 10, sex: "男" })
        // arr.push({ name: "张三3", age: 50, sex: "男" })
        //排序的规则
        // arr.sort((v1, v2) => {
        //     return v1.age - v2.age;
        // });
        // let arr1 = arr.filter((item) => {
        //     return item.age >= 18 && item.sex === "男"
        // })
        let arr1 = arr.find((item) => {
            return item.age >= 18 && item.sex === "男"
        })
        console.log(arr1)
        // let arr = [];
        // 在数组的末尾追加元素
        // arr.push(1)
        // arr.push(2)
        // arr.push(3)
        // arr.push(4)
        // arr.push(5)
        // 删除数组末尾的元素
        // arr.pop()
        // 往数组的开头位置插入元素
        // arr.unshift(5);
        // 删除数组的第一位元素
        // arr.shift()
        // //删除数组指定的元素   第一参数值删除元素的下标   第二参数删除的个数
        // arr.splice(1, 2)
        // //拼接数组
        // let arr1 = ["a", "b", "c", "d"];
        // let arr2 = arr.concat(arr1);
        // console.log(arr2.indexOf("a"));
        // //对数组进行排序
        // arr2.sort()
        // console.log(arr2);
    </script>
</body>

</html>

2.注册

代码如下（示例）：

<!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>用户注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            display: block;
            margin: auto;
            width: 258px;
            width: 327px;
        }

        table,
        table td,
        table th {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>用户名：</td>
            <td><input type="text"> <span>用户已存在</span></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="" id=""></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" name="" id=""> </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="" id=""> </td>
        </tr>
        <tr>
            <td>昵称：</td>
            <td><input type="password" name="" id=""> </td>
        </tr>
        <tr>
            <td>性别</td>：</td>
            <td><input type="radio" name="sex" id="">男<input type="radio" name="sex" id="">女 </td>
        </tr>
        <tr>
            <td colspan="2">
                <button style="float: right;margin-right: 50px;width: 100px;">注册</button>
            </td>
        </tr>
    </table>
</body>

</html>

该处使用的url网络请求的数据。
请添加图片描述

3.事件

代码如下（示例）：

<!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>
    <style>
        #div {
            width: 500px;
            height: 500px;
            background: pink;
        }
    </style>
</head>

<body>
    <!-- <form action="http://www.baidu.com" method="get" onsubmit="return check()"> -->
    <div id="div"></div>
    <input type="text" id="input" value="已经存才的内容">
    <select name="" id="select">
        <option value="">1</option>
        <option value="">2</option>
    </select>
    <button id="btn">点击获取焦点</button>
    <input type="submit" value="登录">
    <!-- </form> -->
    <script>
        function check() {
            return true;
            // return false;
        }
        /*事件的三种绑定方式
        第一种:直接在标签绑定
        第二种：通过js的on方式去绑定
        第三种：通过监听事件绑定
        */
        //当鼠标移至某个元素时响应一次
        document.getElementById("div").addEventListener("mouseover", function () {
            console.log(1);
        })
        //当鼠标离开某个元素时响应一次
        document.getElementById("div").addEventListener("mouseout", function () {
            console.log(2);
        })
        //当鼠标在某个元素上移动时频繁响应
        document.getElementById("div").addEventListener("mousemove", function () {
            console.log(3);
        })
        //当键盘按下去升上来时触发  经常会使用到event参数
        document.addEventListener("keyup", function (e) {
            console.log(e.key);
        })
        //onload事件一般作用在window  意思当页面元素加载完成后执行
        window.onload = function () {
            console.log("加载完毕");
            // document.getElementById("input").focus();
        }
        //当窗体大小改变时调用该方法
        window.onresize = function () {
            alert("窗体改变")
        }
        //当前表单元素(文本框  文本域  密码框)
        // document.getElementById("input").addEventListener("blur", function () {
        //     alert("离开")
        // })
        //当表单元素离开并且内容发生改变时触发
        document.getElementById("select").addEventListener("change", function () {
            alert("改变")
        })
        //当表单元素获取焦点时触发
        document.getElementById("btn").addEventListener("click", function () {
            // document.getElementById("input").focus();
            document.getElementById("input").select();
        })


    </script>
</body>

</html>

请添加图片描述

将鼠标移到面板上，数值发生变化

4.对象

代码如下（示例）：

<!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>
        // let obj = {
        //     age: 18,
        //     name: "dawson",
        //     say: function () {
        //         console.log("说话");
        //     }
        // };
        // console.log(obj.age);
        // console.log(obj);
        // console.log(obj.say());

        // let Student = function (age, name) {
        //     this.age = age;
        //     this.name = name;
        //     this.say = function () {
        //         console.log("我要说话");
        //     }
        // }
        // Student.prototype.sex = "男";
        // Student.prototype.study = function () {
        //     console.log("我要学习");
        // }
        // let s = new Student(19, "福约翰")
        // console.log(s);

        class Person {
            //构造函数
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            say() {
                console.log("说话");
            }
        }
        class Student extends Person {
            constructor(name, age, sex, type) {
                super(name, age);
                this.sex = sex;
                this.type = type;
            }
            study() {
                console.log("我要学习");
            }
        }

        let student = new Student("dawson", 18, "男", "大二")
        console.log(student);
    </script>
</body>

</html>

请添加图片描述

5.节点

代码如下（示例）：

<!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>
    <ul id="box">
        <li class="ulli">1</li>
        <li class="ulli">2</li>
        <li class="ulli">3</li>
    </ul>
    <script>
        //节点的操作  
        //返回一个dom节点
        // document.getElementById().style.color = "red"
        // //返回一个类似数组的元素
        // document.getElementsByClassName("ulli")
        // //返回一个类似数组的元素
        // document.querySelectorAll("ul>.ulli")
        // //返回一个dom节点
        // document.querySelector("ul>.ulli")

        // let node = document.createElement("a")
        // node.setAttribute("href", "http://www.baidu.com")
        // node.innerText = "百度一下"
        //将元素插入指定元素内的末尾
        // document.body.append(node)
        // document.getElementById("box").prepend(node)
        // document.getElementById("box").after(node)
        // document.getElementById("box").before(node)
        console.log(document.getElementsByClassName("ulli")[0].parentElement.children[1].previousElementSibling);
        console.log(document.getElementsByClassName("ulli")[0].parentElement.children[1].nextElementSibling); 
    </script>
</body>

</html>

请添加图片描述

6.字符串

代码如下（示例）：

//字符串的创建形式
 let str = new String("1234");
let str = "1234dgfdg";
//字符串属性
let str = "123123"
 str.length
String.prototype.myAdd = function (_str) {
     return parseFloat(this) + parseFloat(_str);
 }
 let a = str.myAdd("123123")
 console.log(a);
//字符串的常用方法
 let str = "abc,Der,G,,,,,";
//charAt()方法表示返回指定下标所对应的字符
str.charAt(1)
//indexOf()方法表示返回指定字符在当前字符串中首次出现的下标位置
//如果该字符串不存在  则返回-1
 str.indexOf("1123")
 //lastIndexOf()表示返回指定字符在当前字符串中最后一次出现的下标位置
 str.lastIndexOf("1")
//字符串的截取  slice  substr   substring
 str.substring(1,4)
//字符串的大小写转换
console.log(str.toLowerCase());
 console.log(str.toUpperCase());
//字符串的拆分
 console.log(str.split(""));
//字符串的替换
console.log(str.replace(",", ".").replace(",", "."));
 while (str.indexOf(",") > -1) {
     str.replace(",", ".")
}
//产生0-1的随机小数
 Math.random()
//向上取整
 Math.ceil(1.2)=2
//向下取整
Math.floor(1.9)=1
//四舍五入
 Math.round(1.5)=2


 let email = "fuyuehan.2022@163com"
function checkEmail(email) {
    if (email.indexOf("@") <= 0 || email.indexOf(".") == -1) {
        return false;
    }
    if (email.indexOf("@") > email.indexOf(".")) {
        return false;
    }
    return true;
}


console.log(checkEmail(email));
 let time = "2020-10-a9";

 function checkTime(time) {
     let arr = time.split("-");
     if (arr.length != 3) {
         return false;
     }
    if (isNaN(arr[0]) || isNaN(arr[1]) || isNaN(arr[2])) {
       return false;
     }
   if (arr[0].length != 4 || arr[1].length != 2 || arr[2].length != 2) {
         return false;
   }     return true;

 }

 console.log(checkTime(time));

 function getKeyNum(str) {
     let arr = str.split(""), num = {};
     for (let n of arr) {
        if (!num.hasOwnProperty(n)) {
             num[n] = 1;
         } else {
             num[n] = num[n] + 1;
         }
              }
    return num;
 }
 console.log(getKeyNum("1gfsjfgjhggjfgsdf"));

总结

提示：学习笔记

仅是个人观点，如有错误，请指出

誰言秋桜
关注
专栏目录
字符串的方法，继承，集合，桌面应用程序，简易登录页面，MDI窗体设计，图片翻页
yyyy_1987的博客
06-30 303
字符串的方法，继承，集合，桌面应用程序，简易登录页面，MDI窗体设计，图片翻页效果
IO:使用字符串作为物理节点的字符输入输出流的用法，即StringReader和StringWriter的用法
热门推荐
ma451152002的专栏
09-22 2万+
使用字符串作为物理节点的字符输入输出流的用法，即StringReader和StringWriter的用法 package net.nyist.io; import java.io.IOException; import java.io.StringReader; import java.io.StringWriter; public class StringNodeTest {
Java中节点字符串转换，用于SQL排序
Spirit_NKlaus的专栏
07-07 350
在实际开发中我们可能会遇到有节点字段的数据(例如1.1；1.2.1；3.1.2；2.6.3；1.10.1；1.10.1.2)，需求中可能还要对节点字段进行升序，或者倒序的排序，这样的话SQL中现成的排序是做不到的，当然可以自己写函数实现，也可以在Java代码中自定义排序方法，我这里建议在我们表字段添加一个节点排序字段(将1.1转换成001001这种类似的字段保存起来便于排序使用)，名称你们随意起，知道作用就行，下面写一个字符串转换的方法。 public class TestUtil { pub
LeetCode算法——数组/字符串篇
胡迪警长不许动的Blog
03-27 629
对刷过的算法进行总结，所用解法都是最符合我个人逻辑的，以后再刷的话就看这篇帖子了首先要知道数组在内存中的存储方式，这样才能真正理解数组相关的面试题数组可以方便的通过下标索引的方式获取到下标下对应的数据。举一个字符数组的例子，如图所示：需要两点注意的是正是大家如果使用C++的话，要注意 vector 和 array 的区别，vector 的底层实现是 array，严格来讲vector 是容器，不是数组。
js - 关于对象，数组和字符串的方法 总结
qq_43886365的博客
09-20 570
javascript中关于对象,数组和字符串的一些方法总结
字符串匹配算法——JavaScript
总柴的博客
02-25 3634
字符串匹配算法——javascript 文章目录字符串匹配算法——javascript字符串匹配BF算法 （暴力匹配） √KMP算法 √BM算法**坏字符规则**好后缀规则Trid树（字典树）√ 字符串匹配 字符串匹配问题的形式定义： **文本（Text）**是一个长度为 n 的数组 T[1…n]； **模式（Pattern）**是一个长度为 m 且 m≤n 的数组 P[1…m]； T 和 P 中的元素都属于有限的字母表 Σ 表； 如果 0≤s≤n-m，并且 T[s+1…s+m] = P[1…m]，即对
FrontEnd——数组、字符串、JSON之间的转换和操作
既然青春留不住，还是做个大叔好!
10-27 751
文章目录简介方案1 插件或者说第三方库1.1 flatted1.2 circular-json(不推荐)1.3 qs参数序列化2 原生的方法2.1 JSON.stringfy()2.2 JSON.parse3 相关操作3.1 delete和splice区别3.2 对象数组中，删除指定的元素3.3 删除数组中所有指定值 简介 在开发过程中不可避免的涉及了数组、字符串、JSON之间的转换和操作（增删改查）。这里做一个小结把一些方法做适当的整理。 方案 1 插件或者说第三方库 1.1 flatted https:
JavaScript知识——数组、函数方法、Date对象、包装类、正则表达式、DOM简介
xiaotangyu7dong的博客
08-15 360
JavaScript知识数组数组的方法函数方法call()和apply()argumentsDate对象包装类 数组 创建数组 var arr = new Array(); arr[0] = 135; console.log(arr[0]); console.log(arr.length); #求数组的大小，最大索引+1 //135 //1 使用字面量创建数组 var arr = [1,2,3,4,5,6]; var arr = new Array(10,2,3,30,5,6); var arr =
JavaScript——关于数组
2401_84152797的博客
04-19 805
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
字典树 —— 字符串分析算法
三钻 - 之前端到全栈之路
11-19 3354
这篇文章我们就来一起学习，剩下的几个字符串中比较细节的算法。
JavaScript中数组继承的简单示例
10-23
示例中首先创建了一个根节点，然后创建子节点，并用join方法将叶节点的路径拼接成一个字符串。在这个过程中，因为子节点数组继承了其祖先节点的属性和方法，所以可以直接操作叶节点的数组来访问路径。 这种方法虽然...
vue知识点总结（MVVM模式/CMD命令操作/CDN/ES6-键值对/模板字符串/生命周期钩子/数组侦听/事件对象属性/事件修饰符)
m0_73495603的博客
11-26 270
MVVM模式/CMD命令操作/CDN/ES6-键值对/模板字符串/生命周期钩子/数组侦听/事件对象属性/事件修饰符
【C语言】字符串的输入和输出（使用C标准库函数 gets() 和 puts() ）（附 字符指针实现）| C语言面试题目：请解释一下C语言中的指针数组和数组指针的区别和使用场景。
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
03-17 3658
案例 使用gets()，从键盘输入一个带空格的人名，然后把它显示在屏幕上。 #include <stdio.h> #define N 15 int main(){ char name[N]; printf("Enter your name:"); gets(name); printf("Hello %s!\n",name); puts(name); } 测试输出 相比printf()，puts()不好的一点就在于不能控制输出格式。 函数puts()用于从括号内的参数给出的
vue 将字符串最后一个字符给替换_前端开发：Vue项目实战-Music
weixin_39528289的博客
10-27 1049
大家好，我来了，本期为大家带来的前端开发知识是”前端开发：Vue项目实战-Music“，有兴趣做前端的朋友，和我一起来看看吧！主要内容项目环境搭建路由导航实现ListView列表网络请求第三方组件-轮播图自定义组件-tabs回到顶部Iconfont引入歌曲详情页歌曲播放歌词处理学习目标第一节 Music项目环境第一部分Vue 本届作业聊一聊React和Vue的区别老版本的项目环境如何创建项目第二节...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 772
Vue 2 中使用 Vue I18n 插件实现中英文切换
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 508
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1103
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 205
【代码】如何使用Redisson的布隆过滤器？
深入理解 Nuxt.js 中的 app:data:refresh 钩子
09-29 1297
钩子在数据被刷新时触发，可以选择性地传入要刷新的键名（keys）。这为开发者提供了一个灵活的机制来响应数据变化，并进行必要的更新。Nuxt.js 中的钩子的用途及其实现方法。这个钩子为开发者提供了一种灵活的方式来处理数据的更新，从而优化应用的响应性和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值