- 博客(29)
- 收藏
- 关注
RSS订阅原创 Vue.js学习基础小结（二）
Vue.js学习基础小结（二）一、表单1、核心指令：v-model单选一组单选v-model需要绑定给同一个变量！一组单选，每个单选项都需要有一个value值！某个单选项的value值和v-model绑定的变量值一致，该单选项被选中！多选一组多选v-model需要绑定给同一个变量！ 变量是数组类型！一组多选，每个多选项都需要有一个value值！某个多选项的value值在v-model绑定的数组变量里面，那么该多选项将会被选中！勾选checkbox作为勾选！ v-mo
2021-07-22 10:01:24
292
原创 Vue基础学习小结（一）
Vue基础学习小结（一）一、Vue的基本介绍与使用1、基本介绍Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架特点:易用、灵活、高效版本：2.6作者：尤雨溪兼容：IE8及以下不兼容2、使用步骤引入vue.js开发版本(development)：警告、提示、没有压缩生产版本（production）：部署上线时候用的，删除了警告、提示、压缩了代码创建挂载节点**注意：**千万不能是body或者html实例化
2021-07-22 09:58:14
147
原创 Web APIs（七）触屏事件
Web APIs（七）触屏事件学习目标:能够写出移动端触屏事件能够写出常见的移动端特效能够使用移动端开发插件开发移动端特效能够使用移动端开发框架开发移动端特效能够写出 sessionStorage 数据的存储以及获取能够写出 localStorage 数据的存储以及获取能够说出它们两者的区别1.1. 触屏事件1.1.1 触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touc
2021-04-29 20:32:56
176
原创 Web API（六）动画函数封装
Web API（六）动画函数封装一、动画函数封装1、缓动动画原理缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来。思路：让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长停止的条件是： 让当前盒子位置等于目标位置就停止定时器注意步长值需要取整2、 动画函数多个目标值之间移动注意：当动画函数从800移到500时，要判断步长是正值还是负值 1.如果是正值，则步长往大了取整 2.如果是
2021-04-29 20:31:21
124
原创 Web API（五）元素偏移量和立即函数
Web API第五天一、元素偏移量 offset系列1、概念offset 翻译过来就是偏移量，可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位2、offset 与 style 区别offsetWidth 返回元素应用的布局宽度（padding+border+width），style.width 返回元素内联样式的宽度属性值（不包含padding和border 的值） 2. offset
2021-04-29 20:26:23
163
原创 Web API（四）键盘事件和BOM知识点
Web API（四）键盘事件和BOM知识点一、常用的键盘事件1、键盘事件按下任意按键事件：keydown松开任意按键事件：keyup除 Shift、Fn、CapsLock 外的任意键被按住：keypress2、键盘事件的绑定对象给 整个页面（document） 绑定：在任何位置都可以触发键盘事件给 表单元素（input） 绑定: 只能在输入框中输入文字的时候触发注意：三个事件执行的顺序是：keydown–keypress–keyup3、键盘事件对象每个按键都对应了一个唯一的数字
2021-04-22 18:53:41
397
原创 Web API（三）节点操作和事件绑定
Web API（三）节点操作和事件绑定一、节点操作1、移除节点父元素.removeChild(子元素)node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。2、复制节点元素.cloneNode()括号中参数为空或者为false，是浅拷贝，即只是克隆复制节点本身，不克隆里面的子节点。如果括号中参数为true，则是深度拷贝，会复制节点本身以及里面的所有子节点。重点案例：动态生成表格 <script> // 1.先去准
2021-04-01 08:52:43
669
原创 Web API（二）排他思想和自定义属性
Web API（二）排他思想和自定义属性一、排他思想1、定义如果有同一组元素，想要某一个元素实现某种样式， 需要用到循环的排他思想算法：所有元素全部清除样式（干掉其他人）给当前元素设置样式 （留下我自己）注意顺序不能颠倒，首先干掉其他人，再设置自己2、2、案例按钮案例、 // 需求：点击5个按钮中的任意一个按钮，当前按钮变粉色，其他按钮正常 //获取当前元素 var btns = document.querySelectorAll('button')
2021-03-29 09:24:41
751
原创 Web API (一)介绍
Web API (一)介绍一、Web API介绍1.API介绍（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，只需直接调用使用即可。2、Web API的概念Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API3、API 和 Web API 总结API 是为我们
2021-03-25 17:06:28
1333
原创 Ajax（四）跨域、防抖和节流策略
Ajax（四）跨域、防抖和节流策略一、同源策略1、同源定义如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。2、同源策略定义同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。它用于限制一个网站和另一个非同源网站进行资源交互, 增强了网站的安全性, 避免了被攻击的风险3、同源策略限制了哪些交互无法读取非同源网站的 localStorage, cookie无法访问非
2021-03-18 14:29:07
1415
原创 Ajax（三）XMLHttpRequest的基本使用
Ajax（三）XMLHttpRequest的基本使用一、XMLHttpRequest的基本使用1、定义浏览器为我们提供的一个内置对象(构造函数), 通过它我们可以向服务器发送请求, 并接受响应$.ajax() 请求方法底层就是 jQuery 封装这个对象的一系列方法来实现的2、使用xhr发起GET请求步骤：创建 xhr 对象调用 xhr.open() 函数调用 xhr.send() 函数监听 xhr.onreadystatechange 事件 // 1.
2021-03-12 09:01:59
1762
2
原创 Ajax（二）表单的使用和art-template模版引擎
Ajax（二）表单的使用和art-template模版引擎一、表单的基本使用1、什么是表单（form）form 表单主要是用来采集用户的信息 。2、表单的组成部分<form > <!-- 文本域 --> <input type="text" placeholder="请输入用户名" name="uname"> <input type="password" placeholder="请输入密码" name="p
2021-03-08 14:11:48
894
2
原创 Ajax (一) 基础知识与数据发送
Ajax (一) 基础知识与数据发送一、客户端与服务器1、上网的目的通过互联网的形式来 获取和消费资源2、服务器上网过程中，负责 存放和对外提供资源 的电脑，叫做服务器3、客户端在上网过程中，负责 获取和消费资源 的电脑，叫做客户端二、URL地址的概念&组成1、URL的概念URL（全称是 UniformResourceLocator） 中文叫 统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源2
2021-03-05 09:07:41
360
1
原创 jQuery（三）事件绑定
jQuery（三）事件绑定一、jQuery 事件注册1、绑定单个事件类型语法：$(‘元素’).事件（function（）｛｝） $('.box').click(function() { console.log(123); }); $('.box').mouseover(function() { console.log(456); });2、给元素绑定多种事件类型语法： $(‘元素’).on({ type: fn }) $('
2021-03-02 10:04:12
250
原创 jQuery（二）jQuery属性操作
jQuery（二）jQuery属性操作一、jQuery属性操作1、获取和设置元素本身自带的属性获取属性语法： prop(‘属性’)设置属性语法： prop(‘属性’，‘属性值’)2、 获取和设置元素的自定义属性获取自定义属性语法：attr()设置自定义属性语法： attr(‘属性’，‘属性值’)3、获取元素上 data-* 开头的自定义属性语法:data()；设置自定义属性语法： data(‘属性’，‘属性值’)注意：（1）修改的数据都保存在内存中（2）不能修改
2021-03-01 10:53:34
434
2
原创 jQuery（一）jQuery的认识和使用
jQuery（一）一、jQuery介绍1、js库了解决一些通用的功能需求，把相关的方法封装在一个 js 文件中，我们称为 js 库例如：fastClick；flexiable.js; zy.media.js; swiper.js…2、js 框架框架和库没有太明显的区别，只是框架的封装的功能更全更大3、认识 jQuery封装了一系列操作原生 dom 元素的功能库，比如获取元素，给元素做动画等document.querySelector(‘div’) [不兼容] $(‘div’)4、jQu
2021-02-27 14:53:31
529
2
原创 JS(五) ES6
JS(五) ES6一、ES6相关概念1、什么是ES6ES 的全称是 ECMAScript ,从2015年6月开始每年都会更新一下，统称为ES62、使用ES6的目的变量提升特性增加了程序运行时的不可预测性语法过于松散，实现相同的功能，不同的人可能会写出不同的代码二、ES6新增语法1、let （★★★）1.1 作用：用来声明一个有块级作用域的变量，使用方法和 var 一样1.2 let 定义变量的特点：只在声明时的块或子块中可用不存在变量提升，只能先声明再使用存在“暂
2021-02-27 10:18:30
306
原创 JS高级（四）正则表达式的基本使用
JS高级（四）一、正则表达式概述1、概念正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式，在数据类型中是属于对象2、作用正则表达式通常用来校验、查找、替换指定规则的字符文本验证表单，如：只能输入英文、字母、数字和下划线过滤页面内容中的敏感词汇，或者对指定字符组合进行替换从字符串中提取我们想要的特定部分3、特点灵活性、逻辑性和功能性 （强大）简单高效可读性稍差，不便于记忆（一般复制相关的正则表达式，修改后即可使用）二、正则表达
2021-02-26 14:06:39
503
原创 JavaScript高级（三）函数，this指向，拷贝
JavaScript高级（三）一、函数的定义和调用1、函数的定义方式函数的定义方法： 1. 函数声明 2. 函数表达式 3. 利用 Function 构造函数// 1. 函数声明 function fn(a, b) { return a + b; }; // 2. 函数表达式 var fn1 = function() { consol
2021-02-26 09:09:23
274
2
原创 JavaScript高级（二）构造函数和原型、继承、ES5新增数组方法
JavaScript高级（二）一、构造函数和原型1、对象的三种创建方式// 使用构造函数创建对象 function People(name, age, sex) { this.name = name; this.age = age; this.sex = sex; this.say = function() { console.log('hello');
2021-02-24 16:31:17
227
原创 JS高级（一）面向过程与面向对象
JS高级(一)一、面向过程与面向对象1、面向过程面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。2、面向对象面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。3、面向过程与面向对象对比面向对象：易于维护、拓展，耦合性低；适用场景：多人合作的复杂项目面向过程：不易于维护、拓展，耦合性高；适用场景：简单的功能模块二、对象和类1、对象对象是由属性和方法组成的：是一个无序键值对的集合,指的是一个具体的事物
2021-02-24 09:01:24
346
原创 JS基础 - 数组和字符串的相关方法总结
JS数组的相关方法方法名作用参数返回值修改原数组★push(n1, n2)追加元素到数组末尾要追加的元素数组的长度修改unshift(n1, n2)追加元素到数组开头要追加的元素数组的长度修改Array.isArray()判断一个值是否是数组值或变量布尔值–pop()从数组末尾删除一个元素无删除的元素修改shift()从数组开头添加一个元素无删除的元素修改sort(fn)对数组进行排序函数排序后的数组修
2021-02-23 08:49:48
125
2
原创 JS基础（七）数组、字符串、数据类型相关方法
JS基础（七）一、数组内置对象1、数组截取var str=[1,2,3,4,5,6]var str.slice(begin,end);从 begin 位置处开始截取, 直到 end 位置结束(不包括结束位置); 如果只传递一个参数, 表示从起始位置一直截取到最末尾。2、数组转成字符串[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EMNH4p1S-1614041258712)(E:\黑马培训\前端基础\案例练习\就业班\笔记\JS基础\JS第七天\images\
2021-02-23 08:48:41
122
原创 JS基础(六) Math数学对象、Date 日期对象、数组对象
JS基础（六）一、内置对象JS 语言中为我们封装好了一系列内置的对象, 快速帮助我们进行程序开发1、查文档MDN:https://developer.mozilla.org/zh-CN/2、Math数学对象属性、方法名功能Math.PI圆周率Math.floor()向下取整Math.ceil()向上取整Math.round()四舍五入版 就近取整 注意 -3.5 结果是 -3Math.abs()绝对值Math.max()/Ma
2021-02-23 08:47:18
124
原创 JS基础（五）函数和对象
JS第五天一、arguments使用当不确定有多少个参数传递的时候，可以用 arguments 来获取。JavaScript 中，arguments实际上它是当前函数的一个内置对象。具有以下特点：是一个伪数组具有数组length属性可以按照索引的方式进行存贮没有真正数组 的一些方法，如：push、pop只有函数有arguments对象，每个函数都内置好了arguments二、函数声明1、自定义函数命名方式（命名函数）利用函数关键字function自定义函数function 函数
2021-02-22 16:59:29
115
原创 JS基础（四）数组
JS基础（四）一、数组1、概念数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。2、创建数组利用new创建数组var 数组名 = new Array() ；var arr = new Array(); // 创建一个新的空数组利用数组字面量创建数组//1. 使用数组字面量方式创建空的数组var 数组名 = []；//2. 使用数组字面量方式创建带初始值的数组var 数组名 = ['小白','小黑','大黄','瑞奇'];数组中可以存放任意
2021-02-22 16:56:23
103
原创 JS基础（三）循环
JS基础（三）一、循环1、for循环语法结构：for（初始化变量；条件表达式；操作表达式）｛//循环体｝名称作用初始化变量通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。条件表达式用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。操作表达式用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。断点调试的流程：1、浏览器中按 F12-->
2021-02-22 16:53:19
90
原创 JS基础（二）运算符
JS基础第二天一、运算符1、种类运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。算数运算符递增、递减运算符比较运算符逻辑运算符赋值运算符2、算数运算符概念：算术运算使用的符号，用于执行两个变量或值的算术运算。浮点数精度问题不要直接判断两个浮点数是否相等。console.log(0.07*100);//结果为7.000000000000001表达式和返回值简单理解：是由数字、运算符、变量等组成的式子表达式最终都会有一个结果，返回
2021-02-22 16:51:19
156
原创 JS基础（一）JavaScript认识
JS 基础（一）一、JavaScript认识1、什么是JS？全称JavaScript，是一种运行在客户端的脚本语言。脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行。2、HTML、CSS、 JS关系HTML、CSS为标记语言，JS为脚本语言。HTML为结构，CSS为样式，JS为行为。3、JS最初作用表单动态校验（密码强度检测） （ JS 产生最初的目的 ）4、JS组成二、JS注释1、单行注释//单行文本注释默认快捷键：ctrl +/2、
2021-02-22 16:46:21
184
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人