- 博客(41)
- 收藏
- 关注
RSS订阅
原创 从走前端之路
序言写在正文前的 贵有恒何必三更眠五更起，最无益只怕一日曝十日寒。 一只大学刚毕业有着一年工作经验的程序猿，随着在工作过程中的开发，越发的重视基础，于是开始了自己的博客生涯，从头走一遍前端路，巩固基础，一是为了技术分享，二是为了自我督促，望诸君共勉。 if(keep== 'everyday'){ alert("everything is possible-KG");}序言
2017-07-27 11:28:17
295
原创 前端跨域
同源策略首先了解同源策略 document.domain + iframe (只有在主域相同的时候才能使用该方法) iframe在www.a.com/a.html中document.domain = 'a.com';var ifr = document.createElement('iframe');ifr.src = 'http://www.script.a....
2018-03-21 17:03:35
204
原创 JS判断数组
JS判断数组在JS如何判断对象变量是数组obj instanceof Arrayconsole.log(a instanceof Array)Array.isArray()console.log(a.isArray())
2018-03-20 17:16:26
253
原创 WebPack初步入门
原理Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 同时你还要安装node.js可以参照菜鸟教程中的教程安装（http://www.runoob.com/nodejs/nodejs-install-setup.html）全局安装 npm install -g webpack在对应目录下添加 demo.js 文件，代
2017-12-27 16:00:22
220
原创 localStorage简介
什么是localStorage在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。通常为string。localStorage的写入if(！window.l
2017-12-26 15:36:45
1030
1
原创 简易开发的百度地图API
原理页面引入JS 设置DIV <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=fwNaroz6Ddque81aKt9gWkZDTLKSoTWU"></script> <div id="map"></div> <script> //创建和初始化地图函数： function ini
2017-12-22 14:46:50
734
原创 CSS进阶-LESS(简介)
LESS简介LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。LESS安装（sublime）安装less2css插件： 方法：ctrl+shift+p>install Package>输入less
2017-12-21 14:21:34
892
原创 JS截取字符串
原理有的时候两个页面通过GET方法参数传值，截取你想要的参数 function GetQueryString(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=nu
2017-11-30 15:29:53
164
原创 CSS,font-family,好看常用的中文字体
简介例1（小米米官网）：font-family: “Arial”,”Microsoft YaHei”,”黑体”,”宋体”,sans-serif;例2（淘宝技术研发中心）：font: 12px/1.5 Tahoma,Helvetica,Arial,’宋体’,sans-serif;例3（加网 ）：font: 14px/1.5 ‘Microsoft YaHei’,arial,tahoma,\5b8b\4f
2017-11-30 14:35:41
2206
原创 JSON.parse()和JSON.stringify()
原理parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":"23"}' JSON.parse(str) Object age: "23" name: "huangxiaojian" __proto__: Object注意：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。string
2017-11-29 11:45:30
140
原创 JS类型转换
原理改变变量的类型方法1. Boolean(value):把值转换成Boolean类型； 2. Nnumber(value):把值转换成数字（整型或浮点数）； 3. String(value):把值转换成字符串。
2017-11-29 11:02:32
167
原创 SELECT 实现placeholder
原理增加一个不可选中的option方法 <select> <option value="" disabled selected>Select your option</option> <option value="1">JACK</option> </select>
2017-11-29 10:59:10
6847
原创 实现一页展示网页的内部链接
原理给你想要到达的位置的块的A标签加上 name=”xx”属性代码 <a href="#brand" class="nav2Link">品牌活动<span>/</span></a> <a name="brand"></a>这样就会跳转到对应的块
2017-10-31 18:30:52
1030
原创 JQ阻止事件冒泡
原理时间冒泡由内而外，向外迸发，为了阻止无谓的事件发生，所以阻止事件冒泡方法一 $("#div1").mousedown(function(event){ event.stopPropagation(); });方法二 $("#div1").mousedown(function(event){ return false;
2017-10-30 18:34:31
483
原创 checkBox实现单选加样式
实现使checkBox实现单选功能，样式更加美观。 代码.join{ height: 540px; background-image: url("../../img/joinmember/join.png"); background-size:cover; background-repeat: no-repeat; background-position:
2017-10-27 17:53:15
549
原创 HTML5-Canvas简介line to&move to
Canvascanvas是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。 canvas只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在canvas元素上绘图主要有三步：1获取c
2017-10-23 15:57:26
691
原创 Cookie与Session区别
简介我们在实际生活中总会遇到这样的事情，我们一旦登录（首次输入用户名和密码）某个网站之后，当我们再次访问的时候（只要不关闭浏览器），无需再次登录。而当我们在这个网站浏览一段时间后，它会产生我们浏览的记录，而且有的网站还提供购物车的功能。这些简单实用的功能就是通过Cookie与Session实现的，接下来，让我们一起探讨一下它们是如何运行的。Cookie有时也用其复数形式Cookies，指某些网站为
2017-10-18 18:34:06
322
原创 Flexbox简介
Flex布局背后的主要思想是给容器控制项目（Flex项目）的宽度、高度的能力，使用Flex项目可以自动填满容器的可用空间（主要是适应所有类型的显示设备和屏幕大小）。Flex容器使用Flex项目可以自动放大与收缩，用来填补可用的空闲空间。Flex容器属性定义一个Flex容器，根据其取的值来决定是内联还是块。Flex容器会为其内容建立新的伸缩格式化上下文。 .container { displ
2017-09-26 12:01:32
225
原创 http和https区别
http和https区别在URL前加https://前缀表明是用SSL加密的。 你的电脑与服务器之间收发的信息传输将更加安全。Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。http的连接很简单,是无状态的,... HTTPS协议是由SSL+HTTP协议构建的可进行加密
2017-09-18 17:36:19
506
原创 CSS3动画 Transitions, Transforms和Animation使用简介
Transitionstransition有下面些具体属性：transition-property :* //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡transition-duration:*//指定这个过渡的持续时间transition-delay:* //延迟过渡时间transition-timing-functi
2017-09-14 13:57:25
262
原创 CSS3的calc()做响应模式布局
REM方法calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可
2017-09-06 14:06:03
298
原创 移动端常用适配方法
REM方法css中使用的尺寸与设计稿保持一致，body的宽度设为屏幕宽度。将页面宽度定为屏幕宽度，通过设置html的font-size与使用rem来实现尺寸与设计稿一致。假设设计稿宽度为750px那么以设计稿为准，设置body的宽度为750px由于使用rem单位，因此需要设置html标签的font-size为计算方便，取100px为参照，所以body的宽度为7.5rem由于设备的dip!=设
2017-09-05 13:49:19
411
原创 require.js简介
XHR项目中大都使用模块化开发，requireJS作为AMD模块开发的典范，所以有必要学习下。通过一步步利用requireJS编写demo，从而学习requireJS的一个整体开发流程以及自我使用requireJS的一些感受。创建HTML文件创建一个HTML文件后，导入requireJS肯定是使用<script>标签的，这个毫无疑问。然后在这个标签中有个data-main属性，它的作用呢是作为一个出
2017-08-22 18:13:50
316
原创 Ajax原生Xhr(xmlhttprequest)
XHRAJAX大家已经都知道了，是为了实现异步通讯，提高用户体验度XMLHttpRequest对象则是其中的重重之中。这篇博客重点总结一下这个对象的使用。当然还是按照经典的五步法来学习，以后在实践中有更多更好的想法，会拿出来分享的！创建XMLHttpRuquest对象var xmlhttprequest; if(window.XMLHttpRequest){ xmlhtt
2017-08-21 17:11:55
526
2
原创 javascript-遍历
继承for (var key in obj){}for (var key in obj) 语句循环遍历对象的属性。 Object.prototype.bar = 10;// 修改Object.prototype var obj={"name":"wjy","age":26,"sex":"female"};//定义一个object对象 var keys=[];//定义一个数组用来接受ke
2017-08-17 17:15:38
246
转载 javascript-继承
继承JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。既然要实现继承，那么首先我们得有一个父类，代码如下：// 定义一个动物类function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正
2017-08-17 14:41:13
265
原创 javascript-回调
回调字面上的理解，回调函数就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。这个过程就叫做回调。变量的作用域 //定义主函数，回调函数作为参数 function A(callback) { callback(); console.log('我是主函数'); } //定义回调函数
2017-08-15 13:45:05
233
原创 javascript-闭包
闭包要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量变量的作用域 var n=999; function f1(){ alert(n); } f1(); // 999如何从外部读取局部变量那就是在函数的内部，再定义一个函数。 function f1(
2017-08-10 19:25:19
241
翻译 Javascript-this
thisthis是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用,随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。function test(){ this.x = 1; }纯粹的函数调用var x = 1; function test(){ this.x = 0
2017-08-09 18:59:53
260
原创 JS&ES5&ES6简介
JavaScriptJavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给HTML网页增加动态功能。 动态：在运行时确定数据类型。变量使用之前不需要类型声明，通常变量的类型是被赋值的那个值的类型。 弱类：计算时可以不同类型之间对使用者透明地隐式转换，即使类型不正确，也能通过隐式转换来得到正确的类型。 原型：新对象继承对象（作为模版），将自身的属性共享给新对象，模版对象称为原
2017-08-08 15:55:10
277
原创 CSS常见布局
单列布局水平居中下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素inline-block 和 text-align.parent{text-align: center;}.child{display: inline-block;}margin:0 auto.child{width: 200px; margin: 0 auto;}table.parent{po
2017-08-07 15:21:05
469
原创 CSS-浮动&清除浮动
CSS-浮动浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。。浮动产生负作用1、背景不能显示 由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。 2、边框不能撑开 如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产
2017-08-04 14:31:49
298
原创 网络通信协议
网络通信协议在我理解通信协议，也就是通信时所遵守的规则，只有双方按照这个规则“说话”，对方才能理解或为之服务。对于前端开发较为重要的就是HTTP的请求与响应。TCP HTTP UDP三者的关系:1、TCP/IP是个协议组，可分为四个层次：网络接口层、网络层、传输层和应用层。 2、在网络层有IP协议、ICMP协议、ARP协议、RARP协议和BOOTP协议。 3、在传输层中有TCP协议与UD
2017-08-02 13:13:08
414
原创 CSS的三种定位
CSS的三种定位CSS的三种引用方式：相对定位（relative）、绝对定位（absolute）、固定定位（fixed）。相对定位（relative） 被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。<!DOCTYPE html><html lang="en"><head>
2017-08-02 12:40:35
501
原创 CSS简介与选择器优先级
CSS的简介在样式表中，CSS的写法通常如下。<selector>{ <attr1>:<value1>; <attr2>:<value2>; <attr3>:<value3>; ...... <attrN>:<valueN>;}selector的中文名叫“选择器”，表示对哪个元素设置样式。大括号内部设置具体的样式，如字体等。设置样式的方法是通过多对:组合而成，中间用分号( ;
2017-08-01 13:47:20
261
原创 CSS的三种引用方式
CSS的三种引用方式CSS的三种引用方式：内联式css样式、嵌入式css样式、外部式css样式。内联式css样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head> <body> <span style="color:red">我是内嵌样式
2017-07-31 13:31:34
595
原创 初试CSS-盒模型
CSS盒模型简介CSS盒模型就是一个元素的模型，因为模型原理看起来像生活中的盒子所以叫做盒模型，内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒模式通常具备这些属性。边框（border）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Doc
2017-07-31 13:24:00
240
原创 常见的网页返回码
DOM元素简介200（成功） 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。201（已创建） 请求成功且服务器已创建了新的资源。202（已接受） 服务器已接受了请求，但尚未对其进行处理。 203（非授权信息） 服务器已成功处理了请求，但返回了可能来自另一来源的信息。204（无内容） 服务器成功处理了请求，但未返回任何内容。205（重置内容） 服务器成功处理了请求，但未返回任何
2017-07-29 16:20:09
1318
原创 初步了解HTML-元素
DOM元素简介DOM在我理解就是HTML中的各种你写在文件中的标签，如 p、span、div、ul、img等等许多标签，其中DOM元素又可以分为行元素，和块元素。 行元素常见的行元素 a img input label select span textarea 行元素的特点是，行内元素会在一条直线上排列，都是同一行的，水平方向排列，行内元素设置width无效，height无效(可以设置line
2017-07-28 14:53:14
250
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人