- 博客(46)
- 收藏
- 关注
RSS订阅原创 遇到的问题
HTMLElement.offsetLeft 返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左 边界偏移的像素值。 Element.scrollTop 一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口 可见内容（的顶部）的距离的度量。分支上创建自己新的分支。
2022-12-27 10:17:53
1195
1
原创 Vue-router详解
1.目前前端流行的三大框架，都有自己的路由实现 Angular的ngRouter React的ReactRouter Vue的vue-router2.vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。 我们可以访问其官方网站对其进行学习：https://router.vuejs.org/zh/3.vue-router是基于路由和组件的 路由用户设定访问路径的，将路径和组件映射起来。 在vue-router的单页面应
2022-07-14 18:06:18
920
原创 Vuex详解
包含模块 1、在store文件夹，新建个index.js文件2、main.js引用：（注意路径即可）3、保存数据：（场景举例：当我点击按钮后，我需要把当前的数据保存到vuex中，然后跳转到别的路由，然后使用这些数据）4、获取变量：（当数据初始获取不到时，可以使用计算属性用来获取）三、模块的使用1. State假设我们有一个全局状态 的值为 5。那么，我们就可以将其定义为 对象中的 和 ，作为全局状态供我们使用。如下：2. Getters假设我们要在的基础
2022-07-14 17:50:08
618
原创 Vue基础
概述：Vue是一款前端渐进式框架，可以提高前端开发效率。特点： Vue通过MVVM模式,能够实现视图与模型的双向绑定。 简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.概述：Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可。语法：案例二、Vue基本语法1.钩子函数**概述：**钩子函数, 其实就是Vue提前定义好的事件, 其作用类似于Servlet的init方法和distory方法语法：补充：Vu
2022-07-04 14:32:44
363
原创 初识node.js与内置模块
（1）、JavaScript 由三部分组成，ECMAScript，DOM，BOM（2）、Node.js是由ECMAScript及Node 环境提供的一些附加API组成的，包括文件、网络、路径 等等一些更加强大的 APInode是基于javascript来使用的，所以node文件的后缀名都是 .js退出运行的方法：crtl c 运行文件：1.3 Node.js学习路径JS基础语法- Node.js内置API模块（fs,path,http）-第三方API模块(express,mysql)2.1. 什
2022-06-23 13:48:27
248
原创 ES6 class详解 + module详解
传统的JS只有对象的概念，没有class类的概念，因为JS是基于原型的面向对象语言，原型对象特点就是将属性全部共享给新对象。ES6引入了class类这个概念，通过class关键字可以定义类，这就是更符合我们平时所理解的面向对象的语言。二、静态方法和静态属性静态方法和静态属性，是使用static关键字的属性和方法四、注意事项：1、在类中定义方法时候，不可以给方法加上function关键字，因为JS中构造函数是用function定义的，两个隔开。2、所有方法不要用逗号隔开，否则会报错。1，什
2022-06-17 11:51:10
3005
原创 ES6 - Promise详解及用法
1.promise的实例方法案例 目标：拿到关于 狙击手 电影的描述 过程： 1.先登录 2.请求 导演信息 找到张导的id 3.请求 电影信息 找到描述 2.promise的对象方法(p1,p2,p3为promise的实例对象)①Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果②Promise.race() 并发处理多个异步任务，只要有一个任务完成就能得到结果...
2022-06-15 14:11:26
9213
原创 ES6 基础2
1.数组对象新增方法（补充）2.对象的新增特性3.set数据结构3.1 类似于数组，但是成员唯一，没有索引3.2 var set = new Set(x) x：数组，类数组，字符串3.3 获取set的长度不是length而是size3.4 方法 ： add（x）；delete（x）；has（x）；clear（x）3.5 可以使用 for of 与 forEach 对 set 进行遍历...
2022-06-14 20:07:43
124
原创 ES6 基础1
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版ES6 的出现主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念目前存在少数低版本浏览器的 JavaScript 是 ES5 版本，大多数的浏览器已经支持 ES61. let 与 const 2.1 用在数组上2.2 用在对象上3. 模板字符串 模板字符串相当于加强版的字符串，用反引号 `` 除了作为普通字符串，还可以用来定义多行字符串，可以在字符
2022-06-13 17:24:13
96
原创 AJAX 基础知识
3、ajax的工作原理客户端发送请求，请求交给xhr，xhr把请求提交给服务，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示 在IE浏览器中创建XMLHttpRequest对象的方式为:在Netscape浏览器中创建XMLHttpRequest对象的方式为: 由于无法确定用户使用的是什么浏览器,所以在创建XMLHttpRequest对象时,最好将以上两种方法都加上.如以下代码所示:2、创建HTTP请求创建HTTP请求可
2022-06-08 14:08:58
372
原创 jQuery
一、jQuery简介1.什么是jQuery？2.常见的javascript库二、jQuery的特性jQuery能做以下事情：三、jQuery介绍1.jQuery的使用方式下载后引入2.编写简单的 HelloWorld3.jQuery函数jQuery库只提供了一个叫jQuery的函数，该函数中以及该元素的原型中定义了大量的方法。jQuery函数具有四种参数：4.jQuery对象四、jQuery选择器1.基本选择器：2.层次选择器：五、jQuery过滤器jQuery的过滤器必
2022-06-05 15:44:41
107
原创 JS：面向对象
面向对象：面向对象编程（OOP： object-oriented programming）面向对象与面向过程的区别①封装②继承③多态2.构造函数 析构函数 原型3. 原型链反转字符串
2022-06-02 17:42:23
85
原创 正则表达式
正则表达式简介正则表达式是由一些具有特殊含义的字符组成的字符串，多用于查找、替换符合规则的字符串。在表单验证、Url映射等处都会经常用到。一、元字符元字符：即为有特定含义的字符，常见的元字符如下常用的元字符：代码 说明 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 \b 匹配单词的开始或结束 ^ 匹配字符串的开始（在集合字符里[^a]表示非（不匹配）的意思
2022-05-27 11:43:37
5182
原创 事件（JSON）
一、JSON是什么· JSON，全称是 JavaScript Object Notation，即 JavaScript对象标记法。· JSON是一种轻量级（Light-Meight)、基于文本的(Text-Based)、可读的(Human-Readable) 格式。· JSON 的名称中虽然带有JavaScript，但这是指其语法规则是参考JavaScript对象的，而不 是指只能用于JavaScript 语言。· JSON无论对于人，还是对于机器来说，都是十分便于阅读和书写的，而且...
2022-05-26 14:26:35
334
1
原创 事件（碰撞检测）
碰撞function isCrash(a, b) { var l1 = a.offsetLeft; var t1 = a.offsetTop; var r1 = l1 + a.offsetWidth; var b1 = t1 + a.offsetHeight; var l2 =b.offsetLeft; var t2 =b.offsetTop; var r2 = l2 + b.offsetWidth; var b2 = t2
2022-05-26 14:11:51
78
原创 事件（事件委托）
一、基本概念事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。子级的事件交给父级去响应，通过e.target来找到正确的子级<script>document.body.onclick = function() { e..
2022-05-26 13:59:43
146
原创 事件（DOM事件绑定）
DOM0级事件 所有的浏览器都支持 事件只能注册一次，后边的会覆盖旧的 注册：在html上添加 <div onclick = “alert('helllo')”></div> 匿名函数 d.onclick = function() {} this指向自身 普通函数 onclick = “ok()” 相对于动态掉用、this指向window、没有事...
2022-05-25 20:02:20
453
原创 事件（阻止默认、阻止冒泡）
阻止默认e.preventDefault ()阻止冒泡e.stoppropagation ()事件由子级传向父级，称之为事件冒泡事件由父级传向子级，称之为事件捕获<script> //IE浏览器是从 子级向父级 获取标签,称为 冒泡机制 //其他浏览器 是 从 父级向子级 获取标签,称为 捕获机制 //现在所有的执行顺序都是从当前标签向父级标签执行 // 阻止事件的传播 / 阻止冒泡事件 // 事件对象
2022-05-25 18:05:08
95
原创 事件（touch.js）
基本事件：touchstart 手指刚接触屏幕时触发touchmove 手指在屏幕上移动时触发touchend 手指从屏幕上移开时触发touchcancel 触摸过程被系统取消时触发（少用）一、事件绑定（常用，重要）touch.on(element,types,callback);功能描述：事件绑定方法，根据参数区分事件绑定和事件代理。参数描述：参数 类型 描述 element element或string 元素对象、选...
2022-05-25 17:57:23
181
原创 事件（触屏事件）
触屏事件1.兼容DOM的触发事件 touchstart 当手指触摸屏幕时触发； touchmove 当手指在屏幕上滑动式连续触发； touchend 当手指从屏幕上移开时触发； touchcancel 当系统停止跟踪触摸时触发；2.每个touch对象包含的属性 clientX 触摸目标在视口中的x坐标 clientY 触摸目标在视口中的y坐标 pageX 触摸目标在页面中的x坐标 pageY 触摸目标在页面中的y坐标 scre...
2022-05-25 17:27:10
73
原创 事件（存储事件）
事件的存储1.cookie（1）cookie的构成： 名称：一个唯一确定cookie的名称 值：储存在cookie中的字符串 域：cookie对于哪个域是有效的 路径：指定域中的指定路径 失效时间：cookie何时应该被删除的时间戳 安全标志：指定后，cookie只有在使用SSL连接时才发送到服务器（设置secure标志）（2）cookie的限制 绑定在特定域名下，无法跨越 ...
2022-05-25 17:09:52
202
原创 事件（键盘事件）
键盘事件1. keydown当用户按下键盘上的任意键时触发，按下不动将重复触发2. keyup 当用户释放键盘上的键时触发e.keyCode 键码值 判断按键的标准案例：键盘控制div移动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=...
2022-05-23 17:19:16
160
原创 事件（表单事件）
表单事件1.focus 元素获得焦点时触发2.blur 元素失去焦点时触发3.submit（）提交表单4.change 当input、textarea元素value值改变且失去焦点时，select元素选项改变时触发5.input 当input、textarea元素value值改变同步触发事件，select元素选项改变时触发 change和input的区别 change：value发生改变，并失去焦点时触发 input: 只要value发生变化就触发<...
2022-05-23 17:17:03
463
原创 事件（UI事件、鼠标事件）
1.UI事件（1）load当页面完全加载后在window上触发图片也可以触发load事件（2）resize 当窗口大小发生变化时在window上触发（3）scroll 当用户滚动带滚动条的元素中的内容时，在该元素上面触发案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
2022-05-20 10:00:37
101
原创 JS (BOM)
1.window 对象 window 是浏览器留给js的总入口var abcdef = '我要进大厂！'; console.log(window.abcdef); （1）全局变量都是window的属性，全局函数都是window的方法console.log(window.screenX, window.screenY); console.log(window.innerWidth,window.inner console.log(window.ou.
2022-05-19 11:58:10
59
原创 DOM案例（手风琴效果、雪花）
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"> <t
2022-05-18 16:14:30
198
2
原创 DOM案例（轮播图、瀑布流、升级版瀑布流）
1.轮播图<script> var dMove = document.getElementsByClassName('move')[0]; var dPrev = document.getElementsByClassName('prev')[0]; var dNext = document.getElementsByClassName('next')[0]; var dots = document.getElementsByClassName('dot')
2022-05-17 20:49:48
161
原创 JS (DOM)
1.dom是什么，你是怎么理解dom的？ document object model 文档对象模型 提供了很多对标前进行增删改查的操作
2022-05-13 16:24:34
57
原创 html+css (静态页面+动画案例)
案例1index.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">
2022-05-08 15:28:15
14980
原创 html+css 静态页面（phone端+pc端）
案例1 活力广东index.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"&.
2022-05-08 15:11:01
395
原创 JS 第五讲（字符串操作）
字符串操作str.length 获取长度 str.toUppercase() 转换为大写 str.toLlowercase() 转换为小写 str.split(参数x) 字符串的裁剪，返回一个数组，x：某种规则 str.indexof() 获取子元素的下标，如果不存在返回-1 str.substring(start,stop) start必填项非负整数起始位置，stop必填项非负整数，返回start与stop之间的内容 str.substr(.
2022-05-06 17:43:50
219
原创 JS 第四讲（函数+闭包）
函数作用 使代码更加简洁，提高重用性 地位 每一个项目中的代码，大约有95%在函数里 函数的定义 function 函数名([x,y,z,......]) { [return ex]; } 函数的调用 函数定义后不会自动执行，需要在特定的位置调用函数 函数的参数 形参 形式参数，就是函数名后小括号里的内容 实参 在调用函数时小括号里的内容 传参 将实参传递给形参，用形参表示实参 闭包作用域...
2022-05-05 18:38:22
76
原创 JS 第三讲（数组操作+元素获取+Date）
数组操作增删改查 var arr = ["李白","杜甫", "李子", "李猫","杜牧","李商隐"]; arr.push("白居易"); arr.pop(); arr.unshift("李思萌"); arr.shift(); console.log(arr); 删除指定位置, 还可以添加新的元素 arr.splice(2, 2, "岑参", "王维"); console.log(arr);
2022-05-04 18:23:46
231
原创 JS 第二讲（字符串+运算符+判断语句+数组）
字符串比较的是ASCLL值 if ('a' > 'b') { console.log("ok") } 逻辑运算符 && 全真为真 || 全假为假 if (4>2 || 3>2) {} 三目运算符 var author = "李白"; author === "白居易" ? alert('嘈嘈切切错杂弹，大珠小珠落玉盘！') : alert('大鹏一日乘风起，扶.
2022-05-03 20:50:18
213
原创 JS 第一讲（数据类型+运算符）
1、代码规范1.1 JS中的一切都区分大小写（变量名、函数名、操作符）1.2 标识符（变量名，函数名，属性名，函数的参数）按下列规则组合 1.2.1 首字符必须是字母、下划线（_）或符号（$） 1.2.2 其他字符可以是字母，下划线（_）、符号$或数字 1.2.3 建议使用驼峰命名法 eg：testFunction 1,2,4 见名知意1.3 注释 注释分为单行注释与块注释（块注释：/*代码*/ 单行注释：//）1.4...
2022-05-02 19:30:18
543
原创 HTML5 特效
一、渐变1、线性渐变语法：background-image：linear-gradient方向：上、下、左、右、角度默认的是top、to bottom、180deg如果要添加方向，则必须使用浏览器的内核识别标识 -webkit- ： safari & chrome -moz- ： firefox -ms- ： IE -o- ： opera2、径向渐变语法：background...
2022-04-28 19:44:06
147
原创 HTML5 弹性盒模型
弹性盒模型目的：1、提供一种更加有效的方式来布置、对齐和分布在容器中间的各项内容，即使他们的大小 是未知的变化的2、让容器有能力改变项目的宽和高，以填满可用空间属性：1.display:flex/display:inline-flex 适用于父类元素，声明要使用弹性盒模型2.flex-direction 排列顺序 （写在父级css中，但是作用于父级）值：row 横向 row-reverse 反横向 column 纵向 column-reverse 反纵向3.flex-wrap
2022-04-27 21:11:41
303
原创 HTML5 响应式
为什么使用新标签？为了语义化。语义化好处：去掉样式能让页面结构清晰呈现 有益于SEO 便与团队开发和维护一、结构标签article 定义文章aside 定义文章的的侧边栏section 定义文档中的某个区域nav 定义导航部分header 头部信息footer 底部信息details 定义展开详细内容figure 定义一组媒体元素及文字<!DOCTYPE ht...
2022-04-27 18:51:47
399
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人