JS
shitouPlus
做一个徘徊在牛A与牛C之间的人
展开
-
position()与offset()区别
使用jQuery获取元素位置时,我们会使用position()或offset()方法,两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点在于位置的相对点不同。可以看看下边的图:从图中我们可以大体看出两者的区别。position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离,如果找不到这样的元素,则返回相对于浏览器转载 2015-11-22 14:56:10 · 600 阅读 · 0 评论 -
深入详解javascript之delete操作符
最近重新温习JS,对delete操作符一直处于一知半解的状态,偶然发现一篇文章,对此作了非常细致深入的解释,看完有茅塞顿开的感觉,不敢独享,大致翻译如下。原文地址:http://perfectionkills.com/understanding-delete/P.S. 作者是PrototypeJS的开发组成员之一 ========分割线========转载 2015-11-08 10:21:26 · 410 阅读 · 0 评论 -
js逗号运算符
JS逗号运算符的用法详解(转)注意:一、由于目前正在功读JavaScript技术,所以这里拿JavaScript为例。你可以自己在PHP中试试。二、JavaScript语法比较复杂,因此拿JavaScript做举例。最近重新阅读JavaScript权威指南这本书,应该说很认真的阅读,于是便想把所学的东西多记录下来。后面本人将逐步写上更多关于本书的文章。转载 2015-11-07 20:01:04 · 512 阅读 · 0 评论 -
强大的移动web前端框架zeptojs
移动端web越来越流行,各种移动端框架也应运而生,这里推荐一下比较流行的zeptojs.zeptojs比较适合移动端web的设计,它的初衷就是移动端jQuery框架,所以语法和jQuery非常相似,如果你会jQuery的话,那么学习zeptojs将会很容易,其次由于精简了很多模块,所以体积比较小,所有模块整合在一起之后也只有30+多KB比较适合移动端浏览器,它的触屏和手势事件支持的原创 2015-10-08 18:59:57 · 971 阅读 · 0 评论 -
jQuery EasyUI初体验
看了一下EasyUI的api,功能也很强大,几乎不需要怎么写js代码就能把功能实现,但是界面一般,不是很美观,面板组件也不是很多,但是对于需要处理大量数据的CRUD应用却十分方便,所以没有一种框架是完美的,需要根据需要取舍,前端框架实在太多了,学习之路还要继续。推荐一个学习的地址:jQuery EasyUI中文网在线demo:EasyUI demo原创 2015-10-07 23:36:58 · 402 阅读 · 0 评论 -
grunt修行之路
看了一下grunt的教程真的很强大,功能也很全面,需要的功能都能找到,学习成本也很低,里面的插件真的太方便,用uglify插件压缩js代码真的太实用了,而且轻轻松松配置,又拾得一个新技能,前端还有好多东东要学啊,加油!一个grunt教程,看完之后使用grunt应该就没什么问题了原文链接:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程原创 2015-10-07 23:01:21 · 339 阅读 · 0 评论 -
Bootstrap框架学习
Bootstrap不愧是最流行的前段框架,简单确功能强大,扩展丰富,基本满足了界面开发所需的一切。响应式的布局也很方便,但是不怎么实用,将网格分为12列是不能满足不同的界面开发需要的。同时兼容性也是一个很大的问题,最新版本已经不支持IE8了,这让广大的ie6,7,8用户情何以堪。Bootstrap中文网(很赞的学习途径):http://v3.bootcss.com/原创 2015-10-07 15:29:51 · 322 阅读 · 0 评论 -
window.name==window['name']
这是js调用属性的一种方式,最常见的是window.name这种链式操作,导致把后面的用法给忘了,后面这种方式还是很重要的,因为当使用jquery的时候,直接调用一个变量是没有效果的,这时候可以试试用['name']这种方法原创 2015-11-06 12:59:08 · 712 阅读 · 0 评论 -
可替代CSS3 transition和transform的jQuery插件
插件介绍jQuery Transit是一款可制作超级平滑的CSS3 transformations 和 transitions动画的jQuery插件。它能够通过jQuery来完成CSS转换和过渡动画效果,这对于一些不支持CSS3转换和过渡属性的浏览器来说是一个非常有用的jQuery插件。点击打开链接转载 2015-11-05 20:40:37 · 499 阅读 · 0 评论 -
用css3动画为焦点图加延迟动画
这是一个fullpage插件改写成的页面,一直对里面的动画效果很好奇,今天搞明白到底是怎么实现的了。fullpage插件会在当前显示的标签里加入一个.active类,当标签从可视区域里消失时会动态去掉这个.active类接着就没jquery的事了,用css3的过渡效果来实现所需的效果。这种方法兼容性受到css3兼容性的影响,所以在ie9及以下版本显示效果很差,如果网站是渐进增强设计的话原创 2015-11-05 17:06:01 · 520 阅读 · 0 评论 -
发现几个超棒的滚动动画延迟加载插件,超酷
http://www.scrollrevealjs.org/、http://mynameismatthieu.com/WOW/原创 2015-11-05 23:36:23 · 1154 阅读 · 0 评论 -
clearfix清除浮动进化史
clearfix清除浮动 首先在很多很多年以前我们常用的清除浮动是这样的。.clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题。但是这个用法有一个致命伤,就是每次清除浮动的时候都需要增加一个空标签来使用。 这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标转载 2015-10-21 00:00:51 · 336 阅读 · 0 评论 -
语义化前段UI框架Semantic UI
Semantci UI是一个高度语义化的前端框架,需要引入semantic.min.css和semantic.min.js,因为此框架也依赖jquery,所以需要引入jquery.min.js,此外框架还有很多主题theme,需要使用的话可以下载需要的主题,引入主题中的图片和字体文件就可以了,界面还是很漂亮的。官网地址http://www.semantic-ui.cn/introd原创 2015-10-05 11:50:56 · 1094 阅读 · 0 评论 -
requirejs的用法
之前我的一片文章介绍过requirejs,具体地址是:http://www.haorooms.com/post/RequireJS_mkh_jz ,今天看到阮一峰博客上面对于requirejs的介绍比较通俗易懂,今天转载一下!一、为什么要用require.js?最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,转载 2015-09-19 09:17:05 · 308 阅读 · 0 评论 -
获取文本节点的值
获取文本节点的方法有很多,下面就总结一下:1>x.firstChild.data:获取元素第一个子节点的数据2>x.childNodes[0].nodeValue:这种方法兼容行更好一些3>x.innerHTML:这种方法使用于元素里面只有文本节点的情况4>x.childNodes[0].textcontent:这种方法不支持ie8之前的版本个人还是推荐第二种方法,这种方法的兼原创 2015-11-11 11:01:11 · 1297 阅读 · 0 评论 -
说说JSON和JSONP
前言由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneGap支持,后者要求用户设备必须支持We转载 2015-10-12 14:06:17 · 348 阅读 · 0 评论 -
关于正则表达式的总结
为了解答“正则表达式(/[^0-9]/g,'')中的"/g"是什么意思?”这个问题,也为了能够便于大家对正则表达式有一个更为综合和深刻的认识,我将一些关键点和容易犯糊涂的地方再系统总结一下。 总结1:附件参数g的用法 表达式加上参数g之后,表明可以进行全局匹配,注意这里“可以”的含义。我们详细叙述: 1)对于表达式对象的exec方法,不加入g,则只返回第一个匹配,无论执行多转载 2015-11-16 00:10:30 · 360 阅读 · 0 评论 -
插件推荐Echo.js 简单易用的图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件。Echo.js 不依赖第三方库,压缩后不到1KB大小。 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视区域的时候,它就会改变图像的 src 属性,从服务端加载所需的图片,这也是一个异步的过程。您可能感兴趣的相关文章那些让人惊叹的的国外创意404错误页面设计让人爱不释手的精美转载 2015-10-15 00:39:45 · 358 阅读 · 0 评论 -
7款本地搭建PHP环境工具推荐
通常在开发PHP程序时,需要用到服务器环境来调试自己的页面。有时候仅仅是为了学习PHP程序开发,如果是出于这样的理由去购买一个空间或者服务器是完全没必要的。本文推荐7款目前主流的PHP集成环境工具,可以快速的在电脑上搭建服务器环境,无需再逐个的安装与配置服务器程序。1. XAMPPXAMPP是一款比较强大的本地测试平台,它集成了必须的三个功能,还带有 FileZilla,软转载 2015-10-14 21:39:20 · 932 阅读 · 0 评论 -
图片延迟加载
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的。推荐:使用jquery图片延迟加载插件jquery.lazyload实现图片延迟实现原理:把所有需要延时加载的图片改成如下的格式:转载 2015-10-15 00:36:17 · 374 阅读 · 0 评论 -
强大的jquery UI
把Jquery ui的API看了一下,真的很强大,尤其是自定义扩展插件功能,使得你可以设计出功能更加强大的插件,而且非常容易。还有jquery ui拖拽功能也很方便,使用方法非常简单。感兴趣的同学赶快来试试吧。官网地址:jquery ui下载下来的文件夹,分为三类:第一类是jquery-ui.theme.min这部分是主题样式第二类是jquery-ui.structure.原创 2015-10-14 15:26:27 · 456 阅读 · 0 评论 -
clearInterval()与setInterval()的使用心得
阅读插件源码的时候发现一个js写法,(省略了一些代码,结构是这样子的)function changeImg(_index){ $bannerList.eq(_index).fadeIn(250); $bannerList.eq(_index).siblings().fadeOut(200); $focusBubble.find("li").removeClass("current");原创 2015-10-28 20:44:33 · 785 阅读 · 0 评论 -
jquery记住登录密码
Document 用户名 密码 $(document).ready(function() { if($.cookie("remUser")=="true"){ $("#remUser").prop('checked', 'true'); $("#username").val($.cookie("username")); $("#passwor原创 2015-09-25 22:58:35 · 394 阅读 · 0 评论 -
json2.js的使用
json2.js的源码地址:https://github.com/douglascrockford/JSON-jsVisual Studio用户可以直接通过Nuget来获得。 json2.js提供了json的序列化和反序列化方法,可以将一个json对象转换成json字符串,也可以将一个json字符串转换成一个json对象。 在页面中添加json2.js的引用。scrip转载 2015-09-24 19:12:19 · 400 阅读 · 0 评论 -
$(window).resize(function(){ window.location.reload() });
$(window).resize(function(){ window.location.reload() });在写响应式网页的时候可能某些浏览器性能不好或是功能不完善,导致网页大小不能按照预定的样式展示,这时候可以强制页面刷新来达到响应式的目的。原创 2015-10-28 20:48:31 · 1071 阅读 · 0 评论 -
inline-block的兼容问题--(用脚本生成标签的兼容)
Document one $(".first").after("你好"); 经过测试发现用脚本动态生成的标签,不需要兼容,呈现效果没有空隙。所以有些疑惑,下面就慢慢说。inline-block的兼容性问题出现是因为我们在写html文档的时候,为了容易阅读而人为加了换行,去掉换行就没有空隙了。但是有的博客说如果是脚本生成的原创 2015-10-13 18:03:01 · 386 阅读 · 0 评论 -
cookie的使用
JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求。 cookie是浏览器 提供的一种机制,它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制,而并不是JavaScript本身的性质。cookie概述 在上一节,曾经利用一个不变的框架来存储购物栏数据,而商品显示页面是不断变化的,尽管这样能达转载 2015-09-24 14:51:51 · 388 阅读 · 0 评论 -
简单的获取本机ip地址的方法
有时候需要搜集用户ip地址,方便进行地理位置的查询天气的查询,下面就说说两种简单的获取ip的方法:方法一:这种方法使用柯乐义工具,只需要将需要显示ip地址的标签的id设为 id="keleyivisitorip"然后再在页面中加上<scripttype="text/javascript"src="http://tool.keleyi.com/ip/visitoriphost原创 2015-09-22 21:55:08 · 791 阅读 · 0 评论 -
如何判断一个div是否在页面可视区域内
js <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"> <script type="text/javascript"> $(document).ready(function () { $(window)转载 2015-11-05 13:17:12 · 6960 阅读 · 0 评论 -
通过Jquery判断页面元素是否在浏览器的可视区域内
通过Jquery判断页面元素是否在浏览器的可视区域内前端开发中,有时需要判断某个元素是否在浏览器的可视区域内,或者是否已经滚动出了可视区域.首先想到的便是javascript操作,原生方法自然可以,不过Jquery已经封装了一些属性,使用起来更方便些,我们这里就讨论这种Jquery的方式.(伸手党可直接看文章屁股 :cool:) 假设此元素为 #item,先说几个关键的属性:转载 2015-11-05 13:49:29 · 561 阅读 · 0 评论 -
百度天气api初体验
正在学习json和jquery ajax,想找个api练练手。就拿百度免费的api来练练手。首先需要在本地搭建一个服务器,这里选择XAMPP(无脑搭建本地测试服务器,前端开发人员的测试神器),然后开启里面的sql,apache等服务本地环境搭建好以后就可以开始写代码了,php代码就不用自己写了,百度已经给你写好了,只需要把自己的apikey加到里面就行了,只管重要的一点需要把最原创 2015-09-06 19:37:28 · 1167 阅读 · 0 评论 -
jauery call() apply()的理解
JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别。先来看看JS手册中对call的解释:call 方法调用一个对象的一个方法,以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[, [,.argN]]]]])参数thisObj可选项。将被用作当前对象的对象。arg1, arg转载 2015-09-28 21:31:05 · 428 阅读 · 0 评论 -
HTML 5 Web 存储
在客户端存储数据HTML5 提供了两种在客户端存储数据的新方法:localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。在 HTML5 中原创 2015-09-26 16:00:33 · 418 阅读 · 0 评论 -
JSON.stringify 语法实例讲解
语法: JSON.stringify(value [, replacer] [, space]) value:是必选字段。就是你输入的对象,比如数组,类等。 replacer:这个是可选的。它又分为2种方式,一种是数组,第二种是方法。 情况一:replacer为数组时,通过后面的实验可以知道,它是和第一个参数value有关系的。一般来说,系列化后的结果是通过键值对来进行转载 2015-09-26 23:25:56 · 353 阅读 · 0 评论 -
javascript用户密码加密,js密码加密
今天总结几种javascript用户密码加密的方法,虽然前端当中密码加密不经常用,一般在后端加密之后存入数据库。今天主要列举一下前端js加密方法,以后可能也用得到!1、base64加密在页面中引入base64.js文件,调用方法为: charset="utf-8">base64加密 type="text/javascript" src="base64.j转载 2015-09-25 22:56:22 · 860 阅读 · 0 评论 -
浅谈JSON中stringify 函数、toJosn函数和parse函数
JSON.stringify 函数 (JavaScript)语法:JSON.stringify(value [, replacer] [, space])将 JavaScript 值转换为 JavaScript 对象表示法 (Json) 字符串。复制代码代码如下:value必需。 要转换的 JavaScript 值(通常为对象或数组)。repla转载 2015-09-26 15:51:38 · 581 阅读 · 0 评论 -
html5定位
HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。 点击这个按钮,获得您的坐标:试一下var x=document.getElementById("demo");function getLocation() { if (navigator.geolocatio原创 2015-09-26 14:59:35 · 513 阅读 · 0 评论 -
json解析中的坑+解析方法
刚刚在w3c的json学习中发现了一个天坑,按照上面的demo自己写了一下,竟然报错了测试了许久才发现原来是格式问题json格式写为:var data='{"name":"1","val":"西安“}‘就不会报错,但是如果为了可读性更好一点写成var data = '{"root": [ {"name":"1","val":"西安"},原创 2015-09-04 21:01:35 · 996 阅读 · 0 评论 -
jquery表单验证插件
发下一个非常好用的表单验证插件,先mark下http://janking.github.io/jquery-validate/这是官网的demo,还是很酷炫的原创 2015-07-26 21:07:30 · 442 阅读 · 0 评论 -
图片墙效果
每天写点小demo,每天进步一点点原创 2015-06-14 00:00:57 · 486 阅读 · 0 评论