JavaScript
JavaScript个人学习笔记
越努力越
越努力,越幸运!
展开
-
JSON.stringify() 的使用、toJSON 方法 以及 JSON.parse 方法
JSON.stringify() 的 5 个秘密特性JSON.stringify() 方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串。//初始化一个 user 对象const user = { "name": 'zzz', "age": 24{console.log(user)// [object Object]console.log() 没有帮助我们打印出期望的结果。它输出 [object Object],因为从对象到字符串的默认转换是 [obje原创 2020-05-28 14:41:44 · 1307 阅读 · 0 评论 -
Promise使用(方法)
实例方法then()类方法race()/all()/resolve()/reject()说明let fs = require('fs');function read(path) { return new Promise((resolve,reject)=>{ fs.readFile(path,'utf8',function(err,data) { ...原创 2020-04-05 11:27:39 · 115 阅读 · 1 评论 -
es6对象变化
对象属性简写let name = 'zizi';let age = 24;// let work = function() {// console.log('working hard');// }let person = { name, //name: name, age, //age: age //work work() { ...原创 2020-03-24 11:16:41 · 205 阅读 · 0 评论 -
正则表达式基础到复杂使用以及常用量词分析
正则表达式匹配字符串中字符组合的模式^\w+([-+.]\w+)*@\w+([-+])正则测试工具https://tool.oschina.net/regex1 正则表达式的使用1.1 定义// RegExpvar regexp = new RegExp(/456/);console.log(regexp); // /456/// 直接量var regexp2 = /a...原创 2020-03-18 21:53:51 · 135 阅读 · 0 评论 -
手写浅层拷贝&深层拷贝
浅层拷贝 和 深层拷贝浅复制 更深层次对象级别只拷贝引用 var obj1 = { a: 10, b: 20, info: { c: 30 } }; var target = {}; for(var key...原创 2020-03-18 21:53:22 · 96 阅读 · 0 评论 -
apply&call&bind比较以及源码实现
apply() & call() & bind()同:用于改变函数中this 的指向异:apply()和call()使用传参不同;apply()和call()可以实现函数调用,而bind()不能 function fn(a, b) { console.log(this); console.log(a, b); ...原创 2020-03-18 21:50:38 · 126 阅读 · 1 评论 -
2.32-call()方法实现继承
call()方法1 call() 可以实现函数调用2 可以改变函数中this指向 第一个参数是要改变this的值 function fun(a, b) { console.log(this); console.log(a, b); console.log('好好学习!'); } ...原创 2020-03-16 16:20:22 · 178 阅读 · 0 评论 -
构造函数this指向
构造函数this指向:1 构造函数this指的是对象实例2 原型对象函数里面也this也是指向实例对象 // 构造函数 function Student(name,age) { this.name = name; this.age = age; } Student.prototy...原创 2020-03-16 16:19:46 · 2976 阅读 · 0 评论 -
JS面向对象编程(OOP)
面向对象编程 OOP1 面向对象 & 面向过程面向过程 POP 分析问题所需要的步骤面向对象OOP 以功能对象划分问题二者比较:面向对象面向过程优灵活 复用 维护性能高缺性能比面向过程低没有面向对象灵活、复用、维护2 类和对象笔记本 泛指 类mac笔记本 具体 实例动物 猫2.1 面...原创 2020-03-16 16:19:10 · 250 阅读 · 0 评论 -
JS动画实现
1 JS动画实现原理原理:通过定时器不断地改变目标位置例子:让div运动到500px的时候停下 <style> * { padding: 0; margin: 0; } .box { width: 200px; height: 2...原创 2020-03-16 16:17:44 · 166 阅读 · 0 评论 -
练习:窗口滚动定位
窗口发生滚动时候,导航栏和头部定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...原创 2020-03-16 16:17:14 · 153 阅读 · 0 评论 -
练习:商品展示效果放大
模拟商品触碰产生放大效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...原创 2020-03-16 16:16:18 · 86 阅读 · 0 评论 -
DOM三大家族(offset系列 & client系列 & scroll系列)以及其他常用坐标和尺寸属性总结
offset系列el.offsetParent表示元素中带有最近定位的祖先元素,祖先元素都没有定位则返回bodyel.offsetTop表示元素距离其offsetParent上方的偏移el.offsetLeft表示元素距离其offsetParen左边框的偏移el.offsetWidth元素实际宽度 左右border+左右padding+widthel.offs...原创 2020-03-16 16:15:13 · 236 阅读 · 0 评论 -
小例子:文本框输入文字,在旁边放大提示效果
练习2 输入文字字体放大再提示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...原创 2020-03-03 21:47:27 · 386 阅读 · 0 评论 -
练习:键盘点击某个按钮控制聚焦到输入框
练习 京东按键输入内容 按下s键 光标定位到搜索框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-03-03 21:46:27 · 401 阅读 · 0 评论 -
练习:模拟留言发布
实现留言效果,超过5条留言 删除第一条<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2020-03-03 21:44:53 · 259 阅读 · 0 评论 -
练习:动态创建表格
根据用户输入的行列数创建表格 表格的每一行再增加一列删除列<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...原创 2020-03-03 21:43:44 · 230 阅读 · 0 评论 -
2.24.1-练习:动态创建元素和删除元素
练习描述:在页面中每隔一段时间 创建一个图片 图片大小随机 位置随机进而实现星星的出现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...原创 2020-03-03 21:42:42 · 124 阅读 · 0 评论 -
练习:选项卡
选项卡根据点击事件调取不同的选项<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>选项卡</title> <style type="text/css"> * { margin:...原创 2020-03-03 21:38:44 · 134 阅读 · 0 评论 -
练习:全选&反选
选择框功能实现,全选和反选<body> <div class='demo'></div> <script> //方法一 var oDiv = document.querySelector('div'); /* oDiv.style.width = '300px'; ...原创 2020-02-22 18:06:24 · 91 阅读 · 0 评论 -
练习:js实现简易的轮播图效果
制作简易的轮播图效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...原创 2020-02-22 17:58:36 · 290 阅读 · 0 评论 -
练习:js实现点击切换图片
点击切换图片,控制是否可以循环切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...原创 2020-02-22 17:56:38 · 514 阅读 · 0 评论 -
获取焦点/失去焦点(onfocus/onblur)练习
文本框获取焦点,清空信息文本框失去焦点时,如果为空 ,提示 不能为空,如果为非数字,提示不合法,如果长度小于6,提示“长度不够”如果为数字,提示正确 <input type="text" name="" id="text" value="输入内容(数字)" /> <script> let txt = document.getEle...原创 2020-02-15 19:18:44 · 352 阅读 · 0 评论 -
onchange事件练习:下拉列表 列出三个颜色 选中某种颜色 网页就设置该颜色
下拉列表 列出三个颜色 选中某种颜色 网页就设置该颜色通过onchange事件获取下拉列表的改变,从而改变网页背景色。<body> <!-- 下拉列表 列出三个颜色 选中某种颜色 网页(document.body)就设置该颜色 --> <select name="color" id="color"> <option va...原创 2020-02-15 19:16:57 · 1077 阅读 · 0 评论 -
JS实现li各行变色,且在各行变色基础上实现鼠标移入变色,移除变为原来的颜色
1、JS实现隔行变色<body> <ul> <li>aaaaaa</li> <li>bbbbbb</li> <li>cccccc</li> <li>ddddddd</li> <li&g...原创 2020-02-15 19:13:47 · 2692 阅读 · 0 评论 -
js 字符串方法大全以及模板字符串用法
字符串:单引号或者双引号引起来的字符序列。示例: var str = 'hello'; var str = "hi"; var str = new String('hello'); console.log(typeof str); //object字符串操作charAt() 对应位置上的字符charCodeAt() 对应位置上的字符编码...原创 2020-02-14 16:54:29 · 1384 阅读 · 0 评论 -
常用排序方法实现(冒泡排序、选择排序、插入排序、快速排序、sort排序)
冒泡排序示例:10,2,3,-3,9 第一轮 每轮比较相邻两个数 总共比较4次 3 10 4 -3 9 3 4 10 -3 9 3 4 -3 10 9 3 4 -3 9 10 第二轮 总共3次 第二个较大值确定 3 4 -3 9 10 3 -3 4 9 10 ...原创 2020-02-14 16:53:52 · 109 阅读 · 0 评论 -
数组常用方法大全(es5 之前 - es5 - es6),以及一些方法的源码实现
数组存储一组关联数据数组定义1、数组直接量(常用)var arr = [] ;var arr2 = [10,20,30];2、通过new创建var arr3 = new Array();var arr4 = new Array(10,20,30);数组访问数组名[下标] 下标0 1 2 3 …数组长度可以通过数组名.length访问数组元素的遍历1、for 循环 ...原创 2020-02-14 16:51:29 · 194 阅读 · 0 评论 -
对象概念解析、操作
对象Object对象是一个整体 从语法角度就是一个无序属性的集合对象由特征和行为组成 特征在程序中通过属性描述行为用函数描述可以动态添加成员对象定义:var 对象名= {属性名:属性值 k:v}对象调用1、对象名.属性名2、对象名[‘属性名’]3、对象名[变量名]示例: //定义对象 var along = { name: "al...原创 2020-02-14 16:50:48 · 176 阅读 · 0 评论 -
函数常用知识解析:递归、arguments...
函数函数的概念引入希望某些逻辑或者特定功能的代码块可以被我们控制或者反复使用,此时可以考虑用函数封装最大好处 提高代码复用1、可以对某些逻辑或者功能封装2、将来可以被控制。可以反复使用函数定义一、调用和定义谁在先都可以function 函数名( ) {// 函数体——具体代码}二、函数表达式 必须先定义后调用var 函数名 = function() {// 函数体}...原创 2020-02-14 16:50:10 · 134 阅读 · 0 评论 -
js结构类型
if -示例: var age = 20; if (age >= 16) { // 条件成立执行大括号的内容 alert("恭喜,您可以报名学习驾照"); }if-else var age = 10; if (age >= 16) { // 条件成立...原创 2020-02-14 16:48:34 · 215 阅读 · 0 评论 -
js 常用数据类型以及数据类型转换规则(强制类型转换、隐式类型转换)
数据类型一、基本数据类型Boolean(true、false)、Number、String、Undefined(undefined)Null、Symbol二、引用数据类型Object把第一个非数字字符之前的数字转成整数console.log( parseInt(“23.23”) ); // 数字23console.log( parseInt(“23a.23”) ); // 数字23...原创 2020-02-14 16:59:07 · 352 阅读 · 0 评论