lovethe51cto的博客_JavaScript,HTML5,web前端,CSS3,PHP,HTML转载

$(function(){})和$(document).ready(function(){})

document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）二是onload，指示页面包含图片等文件在内的所有元素都加载完成。用jQ的人很多人都是这么开始写脚本的：$(function(){// do something});其实这个就是jq ready()的

图片

document

信息

function

转载精选 2016-08-25 22:32:36 743 阅读

OS X 效率启动器 Alfred 详解与使用技巧[转自少数派]

问：为什么要在 Mac 上使用效率启动器类应用？答：在非特殊专业用户的环境下，（每天）用户一般可以在系统中进行上百次操作，可以是点击，也可以是拖拽，但这些只是过程，而我们的真正目的是想获得结果，也就是完成一些工作。如果你希望得到一些效率上的提升，能且只能从「过程」中下手。既然如此，那么你要针对的单位环境就能立刻确定：时间。而「启动器应用」正是帮助用户节省「操作时间」的绝佳途径。与竞争对手

消费者

启动器

Alfred

转载精选 2016-08-25 09:53:11 1347 阅读

史上最全JS表单验证封装类

/***************************************************************** 表单校验工具类 (linjq) ***********************

return

function

转载精选 2016-07-21 15:38:21 424 阅读

jQuery页面滚动图片等元素动态加载实现

一、关于滚动显屏加载常常会有这样子的页面，内容很丰富，页面很长，图片较多。比如说光棍节很疯狂的淘宝商城页面。或者是前段时间写血本买了个高档耳机的京东商城页面，或者是新浪微博之类。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。乖乖，估计黄花都变成黄花菜了。所以，我们得做点什么，避免这种糟糕的状况发生。目前很流行的做法就是滚动动态加载，显示屏幕之外的图片默认是不加

浏览器

淘宝商城

光棍节

京东商城

新浪微博

转载精选 2016-04-27 23:36:22 816 阅读

Web动画API教程：可爱的运动路径（Motion Path)

这是介绍浏览器中web动画API的系列教程的第五篇。如果你有什么问题/想法，或者发现我理解错了规范的内容，或是希望我在接下来的文章中对某部分内容进行探讨的话，请在Twitter给我留言吧~@dancwilson。这篇文章的一个比较早期（简单）的版本在我的CodePen Blog上也有，在Chrome声明支持Motion Path之后发表的。终于。沿路径的动画，不再是SVG的专利！Motion Pa

浏览器

文章

Chrome

Opera

Twitter

转载精选 2016-04-20 00:42:24 1104 阅读

生成二维码的 jQuery 插件：jquery.qrcode.js

jquery.qrcode.js 是一个纯浏览器生成 QRcode 的 jQuery 插件，它使用非常简单，生成的 QRcode 无需下载图片，并且不依赖第三方服务，比如最近 Google 服务在国内访问不稳就造成我好几个网站的 QRcode 不能使用，并且压缩之后大小小于 4K。jquery.qrcode.js 使用1. 加载 jQuery 和 jquery.qrcode.js：&l

Google

浏览器

二维码

第三方

下载图片

转载精选 2016-04-15 11:28:18 689 阅读

Gif多图：我常用的 16 个 Sublime Text 快捷键

Gif多图：我常用的 16 个 Sublime Text 快捷键这里有一个15 16 个快捷键的精选列表(1个自定义快捷键)，以gif动画展示，我每天使用。享受吧!(译者注：原文所列快捷键均为OS X环境，为了方便Windows和Linux环境童鞋的学习，译者将备注Windows和Linux下对应的快捷键)选择选择一个选中项的下一个匹配项选择一个选中项的所有匹配项选择与光标关联

网页设计

信息安全

数据库设计

Android

别惹蚂蚁

转载精选 2016-04-12 16:30:28 872 阅读

浅谈CSS3 Filter的10种特效

必须要说明的是，这里的CSS3 Filter与我们所熟悉的CSS Filter是完全不同的两个概念，也不是我们所熟悉的IE滤镜，它是指通过CSS或SVG渲染元素概念可以描述的元素，包括它的子元素。关于CSS3 Filter的具体解释您可以参考《Filter Effects 1.0》这篇文章。接下来我们就开始探讨如何使用CSS3 Filter实现我们想要的效果。首先，我们

图片

文章

video

filter

如何

转载精选 2016-04-07 13:01:39 550 阅读

百度插件uaredirect.js电脑版跳转到手机版网站

一、介绍这段时间，有好多朋友问我，跳转到手机版的那个JS是怎么写的。其实这个JS也不是我写的，是百度siteapp下的一款跳转的产品，使用起来很方便。你可以用这款JS跳转到手机版，也可以跳转到任何你想跳转的位置。二、JS下载百度下载地址： http://siteapp.baidu.com/static/webappservice/uaredirect.js三、使用方法首先说明

下载地址

title

下载百度

百度插件

手机版

转载精选 2016-03-28 20:39:59 1438 阅读

RGB和RGBA之间的转换

function RGB2RGBA(rgb_color,alp){//注：rgb_color的格式为#FFFFFFFvar r = parseInt("0x" + rgb_color.substr(1,2));var g = parseInt("0x" + rgb_color.substr(3,2));var b = parseInt("0x" + rgb_color.substr(5,2));v

rgb

rgba

转载精选 2016-03-28 13:43:39 10000+阅读

jquery获取元素颜色css('color')的值返回RGB。如何转十六进制

css代码如下：a, a:link, a:visited { color:#4188FB; }a:active, a:focus, a:hover { color:#FFCC00; }js代码如下：var link_col = $("a:link").css("colo

type=color 获取值转十六进

转载精选 2016-03-18 22:43:44 3138 阅读

Javascript闭包（Closure）

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。下面就是我的学习笔记，对于Javascript初学者应该是很有用的。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。 Javascript语言

闭包

转载精选 2016-02-16 14:57:59 355 阅读

CSS3新增样式大解析：[8]animation之元素动画

CSS3中添加的新属性animation是用来为元素实现动画效果的。但是animation无法单独担当起实现动画的效果。这个我们会在后面讲到。我们先来讲讲animation的相关用法。这里我的代码均是采用标准的css3规范书写，大家使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。方法/步骤1animation有且可以设置许多个值，这意

浏览器

动画

元素

animation

先来

转载精选 2016-01-13 15:04:10 469 阅读

css3动画简介以及动画库animate.css的使用

在这个年代，你要是不懂一点点css3的知识，你都不好意思说你是个美工。美你妹啊，请叫我前端工程师好不好。呃。。好吧，攻城尸。。。呵呵，作为一个攻城尸，没有点高端大气上档次的东西怎么能行呢，那么css3的动画就绝对是值得你拥有了，虽说IE9以及更早版本的IE浏览器都不支持css3动画，但是IE6-8浏览器已是江河日下，使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持

工程师

火狐浏览器

谷歌浏览器

transition

转载精选 2016-01-12 13:36:12 446 阅读

鼠标滚动插件smoovejs和wowjs

前言鼠标滚动特效很常见，当鼠标滚动到特定的位置时才会触发相应的CSS特效，这里简单聊两款鼠标滚动特效插件smoovejs和wowjs。smoovejssmoovejs基于jQuery，所以在引入smoovejs之前确保先引入jQuery，相关版本的smoovejs的cdn可以点击这里或者下面的链接查看。http://www.bootcdn.cn/jquery-smoove/激活smoovejs如下

wow

wowJs

smoove

smoove.jquery.js

转载精选 2016-01-11 17:37:03 1584 阅读 1收藏

jQuery 获取屏幕高度、宽度

做手机Web开发做浏览器兼容用到了，所以在网上找了些汇总下。alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).height()); //浏览器当前窗口文档的高度alert($(document.body).height());//浏览器当前窗口文档body的高度alert($(document.body).o

jQuery 获取屏幕高度、宽度

转载精选 2015-09-11 09:51:16 521 阅读

简单返回顶部代码及注释说明

1. 最简单的静态返回顶部，点击直接跳转页面顶部，常见于固定放置在页面底部返回顶部功能方法一：用命名锚点击返回到顶部预设的id为top的元素html代码<a href="#top" target="_self">返回顶部</a>方法二：操作scrooll函数用来控制滚动条的位置（第一个参数是水平位置，第二个参数是垂直位置）html代码<a

网页

用户

js代码

命名

function

返回顶部

转载精选 2015-08-12 09:18:51 397 阅读

给密码框添加一个显示隐藏开关

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>密码显示隐藏</title> <style type="text/css"> @charset "UTF-8";

明文密码

密码转换

显示密码

转载精选 2015-07-03 11:44:42 285 阅读

JS判断设备以及区别不同浏览器（微信、手机等）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS区别不同浏览器（微信、手机等）</title> </head> <body> <script type="t

浏览器

browser

return

function

智能机

转载精选 2015-07-03 11:42:51 397 阅读

CSS3 @font-face

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及

@font-face font-face

转载精选 2015-06-08 15:08:43 394 阅读

241个jquery插件—jquery插件大全

jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架。其经典的Slogan是“Write Less, Do more”(写更少的代码,做更多的事情)。jQuery是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

浏览器

javascript

jquery

events

documents

jquery插件

转载精选 2014-10-27 11:05:02 828 阅读

纯CSS3制作的面包屑导航代码

这里总共有四种面包屑效果:第一种运用:before和:after，运用border生成同等大小的尖角，叠加起来左右错动1px；第二个还是运用:before和:after，运用border生成不同的尖角，一个在左一个在右；第三个是运用一个:after生成一个正方形，设置border-radius然后rotate旋转45度；第四个直接运用水平扭曲就skewX就可以了。<!DOCTYPE html

制作

面包屑

border

before

正方形

转载精选 2014-04-17 10:28:11 415 阅读 2点赞

如何让谷歌浏览器支持小于12px的字体

经常与网页打交道的攻城师，应该都知道。谷歌不支持小于12px的字体。网页解决方案很多。比如。修改浏览器配置。修改浏览器语言。但作为一个WEB，我们无法修改用户的浏览器。这时候就出现了12webkit的私有属性：html{-webkit-text-size-adjust:none;}但是，在最新版的谷歌里。已经不在支持这个属性啦。所以。这个属性。。。。已经和我们说再见啦~CSS3有个新的属性tran

解决方案

字体

谷歌浏览器

12px

转载精选 2014-02-26 17:17:32 851 阅读 1点赞

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

love51cto

$(function(){})和$(document).ready(function(){})

OS X 效率启动器 Alfred 详解与使用技巧[转自少数派]

史上最全JS表单验证封装类

jQuery页面滚动图片等元素动态加载实现

Web动画API教程：可爱的运动路径（Motion Path)

生成二维码的 jQuery 插件：jquery.qrcode.js

Gif多图：我常用的 16 个 Sublime Text 快捷键

浅谈CSS3 Filter的10种特效

百度插件uaredirect.js电脑版跳转到手机版网站

RGB和RGBA之间的转换

jquery获取元素颜色css('color')的值返回RGB。如何转十六进制

Javascript闭包（Closure）

CSS3新增样式大解析：[8]animation之元素动画

css3动画简介以及动画库animate.css的使用

鼠标滚动插件smoovejs和wowjs

jQuery 获取屏幕高度、宽度

简单返回顶部代码及注释说明

给密码框添加一个显示隐藏开关

JS判断设备以及区别不同浏览器（微信、手机等）

CSS3 @font-face

241个jquery插件—jquery插件大全

纯CSS3制作的面包屑导航代码

如何让谷歌浏览器支持小于12px的字体