前端学习
关注
分享
扫一扫
B·o·T
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
js原生代码实现元素的左右缓动效果
说明：程序实现元素的左右缓动效果，程序通过修改元素的left或top值来实现移动，故元素必须添加定位。若要实现上下缓动，把offsetLeft修改为offsetTop即可。使用：animate（调用对象，目的位置，回调函数）；function animate(obj, target, callback) { clearInterval(obj.timer);//调用前清除之前的定时器，...原创 2020-02-17 16:36:06 · 252 阅读 · 0 评论 -
js事件对象常见的属性和方法（表格版）
事件对象属性方法说明e.target返回触发事件的对象 标准e.type返回事件的类型 比如click mouseover 不带one.stopPropagation()组织冒泡 标准e.preventDefault()该方法阻止默认事件（默认行为） 标准 比如禁止链接跳转e.srcElement返回触发事件的对象 非标准 IE6-...原创 2020-02-14 15:51:30 · 335 阅读 · 0 评论 -
js中创建与添加，删除和克隆元素节点
// 1. 创建节点元素节点var li = document.createElement('li');// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 类似于数组中的pushvar ul = document.querySelector('ul');ul.appendChild(li);// 3. 添加节点 ...原创 2020-02-13 17:11:05 · 744 阅读 · 0 评论 -
js对元素属性值的操作
var div = document.querySelector('div');// 1. 获取元素的属性值// (1) element.属性console.log(div.id);//(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 indexconsole.log(div.get...原创 2020-02-13 12:09:53 · 190 阅读 · 0 评论 -
js中常见的鼠标事件（简易清晰版）
鼠标事件触发条件onclick鼠标点击左键触发onmouseover鼠标经过触发onmouseout鼠标离开触发onfocus获得鼠标焦点触发onblur失去鼠标焦点触发onmousemove鼠标移动触发onmouseup鼠标弹起触发onmousedown鼠标按下触发...原创 2020-02-12 20:54:49 · 489 阅读 · 0 评论 -
js获取页面元素对象
getElementById var timer = document.getElementById('time'); console.log(timer);getElementsByTagName // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的var lis = document.getElementsByTagName('li');console.lo...原创 2020-02-12 16:20:20 · 881 阅读 · 1 评论 -
JS中简单数据类型和复杂数据类型在内存中的存储和引用
JS中的简单数据类型有 number, string, bool, undefined和null, 先来介绍一下简单数据类型在内存中是如何存储的当我们声明一个变量a的时候, 会在栈里面开辟出一块新的内存空间, 用来存放这个变量a的数值, 当这个变量a存储的数值发生改变时, 栈空间里的对应那块内存里的数据也会发生改变, 此时如果又声明了一个变量b, 并把变量a赋值给变量b时, 在栈里面又会新开辟出...转载 2020-02-11 20:56:27 · 595 阅读 · 0 评论 -
js获得Date总的毫秒数(时间戳)
// 获得Date总的毫秒数(时间戳) 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数// 1. 通过 valueOf() getTime()var date = new Date();console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数console.log(date.getTime());// 2. ...原创 2020-02-11 16:19:15 · 3940 阅读 · 0 评论 -
js格式化日期-年月日，时分秒
// 格式化日期 年月日 var date = new Date(); console.log(date.getFullYear()); // 返回当前日期的年 2019 console.log(date.getMonth() + 1); // 月份 返回的月份小1个月 记得月份+1 呦 console.log(date.g...原创 2020-02-11 16:01:29 · 3214 阅读 · 0 评论 -
js中创建对象的三种方法
方法一:直接创建对象var dog = { uname: 'keke', type: '阿拉斯加', age: 5, color: 'red', sayWang: function() { console.log('汪汪汪！') ...原创 2020-02-11 11:30:02 · 326 阅读 · 0 评论 -
JS预解析经典例题
// 案例:以下函数的执行结果是？ f1(); console.log(c); console.log(b); console.log(a); function f1() { var a = b = c = 9; console.log(a); ...原创 2020-02-11 10:53:12 · 272 阅读 · 0 评论 -
CSS中可以继承和不能继承的属性
1、字体系列属性font：组合字体font-family：规定元素的字体系列font-weight：设置字体的粗细font-size：设置字体的尺寸font-style：定义字体的风格font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。font-stretch：允许你使文字变...转载 2020-02-11 10:33:17 · 207 阅读 · 0 评论 -
JS中函数声明的两种方式
利用函数关键字自定义函数(命名函数)function fn() { alert('你好！')}fn();函数表达式(匿名函数) // var 变量名 = function() {};var fun = function(aru) { console.log('我是函数表达式'); console.log(aru); }...原创 2020-02-10 16:59:17 · 252 阅读 · 0 评论 -
JS中的短路运算
逻辑与短路运算例如： 123 && 456如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1 console.log(123 && 456); // 456 console.log(0 && 456); // 0 console.log(0 && 1 + 2 && 456 *...原创 2020-02-09 19:02:12 · 416 阅读 · 0 评论 -
JS常用函数总结（小白笔记）
isNaN用于判断一个字符是否是非数字，若为非数字，则返回True，若为数字，则返回Flase。isNaN(1);//结果是FlaseisNaN('1');//结果是Truetypeof用于检测数据类型console.log(typeof 1);//控制台输出numberconsole.log(typeof '1');//控制台输出string转换为字符串类型方法一：.to...原创 2020-02-09 16:15:36 · 179 阅读 · 0 评论 -
响应式布局常见页面宽度
—超小屏幕（手机）小屏设备（平板）中屏设备（桌面显示器）宽屏设备（大桌面显示器）大小<768px>=768px>=992px>=1200px.container最大宽度自动(100%)750px970px1170px类前缀.col-xs.col-sm.col-md.col-lg1.按照不同屏幕划分为 1~...原创 2020-02-09 00:18:09 · 3455 阅读 · 0 评论 -
Flex布局中子项常见属性
1.flex子项目占的份数.item { /* 默认值 0，number越大，子项所占的父项的比例越大 */ flex: <number>; }2.align-self控制子项自己在侧轴的排列方式align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性 。默认值为auto ，表示继承父元素的 align-items...原创 2020-02-06 12:05:26 · 1138 阅读 · 0 评论 -
Flex布局中父项常见属性
使用flex布局时先对父盒子设置display:flex1.flex-direction：设置主轴的方向属性值含义row按行从左到右排列row-reverse按照行从右到左排列column按照列从上到下排列column按照列从下到上排列2.flex-wrap：设置子元素是否换行属性值含义nowrap默认值，不换行...原创 2020-02-06 11:26:14 · 243 阅读 · 0 评论 -
CSS3中的动画常用属性
div { width: 100px; height: 100px; background-color: aquamarine; /* 动画名称 */ animation-name: move; /* 动画花费时长 */ animation-duration: 2s; /* 动画速度曲线 */ animation-timing-function: ease-i...原创 2020-02-03 11:23:20 · 175 阅读 · 0 评论 -
Vs Code 快捷操作（持续更新。。。）
1.放大与缩小视图放大：Ctrl+ ‘+’；缩小：Ctrl+‘-’；2.向上复制一行与向下复制一行Ctrl + Shift +↑ 与 Ctrl + Shift + ↓；3.Vs默认选中一行，可以直接复制粘贴到下一行4.Ctrl + g 后输入行数，跳到某一行。5.快速另起一行， Ctrl+enter；6.集体后移或前移。选中一块区域,"Tab"键整体后移,"Shift+Tab"整...原创 2020-02-01 20:44:46 · 735 阅读 · 0 评论 -
使用css让溢出的文字省略号显示
/*1. 先强制一行内显示文本*/ white-space: nowrap; /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis;以上写入块内的css即可。...原创 2020-01-27 15:39:04 · 127 阅读 · 0 评论 -
定位改变display属性
display 是 显示模式， 可以改变显示模式有以下方式:可以用inline-block 转换为行内块可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。...原创 2020-01-26 13:47:35 · 410 阅读 · 0 评论 -
HTML中无单位的参数
1.z-index2.font-weight后均不能添加单位原创 2020-01-26 12:18:58 · 253 阅读 · 0 评论 -
网站布局中清除浮动（学习笔记）
1.为什么要清除浮动清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。2.清除浮动的方法1.额外标签法通过在浮动元素末尾添加一个空的标签例如<div style=”clear:both”></div>，或则其他标签br等亦可。2.父级添加overflow属...原创 2020-01-18 20:35:10 · 151 阅读 · 0 评论 -
sublime快捷操作（持续更新中）
1.快速另起一行Ctrl+enter2.复制当前行到下一行Ctrl+shift+d原创 2020-01-19 11:42:21 · 250 阅读 · 0 评论 -
CSS属性书写顺序
遵循以下顺序：布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）自身属性：width / height / margin / padding / border / background文本属性：color / font / text-decoration / te...原创 2020-01-19 12:46:15 · 373 阅读 · 0 评论