- 博客(34)
- 收藏
- 关注
RSS订阅
原创 Object.defineProperty方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>defineProperty</title></head><body><script>/*ECMA中有两种属性：数据属性和访问器属性数据属性有4个描述其行为的特性：configurable：表示能否通过delete删除，能否修改属性特
2017-08-22 16:36:51
372
原创 js中加【var】和不加【var】的区别
window.onload=function (){ /* 1.在函数作用域内 加var定义的变量是局部变量，不加var定义的就成了"全局变量" 2.在全局作用域下，使用var定义的变量不可以delete,没有var定义的变量可以delete.也就说明隐式全局变量严格来说不是真正的变量，而是全局对象(window)的属性，因为属性可以通过delete删除，而变量不可以
2017-07-14 12:43:01
933
翻译 关于弹性布局flex属性详解
flex 复合属性,设置或检索弹性盒模型对象的子元素如何分配空间。由以下三个属性组成： <’ flex-grow ‘>： 用来指定扩展比例，即剩余空间是正值时此flex子项相对于flex容器里其他flex子项能分配到空间比例，在flex属性中该值如果被省略则默认为1<’ flex-shrink ‘>： 用来指定收缩比例，即剩余空间是负值时此flex子项相对于flex容器里其
2017-07-11 08:49:21
1291
原创 弹性布局
html lang="en">head> meta![Flex布局](http://img.blog.csdn.net/20170706175041007?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR1laX0NvZGU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gr
2017-07-06 17:52:31
323
原创 未知宽高的img在容器里实现水平垂直居中
//方法一：通用方案，可兼容IE6/7<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>.box{ width:800px;height:600px;border:2px solid #000;
2017-07-06 11:47:58
697
原创 原生JS的封装
/** * 原生JS的封装 * version:1.0 * date：2017/6/12 * author：龚云志 *///模拟jquery的$符选择器function $(v){ if(typeof v==='function'){ window.onload=v; }else if(typeof v==='string'){ return do
2017-09-11 21:41:35
831
原创 正则表达式常用验证
验证QQ号<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><script>var str='我的QQ是：258344567，你的是4487773吗？';var re=/[1-9]\d{4,10}/g;alert(str.matc
2017-09-11 21:18:48
313
原创 Cookie
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>cookie</title></head><script>/* cookie 储存在用户本地终端上的数据,当用户访问了某个网站的时候，我们就可以通过cookie来向访问者电脑上存储数据 1.不同的浏览器存放的cook
2017-08-13 20:06:52
322
原创 事件深入应用三
鼠标滚轮事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标滚轮</title> <style type="text/css"> div{width: 200px;height: 200px;background: #f00;} </style></head
2017-08-13 20:06:07
312
原创 事件深入应用二
拖拽的封装<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽的问题</title> <style type="text/css"> #div1{width: 100px;height: 100px;background: #f00;position:absolute;}
2017-08-13 20:04:02
177
原创 事件深入应用一
拖拽的原理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽的原理</title> <style type="text/css"> #div1{width: 100px;height: 100px;background: #f00;position:absolute;}
2017-08-13 19:58:58
197
原创 事件基础六
事件取消<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件取消</title></head><body><script type="text/javascript"> function fn1(){ alert(1); }/* 第一种形式的事件取消
2017-08-13 19:42:26
237
原创 事件基础五
事件捕获<!DOCTYPE html><html lang="en"><head <meta charset="UTF-8"> <title>事件捕获</title> <style type="text/css"> div{padding: 50px;} #div1{background: #1836EC;} #div2{ba
2017-08-13 19:29:40
191
原创 事件基础四
绑定事件的第二种方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件绑定的第二种形式</title> <style type="text/css"> </style></head><script type="text/javascript"> /* 第
2017-08-08 08:10:11
341
原创 事件基础三
事件冒泡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件冒泡</title> <style type="text/css"> div{padding: 50px;} #div1{background: #1836EC;} #div2{b
2017-08-08 08:09:04
276
原创 事件基础二
事件对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件对象</title></head><body><script type="text/javascript">/* event 事件对象 必须在一个事件调用函数里面使用event对象才有内容 事件函数 事件调
2017-08-07 08:20:42
253
原创 闭包基础
1.闭包的概念<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>闭包1</title></head><body><script>/* 闭包的概念：函数嵌套函数，内部函数可以引用外部函数的参数和变量,外部函数执行完了之后，其变量和参数也不会被垃圾回收机制收回*/function
2017-08-06 17:17:15
245
原创 BOM基础三
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>BOM</title></head><script> /* onscroll 当滚动条滚动的时候触发 onresize 当窗口大小发生改变的时候触发 */ var i=0; w
2017-08-06 16:48:48
332
原创 BOM基础二
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>BOM</title></head><style type="text/css"> body{margin:0;} div{width: 100px;height: 100px;border:1px solid #000;}
2017-08-06 16:47:50
220
原创 BOM基础一
html lang="en">head> meta charset="UTF-8"> title>BOMtitle>head>script>window.onload=function (){ var oBtn=document.getElementsByTagName('input')[0]; var oBtn1=document.getElement
2017-08-06 16:26:22
259
原创 DOM基础四
元素的创建、删除、插入、替换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DOM</title></head><script>/* document.createElement() 创建一个元素 父级.appendChild() 在父元素的子元素
2017-07-31 20:59:42
391
1
原创 DOM 基础三
元素的偏移位置<!-- 元素.offsetParent 只读 属性 返回离该元素最近的定位父级，如果没有定位父级，默认返回body ）在IE7以下，自身有定位且没有定位父级的时候，默认是HTML 2）在IE7以下，自身没有定位且没有定位父级，但有某个父级触发了hasLayout的时候，offsetParent就会被指向到这个触
2017-07-31 20:52:56
271
1
原创 DOM基础一
JavaScript的组成在了解DOM之前，我们先来了解一下JavaScritpt的组成，JavaScript由三个部分组成ECMAScript （核心） DOM BOMECMAScript是一套标准，规定了最基本的语法、关键字、数据类型等，在ECMAScript的基础上，进行的扩展，使得ECMAScript拥有更强大功能。
2017-07-26 14:11:05
292
原创 CSS基本图形总结
html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style type="text/css"> /* css 三角形 1.width: 0;height: 0; 2.border: 100px solid transparent;
2017-07-06 11:32:16
290
原创 常见兼容性问题总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>元素同行问题</title> <style type="text/css"> .box{width: 400px;} .left{width:100px;height:300px;background:
2017-02-08 21:10:30
284
原创 CSS Reset
/*CSS Reset*/ body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin: 0;font-size: 12px;} ol,ul{list-style: none;margin: 0;padding: 0;} a{text-decoration: none;} img{border: none;} form{margin: 0;}
2017-02-08 21:01:32
210
原创 定位问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定位问题</title> <style type="text/css"> /*.wrap{width: 300px;height:100px;border: 1px solid black;overflow: hidden;
2017-02-08 21:00:33
328
原创 清浮动常见方法总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>清浮动</title> <style type="text/css"> .father{border:1px solid red;margin: 90px auto;overflow: hidden;zoom:1;}
2017-02-08 20:57:53
276
原创 定位总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定位总结</title> <style type="text/css"> .box1{width: 500px;height: 300px;background: red;border: 1px solid red;} .b
2017-02-08 20:53:59
401
原创 浮动总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮动总结</title> <style type="text/css"> .box1{width:100px;height:100px;background: red;float: left;} .box2{width:
2017-02-08 20:52:03
380
原创 HTML的基本概念
1.1 HTML的基本概念1.HTML Hyper Text Markup Language 超文本标记语言。2.标记语言经过浏览器的解释和编译，才能正确反映HTML标记语言的内容。3.HTML定义了<html>、<head>、<body>三个标记来描述页面的整体结构。1.2 HTML的编写方法1.记事本2.Dreamweaver3.Subline (! Ctrl+E)...
2017-02-06 21:48:28
323
原创 前端PS基础
1.PS 技能需求、工具需求PS技能的需求：切图、修图、测量PS工具：移动工具：移动图层矩形选框工具：切图 选定图层后，利用矩形选框选取所需区域，复制粘贴即可 矩形选框是对单一图层的操作裁切工具：切图 选取所需区域后，回车确认 裁切工具是对工作区域的操作吸管工具：识色横排文字工具手抓：移动工作区域缩放标尺：选择移动工具，使用参考线，利用参考线实现精确切图 点选矩形区域时，按住Ctrl
2017-02-06 21:46:58
302
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人