JavaScript/html/CSS
文章平均质量分 69
小星_day
这个作者很懒,什么都没留下…
展开
-
js 性能优化tips-document.createDocumentFragment
js 性能优化的tips Document.CreateDocumentFragment:原创 2014-08-01 14:59:58 · 731 阅读 · 0 评论 -
浏览器版本判断
IE 11 - IE 6:"mozilla/5.0 (windows nt 6.1; wow64; trident/7.0; slcc2; .net clr 2.0.50727; .net clr 3.5.30729; .net clr 3.0.30729; media center pc 6.0; .net clr 1.1.4322; .net4.0c; .net4.0e; rv:11.原创 2014-12-15 15:43:52 · 1582 阅读 · 0 评论 -
jQuery 模板 tmpl 用法
昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里。官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下:.tmpl([data,][options])其中参数data的用途很明显:用于render的数据,可以是任意js类型,包括数组和对象。options一般情况下都是转载 2015-02-10 10:40:48 · 1032 阅读 · 0 评论 -
HTML5 LocalStorage 本地存储
sessionStorage与localStorageWeb Storage实际上由两部分组成:sessionStorage与localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。转载 2015-02-11 14:22:12 · 452 阅读 · 0 评论 -
js数据存放及处理方式小结
1.全局变量统一定义,以__开头,如:var __data = {};2.局部变量尽量以变量含义字符串,遇特殊字符串需注意,如:function domo() { var tlocation = ''; // 尽量避免与内置对象有冲突的变量名}3.所有数据尽量放在js变量中。3.1.隐藏数据如尽量写在js全局变量中,因为浏览器(如ff)可能会默转载 2015-03-26 16:58:46 · 2051 阅读 · 0 评论 -
jQuery tmpl 语法——2
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML。浏览器端根据 JSON 生转载 2015-03-13 11:19:02 · 1641 阅读 · 0 评论 -
Js 获取浏览器高度
IE 中: document.body.clientWidth ==> BODY 对象宽度 document.body.clientHeight ==> BODY 对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度转载 2015-03-30 15:46:22 · 517 阅读 · 0 评论 -
escape()、encodeURI()、encodeURIComponent()区别详解
JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 。下面简单介绍一下它们的区别1 escape()函数定义和用法 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串转载 2015-04-10 11:34:28 · 459 阅读 · 0 评论 -
js 支持兼容性的trim操作
我们知道,js有一个原生的方法trim,用于去除字符串首位的空格然而这个trim的方法,在ie 7/8并不被支持,针对这种情况,我们做如下处理1、用简单的正则表达式进行替换:function trimStr(str){return str.replace(/(^\s*)|(\s*$)/g,"");}\S包括空格、制表符、换页符等空白字符的其中任意一个转载 2015-06-29 14:13:24 · 2040 阅读 · 0 评论 -
html标签嵌套——整合
标签是文本标签,一般嵌套用文本。1.a标签最好不要嵌套块级元素,可以嵌套内联元素,但是不能嵌套a标签和input之类的标签。能嵌套的标签像,等等。2.ul和ol的子元素不能是别的元素只能是li,不能是别的比如div等,但是li中可以是div,要不然在ie6和7下回把非li解析到li的内部。这个切记没有办法修复!3.p标签不能嵌套块级元素甚至不能嵌套p元素,只能嵌原创 2014-12-15 14:28:11 · 3856 阅读 · 1 评论 -
javascript Function.propertype.bind 解析
asd转载 2015-02-03 13:59:42 · 1108 阅读 · 0 评论 -
JS 小知识点的整理__(2)
1、在应用某个对象的时候,会先调用对象的valueOf()方法,这样原创 2014-07-28 17:09:36 · 919 阅读 · 0 评论 -
JS性能优化之事件冒泡
何为事件冒泡:原创 2014-08-01 13:55:13 · 1210 阅读 · 0 评论 -
关于event.cancelBubble和event.stopPropagation()的困惑
首先我在网上看到不少文章大体上分为两个(不正确)观点:1. cancelBubble用于ie的阻止冒泡事件,event.stopPropagation()用于firefox和chrome等其他浏览器。先不讲上面是对是错先看一个例子:(测试环境:chrom5.0.275.7, moz3.6.4, opera10.53, ie6,7,8)转载 2014-08-28 13:40:09 · 732 阅读 · 0 评论 -
iphone、ipod Touch、ipad触屏时的js事件
1、Touch事件简介pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件,但是在移动终端如 iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件,分别对应了触屏开始、拖拽及完成转载 2014-09-15 16:15:59 · 1273 阅读 · 0 评论 -
chrome placeholder导致输入光标不居中
但是在chrome下显示的search word并不能垂直居中。后来找了很久终于在stackoverflow上找到了对应的方法。参考:http://stackoverflow.com/questions/4919680/html5-placeholder-css-padding就是一句:把line-height设置为normalline-he转载 2014-11-05 10:22:12 · 1955 阅读 · 0 评论 -
Css_display: block inline inline-bock区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度 , , , , 和 是块元素的例子。 display:inline就是将元素显示为行内元素. inline元素的特点是: 和其他元素都在一行上;转载 2015-01-27 18:51:44 · 772 阅读 · 0 评论 -
IE浏览器,兼容性,html版本判断
html判断IE版本1. 除IE外都可识别 2. 所有的IE可识别 3. 5.0]> 只有IE5.0可以识别 4. 5]> 仅IE5.0与IE5.5可以识别 5. 5.0]> IE5.0以及IE5.0以上版本都可以识别 6. 6]> 仅IE6可识别 7. 6]> IE6以及I转载 2014-12-02 17:13:43 · 967 阅读 · 0 评论 -
基于jQuery,实现ie placeholder的兼容性
placeholder是HTML5的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有略微不同的显示效果:实现代码:CSS:.phcolor{ color:#999;}$(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.cr原创 2014-12-03 10:16:38 · 659 阅读 · 0 评论 -
IE关闭浏览器当前标签页
我们通常调用window.close()关闭当前标签页,但是在IE中,会弹出一个是否关闭的确认窗口。这在很多时候对于用户来讲,是一个糟糕的体验。针对IE的情况,我们做如下处理:针对IE7及其以上版本,代码如下if(isMinIE7||isMinIE8){//IE7以上 //alert('is ie 7+');转载 2015-07-09 16:13:22 · 2356 阅读 · 0 评论 -
new 新对象,解决fun调用参数不同引入的闭包污染
var ss = {};var test2 = function(o){ ss.test1();}var test = function(o){ var t = o.a; /* var ss = function(){ console.log(t); } */ ss.test1 = function(){原创 2015-07-02 11:14:24 · 624 阅读 · 0 评论 -
Js中判断一个值为null
以下是不正确的方法: var exp = null;if (exp == null){ alert("is null");}exp 为 undefined 时,也会得到与 null 相同的结果,虽然 null 和 undefined 不一样。注意:要同时判断 null 和 undefined 时可使用本法。 var exp = null;if (!转载 2015-07-30 11:17:36 · 10225 阅读 · 0 评论 -
CSS清除浮动大全共8种方法
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码,在各种浏览转载 2016-04-25 20:48:31 · 8589 阅读 · 0 评论 -
border-radius在Android下的几个BUG
一、Android 2.3 自带浏览器不支持 %通常我们实现一个正圆只需要border-radius: 50%即可,大致代码如下:.foo { width: 100px; height: 100px; border-radius: 50%; border: 1px solid blue;}然而 Android 2.3 是不支持百分比的,要兼容我们只能使用转载 2016-05-12 10:25:52 · 1372 阅读 · 0 评论 -
CSS3 @font-face
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体font-face语法规则 @font-face { font-family: ; src: [][, []]*; [font-weight: ]; [f转载 2016-04-18 10:36:00 · 467 阅读 · 0 评论 -
CSS hack
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况。今天,结合自己的经转载 2016-04-18 14:07:30 · 361 阅读 · 0 评论 -
sublime text(一款前端开发必不可少的软件)
http://www.qianduan.net/essential-to-sublime-the-text-2-plugins.html安装:转载 2014-05-07 16:05:58 · 1098 阅读 · 0 评论 -
h5浏览器,唤起app
代码: /* * function getDeviceBrowser * @return {Object} device设备系统,browser浏览器类型 */ function _getDeviceBrowser () { var ua = window.navigator.userAgent;原创 2016-12-29 15:09:55 · 8997 阅读 · 2 评论 -
使用JS对中文字符串进行utf-8的Base64编码,使其与Java编码相同的办法
要进行编码的字符串:“select 用户名 from 用户”使用JAVA进行编码,Java程序:String sql = "select 用户名 from 用户";String encodeStr = new String(Base64.encode(sql.getBytes("UTF-8"))); // 编码System.out.println(encodeStr);得到转载 2017-02-24 15:46:18 · 1705 阅读 · 0 评论 -
条形码jsbarcode
GitHub地址:https://github.com/lindell/JsBarcode我的迁移地址:http://pan.baidu.com/s/1bnx6Bb5由于在项目中需要用到条形码,于是去GitHub上找,有没有现成的代码,发现了这个仓库,挺不错,记录下来,方便以后使用。引入jQuery(可选)这个插件可以用jQuery引入或者原生JS都可以实现,推荐使用原生方转载 2017-02-16 10:29:54 · 3214 阅读 · 1 评论 -
一些常用的前端开发规范
本文主要针对前端最常见的HTML、CSS、JS实行规范开发,减少因为代码格式命名等问题引起的Bug。我们的目标:不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。HTML语法 · 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。 · 嵌套元素应当缩进一次(即两个空格)。转载 2016-03-10 11:45:56 · 711 阅读 · 0 评论 -
移动前端头部标签(HTML5 head meta)
lang="zh-cmn-Hans"> > charset='utf-8'> http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> name="description" content="不超过150个字符"/> name="keywords" conte转载 2016-03-08 00:26:05 · 534 阅读 · 0 评论 -
JS监听鼠标事件,鼠标移动到对象上,展示div
监听鼠标的相应事件://常用的鼠标事件监听if (document.addEventListener) { //FireFox,Chrome,Opera… oBtn.addEventListener('click', onMouseClick, false); //单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。转载 2013-08-28 17:59:14 · 27109 阅读 · 1 评论 -
ajax请求获取xml数据结构
使用Ajax请求,获取xml数据结构,在IE10、11会出现错误:请求xml文件为:在IE 10以上浏览器中:查看文档,我们发现:针对这种情况,我们需要对ajax请求进行重写,针对IE跟非IE使用不同的方式解析xml文档数据:demo 1: function $ajax(url,原创 2015-08-27 15:54:05 · 2438 阅读 · 0 评论 -
JavaScript中多的是。你不知道的坑
1、最新的chrome浏览器:原创 2015-08-14 14:33:20 · 10061 阅读 · 0 评论 -
JS 日期时间比较 值类型和引用类型
JavaScript 中存在有值类型和引用类型:常见的值类型:数值、布尔值、null、undefined。常见的引用类型:对象、数组、函数日期的Date是一个Object对象,引用类型进行大小相等等比较的时候存在问题判断大小,由于Js对时间判断会做一个数值转化,类似于getTime(),因此可以直接用来比较但==判断,就要求两个引用是同一个对象,因此比较会出现问题原创 2015-08-04 10:42:14 · 693 阅读 · 0 评论 -
arguments,callee解读
arguments 是JS里面一个内置对象,是一个很有意思的对象任何一个function 都存在有arguments,他是一个Object对象,有length,index方法,但没有数组的push,pop之类的方法。一些常用的场景:判断,参数数目是否正确: function f (x,y,z){ if(arguments.length != 3原创 2015-10-22 22:07:16 · 4201 阅读 · 0 评论 -
Emmet(Zen Coding) 可以快速编写html/css
Zen Coding是一种快速编写html/css的语法为的是快速的处理相同重复的代码:转载 2015-11-06 11:25:53 · 413 阅读 · 0 评论 -
JS中的Call和Apply
很经常看到这两个函数,Call和Apply,那这两个方法到底有什么其妙的地方呢?首先,我们简单的这样看:call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向。他的第一个参数是this,第二个是Function的参数。比如你的方法里写了this,普通调用这个方法这个this可能原创 2015-10-25 19:36:01 · 404 阅读 · 0 评论 -
Js实现深拷贝和浅拷贝
一、数组的深浅拷贝在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生。var arr = ["One","Two","Three"];var arrto = arr;arrto[1] = "test";document.write转载 2016-02-21 22:27:57 · 3755 阅读 · 0 评论