- 博客(27)
- 收藏
- 关注
RSS订阅原创 antd表格自定义图标
实现效果： 自定义图标安装图标包：npm install --save @ant-design/icons引入：参数是一个函数
2022-12-07 15:21:03
830
原创 WebAPI06-动画函数封装
缓动动画原理缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来思路让盒子每次移动的距离慢慢变小，速度会慢慢变慢 核心算法：（目标值-现在的位置）/10作为每次移动的距离步长。var step = (target - obj.offsetLeft) / 10; 停止条件：让当前盒子位置等于目标位置就停止定时器 注意步长值需要取整（整数取大的，负数取小的）缓动动画多个目标值之间移动
2022-11-23 10:12:27
63
原创 JS函数定义和调用-this-严格模式-高阶函数-闭包-递归
JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。严格模式对正常的 JavaScript 语义做了一些更改：1.消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。2.消除代码运行的一些不安全之处，保证代码运行的安全。3.提高编译器效率，增加运行速度。
2022-11-23 10:11:14
124
原创 JS构造函数和原型
目录1.构造函数创建对象构造函数原型prototype对象原型__proto__constructor构造函数构造函数、实例、原型对象关系编辑原型链 js成员查找机制 原型对象this指向扩展内置对象2.继承call()方法借用构造函数继承父类型属性利用原型对象继承方法ES6类的本质 3.ES5新增的方法数组方法forEach()map()filter() 符合的全部都找出来some() 有没有every()查询商品案例some和forEach区别字符串方法trim()对象方法Object.keys(
2022-06-17 22:47:22
535
原创 JavaScript面向对象
面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。 面向对象时以对象功能来划分问题，而不是步骤。通过类实例化的一个对象，对象是由属性和方法组成的：是一个无序键值对的集合,指的是一个具体的事物属性：事物的特征，在对象中用属性来表示（常用名词）方法：事物的行为，在对象中用方法来表示（常用动词）在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。
2022-06-15 23:03:12
87
原创 JavaScript对象
对象万物皆对象，对象是一个具体的事物，在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。 对象是由属性和方法组成的。 属性：事物的特征，在对象中用属性来表示（常用名词） 方法：事物的行为，在对象中用方法来表示（常用动词） 创建对象的三种方式利用字面量创建对象对象字面量：就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法。{}里面采取键值对的形式表示键：相当于属性名值：相当于属性值，可以
2022-04-24 21:22:06
2503
原创 元素偏移量-offset和style-获取鼠标在盒子内部的坐标-元素可视区client -淘宝flexible.js-元素滚动scroll
PC端网页特效元素偏移量offsetoffset和style区别获取鼠标在盒子内部的坐标拖动模态框元素可视区client 淘宝flexible.js分析元素滚动scroll总结mouseenter和mouseover 区别动画函数封装动画实现原理简单动画函数封装给不同对象添加不同定时器（优化）...
2022-04-20 17:27:23
437
原创 WebAPI-窗口-定时器-this指向-JS执行机制-location-navigator-history对象
BOM概述BOM（Browser Object Model）浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性BOM 比 DOM 更大，它包含 DOM。window对象是浏览器对象的顶级对象，他有双重角色window对象的常见事件窗口加载事件（2种）window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、C...
2022-04-17 13:24:18
819
原创 WebAPI-注册绑定事件-DOM事件流-鼠标对象-键盘对象操作
事件高级注册（绑定）事件给元素添加事件成为注册事件或绑定事件注册事件有两种方式：传统方式和监听注册方式addEventListener()事件监听，IE9以后支持。eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。<body> <button>传统注册事件</button> <butt...
2022-04-16 21:16:26
978
原创 WebAPI-排他思想-全选反选案例-自定义属性操作-节点操作-创建元素
节点、关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。排他思想……
2022-04-13 23:57:19
319
原创 WebAPI-DOM-事件基础-操作元素（属性修改，样式修改）
目录API 和 Web APIAPIWebAPIDOM什么是DOMDOM树获取元素事件基础事件三要素执行事件步骤操作元素修改元素内容常用元素的属性操作表单元素的属性修改仿京东显示密码：样式属性操作淘宝关闭二维码案例循环精灵图案例：显示隐藏文本框内容仿新浪注册页面总结API 和 Web APIAPIAPI（Application Programming Interface,应用程序编程接口）是一些预先定义...
2022-04-12 23:51:44
364
原创 响应式布局-bootstap-阿里百秀案例
响应式开发原原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。案例：响应式导航
2022-04-08 20:52:44
1779
2
原创 rem适配布局-媒体查询-less基础-flexible.js-苏宁案例做法
rem适配布局-媒体查询-less基础--flexible.js-苏宁案例 引入：页面布局文字能否随着屏幕大小变化而变化？流式布局和flex布局主要针对于宽度布局，那高度如何设置？（之前的案例都是写死的高度怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？（rem）rem基础em与rem都是相对长度单位em 参考的自身的字体大小, 如果自身未设置字体大小 ,参考父元素的字体大小, 父元素也没有设置，就一直往上找 rem (root em)始终参考的是html标签的字体大小（跟父亲的字体大小没有关系）
2022-04-07 22:41:20
857
原创 js-函数-arguments-函数的使用-函数作用域-变量-作用域-预解析
函数函数就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。函数的使用声明+调用 函数不调用，自己不执行// 函数使用分为两步： 声明函数 和 调用函数 // 1. 声明函数 // function 函数名() { // // 函数体 // } function sayHi() { console.log('hi~~'); }....
2022-04-06 23:04:41
834
原创 循环-for循环-双重for循环-while循环-do while循环-关键字
for循环：循环体+循环终止条件。重复执行某些代码，通常跟计数有关系for(初始化变量；条件表达式;操作表达式){ //循环体}初始化变量：用var 声明的一个普通变量，通常用于作为技术器使用条件表达式：就是用来决定每一次循环是否继续执行 就是终止的条件操作表达式：是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或递减）for(var i=1;i<=100;i++){ console.log('你好');//打印100句你好}//
2022-04-04 17:30:39
1157
原创 初识js-变量-变量类型-变量类型转换
初识JS书写方式：在JS中推荐我们使用单引号，在html中推荐使用双引号在用引号的时候注意外单内双，或外双内单//行内式<input type="button" value="点我" onclick="alert('Hello World')" />//内嵌式 可以讲多行代码写到script标签中<script> alert('Hello,liko!');</script>//外部引入 将写好的js文件引入到Html页面 script标
2022-03-30 21:56:58
1662
原创 Flex布局
Flex布局（弹性布局，弹性盒布局）给父盒子设为flex布局之后，子元素的float、clear、和vertical-align都将失效。
2022-03-23 14:12:57
147
原创 视口-物理像素比-二倍图-流式布局
meta视口标签：<meta name="viewport" content="width=device-width, 物理像素比物理像素就是像素比二倍图解决图片清晰问题，可以把图片尺寸缩小，显示会更清晰。二倍精灵图测量和做法：京东项目
2022-03-21 21:22:28
293
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人