- 博客(51)
- 收藏
- 关注
RSS订阅原创 navigator 检测客户操作系统
//如果仅检测通用信息，那么所有Windows版本的操作系统都会包含"Win"字符串，而所有的Macintosh版本操作系统都包含有"Mac"字符串，所有的UNIX版本操作系统都包含有"X11"，而在Linux操作系统下则同时包含"X11"和"Linux"。所以，用户可以通过快速检测用户端信息中是否包含上述字符串来进行准确判断：var isWin = (navigator.userAgent....
2019-05-04 16:12:20
527
原创 navigator 检测浏览器类型和版本号 案例
//下面方法能够检测当前主流浏览器类型，包括IE、Opera、Safari、Chrome和Firefox浏览器：var ua = navigator.userAgent.toLowerCase(); // 获取用户端信息var info ={ ie : /msie/.test(ua) && !/opera/.test(ua), // 匹配IE浏览器 op ...
2019-05-04 16:09:41
587
原创 JavaScript 重写alert（)修改样式
下面是一个简单的alert(）方法，通过HTML+CSS 方式，把提示信息以HTML层的形式显示在页面中<!doctype html><html><head><meta charset="utf-8"><title></title><style type="text/css">#alert_box...
2019-05-04 15:36:25
2672
原创 offset client scroll
1.offset系列offsetParent 用于获取定位的父级元素 offsetLeft 距离定位父元素的左偏移量 offsetTop 距离定位父元素的上偏移量 offsetWidth 当前元素的宽度 (内容宽度+padding+边框) offsetHeight 当前元素的高度offsetParent和parentNode的区别?offsetParent 返回的是离自己...
2019-04-08 22:25:04
288
转载 js中的基本类型和引用类型
基本数据类型：按值访问，可操作保存在变量中的实际的值。基本类型值指的是简单的数据段。基本数据类型有这六种:undefined、null、string、number、boolean、symbol（es6）。引用类型：当复制保存着对象的某个变量时，操作的是对象的引用，但在为对象添加属性时，操作的是实际的对象。引用类型值指那些可能为多个值构成的对象。引用类型有这几种：Object、Array...
2019-04-08 17:29:25
140
原创 定时器
1.设置定时器 1.1setTimeout()作用:到达间隔时间之后，只调用一次回调函数**语法: ** window.setTimeout(回调函数, 间隔时间)window可以省略 间隔时间以毫秒为单位 返回这个定时器的标识符,是数字类型javascript // 创建一个定时器，1秒后执行 // timerId指向这个定时器的标识符 var timerId = ...
2019-04-08 17:23:02
4421
原创 DOM
1.BOM**概念: **BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。**通俗理解: ** 把浏览器当做对象,通过访问对象的属性,实现操作浏览器的一组方法2.页面加载事件...
2019-04-08 17:12:24
197
原创 JS 事件委托
1.什么是事件委托本来是要注册给自己的事件,注册给了父元素.事件触发后的事情,委托给父元素执行2.事件委托的好处 : 代码简洁 节省内存 3. 事件委托的原理 :事件冒泡...
2019-04-04 00:40:08
209
原创 JS 事件流
事件对象需要被分派到事件目标。但是在分派开始之前，必须首先确定事件对象的传播路径,传播路径是事件通过的当前事件目标的有序列表,该传播路径反映文档的分层树结构.列表中的最后一项是事件目标，并且列表中的前面的项目被称为目标的祖先，其中前面的项目作为目标的父项目.一旦确定了传播路径，事件对象就会经过一个或多个事件阶段共有三个事件阶段：捕获阶段，目标阶段和冒泡阶段。捕获阶段：事...
2019-04-03 22:51:34
121
原创 JS 事件对象
当用户触发我们注册的事件之后,浏览器会创建一个事件对象,这个事件对象就包含了触发事件时的一些信息,比如时间戳,鼠标坐标,事件目标等等.然后浏览器会将这个事件对象,传递给事件处理函数,那么我们只需要在事件处理函数中申明一个形参,接收一下即可.如下面的示例代码所示://js var box = document.getElementById('box');box.onclick = funct...
2019-04-03 22:35:36
405
原创 JS 事件
1注册事件的方式 1. ele.onclick=function(){ } 2.w3c dom 规范提供了注册事件监听的另外一种方式 addEventListener2.使用addEventListener的优点*优点: **它允许给一个事件注册多个listener。 它提供了一种更精细的手段控制listen...
2019-04-03 21:41:58
117
原创 JS创建元素的三种方式
1.innerHTMLelement.innerHTML = '标签字符串'2.docuement.write()document.write('标签字符串')3.document.createElement()document.createElement('标签名')三者区别innerHTML 会覆盖原来元素里面的内容,并且会将新的元素直接渲染到页面上,但是不推荐用...
2019-04-02 22:43:59
1455
原创 标签上自定义属性的操作
1.获取自定义属性的值**语法:**element.getAttribute('属性名')返回对应属性的值 ,如果没有返回null2.设置自定义属性的值**语法:**element.setAttribute('属性名', '属性的值')返回undefined3.移除自定义属性的值**语法:**element.removeAttribute('属性名')返...
2019-04-02 22:37:17
534
原创 innerText 和 innerHTML
作用：给双标签元素设置内容/获取双标签里面的 内容不同点：innerText 只是用于获取文本或设置文本innerHTML 不仅可以设置/获取文本，还可以识别html相同点：如果是赋值的话，都会覆盖元素内本身的内容两者兼容性问题：innerHTML 是非标准属性（非w3c标准）,但是所有的浏览器都支持innerText属性存在兼容性问题，早期的火狐浏览器不支持...
2019-04-02 22:11:12
855
原创 去min~max的随机整数 包含min和max
function getRandom(min,max){ return Math.floor(Math.random()*(max-min+1))+min;}以生成[10,20]随机数为例，首先生成0-20的随机数，然后对(20-10+1)取模得到[0-10]之间的随机数，然后加上min=10，最后生成的是10-20的随机数...
2019-04-01 11:04:14
438
原创 JS内置对象及其常见方法的使用
内置对象JS内置对象就是指Javascript自带的一些对象，供开发者使用，这些对象提供了一些常用的功能常见的对象有Math String Array Date等Mathπ值Math.PI最大值/最小值Math.max()Math.min()取整Math.ceil();//天花板，向上取整Math.floor();//地板，向下取整Math.floor();//四舍...
2019-04-01 09:45:07
346
原创 JS创造对象的三种方式
创建对象的3种方式1.对象字面量var p={};设置对象的属性和方法var p = { name : 'zs', age:18, sayHi:function(){ console.log(this.name) }}2.通过Object构造函数创建var newObj=new Object();设置对象的属性和...
2019-04-01 09:42:17
187
原创 vscode 使用小指南
1.vscode 安装插件使用open in browser 打开默认浏览器 alt+B ;Path intellisense 自动提示路径 :2.vscode 常用快捷键Ctrl + / : 注释Alt+B : 快速开启浏览器复制 : shift + alt + ↓移动 : alt + ↓格式化代码规范 : shift + alt + F折叠侧边栏 : Ctrl...
2019-04-01 09:41:06
260
转载 BFC的布局规则以及触发条件
1.BFC的含义 ： BlockFormattingContexts（BFC） 块级元素格式化上下文它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系块级元素：父级（是一个块元素）内容：子元素（是一个块元素）其他元素：与内容同级别的兄弟元素相互作用：BFC里的元素与外面的元素不会发生影响 ...
2019-03-31 17:21:33
924
原创 字体图标的使用
概念：将图标做成字体来是使用作用：字体相对图片来说容量更小，同时更加利于维护和修改使用：借助于第三方网站（iconfont.cn）找到对应的图标。下载下来，按照DEMO提示即可 （一定要注意文件的路径）...
2019-03-31 17:04:04
165
原创 元素溢出
overflow控制元素溢出之后的显示方式取值：visible 直接显示hidden 超出的部分隐藏掉auto 如果超出，自动产生滚动条，如果不超出，不产生scroll 不管有没有超出，都有滚动条控件overflow-x:hidden;overflow-y:hidden;溢出文字以省略号的形式显示（单行）overflow: hidden;whit...
2019-03-31 17:03:14
195
原创 元素的显示和隐藏
1.将元素的显示模式设置成none即可让元素隐藏display的值为none的时候，元素完全隐藏display的值为block的时候，元素呈块级显示display的值为inline的时候，元素呈行内显示display为none隐藏时候是不占位置的实际工作中用的较多2.visibility 控制元素的显示和隐藏visibility的值选择hidden 占位置隐藏visibl...
2019-03-31 17:02:30
153
原创 css 设置相关-过渡系列-内减模式-阴影系列
过渡系列过度本质上不是动画，是css的某一个属性变换到另外一个属性的过程transition: 过渡的属性 过渡的时间 过渡的曲线 过渡的延迟时间内减模式自动减去padding和border值 不需要手动去减box-sizing: border-box;取值：border-box 自动内减content-box 手动内减1.盒子阴影box-shadow: 水平偏移 垂...
2019-03-25 19:23:35
368
原创 css 背景设置相关
1.背景图片基准点默认背景图片以padding的起始点开始平铺，在css3里面可以设置其基准点background-origin: 值取值：padding-box 默认值 从padding的初始位置开始border-box 从边框的初始位置点开始content-box 从内容区域开始2.背景缩放控制背景图片的缩放background-size: 值;值可以是像素、百分...
2019-03-25 19:21:31
134
原创 css 2D 转换系列
1.移动从一个位置移动至另外一个位置transform: translate(X轴, Y轴)移动的特点： 相当于相对定位，比定位的性能更高 可以接受负值小技巧：让盒子水平垂直居中2.旋转tansform:rotate(360deg)tips:旋转的中心点可以控制transform-origin:值3.缩放transform:scale()取值是倍数4.斜切tran...
2019-03-25 19:19:33
141
原创 精灵图
精灵图（雪碧图 sprite）概念：就是将很多的小图片 icon，都整合到一张大图上使用。 作用：减少网络请求，降低服务器压力，提高效率原因因为浏览器会去服务器请求页面，请求回来的页面在执行的过程里面，会不断的去服务器请求对应的图片，当页面上的小图片过多了，那么浏览器会频繁的去服务器发请求，这个会给服务器带来很大的压力，同时效率很慢。解决方式就是将小图片整合到一张大图上，直接请求大图...
2019-03-20 20:38:56
142
原创 vertical-align
控制行内块与文字的对齐方式，写在行内块元素上面baseline 图片的基线和文字的基线保持对齐top 图片的顶线和文字的顶线（行高的顶线）对齐bottom 图片的底线和文字的底线（行高的底线）对齐middle 图片的中线和文字的中线对齐应用场景：可以解决图片与文字排列时候底下留白的问题（不要让图片以基线对齐即可 或者将图片转成块元素）可以解决表单元素与文字排列不对齐的问题（...
2019-03-20 17:17:09
72
原创 z-index
控制“定位”元素的叠放层级z-index只针对定位元素有效果 z-index值越大，层级越高思考：上大盒子压住下大盒子 下大盒子里面的子元素压住上盒子如果父元素已经比较过层级了（父元素“都有”z-index的时候，并且值不为auto），那么子元素与子元素之间是不会再去比较的...
2019-03-19 23:43:35
320
原创 定位
定位的使用包含两个部分：定位的方式 偏移值 left,right,top,bottom偏移值准确的理解是“距离什么位置有多大” 如 top:100px; 距离顶部为100像素 （向下走）静态定位所有的标准流都是静态position:static;+ 一般用于将某些已经定位的元素还原成标准流，用的很少 + 偏移值对于静态定位来说不起作用，我们以后说的元素定位不包括静态定位相...
2019-03-19 23:42:32
169
原创 PS 的使用
ps的切图使用1.主要的目的：切图：量尺寸和从PSD图上面把想要的图片拿下来基本设置：1、ctrl+k 打开首选项----单位与标尺--- 将单位都改成像素2、V工具状态下 在属性栏里面干掉自动选择 同时将组设置为图层3、在Z工具状态下 去掉细微缩放2.图层：图层其实就是一张张透明的纸张，而一个完整的图片其实是由很多张图层构成的PS的源文件格式：PSD 保留了图层 利...
2019-03-19 11:41:34
229
原创 伪元素
伪元素就是在当前元素内容的前面或者后面追加一个盒子 这个盒子由css渲染伪元素特性：1、伪元素由css渲染 所以不会增加你的DOM（html结构）开销2、伪元素默认是行内元素 可以进行转块等处理3、伪元素不管有没有内容 content这个值一定不能少 即使没有 也要写个空4、伪元素 官方推荐写:: 但是为了兼容考虑 写成单冒号5、因为伪元素是css渲染 所以JS获取不到伪...
2019-03-19 10:00:36
482
原创 web前端浮动
1.布局的三种基本方式: 标准流 按照标签默认的特性摆放盒子即为标准流 浮动流 利用浮动摆放盒子即为浮动流 定位流 利用定位摆放盒子即为定位流2.浮动的意义 1.浮动最开始是做图文绕排的 2.浮动的应用场景：元素排除一排或者一个靠左一个靠右3.浮动的特效解析 1.浮动的元素还会“脱标” 2.浮动的元素拥有行内块的表现脱标：（脱离了标准流）标准流：块...
2019-03-19 09:55:23
1207
原创 web前端版心
版心 是约束网页的一个具体的值为什么要有版心?因为电脑的屏幕不一样大，为了在不同的电脑上视觉效果一致，我们需要版心作为约束版心的公共类的设定.container { width: 1280px;}<div class="container"></div>特殊情况：设计师会给你一张很大的图片 1920 * 1000 (是为了适应不同的屏幕)但是版...
2019-03-19 09:53:12
4119
原创 标签显示的三种类型
1.1.块级元素 1.独占一行 2.可设置宽高 3.默认宽度为父级宽度 4.P标签这种段落 代表标签：div,p,ol,li,ul,dt,dd,dl,header,footer,aside,nav,article,sectiondisplay:block;1.2.行内元素 1.不能设置宽高 2.允许其他行内标签排一行 ...
2019-03-18 10:04:06
1322
原创 背景图片的使用
背景1.背景颜色 background-color: red;颜色可以设置成十六进制 或者 rgb 或者 rgba(a为透明度)2.背景图片background-image:url(图片路径)3.背景平铺background-repeat:背景平铺3.1repeat 平铺 默认3.2no-repeat 不平铺3.3repeat-x 水平平铺3.4repeat-y ...
2019-03-18 09:58:43
208
原创 css的三大特性
css的三大特性1.继承性 后代元素会继承祖先元素的一些样式 跟文字相关属性可以继承 color font- line- text- 可以继承块元素可以继承父级元素的宽度，高度不继承注意：a链接颜色不予继承，需要单独写 注意：如果元素自身有该css样式，那么该样式不予继承 2.层叠性<style> .box1 { /* 最终绿色起效果 ...
2019-03-18 09:51:31
129
原创 css 外边距常见问题解决
1.外边距塌陷当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。解决方案：避免就好2.嵌套块元素垂直外边距的合并对于两个嵌套关系的块元素，如果父元...
2019-03-16 17:56:06
1757
原创 html 盒子模型
网页的布局本质就是把网页上的元素，如图片，文字，都放入盒子里面，然后按照自己的需要摆放盒子的过程就是网页布局1.盒子模型的组成 1.width(内容宽度)+padding（内边距） +border（边框）+margin（外边距）2.边框 边框有三部分组成: border: 边框大小 边框样式（ solid 实线 dashed 虚线 dotted 点线 double 双...
2019-03-16 16:48:00
351
原创 css 文字对齐 缩进 下划线
1.文字水平对齐text-align：值取值 ：left right center2.文字首行缩进text-indent：值；推荐写法:text-indent:2em em 相对像素，相对文字大小3.行高行高控制的是文字与文字之间的上下距离（行距）line-height:值 1值的取值是像素 2将line-height设置成与标签高度一样，那么标签...
2019-03-06 20:30:59
954
原创 css 选择器
想要造作标签，那就要选中对应的标签，而这个就是选择器的作用1.基础选择器标签名{ 属性1：值1; 属性2：值2;}2.类选择器声明自定义类名 .自定义类名 {属性1:值1;属性2: 值2;} （声明类名选择器）给对应的元素添加class类名属性 class="自定义的类名" （调用类名选择器）如：.box { font-size:1...
2019-03-06 16:38:42
81
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人