🌓

使用HTML5的十大原因

2016-01-09

你难道还没有考虑使用 html5？

当然我猜想你可能有自己的原因：它现在还没有被广泛的支持，在 ie 中不好使，或者你就是喜欢写比较严格的 xhtml 代码。html5 是 web 开发世界的一次重大的改变，事实上不管你是否喜欢，它都是代表着未来趋势。其实 html5 并不难理解和使用。我们这里能列出许多原因为什么现在要开始使用 html5。

阅读全文

HTML5 本地存储

2016-01-09

最近开发项目中，频繁的使用到html5的本地存储，所以对HTML5存储进行了一番研究，为了后期的项目进行知识储备。html5 相对于 html4 新增加了一些有趣的标签、属性和方法，今天主要针对HTMl5的本地存储。

在客户端存储数据

HTMl5提供了两种在客户端存储数据的新方法：

阅读全文

移动端开发中不使用zepto九大理由

2016-01-09

希望网上公开课的老师们不要再讲移动端网页用zepto了，坑了无数鸟啊 ~~~。

1、自己/公司/项目组所写和所积累（网上下的）的js函数都是以jQuery插件的写法来写的，如果要换到zepto上的话那么每个都要改一 点。而且通常都是要同时做PC端和手机端，PC端无疑是要用jQuery，如果手机端用zepto，就会产生两份js插件库，大大增加了维护成本和难度。

阅读全文

基于jQuery实现圆形图片横向轮播酷炫特效

2016-01-07

基于jQuery实现圆形图片横向轮播特效是一款个性设计的jQuery+HTML5响应式圆形图片轮播图特效插件mislider。本段代码适应于所有网页使用，有兴趣的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效插件。

效果图：

阅读全文

简述jQuery ajax的执行顺序

2016-01-07

jquery ajax的执行顺序大家在项目经常会颠倒，下面通过本文给大家介绍jquery ajax的执行顺序，涉及到jquery ajax执行顺序相关知识，对jquery ajax执行顺序相关知识感兴趣的朋友一起学习吧！
jQuery中的Ajax的async默认是true(异步请求),如果想一个Ajax执行完后再执行另一个Ajax, 需要把async=false即可。

阅读全文

终极版讨论javascript中的this，全方面渗透

2016-01-07

在JavaScript中，this 的概念比较复杂。除了在面向对象编程中，this 还是随处可用的。这篇文章介绍了javascript中的this相关知识，对javascript this相关知识感兴趣的朋友一起学习吧!
JavaScript 是一种脚本语言，因此被很多人认为是简单易学的。然而情况恰恰相反，JavaScript 支持函数式编程、闭包、基于原型的继承等高级功能。

阅读全文

回归原生javascript，addEventListener 和 onclick 到底有什么不同？

2016-01-07

前景

用习惯了JQ，对JQ的事件绑定和处理，相信大家已经是不陌生了，或许大家已经把原js生都抛之脑后了吧，不管是用什么框架，都是离不开原生js，所以建议大家还是对原生的多一些研究比较好！

阅读全文

html5仿手机微信摇一摇

2016-01-07

还记得你无聊时候想通过微信摇一摇功能，摇出个未来吗？没错，就是这个功能，今天共享给大家html5开发的手机微信摇一摇功能，在网页中模仿html5微信摇一摇功能，在手机里效果更流畅，配上那摇一摇熟悉的声音，更加形象生动而逼真，好了，不耍逼格了，直接上演示和代码：

演示效果图

阅读全文

兼容各浏览器的设为首页和加入收藏代码

2016-01-07

兼容各浏览器的设为首页和加入收藏代码:

加入收藏和设为首页代码几乎各个网站都在头部放上一个，有没有效果先不管，需求应该是有的。
但是由于浏览器的兼容性问题，之前用的很多代码都失去效果，下面就给出一段能够兼容各个浏览器的代码，也不能够算是兼容，只能说在不支持的浏览器中能够给出提示，代码如下:

阅读全文

JQ+CSS+DIV多彩随机变化链接样式tag标签样式

2016-01-05

tag标签随机多彩变化的超链接样式，使用JQ+DIV+CSS实现刷新随机变化样式特效。jquery版的随机多彩tag标签随机css字体颜色和字号大小效果。于是就写下这个效果与大家分享，办法也很笨拙，就是利用jquery随机数来遍历#tag中所有的a链接为其添加一个随机的类名。然后预先定义了12个链接样式。你可以自定义类似 #tags .tags1 这样的css以实现你需要的字体样式。这里的jquery随机多彩tag标签随机颜色和字号大小效果样式只是演示随便写的，不够漂亮。

阅读全文

jquery中通过全局变量来禁止多次ajax请求

2015-12-28

