- 博客(40)
- 收藏
- 关注
RSS订阅原创 scss
变量变量的声明：$/^[A-Za-z_]+\w*/ : value变量类型：1. 数字（e.g. 2，3，10px）2. 有引号或者没有引号的文本字符（e.g. foo,"foo",'foo'）3. 色值（e.g. blue，#333，rgba(255,255,255,0.5)）4. 布尔型（e.g. true，false）5. 空（e.g. null）6. 列表值，用空格或逗号分隔（e
2016-09-18 14:14:31
762
原创 JS获取浏览器中的各种宽高值
width：clientWidth：对象实际内容的宽度，不包含边线，最大不超过视口宽度 offsetWidth：对象实际宽度，包含边线，最大不超过视口宽度 scrollWidth：对象实际宽度，不包含边线，可超过视口宽度height：（都可超过视口高度）clientHeight：对象实际内容的高度，不包含边线 offsetHeight：对象实际高度，包含边线 scrollHeight：对象实
2016-09-05 15:54:04
2491
原创 气泡效果边框三角形的写法
在实际开发中常常会有这样的场景：类似聊天或者提示这样的场景，此时文字框并非是一个完全矩形的框，而是在矩形框的某一侧还有一个小三角的突起。我们知道CSS盒模型都是矩形的，那我们怎么做出来这样的效果呢？先用CSS写一个三角出来<div class="tag"> <em></em> CSS气泡框实现</div><style> .tag{ width:300px;
2016-05-19 14:34:24
796
转载 JS之apply、call、bind
在JS中，这三者都是用来改变函数的this对象的指向的，他们有什么样的区别呢。 在说区别之前还是先总结一下三者的相似之处： 1、都是用来改变函数的this对象的指向的。 2、第一个参数都是this要指向的对象。 3、都可以利用后续参数传参。 那么他们的区别在哪里的，先看一个例子。var xw = { name : "小王", gender : "男", age :
2016-04-08 00:03:29
260
原创 JS匿名函数
什么是匿名函数在Javascript定义一个函数一般有如下三种方式： 函数关键字(function )语句：function fnMethodName(x) { alert(x); }函数字面量(Function Literals)：var fnMethodName = function (x) { alert(x);}Function()构造函数：var
2016-04-07 23:23:43
278
转载 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch
今儿，我就准备向大伙儿介绍一些你们之前可能很少见过CSS家伙们。他们每个都是度量的单位，类似pixel 和 em 这样的，但是很有可能你之前从来就没听过这些家伙们！rem我们首先介绍下和我们熟悉的很相似的货。em 被定义为相对于当前对象内文本的字体大小。炒个栗子，如果你给body小哥设置了font-size字体大小，那么body小哥的任何子元素的1em就是等于body设置的font-size。 虽
2016-04-07 21:45:42
1172
原创 文库
图片相关WebP介绍，腾讯ISUX（https://isux.tencent.com/introduction-of-webp.html） APNG介绍，腾讯ISUX（http://isux.tencent.com/introduction-of-apng.html）协议相关HTTP2.0介绍，http://www.mamicode.com/info-detail-1199706.html HT
2016-04-05 13:53:59
386
原创 居中布局的几种方式
水平居中利用display:table.box{ display:table; margin:0 auto;}利用display:flex.boxParent{ display:flex;}.box{ margin:auto;}水平竖直都居中已知元素的宽高.box{ position:absolution; left:50%; to
2016-04-02 23:59:39
388
转载 Meta http-equiv属性详解
转自http://kinglyhum.iteye.com/blog/827807http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 引用meat标签的http-equiv属性语法格式是：＜meta http-equiv=
2016-04-02 23:11:01
198
原创 Flex布局
本文整理自阮一峰大神的博客，原文地址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各
2016-04-02 19:02:50
318
原创 CSS之元素相关
表格相关属性border-collapse 边框是否合并 separate 分离边框(默认)collapse 合并边框border-spacing 边框边距(border-collapse必须为separate才允许设置该属性) 一个值: 表示水平和垂直间距相等两个值: 第一个值表示水平间距,第二个值表示垂直间距,两个值以空格间隔caption-side 表格标
2016-04-02 18:10:30
214
转载 浏览器的渲染原理简介
本文转载自酷壳，原文内容如下： 看到这个标题大家一定会想到这篇神文《How Browsers Work》，这篇文章把浏览器的很多细节讲得很细，而且也被翻译成了中文。为什么我还想写一篇呢？因为两个原因， 这篇文章太长了，阅读成本太大，不能一口气读完。花了大力气读了这篇文章后可以了解很多，但似乎对工作没什么帮助。所以，我准备写下这篇文章来解决上述两个问题。希望你能在上班途中
2016-04-01 01:11:01
226
原创 BOM之事件相关
事件事件：浏览器自动触发的或用户手动触发的对象状态的改变事件处理函数：当事件发生时，自动执行的函数对象如何绑定事件处理函数：3种 在JS动态绑定事件处理函数：elem.事件名 = 函数对象 问题1：同一元素的同一事件处理函数，只能绑定一个函数对象问题2：无法修改事件触发的顺序在JS中动态绑定事件处理函数，可同时绑定多个，可修改事件触发顺序 DOM标准：elem.addEventList
2016-03-19 19:43:52
415
原创 BOM之常用API
定时器定时器：让程序按指定时间间隔，自动执行任务，任务是所有定时器的核心分类 周期性定时器：让浏览器按指定时间间隔反复执行同一任务 何时使用：一项任务，连续执行如何使用：3步 定义任务函数：定义了定时器每一次执行的任务 function task(){…}启动定时器：将任务函数放入定时器API中，设定时间间隔，最后返回定时器的序号 timer = setInterval(task,
2016-03-19 19:43:31
2320
原创 BOM之概述
概述BOM：专门操作浏览器窗口的APIwindow 角色 代替了ES中Global充当全局对象封装了浏览器软件/窗口对象的属性和方法 —— BOM打开新连接的方式 在当前窗口打开，允许后退： window.open(“url”,”_self”)在当前窗口打开，不允许后退 history：记录当前窗口本次打开后成功访问过后的url，历史记录栈location：当前窗口正在打开的ur
2016-03-19 19:43:07
363
原创 DOM之样式相关
仅获取或修改内联样式 —— 每个元素的style属性 —— style对象 style对象中包含了所有的css样式，默认值都是”“elem.style.属性名 = “值”问题：无法获得样式表中层叠或继承来的属性，只能访问elem的内联样式获取样式表中层叠或继承来的样式 DOM标准：var style对象 = getComputedStyle(elem);style对象.属性名IE8：va
2016-03-19 19:39:05
207
原创 DOM之属性相关
元素属性概述一切从属性获取的值和设置到属性上的值必须都是字符串，所以都要先类型转换，再计算获取元素的属性值方法1 方法 var strValue = elem.getAttribute(“属性名”);何时使用：只找一个属性时方法2：elem.attributes集合 —— 包含了当前元素所有属性的节点对象 方法 elem.attributes[i/”属性名”] ——> 返回一个属性
2016-03-19 19:38:44
198
原创 DOM之节点增删
创建单个节点：3步 创建空节点对象： var elem = document.createElement(“标签名”);设置关键属性（可选）将新节点挂到指定父元素下：3种 追加： parent.appendChild(elem); // elem ——> lastChild插入： parent.insertBefore(elem,oldElem)替换： parent.replaceChi
2016-03-19 19:38:19
327
原创 DOM之常用对象
HTML DOM常用对象Select对象属性： sel.options：返回当前select下的所有option对象的集合sel.selectedIndex：获得当前select的选中项的下标位置方法： 添加一个option：sel.add(opt)，等效于sel.appendChild(opt)移除一个option: sel.remove(i)Option对象创建option对象：
2016-03-19 19:37:48
605
原创 DOM之概述
DOM概述JS = ECMAScript(核心语法) + DOM(专门操作网页的API) + BOM(专门操作浏览器窗口的API) DHTML : 所有实现网页动态效果的统称, 即HTML + CSS + JSDOM: 操作一切结构化文档的通用API, 即用DOM可操作HTML, 也可操作XML核心DOM: 可以操作所有文档的通用API, 可实现增删改查等所有功能, 但操作繁琐HTML D
2016-03-19 19:37:13
271
原创 JS之原型相关
原型概述原型(prototype): 保存所有子对象共有成员的对象每个构造函数都有一个原型属性, 引用了该构造函数对应的原型对象由构造函数创建的每个对象中都有一个proto属性, 指向构造函数的原型对象在访问子对象的成员时, 优先在成员本地查找, 找不到, 再去构造函数的原型中查找new: 创建空对象调用构造函数, 为新对象添加成员设置当前对象的proto属性为构造函数的原型对象原
2016-02-23 16:57:38
287
原创 JS之Math对象
Math概述Math: 专门封装数学计算中常用常量和计算方法的全局对象 Math没有构造函数, 所以不能new, 所有的API都直接用Math.apiName何时使用Math: 进行数学计算时Math API取整 Math.ceil(n) //上取整Math.floor(n) //下取整Math.round(n) //四舍五入取整乘方与开方 Math.pow(底数, 幂) //
2016-02-23 16:56:19
385
原创 JS之Date对象
Date概述Date: 封装了1970年1月1日0时0分0秒至今的毫秒数, 并且提供了对时间进行操作的方法创建对象 var now = new Date() //创建一个日期对象, 同时保存当前时间var date = new Date(“xxxx/xx/xx[ xx:xx:xx]”) //自定义任意时间var date = new Date(xxxx,xx,xx,xx,xx,xx) /
2016-02-23 16:56:02
301
原创 JS之正则表达式相关
正则概述定义: 规定字符串中字符出现规则的表达式RegExp对象: 封装了一条正则表达式, 提供了使用正则表达式验证和查找的方法如何创建正则表达式对象: var exp = /正则表达式/gi;var exp = new RegExp(“正则表达式”,”gi”); 正则表达式中所有\都要写成\贪婪模式: 默认情况下,正则表达式都会匹配尽量长的字符串懒惰模式: 只匹配最短的符合条件的字
2016-02-23 16:55:30
227
原创 JS之字符串相关
字符串概述定义: 多个字符组成的只读字符数组只要数组中不直接修改原数组的API, 字符串都能用 str[i] 获得字符串中下标为i的字符str.length 获得字符个数str.slice(starti[,endi+1]) 获得子字符串字符串API注意: 所有API无法修改原字符串, 都是返回新字符串大小写转换API var newStr = str.toUpperCase; //
2016-02-23 16:55:10
222
原创 JS之函数相关
函数概述定义: 封装一项专门任务的步骤清单的代码段, 并起一个名字何时使用函数 当一项任务需要反复执行, 但又不希望重复编写时函数: 封装函数定义的引用类型对象函数名: 指向函数定义的一个变量声明时不执行, 也不读取内部的代码, 调用时才读取内部代码并执行声明提前: 正式开始执行程序前, 先将var声明的变量和function声明的函数提前到当前作用域的顶部, 集中声明, 赋值留在原地
2016-02-23 16:53:56
200
原创 JS之运算符相关
运算符算术运算 + - * / % ++ –%运算何时使用 判断能否整除保证运算结果绝超不过除数 关系运算 将两值做比较, 返回值为true或false默认将所有类型转为数字再比较如果参与比较的两值都是字符串, 依次取出每个字符串中的字符, 对unicode码进行比较何时使用: 只要判断条件, 条件一般都为关系运算两个特殊情况: NaN, 不大于, 不小于, 不等于任何值(包
2016-02-23 16:53:26
168
原创 JS之错误处理
错误处理Error对象: 封装了错误信息的对象 何时创建: 发生错误时, JS自动创建Error子对象: ReferenceError: 引用错误, 找不到对象SyntaxError: 语法错误TypeError: 类型错误, 错误的使用类型或类型的方法RangeError: 范围错误, 参数超范围EvalError: Eval错误, 错误地使用了eval函数URIError: U
2016-02-23 16:51:59
209
原创 JS之数据类型相关
数据类型分类原始类型 值直接保存在变量本地的数据类型5种: Null | Undefined | Boolean | String | Number引用类型 值不保存在变量本地的数据类型数据类型详解首先说一个运算符: typeof typeof运算符有一个参数, 即要检查的变量或值对变量或值调用typeof运算符将返回下列值之一: object——如果变量是引用类型或Null类型
2016-02-23 16:50:49
539
原创 CSS之样式相关
边框相关属性box-shadow (边框阴影) h-shadow 水平阴影距离v-shadow 垂直阴影距离blur 可选,模糊距离spread 可选,阴影尺寸color 可选,颜色inset 可选,将当前阴影修改为内阴影box-shadow: h v blur spread color insetborder-image (图片边框) border-image-sourse 图
2016-02-09 13:42:29
252
原创 CSS之选择器相关
基础选择器相关通用选择器元素选择器类选择器 注意: 类名不能以数字开头分类选择器 如: div.waring{}id选择器群组选择器后代选择器子代选择器复杂选择器相关 兄弟选择器 相邻兄弟选择器 如div+p{}注意: 只找与当前元素相关的后面的一个紧挨着他的兄弟元素, 如何符合则匹配, 不符合也不会向下查找通用兄弟选择器 如div~p{}注意: 第二个元素不必紧
2016-02-09 13:42:01
223
原创 CSS之显示相关
垂直对齐相关vertical-align 垂直对齐方式 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式。在表单元格中, 这个属性会设置单元格框中的单元格内容的垂直对齐方式。针对行内块(img)元素, 可定义边上的文本与当前元素的对齐方式常见值 baseline 默认, 元素放置在父元素的基线上top 把元素的顶端与行中最高元素的顶端对齐text-top 把
2016-02-09 13:41:36
240
原创 CSS之动效相关
过渡什么是过渡 元素从一个状态到另一个状态的平滑变换的过程过渡属性 元素的哪个属性发生变化时要使用过渡效果transition-property: none | all | property过渡时间 整个过渡效果在多长的时间内完成, 以s或ms为单位transition-duration: s | ms过渡时间默认为0, 此时无过渡效果, 若想看到过渡效果, 必须设置该属性过渡函
2016-02-09 13:40:28
569
原创 CSS之定位相关
为什么要使用定位当需要修改元素出现的位置, 则需要使用定位定位分类浮动定位 float: left/right普通流定位 position: static (默认), 静态定位相对定位 position: relative绝对定位 position: absolute固定定位 position: fixed浮动定位什么是浮动定位 将元素摘离普通流,元素在页面中不占用
2016-02-09 13:39:39
344
原创 CSS之布局相关
边距属性相关margin 外边距合并 当两个外边距相遇时,他们将形成一个外边距,称之为外边距合并。外边距的值,以大值为准A Problem 描述 内外嵌套的div元素,如果设置内层div的margin-top,默认会作用于外层div的margin-top上,而内层没有效果解决方案 外层元素添加边框外层元素添加padding-top外层元素设置display:table (推荐
2016-02-09 13:38:59
207
原创 CSS细节之文本换行三属性
文本换行的三个属性三属性分别为word-wrap、word-break、white-space.浏览器默认换行方式对于西文来说,以空格为间隔,每行容纳尽量多的单词,若整行无空格且超出浏览器显示边缘,则横向撑开浏览器边缘,并不换行对于中文来说,则不论是否有空格,无法撑开浏览器边缘,到浏览器边缘则自动换行接着我们来讨论word-wrapword-wrap: normal/break-word
2016-02-09 13:38:18
402
原创 HTML基础
hr标签(单标签)：水平线/ 分割线(单标签) 属性 size 水平线的粗细，通常以像素为单位width 宽度align 分割线水平对齐方式color 颜色sup标签：上标( superscript )sub标签：下标(subscript)常见转义字符 空格 < <> >版权标识 ©img标签(单标签, 且为行内元素)
2016-01-03 15:37:52
235
转载 详解js和jquery里的this关键字
我们要记住：this永远指向函数运行时所在的对象！而不是函数被创建时所在的对象。this对象是在运行时基于函数的执行环境绑定的，在全局环境中，this等于window先来看个例子：script> var fullname = "Trigkit4"; var person = { fullname : 'Jack', prop:{ ful
2015-05-15 22:08:40
288
转载 jQuery.extend 函数详解
JQuery的extend扩展方法： Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起去了解了解。 一、Jquery的扩展方法原型是: extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的
2015-05-15 21:15:20
194
转载 jQuery数组($.each,$.grep,$.map,$.merge,$.inArray,$.unique,$.makeArray)处理函数详解
本文章来给各位同学介绍jQuery数组($.each,$.grep,$.map,$.merge,$.inArray,$.unique,$.makeArray)处理函数详解用法有需要了解的朋友可参考参考啊。1. $.each(array, [callback]) 遍历[常用]解释: 不同于例遍jQuery对象的$().each()方法,此方法可用于例遍任何对象
2015-04-23 13:01:11
301
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人