![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
js
里面详细记录了js的学习笔记、重点、项目
优惠券已抵扣
余额抵扣
还需支付
¥19.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
小黄呀呀呀
整理的笔记要点主要是记录给自己看的,涉及原创可以私信我修改,谢谢!
展开
-
赋值、浅拷贝、深拷贝的含义、实现方法、总结
基本数据类型:Boolean、String、Number、null、undefined引用数据类型:Object、Array、Function、RegExp、Date等基本数据类型都是按值访问的,可以操作保存变量中的实际值(2)引用数据类型的复制,是按引用传值引用类型如Arrray、Object,不能直接操作对象的堆内存空间,都是直接按引用访问的,即保存在变量对象中的一个地址。(1)只复制指向某个对象的指针,而不复制这个对象本身,新旧对象共享一块内存。(2)基本数据类型直接复制值,引用数据类型(数转载 2022-07-06 14:18:26 · 696 阅读 · 0 评论 -
数组使用...进行拼接
数组使用...进行拼接转载 2022-06-21 10:25:21 · 209 阅读 · 0 评论 -
【js】使用map获取对象数组里某个单独的字段
需求:只想要获取到一个数组,里面的对象值只有name。原创 2022-06-15 16:28:48 · 1925 阅读 · 0 评论 -
字符串中占位符的写法
字符串中占位符的写法原创 2022-04-01 14:35:50 · 299 阅读 · 0 评论 -
解决端口被占用,以及关闭
https://blog.csdn.net/y2964/article/details/109196758转载 2022-03-18 13:57:04 · 1075 阅读 · 0 评论 -
全局作用域、函数作用域
作用域(全局作用域和函数作用域)全局作用域1、直接写在< script >标签里的JS代码,就是在全局作用域2、全局作用域在页面打开时创建,在页面关闭时销毁。3、全局作用域有一个全局对象window4、创建的变量作为window的属性保存,创建的函数作为window对象的方法5、全局作用域的变量在页面任意位置都可以访问。6、变量提升函数作用域调用函数时,创建函数作用域,函数执行完毕之后,函数作用域销毁。每调用一次函数就会创建一个新的函数作用域,之间时相互独立的。3.原创 2021-11-25 09:58:06 · 645 阅读 · 0 评论 -
vue的重点8:slice()、splice()、split()、join()、其他方法
1、slice(start,end)===>数组、字符串可以截取数组和字符串, 左闭右开 不会影响原数组截取字符串 <script> var s = 'hello' //slice()截取字符串 var t = s.slice(0, 3) console.log(t); </script>截取数组 <script> var s2 = [1, 2, 3, 4] //slice()截取数组 va原创 2020-10-13 14:19:44 · 8427 阅读 · 1 评论 -
js的重点13:根据锚点,侧边栏点击,右边显示不同的信息
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> </title> <link rel="stylesheet" href="css/common.css原创 2020-11-17 17:44:50 · 381 阅读 · 0 评论 -
js的重点12:js实现轮播图(完整版)---样式2
轮播图 < >转载 2020-11-15 20:32:09 · 124 阅读 · 0 评论 -
js的重点11:js实现轮播图(完整版)---样式1
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>轮播图</title> <style> body { background-color: pink; } * { margin: 0; padding: 0; } a { text-decoration转载 2020-11-15 20:03:23 · 159 阅读 · 0 评论 -
js的重点10:异步的处理:用异步的方式读取文件(普通的方式、promise对象、异步函数、文件的同步锁readFileSync、promisify方法修改方法的返回值类型)
用异步的方式读取文件a.txt、b.txt、c.txt方法1:最普通的方式,就是一层层的嵌入,会形成回调地狱const fs = require('fs');fs.readFile('./a.txt', 'utf8', (err, result) => { console.log(result); fs.readFile('./b.txt', 'utf8', (err, result) => { console.log(result); fs.readFile('.原创 2020-10-27 14:29:18 · 322 阅读 · 0 评论 -
js的高级笔记5:let、const、数组解构、对象解构、箭头函数、剩余参数、拓展运算符(...)、Array.from、find、findindex、includes、模板字符串、set数据结构
ES6语法目标能够说出使用let关键字声明变量的特点能够使用解构赋值从数组中提取值能够说出箭头函数拥有的特性能够使用剩余参数接收剩余的函数参数能够使用拓展运算符拆分数组能够说出模板字符串拥有的特性ES6相关概念(★★)什么是ES6ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方。变量提升特性增加原创 2020-10-12 14:29:18 · 93 阅读 · 0 评论 -
js的重点9:普通函数中的this和箭头函数中的this的指向问题
普通函数中的this var obj = { name: 'zhangsan', say: function () { console.log(this);//obj } } obj.say()普通函数里都有一个函数的作用域,this指向的是调用者,就是谁调用它,this就指向谁,这里obj.say()代表着是obj调用者say,所以this指向的是obj箭头函数中的this var obj = { name:原创 2020-10-12 10:07:13 · 296 阅读 · 0 评论 -
js的高级笔记4:正则表达式、字符类、预定义类、正则替换replace
1.正则表达式概述1.1什么是正则表达式正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等 。其他语言也会使用正则表达式,本阶段我们主要是利用JavaScript原创 2020-10-10 16:52:09 · 367 阅读 · 0 评论 -
js的项目13:闭包的案例
闭包的案例1、点击li输出索引号<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> &原创 2020-10-10 14:52:43 · 98 阅读 · 0 评论 -
js的高级笔记3:函数的几种定义方式和调用、call()、apply()、bind()、严格模式、高阶函数、闭包、递归、浅拷贝、深拷贝
1.函数的定义和调用1.1函数的定义方式方式1 函数声明方式 function 关键字 (命名函数)function fn(){}方式2 函数表达式(匿名函数)var fn = function(){}方式3 new Function()var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);var fn = new Function('参数1','参数2'..., '函数体')注意/*Function原创 2020-10-10 14:45:51 · 167 阅读 · 0 评论 -
js的重点8:构造函数、原型对象、对象原型、原型链、call()、forEach()、filter()、some()、trim()、获取对象的属性名、设置对象的属性值
1、创建对象的三种方式(1)new对象 var o=new Object()(2)字面量的方式 var o={ }(3)构造函数的方式 function Star(){ this.uname=uname } var s=new Star()2、成员的分类实例成员 (1)构造函数里this添加的成员,只能通过实例对象进行访问,不能通过构造函数静态成员原创 2020-10-09 16:44:55 · 91 阅读 · 0 评论 -
js的重点7:创建一个构造函数并生成实例并打印出构造函数的原型与实例的原型、数组对象的原型添加求和的方法、ES5实现继承、使用数组方法filter来实现数组的去重
1、创建一个构造函数并生成实例并打印出构造函数的原型与实例的原型<body> <!-- 创建一个构造函数并生成实例并打印出构造函数的原型与实例的原型 --> <script> function Star() { console.log('我是一个构造函数'); } //生成实例 var s = new Star() //打印出构造函数原型 console.log(Star.prototype);原创 2020-10-09 16:25:20 · 777 阅读 · 1 评论 -
js的重点6:删除对象的属性
删除对象的属性delete obj.属性名原创 2020-10-09 16:22:38 · 70 阅读 · 0 评论 -
js的高级笔记2:构造函数、原型对象、对象原型、原型链、call()、forEach()、filter()、some()、trim()、获取对象的属性名、设置对象的属性值
1.构造函数和原型1.1对象的三种创建方式–复习字面量方式var obj = {};new关键字var obj = new Object();构造函数方式function Person(name,age){ this.name = name; this.age = age;}var obj = new Person('zs',12);<script> //创建对象的方法 //方法1:new Object() var ob1原创 2020-10-09 16:20:08 · 147 阅读 · 0 评论 -
js的项目12:筛选商品案例(数组的方法 some filter forEach)
筛选商品案例1. 定义数组对象数据var data = [{ id: 1, pname: '小米', price: 3999 }, { id: 2, pname: 'oppo', price: 999 }, { id: 3, pname: '荣耀', pric原创 2020-10-09 16:14:39 · 399 阅读 · 1 评论 -
js的高级笔记1:面向过程、面向对象、对象、类、添加属性和方法、类的继承、面向对象的tab栏切换案例
1.面向过程与面向对象1.1面向过程面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。1.2面向对象面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。1.3面向过程与面向对象对比面向过程面向对象优点性能比面向对象高,适合跟硬件联系很紧密的东西,例如单片机就采用的面向过程编程。易维护、易复用、易扩展,由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统,使系统 更加灵活、更加易于原创 2020-10-03 19:31:08 · 104 阅读 · 0 评论 -
js的项目11:分别使用面向过程的思想、面向对象的思想实现tab栏切换的功能
实现tab栏切换功能1、使用面向过程的思想https://blog.csdn.net/qq_42129553/article/details/108660883https://blog.csdn.net/qq_42129553/article/details/1088054052、使用面向对象的思想https://blog.csdn.net/qq_42129553/article/details/108885369...原创 2020-09-30 15:08:35 · 95 阅读 · 0 评论 -
js的项目10:使用面向对象的思想切换tab栏(增加、删除、修改、切换)
1.面向对象版tab 栏切换1.1功能需求点击 tab栏,可以切换效果.点击 + 号, 可以添加 tab 项和内容项.点击 x 号, 可以删除当前的tab项和内容项.双击tab项文字或者内容项文字可以修改里面的文字内容1.2案例准备获取到标题元素获取到内容元素获取到删除的小按钮 x号新建js文件,定义类,添加需要的属性方法(切换,删除,增加,修改)时刻注意this的指向问题1.3代码准备html文件 <h1> Js 面向对象 动态添加标签页 <原创 2020-09-30 15:04:52 · 276 阅读 · 0 评论 -
js的重点5:键盘事件对象、 BOM的构成、window对象的常见事件、定时器(两种)、this指向问题、location对象、navigator对象、 history对象
一、键盘事件 onkeyup 弹起时触发 onkeydown 按下时触发,识别功能键 onkeypress 按下时触发,不识别功能键二、BOM window是顶级对象 window下面有document、location、navigation、screen、history三、window对象的常见事件 (1)窗口加载事件 onload原创 2020-09-27 17:43:11 · 119 阅读 · 0 评论 -
js项目9:定时器(5秒之后关闭广告、京东的倒计时效果、手机发送按钮、时钟、光棍节倒计时)
1、5秒之后关闭广告<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>原创 2020-09-27 15:49:33 · 599 阅读 · 0 评论 -
js的项目8:键盘事件(模拟京东按键输入内容 、模拟京东快递单号查询)
1、模拟京东按键输入内容按下s键,会自动将焦点放在输入框里这里事件使用keyup如果使用keydown或者keypress的话,只要键不松,就会一直触发事件,所以当你按s键后,文本框里虽然有焦点了,但是还是会输入文本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic原创 2020-09-27 14:36:28 · 372 阅读 · 0 评论 -
js的Web API笔记4:键盘事件对象、 BOM的构成、window对象的常见事件、定时器(两种)、this指向问题、location对象、navigator对象、 history对象、JS执行机制
1.1. 常用的键盘事件1.1.1 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊原创 2020-09-27 12:43:13 · 162 阅读 · 0 评论 -
js的重点4:经过不同的li,显示不同的内容
经过li时显示不同的内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> li {原创 2020-09-25 22:36:15 · 316 阅读 · 0 评论 -
js的重点3:轮播图(实现多个图无缝连接播放)、使用Swiper轮播图效果
图片左右无缝滚动的效果 中国整形美容协会教育中心华北地区教学基地 ...原创 2020-09-22 16:29:28 · 452 阅读 · 0 评论 -
js重点:js实现轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>最简单的轮播效果</title> <style> * { margin: 0; padding: 0 } .box { width: 500原创 2020-09-22 11:47:36 · 90 阅读 · 0 评论 -
js的项目7:小天使跟着鼠标走(鼠标对象)、动态创建列表(用事件委托机制写)
1、小天使跟着鼠标走(鼠标对象)思路:这里用到了鼠标这个对象,可以获取当前鼠标相对于整个文档的x和y坐标准备一个图片(小天使),为了不占据空间,所以设置为绝对定位,然后将这个图片的left和top分别设置为鼠标的x和y坐标。需要注意的是:绝对定位是从左上角开始的,所以对于图片来说,需要将鼠标放在图片的中间,所以需要减去宽和高的一半代码:<!DOCTYPE html><html lang="en"><head> <meta charset原创 2020-09-19 17:00:55 · 359 阅读 · 0 评论 -
js的Web API笔记3:节点操作(删除节点、删除留言、复制节点)、创建元素的三种方式、DOM的核心总结、注册事件、删除事件、DOM事件流(捕获和冒泡)、事件对象、事件委托、鼠标事件、鼠标对象
1.1. 节点操作1.1.1 删除节点node.removeChild() 方法从 node节点中删除一个子节点,返回删除的节点。 <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script>原创 2020-09-19 16:50:59 · 258 阅读 · 0 评论 -
js的重点2:获取元素、操作元素、属性的操作、节点的操作、注册事件、删除事件、事件流、事件对象、事件委托、鼠标事件
一、获取元素普通方法: getElementById('xx') getElementsByTag('xx')H5新增: getElementByClass('xx') querySelector('xx') querySelectorAll('xx')获取特殊元素:获取body:原创 2020-09-19 16:47:55 · 103 阅读 · 0 评论 -
js的Web API笔记2:排他思想、自定义属性操作(获取属性值、设置属性值、移出属性、 H5自定义属性)、节点操作(父节点、子节点、兄弟节点、创建节点、添加节点、删除节点)
1.1. 排他操作1.1.1 排他思想如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法:所有元素全部清除样式(干掉其他人)给当前元素设置样式 (留下我自己)注意顺序不能颠倒,首先干掉其他人,再设置自己 <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button&原创 2020-09-18 11:23:36 · 227 阅读 · 0 评论 -
js的项目6:百度换肤、表格经过时换色、全选和反选、切换tab栏、留言板、新浪下拉、动态的表格
1、百度换肤<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul{原创 2020-09-18 11:21:33 · 164 阅读 · 0 评论 -
js项目5:全选和反选
1、先准备好html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> tabl原创 2020-09-18 11:15:00 · 97 阅读 · 0 评论 -
js的项目4:用css和js分别实现下拉列表
1、先准备好html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tit原创 2020-09-18 10:27:36 · 80 阅读 · 0 评论 -
js的项目3:分别用css和js实现经过表格时,进行换色
1、实现表格经过每一行,进行变色(1)先把页面代码准备好<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style原创 2020-09-17 15:37:15 · 86 阅读 · 0 评论 -
js的重点1:操作元素(样式不多的时候操作元素的style属性、样式多的时候操作元素的className属性、classList.add和classList.remove)
操作元素1、如果要添加的样式比较少的话,那么就直接用element.style2、如果要添加的样式比较多的话,那么就要给element添加class 获取元素的属性中,样式是style,class是用className获取的3、修改类名(1)element.className=’’ 会直接覆盖前面的(2)element.classList.add(‘XX’) 会在class里追加一个类名element.classList.remove(‘xx’) 会在class里删除一个类名示例:用排他原创 2020-09-17 15:06:34 · 213 阅读 · 0 评论