在前端开发中，很多都需要考虑用户体验，就在本文即将介绍的ajax就需要值得考虑：用户不太懂网站，点了按钮后，如果网速慢了会反应特别慢，就怕用户连续点击按钮造成客户端向服务器发送了一次又一次的ajax请求，浪费了服务器的资源。

在百度上搜索了半天，开始的时候是搜索jquery中ajax的当前状态如何获取，想通过每次ajax请求之前来判断当前ajax的状态来控制再次的ajax请求，在网上看了好多的教程，自己也测试了好多，都没啥用！这里不得不再报怨一句，搜索引擎里搜索出来的文章可真是天下一大抄啊！
不说废话了，来看测试后总结出来的代码：

阅读全文

移动端禁止触屏滑动touchmove方法介绍

2015-12-28

在移动端页面开发中，有时需要禁止用户滑动屏幕，搜索了好久才找到移动终端的touch事件，touchstar,touchmove,touchend.

阻止滚动

一些移动设备有缺省的touchmove行为，比如说经典的iOS overscroll效果，当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱，但要禁用它很容易。

阅读全文

跨浏览器平台获取鼠标位置

2015-12-23
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
26
27
28
29
30
31
32
33
34
35
36
37
function getPosition(e) {

    e = e || window.event;

    var cursor = {x:0, y:0};

    if (e.pageX || e.pageY) {

        cursor.x = e.pageX;

        cursor.y = e.pageY;

    }

    else {

        cursor.x = e.clientX +

            (document.documentElement.scrollLeft ||

            document.body.scrollLeft) -

            document.documentElement.clientLeft;

        cursor.y = e.clientY +

            (document.documentElement.scrollTop ||

            document.body.scrollTop) -

            document.documentElement.clientTop;

    }

    return cursor;

}

阅读全文

关于HTML5标签不兼容(IE6~8)

2015-12-23

HTML5的语义化标签以及属性，可以让开发者非常方便地实现清晰的web页面布局，加上CSS3的效果渲染，快速建立丰富灵活的web页面显得非常简单。

比较常用的HTML5的新标签元素有：

  • <header>定义页面或区段的头部；

阅读全文

如何让360、遨游、猎豹等双核浏览器默认以webkit内核渲染网页？

2015-12-22

前言

众知目前国内不少浏览器都自称双核，一般是 IE(Trident)+Webkit。因为 webkit 急速的体验和对 HTML5 的支持，有些情况下开发者可能希望用户优先甚至只使用 webkit 内核渲染，比如通过 Meta 标签来指定。然而目前还没有任何一个公认的标准来实现。大多数用户根本分不清浏览器双核之间的区别。所以把决定权交给开发者，以此给用户带来更好的浏览体验，不失为一件好事。

阅读全文

HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1的作用

2015-12-22

X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。

在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。
兼容性模式设置优先级：
javascriptmeta tag > http header
常用的例子：

阅读全文

js操作iframe框架的一些基本概念

2015-12-22

1、获取iframe的window对象

存在跨域访问限制。

iframeElement.contentWindow　　兼容

2、获取iframe的document对象

存在跨域访问限制。

阅读全文

placeholder的兼容处理(基于jq)

2015-12-21

这是一个老问题，结合项目的经验，需要处理的问题有一下几个。

1.只有输入框（input/textarea）下的palaceholder属性存在的时候才需要处理这类兼容

2.处理好输入框上焦点和是焦点的文本显示

3.密码输入框比较特殊，因为为其设置显示文本时显示的是一串“***”。这个问题后面分析。处理好前两点还是比较简单的，处理源码为如下

阅读全文

jquery如何将获取的颜色值转换为十六进制形式

2015-12-18

大家或许已经注意到了，在谷歌、火狐和IE8以上浏览器中，获取的颜色值是RGB形式，例如rgb(255,255,0)，感觉非常不适应，或者在实际编码中不方便使用，这个时候就需要进行转换，下面就提供一段相关转换代码。
代码如下:

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.npm8.com/" />
<title>grycheng前端博客</title>
<style type="text/css">
#thediv
{
width:200px;
height:100px;
background-color:#CCC;
line-height:100px;
text-align:center;
color:#60F;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
</head>
<body>
<div id="thediv">grycheng前端博客</div>
<input type="button" value="点击查看效果" id="bt" />
</body>
</html>

阅读全文

javascript设置连续两次点击按钮的时间间隔

2015-12-18

在实际应用中，可能并不希望按钮联系被不间断的点击，所以要限定一定的时间间隔才能够再次点击按钮，下面就通过代码实例介绍一下如何实现此功能，代码如下:

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.npm8.com/" />
<title>grycheng前端博客</title>
</head>
<body>
<div id="thediv">0</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

阅读全文