04 2016 档案
摘要：说起模块化，也许我们首先想到的是编程中的模块设计，以功能块为单位进行程序设计，最后通过模块的选择和组合构成最终产品。把这种思想运用到页面构建中，也已经不是什么新鲜事。相信很大一部分页面构建工程师都经历了这样几个阶段：第一阶段是在一个css文件中把多个页面按自己的习惯顺序从上往下编写样式，基本不考虑有
阅读全文
摘要：js中的switch是用来处理那些条件表达式中多个可能输出结果的情况的。js解释器会解释表达式，并根据其结果，选择执行一个或多个选择项，其格式如下： switch(表达式){ case 取值1： 程序语句1; break; case 取值2： 程序语句2; break; case 取值3： 程序语句
阅读全文
摘要：1.parseInt() 该函数将变量转换为整型数。只有对字符串型的数据调用该函数才有意义，其他类型如果使用parseInt()函数，则会返回NaN. 2.parseFloat() 该函数和parseInt()使用方式一样，它用于将字符串转换为浮点数格式，在进行检查时，它会逐个字符进行检测，遇到非法
阅读全文
摘要：JS具有阻塞特性，当浏览器在执行js代码时，不能同时做其它事情，即<script>每次出现都会让页面等待脚本的解析和执行（不论JS是内嵌的还是外链的），JS代码执行完成后，才继续渲染页面。 由于，JS的这种阻塞特性，每次遇到<script>，页面都必须停下来等待脚本下载并执行，这会停止页面绘制，带来
阅读全文
摘要：关于浏览器缓存 浏览器缓存，有时候我们需要他，因为他可以提高网站性能和浏览器速度，提高网站性能。但是有时候我们又不得不清除缓存，因为缓存可能误事，出现一些错误的数据。像股票类网站实时更新等，这样的网站是不要缓存的，像有的网站很少更新，有缓存还是比较好的。今天主要介绍清除缓存的几种方法。 清理网站缓存
阅读全文
摘要：jq对ajax进行了封装，在jq中$.ajax()方法是最底层的方法，第二层是load() , get() , post()方法，第三层是$.getScript()和$.getJSON().基本第二种方法用到多 1.load()方法 load()方法是ajax中最为简单跟常用的ajax方法，能载入远
阅读全文
摘要：AJAX (Asynchronous Javascript and XML) 是一种交互式动态web应用开发技术，该技术能提供富用户体验。 完全的AJAX应用给人以桌面应用的感觉。正如其他任何技术，AJAX有它自己的优缺点。下面我列出了一些重要的场景，你在基于web的应用的开发中使用 时一定要注意。
阅读全文
摘要：1.常用模拟 trigger() $('#btn').trigger('click'); 当页面加载完，点击事件就会完成 上面也可以简写成：$('#btn').click(); 2.触发自定义事件 trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件 例：为元素
阅读全文
摘要：unbind([type],[data]); 第一个参数是事件类型，第二个参数是将要移出的函数 说明： 1，如果没有参数，则删除所有绑定的事件 2，如果只提供了事件类型作为参数，则只删除该类型的绑定事件 3，如果把绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。 移除元素中
阅读全文
摘要：1.event.type() 该方法的作用是可以获取到时间的类型 $('a').click(function(){ alert(event.type);//获取事件类型 return false;//阻止链接跳转 }) //以上代码返回 click 2.event.preventDefalut()
阅读全文
摘要：在页面上可以有多个事件，也可以多个元素响应同一件事， 事件冒泡引发的问题： 有些时候不想动用的事件，却因为事件冒泡而触发 解决问题： 1.事件对象 由于IE-DOM和标准的DOM实现事件对象的方法各不相同，导致在不同浏览器上获取事件对象变得比较困难，。针对这个问题，jq进行了必要的扩展和封装，从而使
阅读全文
摘要：jq中有两个合成事件 hover()和toggle() 1.hover() hover方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enter）,当光标移出这个元素时，会触发指定的第二个函数（leave）; 是mouseenter和mouseleave的合成 2.toggl
阅读全文
摘要：为了判断元素是否显示，jquery中用is()来实现， $(function(){ $(obj).bind('click',function(){ if(obj.is(:visible)){ //编写的代码 }else{ //编写的代码 } }) })
阅读全文
摘要：load方法会在元素的onload事件中绑定一个处理函数，如果处理函数绑定给window对象，则会在所有内容（包括窗口，框架，对象和图片等）加载完毕后触发， 如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发， window.load(function(){ //编写代码 }) 等价于 win
阅读全文
摘要：此运算符是一种非常常用的元素符号，如果使用得当可以省却不少代码。三元运算符也可以称作为条件运算符，可以说是if...else语句的一种简化形式，下面就结合实例简单介绍一下如何实现次运算符，先看一下运算符的语法结构： 三元运算符之所以称作三元，就是因为具有三个操作数。当表达式一的返回值为true的时候
阅读全文
摘要：1,height() ,width() 此方法用来获取匹配元素的高和宽的值，如果括号内有值，则是修改匹配元素的值， 2.offset() 此方法的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即left和top,它只对可见元素有效， 3.position() 它的作用是获取元素相对
阅读全文
摘要：1.child()方法 该方法用于取得匹配元素的子元素集合 2.next() 该方法用于取得匹配元素后面紧邻的同辈元素， 3.prev() 该方法用于取得匹配元素前面紧邻的同辈元素 4.siblings() 该方法用于取得匹配元素前后所有的同辈元素。 5.closest() 该方法用于取得最近的匹配
阅读全文
摘要：1.this和event.target的区别： js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素； 2.this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this
阅读全文
摘要：这个系列的第一部分，主要介绍了如何"封装"数据和方法，以及如何从原型对象生成实例。 今天要介绍的是，对象之间的"继承"的五种方法。 比如，现在有一个"动物"对象的构造函数。 function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数。 funct
阅读全文
摘要：Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。 那么，如果我们要把"属性"（property）和"方法"（method），封装成一个对象，甚至要从原型对象生成
阅读全文
摘要：//封装StringBuilder function StringBuilder() { this._string_ = new Array(); } StringBuilder.prototype.Append = function (str) { this._string_.push(str);
阅读全文
摘要：1、JS封装就是尽量把使用的方式简单化，内部逻辑和使用解耦。通俗的说就是使用的时候只需要知道参数和返回值，其他条件尽量不要使用人员进行设置。 2、JS封装的方法有函数方式、对象的方式、闭包的方式。 举例
阅读全文
摘要：为了避免变量之间的覆盖与冲突，可以生成命名空间，命名空间是一种特殊的前缀，在js中，通过{ }对象实现。 在不同的匿名函数中，根据功能声明一个不同的命名空间，每个匿名函数中GLOBAL对象的属性都不直接挂在GLOBAL上，而是挂在次匿名函数的命名空间下，如： <script type="text/j
阅读全文
摘要：外部JS的阻塞下载 所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。 有人会问：为什么JS不能像CSS、image一样并行下载了？这里需要简单介绍一下浏览器构造页面的原理，当浏览器从服务器接收到了
阅读全文
摘要：什么是html5呢？ html5最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言，随后和W3C的xhtml2.0(标准)相结合，产生现在最新一代的超文本标记语言。可以简单点理解成：HTML 5 ≈ HTML+CSS 3+JS+API。 hmtl5于html的区别 我们现在w
阅读全文
摘要：webview加载时有3个事件。触发顺序为loading、titleUpdate、loaded。webview开始载入页面时触发loading，载入过程中如果title已经解析并赋予新值，则触发titleUpdate，载入完毕触发loaded。 如果页面加载足够快，那么titleUpdate和loa
阅读全文
摘要：原生UI即nativeUI的设计目的 HTML和css有一个优势就是灵活的样式设计。在大多数情况下，我们都应该使用HTML+css来负责UI。但是有些情况下，我们发现HTML+css的UI不满足需求。1. 绝对置顶HTML的video等元素，以及5+的map等原生元素，这些原生控件的层级高于div。
阅读全文
摘要：下拉刷新 为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机（Android4.4以下）上，DIV动画经常出现卡顿现象（特别是图文列表的情况）。解决方案还是webview。 既然拉div卡，那就不拉div，改拉webview。webview的拉动是原生的，回弹效
阅读全文
摘要：App的顶部一般有titlebar，下面是list。常见的一个需求是要在list滚动时，titlebar不动。这个简单的需求，实现起来其实并不简单。 在普通web上的做法是使用div的滚动条，把list放到div里。但是很不幸的是，div滚动条在Android4.4以下的手机上非常非常卡，滚动完全无
阅读全文
摘要：窗体切换白屏的现实问题 HTML5的性能比原生差很多，比如切页时白屏、列表滚动不流畅、下拉刷新和上拉翻页卡顿。在低端Android手机上，很多原生App常用的功能和体验效果都很难使用HTML5技术模拟。我们首先来看第一个问题，如何避免切页白屏。 浏览器的页面在切换时，由于其页面加载机制，在跳转到下一
阅读全文
摘要：响应式布局简明示例，响应式布局最好同时也是自适应布局，然后再配合css3媒体查询，来达到完美的响应式布局。css3的媒体查询ie9一下是不支持的，这太遗憾了，不过幸运的是有大神已经为前端屌丝们写好了用于IE9以下的媒体查询脚本文件，引用方式如下：<!--[if lt IE 9]> <script s
阅读全文
摘要：substr 和 substring都是JS 截取字符串函数,两者用法很相近,下面是两者的语法很示例: substr 方法 返回一个从指定位置开始的指定长度的子字符串。stringvar.substr(start [, length ]) 参数stringvar必选项。要提取子字符串的字符串文字或
阅读全文
摘要：抽奖程序在实际生活中广泛运用，由于应用场景不同抽奖的方式也是多种多样的。本文将采用实例讲解如何利用jQuery+PHP+Mysql实现类似电视中常见的一个简单的抽奖程序。 查看演示 本例中的抽奖程序要实现从海量手机号码中一次随机抽取一个号码作为中奖号码，可以多次抽奖，被抽中的号码将不会被再次抽中。抽
阅读全文
摘要：<html><head><title>手机号码抽奖</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script language="javascript"><!--var timer;var ra
阅读全文
摘要：HTML5的语义化标签以及属性，可以让开发者非常方便地实现清晰的web页面布局，加上CSS3的效果渲染，快速建立丰富灵活的web页面显得非常简单。 HTML5的新标签元素有： <header>定义页面或区段的头部； <footer>定义页面或区段的尾部； <nav>定义页面或区段的导航区域； <se
阅读全文
摘要：1. 功能需求：HTML中,在input password输入框中输入字符将默认显示为“实体圆点”，但这里要求将实体圆点字符替换成“*”号显示。 2. 局限：鼠标光标非IE浏览器不一定显示，选择多个字符时未有视觉上的区分，功能没有影响；不支持中文输入。 3. 实现：通过两个input框实现，设置字符
阅读全文
摘要：一、什么是SASS SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。 本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了。 二、安装和使用 2.1 安装 SASS是Ruby语言写的，但是两者的
阅读全文
摘要：Android消息提示框Toast Toast是Android中一种简易的消息提示框。和Dialog不一样的是，Toast是没有焦点的，toast提示框不能被用户点击，而且Toast显示的时间有限，toast会根据用户设置的显示时间后自动消失。 创建Toast的方法总共有2种： 1.Toast.ma
阅读全文
摘要：在残酷的移动互联网竞争环境下， HTML5技术一直受到各方关注，“HTML5颠覆原生 App”的争论也从未停止过，不管怎样HTML5生态的构建方兴未艾。不过对于移动开发者来说更关心的问题是如何低成本、周期短开发出体验效果好的App，所以当下用HTML5远比赌HTML5更现实。于是，一个一直被提及但是
阅读全文
摘要：正则表达式使用详解 简介 简单的说，正则表达式是一种可以用于模式匹配和替换的强有力的工具。其作用如下：测试字符串的某个模式。例如，可以对一个输入字符串进行测试，看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证。替换文本。可以在文档中使用一个正则表达式来标识特定文字，然后
阅读全文
摘要：代码如下: function checkMobile(){ var sMobile = document.mobileform.mobile.value if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(sMobile))){ alert("不是完整的11位手机号或者正确的手
阅读全文
摘要：定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 语法 返回值 一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。 说明 字符串 stringObject 的 replace() 方法执
阅读全文
摘要：Toast是Android中用来显示显示信息的一种机制，和Dialog不一样的是，Toast是没有焦点的，而且Toast显示的时间有限，过一定的时间就会自动消失。而且Toast主要用于向用户显示提示消息，接下来巴士为大家总结了Android五种Toast特效详解，当然大家也可以根据自己的需求来自定义
阅读全文
摘要：<input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascript"> var wait=60; function time(o) { if (wait == 0) { o.removeAttribute("d
阅读全文
摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o
阅读全文
摘要：回答一 穿透（点穿）是在mobile各种浏览器上发生的常见的bug。可能是由click事件的延迟或者事件冒泡导致。 移动web开发常用的Zepto库中的touch和tap事件就会有点穿的bug（Zepto的事件都绑在Document上）。 解决方案 1、使用fastclick，这个可以非常完美的解决
阅读全文
摘要：简要的探讨一下移动端 touch 事件处理几个坑，以及相应的简单处理方法。 click 穿透 假设有个弹出层，上面有个关闭的按钮支持 touchend 触发后关闭，若正好下方有个元素支持 click 事件，在弹出层关闭后将会在下方元素触发 click 事件。这种效果肯定不是我们需要的，而且我们无法确
阅读全文
摘要：标题可能不是一读让人容易明白，上张图(转载的) 需要实现如下的效果，有一个浮动层，需要层级在它之下的一个元素也能照常响应相应的事件 一个100*100的元素，边框为1px solid #406c99，它有两个事件(鼠标移入、鼠标移出)： onmouseover="this.style.borderC
阅读全文
摘要：HTML（HyperText Markup Language，超文本标记语言）最早的HTML官方正式规范，是1995年IETF（Internet Engineering Task Force，因特网工程任务组）发布的HTML 2.0。W3C（World Wide Web Consortium，万维网
阅读全文
摘要：html代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/
阅读全文
摘要：setTimeout (表达式,延时时间)setTimeout(表达式,交互时间) 延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次 setTimeout 在执行时,它从载入后,每隔指定的时间就执行一次表
阅读全文
摘要：本文实例讲述了js动态创建及移除div的方法。分享给大家供大家参考。具体实现方法如下： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 //创建div function createDiv(){ if(docum
阅读全文
摘要：首先 从定义来理解 这两个方法： appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild) insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchil
阅读全文
摘要：一、sublime菜单简介【常用功能及快捷键】 【Edit菜单】 1、line行操作快捷键 ctrl+] 增加缩进 ctrl+[ 减小缩进 ctrl+shift+D 复制当前行 ctrl+shift+K 删除当前行 ctrl+shift+↑ 当前行与上行交换位置（也可以选中多行上下移动位置） ctr
阅读全文
摘要：移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。 以下是四种touch事件 touchstart: //手指放到屏幕上时
阅读全文
摘要：代码如下: $(function(){ var $inputs = $('input[type=button]') .delay(500) .queue(function(){$(this).hide().dequeue();}) .delay(1500) .queue(function(){$(t
阅读全文
摘要：一般在JS页面延迟执行一些方法。可以使用以下的方法 jQuery.delay()方法简介 http://shawphy.com/2010/11/jquery-delay.html jQuery中queue和dequeue的用法 http://www.jb51.net/article/25481.ht
阅读全文
摘要：一、click 和 tap 比较 两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms，所以请用tap代替click作为点击事件。 singleTap和doubleTap 分别代表单次点击和双次点击。 二、关于tap的点透处理 在使用zepto框架的tap来移动设备浏览器内
阅读全文
摘要：用js来实现动画，我们一般是借助setTimeout或setInterval这两个函数，css3动画出来后，我们又可以使用css3来实现动画了，而且性能和流畅度也得到了很大的提升。但是css3动画还是有不少局限性，比如不是所有属性都能参与动画、动画缓动效果太少、无法完全控制动画过程等等。所以有的时候
阅读全文
摘要：上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。 你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局
阅读全文
摘要：网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案 Flex布局，可以简便、完整、响应式地实现各种
阅读全文
摘要：做网页设计时经常要用到各种形状的图形，对于规则的图形很简单，但是对于不规则的图形，一般我们都是用图片，今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width: 100px;height: 100px;background: red;} 2.长方形 #rec
阅读全文
摘要：最新最全的html5标签集合，按字母顺序排列的标签列表 4：指示在HTML4.01中定义了该元素 5：指示在HTML5中定义了该元素
阅读全文
摘要：头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：ne
阅读全文
摘要：如何声明数组 s中数组的声明可以有几种方式声明 复制代码代码如下: var tmp = []; // 简写模式var tmp = new Array(); // 直接new一个var tmp = Array(); // 或者new也可以 在new数组的时候可以传入一个参数，表示数组的初始化长度 复制
阅读全文
摘要：有些朋友问：foo, bar是什么意思, 为什么C++书籍中老见到这个词。 我google了一下， 发现没有很好的中文答案。这个问题，在维基百科上有很好的回答。在这里翻译给大家。 译文： 术语foobar, foo, bar, baz 和qux经常在计算机编程或计算机相关的文档中被用作占位符的名字。
阅读全文
摘要：2014.11.01 / 前端开发 / 周 涛 31995 2014.11.01 / 前端开发 / 周 涛 31995 前言 我们再一次被计算机的名词、概念笼罩。 Backbone、Emberjs、Spinejs、Batmanjs 等MVC框架侵袭而来。CommonJS、AMD、NodeJS、Req
阅读全文
摘要：@京东设计中心 ：去年JDC出了不少优秀的武媚娘…不，H5呢，大家都很拼，同时当然也积累了一些经验和教训，今天结合咱们的实战案例，从字体，排版，动效，音效，适配性，想法这几个方面好好聊一聊关于H5的设计，希望对同学们有帮助。 字体 排版 在有限的手机屏幕空间内，我们积累的经验告诉我们最好的效果是简单
阅读全文
摘要：<!doctype html><html><head><meta charset="utf-8"><title>超简易瀑布流</title><style>body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fie
阅读全文
摘要：具体来说cookie机制采用的是在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案。Cookie的优缺点：优点：极高的扩展性和可用性通过良好的编程，控制保存在cookie中的session对象的大小。通过加密和安全传输技术（SSL），减少cookie被破解的可能性。只在co
阅读全文
摘要：网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeight
阅读全文
摘要：一、天猫 二、淘宝 三、京东 四、网易 五、百度 meta指元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。 手机端特有的有哪些？ 第一个meta标签表示：强制
阅读全文