前端开发
KylinBL
内向,喜欢打篮球
展开
-
关于使用js的setAttribute和getAttribute取dom属性在ie ff safri下的问题
今天写一个导航时,用了一段纯js来设置html元素的css class类,代码如下:var subdivs = obj.getElementsByTagName("DIV"); var subas = obj.getElementsByTagName("A");if(subdivs.length>0){ if(subdivs[0].getAttribute("class") == "e原创 2014-02-27 16:28:59 · 6416 阅读 · 0 评论 -
Web开发人员应当收藏的10个网站
互联网上有数百万的网站可以提供服务,其中只有一些对Web开发员来说是极为有效的工具。在本文中,Jean-Baptiste Jung整理出了10个极有用的网站,绝对值得Web开发者收藏到书签中。 1. Mysql Format Date 通过MySQL DATE转载 2011-08-22 14:50:21 · 933 阅读 · 0 评论 -
清除浮动
浮动是一个有意思(你也可以说它很麻烦)的CSS属性,任何元素设置了浮动,层级就提高了,会影响它后面没设置浮动的元素,这些倒霉的被影响者会跑到浮动层的下面去(当然IE6、IE7除外),代码看起来是这样:复制代码效果转载 2011-08-22 14:49:13 · 1282 阅读 · 0 评论 -
jquery插件收集
http://www.cnblogs.com/zhuoyr/archive/2011/03/03/1970296.html转载 2011-07-26 14:58:53 · 828 阅读 · 0 评论 -
js操作json总结
<br /> 一直在用写javascript的东西,却没怎么去关注json。以前需要把后台php的数据传到js中去使用,总是先把数据弄成一长的字符串,然后前台在用split去拆成数组格式,这样转换来转换去,久了就烦了,而且有时候也容易有忘掉去转换的情况,这样数组过去就乱掉了。转载 2011-02-23 12:24:00 · 3692 阅读 · 1 评论 -
JavaScript初学者的10个迷你技巧
<br />1,在一个数组的最后添加一个元素<br />这个技巧可以让你使用Length属性在一个数组的最后添加一个元素,因为Length属性比数组的最后一个元素的下标多1。这个方法和“push”方法是相同的。例如: var myArray = []; myArray[myArray.length] = 'New Element'; <br />2,调整一个数组的长度<br />Length属性不是只读的,所以你可以设置Length属性的值。而且,你可以使用它增大或缩小数组的长度。例如: var my转载 2011-04-20 15:27:00 · 1197 阅读 · 0 评论 -
JavaScript技术很烂的五个表现
<br />Javascript在互联网上名声很臭,但你又很难再找到一个像它这样如此动态、如此被广泛使用、如此根植于我们的生活中的另外一种语言。它的低学习门槛让很多人都称它为学前脚本语言,它另外一个让人嘲笑的东西是动态语言的概念是偏偏使用了高标准的静态数据类型。其实,你和Javascript都站错了立场,而现在,你让Javascript很生气。这里有五个原因能说明你的Javascript技术很烂。<br />1. 你没有使用命名空间<br />是否还记得在大学里老师告诉你不要在家庭作业里使用全局变量?Jav转载 2011-04-20 14:40:00 · 967 阅读 · 0 评论 -
javascript应该注意的七个细节
每种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的。本文列举了JavaScript初学者应该注意的七个细节,与大家分享。(1)简化代码JavaScript定义对象和数组非常简单,我们想要创建一个对象,一般是这样写的:var car = new Object(); car.colour = 'red'; car.wheels = 4; car.hubcaps = 'spinning'; ca转载 2011-04-20 14:53:00 · 911 阅读 · 0 评论 -
禁止选择文本的css(chrome,safari,firefox等)
<br />一直以为不让用户选中文本,都是用javascript来做的,没想到用css也可以,知识面太空窄了,记下来,<br />以供查阅。<br /> <br />firefox下:<br />body{ -moz-user-select: none;}<br /> <br />chrome和safari下:<br />body{ -webkit-user-select: none;}原创 2011-04-12 11:17:00 · 6772 阅读 · 0 评论 -
原生js实现document.ready效果
<br />直接上代码:<br />(function () { var ie = !!(window.attachEvent && !window.opera); var wk = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525); var fn = []; var run = function () { for (var i = 0; i < fn.length; i++) fn[i转载 2011-04-08 09:46:00 · 8733 阅读 · 1 评论 -
网页title前面加上自己的icon
<br />很简单的两句:<br /><link rel="icon" type="image/x-icon" href="path/to/image" /><br /><title>mytitle</title>原创 2011-03-31 12:12:00 · 1004 阅读 · 0 评论 -
jquery操作radio,checkbox,select集合
<br />一 、Select <br />jQuery获取Select选择的Text和Value: <br />1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 <br />2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text <br />3. var checkValue=$("#select_转载 2011-03-18 17:33:00 · 888 阅读 · 0 评论 -
一些提升你jquery效率的小技巧
1.总是使用最新版本的jqueryjquery 处于不断发展和完善之中,john和他的团队一直在找询新的方法去提高程序的表现,使用最新版本的jquery可以让你和程序与时俱进。2.合并和最小化你的脚本尽量把你页面用到的javascript脚本合并到一个文件中,并压缩它,这样你的页面会加载更快。3.用for函数代替jquery的each函数原生函数总是比任何的辅助复本函数快,可以看下面的例子: var array = new Array (); for (var i=0; i翻译 2011-03-17 10:47:00 · 2933 阅读 · 3 评论 -
post提交表单到新窗口中
<br />在开发web中,有很多小技巧。如果用心留意,是非常管用的,但这些小技巧有非常多,以至我们无法记住。<br />在网上找又信息很少,还是记下来 以备以后用得着的时候。<br />背景:有时候我们做web开发的时候为了提供交互性,需要将表单提交,但结果要显示在新的窗口中,在IE中<br />新的窗口有很多限制,比如去掉工具栏、菜单栏、地址栏、规定高度、宽度等等。<br />很多人会用js函数 window.open(),但这个函数只能GET提交,不能POST提交。在我们开发的过程中往往经常用POST转载 2011-02-24 12:23:00 · 6181 阅读 · 0 评论 -
Javascript在网页页面加载时的执行顺序
html中的加载是自上而下如 alert.html 中以下为引用内容:(在a.js中有一句alert(2))对JS脚本与CSS样式的加载1、IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。 2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。 3、如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。 4、并且在下载后进行解析,解析过程中,停止页面所有往转载 2011-01-24 09:58:00 · 9818 阅读 · 1 评论 -
IE6下的CSS BUG枚举
1、终极方法:条件注释以下是代码片段:[www.xlnv.net]缺点是在IE浏览器下可能会增加额外的HTTP请求数。2、CSS选择器区分转载 2010-11-23 21:14:00 · 947 阅读 · 0 评论 -
设计师必备的用户界面设计工具,工具包和资源
都是一些UI界面与设计使用的元素,软件,网站等。内容很丰富,适合网页设计师,用户体验设计师,界面设计师,产品设计师,JS前段开发,手机产品设计,ipad产品设计等使用LumzyLumzy是一个网站应用和原型界面制作工具。使用Lumzy,您可以轻松创建U转载 2011-08-25 09:48:56 · 2398 阅读 · 0 评论 -
js文件解密
今天无意中看一以一个网站,一个生成表单的功能做得不错,于是整个down下来想研究下,一看里面的js文件傻眼了,整个js代码包在一个eval()里,里面是一些看不懂的正则替换,估计是加密过了,找了好久才找到个不错的js解密网站:http://jsbeautifier.org/,把代码贴进去,处理了下,这下果然清楚了,记录下来方便以后查阅。原创 2012-02-10 11:54:37 · 3357 阅读 · 0 评论 -
分享一个js省市县联动代码
不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动。当省市区数据变动是只需调正js即可。下面是示例:demo.html 纯JS省市区联动 省:市:区:省:市:区: addressInit('cmbProvince', 'cmbCity', 'cmbArea', '陕西', '宝鸡市', '金台区'); add转载 2013-02-21 09:30:04 · 11151 阅读 · 0 评论 -
js搞定网页的简繁转换
对网页进行简繁字体转换的方法一般有两种:一是使用《简繁通》这样的专业软件,另外一种是制作两套版本的网页。显然,这两种方法都较为麻烦,而且专业软件一般不能用于免费的空间。笔者在这里给大家提供一个非常简单的方法,只须在页面上添加几行代码就可以轻松搞定网页的简繁转换了。 首先下载用于简繁转换的js文件transform.js://*==========================转载 2012-12-21 00:31:24 · 8472 阅读 · 1 评论 -
align的AbsBottom 、AbsMiddle 、Baseline 、Bottom 、Left 、Middle
AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐。 AbsMiddle 图像的中间与同一行中最大元素的中间对齐。 Baseline 图像的下边缘与第一行文本的下边缘对齐。 Bottom 图像的下边缘与第一行文本的下边缘对齐。 Left 图像沿网页的左边缘对齐,文字在图像右边换行。 Middle 图像的中间与第一行文本的下边缘对齐。 NotSet 未设定对齐方式转载 2012-11-06 22:11:48 · 1566 阅读 · 0 评论 -
jQuery实现可移动(draggable)和可缩放(sizable)网页元素
找了很多插件,发现还是自己写的比较熟悉,还可以输出各种参数。一、移动和缩放需要的事件jQuery提供了很多事件,移动和缩放需要的只要三个:movedown、mousemove、mouseup,鼠标按下的时候表示开始可移动和缩放;鼠标移动时,元素随之移动或缩放;鼠标松开时,移动或缩放结束。drag.mousedown(function(){//在需要移动或缩放的元素上绑定鼠标转载 2012-08-29 16:17:21 · 7490 阅读 · 3 评论 -
CSS垂直翻转背景图片重用实例页面(类似淘宝的上下倒三角)
淘宝网顶部条条上下拉列表项都有个向下的卡哇伊的小三角,如下图所示:鼠标移上去小三角就会转向:但是呢,淘宝的做法是让小三角旋转个180度,啧啧啧,这里的小三角幸好是左右对称的,如果是长得类似◢的小三角,就只有望洋兴叹的份了。所以,为了更广泛地适应各类翻转情况,不要去使用180度的旋转了,直接使用翻转,OK,本部分的demo效果虽然与淘宝首页的三角效果有些类似,但是,实现的原理转载 2012-08-09 09:28:38 · 7478 阅读 · 0 评论 -
去除inline-block元素间的空隙
inline-block元素在布局时会给我们带来很多方便,但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙(有的浏览器可能是8px)。废话不多说了,直接讲解决方法吧。总体来时可分为两种方法,一种是改变html结构法,另一种是css法。先说第一种,比如下面这段代码:?12345转载 2012-08-08 19:25:37 · 1446 阅读 · 0 评论 -
跨浏览器的inline-block
啊,inline-block,挺难琢磨并且迷人的声明上承诺了很多,其实提供了很少。很多次我拿到类似这样的 PSD 文件:就哭了。一般说来,这种类型的布局是小菜一桩。固定宽度,固定高度,向左浮动就解决了。但是,这个设计中内容的多少是可变的,这就意味着如果这些块中的一些内容比其他的多,就会破坏这个布局。因为第一个展示项比其他项高,第五个项目就相对第一个浮动,而不转载 2012-08-08 21:51:52 · 987 阅读 · 0 评论 -
JavaScript变量作用域
JavaScript变量作用域变量作用域是每门编程语言都会涉及的话题,也是作为一名程序员必需掌握的知识点,能深入掌握变量作用域更有助于你编写稳定的程序。 JavaScript本身作为一门简单的语言,就其变量作用域问题一样令不少人头晕,这主要是因为JavaScript闭包的存在。本文不打算深入讲解 JavaScript变量作用域问题(其实本人也没有能力能把这一话题讲的深入些),也不讲转载 2012-07-19 09:32:42 · 2331 阅读 · 0 评论 -
javascript闭包详解
一、什么是闭包?“官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。相信很少有人能直接看懂这句话,因为他描述的太学术。其实这句话通俗的来说就是:JavaScript中所有的function都是一个闭包。不过一般来说,嵌套的function所产生的闭包更为强大,也是大部分时候我们所谓的“闭包”。看下面这段代码:fun转载 2010-12-19 22:11:00 · 999 阅读 · 0 评论 -
javascript定义类或对象的几种方式
工厂方式原始的方式因为对象的属性可以在对象创建后动态定义,所有许多开发者都在 JavaScript 最初引入时编写类似下面的代码:var oCar = new Object;oCar.color = "blue";oCar.doors = 4;oCar.mpg = 25;oCar.showColor = function() { alert(this.color);}转载 2012-07-18 14:52:22 · 752 阅读 · 0 评论 -
分享一个不错的reset.css
/*KISSY CSS Reset理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。 2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。 3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。特色:1. 适应中文;2. 基于最新主流浏览器转载 2012-04-24 23:38:19 · 1230 阅读 · 0 评论 -
快速写出较好CSS的5种方法
1. ResetPhoto by redux真的,要一直使用一个reset,无论是使用Eric Meyer Reset、YUI Reset、或者你自己的定制的reset,一定要使用。这可以简单到仅仅将所有元素中的margin和padding属性去掉:html, body, div, h1, h2, h3, h4, h5, h6, ul, ol,转载 2012-04-24 21:55:58 · 1212 阅读 · 0 评论 -
怎样将用户名和密码保存到Cookie中? (html部分)
在网站中,我们经常看到每当我们准备登陆时,网页询问我们是否保存用户名和密码,以便下次登陆时不用再次输入。诸如此类的功能如何实现哪?经过两天的研究,终于有了收获!现将我的经验与大家分享。 在网页中记录用户的信息通常有如下几种方式:Session、Cookie、以及.Net环境下的ViewState等。比较起来,Session将用户的信息暂存在内存中,除非用户关闭网页,否则信息将一直有效转载 2012-03-19 22:13:10 · 29704 阅读 · 1 评论 -
javascript实现图片折角效果
今天看joomla后台,当鼠标放在一个图标上时,背景图有一个动态的卷角效果,感觉蛮灵动的,于是在网上搜了下,找到一个javascript版本的,可惜javascript水平有限,没全看懂,先记下来,以后慢慢研究。先上效果图:原图:折角图:实现代码:不错的图片折角动画效果与之间-->.picView li{ p转载 2012-03-10 00:42:08 · 1742 阅读 · 0 评论 -
js图片随机飘浮代码
var x = 0,y = 0 //浮动层的初始位置,分别对应层的初始X坐标和Y坐标 var xin = true, yin = true //判断层的X坐标和Y坐标是否在在控制范围之内,xin为真是层向右移动,否则向左;yin为真是层向下移动,否则向上 var step = 1 //层移动的步长,值越大移动速度越快 var delay = 10 //层移动的时间间隔,单位为毫秒,值越小移动转载 2012-03-07 17:54:17 · 3026 阅读 · 0 评论 -
纯CSS圆角框
<br /><!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.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><ti转载 2010-11-17 11:55:00 · 673 阅读 · 0 评论 -
经典Javascript 正则表达式
<br />正则表达式用于字符串处理,表单验证等场合,实用高效,但用到时总是不太把握,以致往往要上网查一番。我将一些常用的表达式收藏在这里,作备忘之用。<br />匹配中文字符的正则表达式:[/u4e00-/u9fa5]<br />匹配双字节字符(包括汉字在内):[^/x00-/xff]<br />应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)String.prototype.len=function(){returnthis.replace([^/x00-/xff]/g,"aa").转载 2010-11-16 22:58:00 · 942 阅读 · 0 评论 -
window.closed 属性的一个bug
<br />今天在用window.open()写弹出窗口,打开了很多子窗口,想在它们之间根据需要切换,<br />就把它们全压入主窗口的一个数组里了,因为不能切换到已经关闭的子窗口去,<br />所以需要用到window.closed属性去判断子窗口的状态,然后做相应的处理。<br />在ff下没什么问题,到了ie下,出问题了,追踪了下代码,发现刚关闭的子窗口,<br />其window.closed属性并没有立即被设置为true,仍然是false,去网上搜了下资料,<br />发现是个bug:http:/原创 2010-12-02 17:55:00 · 1197 阅读 · 0 评论 -
display属性对table的影响
<br />按照常理,对于某一单元行需要显示时,使用:display:block属性,不需要显示时使用display:none属性,而且这样做在IE浏 览器中显示正常,没有任何问题。 <br /><br />但是当用Firefox浏览时却出现了布局错乱的问题,然后通FireBug去看了下源码,调试下了,发现是display:block属性搞的 鬼。 <br /><br />1、当表格为多列的情况下,属性为"display:block"行的内容宽度仅与第一列宽度相同,也就是说无论你使colspan的属性值为多转载 2010-12-01 10:55:00 · 1630 阅读 · 0 评论 -
使option onclick事件支持ie和firefox
<br />对于select 的onclick事件,ie支持在select中设置onclick事件,在option中设置无效,但是在Firefox中,支持option的 onclick事件,在select中设置无效。另外,如果在onclick中想要得到点击的是哪一个option,是得不到的。为什么呢?因为在点击事件是发生在选择之前的,只有点击之后才能确定哪一个被选中了。所以在这是设置了一个定时函数,在单击之后60ms执行来判断哪个选中。<br /><br />下面给出了解决办法。<script type="转载 2010-10-06 13:35:00 · 2492 阅读 · 0 评论 -
Javascript与CSS在IE和Firefox中的误区及区别
<br />Javascript中的常见问题<br /><br />1. 集合类对象问题<br />现有代码中许多集合类对象取用时使用 (),IE 能接受,Firefox 不能。 <br />解决方法:改用 [] 作为下标运算。如:document.forms("formName") 改为Js代码 document.forms["formName"]; //又如: document.getElementsByName("inputName")(1); //改为 document.getEle转载 2010-09-09 09:45:00 · 1022 阅读 · 0 评论 -
offsetParent解释
offsetParent解释parentElement 在msdn的解释是Retrieves the parent object in the object hierarchy. <br /><br />而offsetParent在msdn的解释是Retrieves a reference to the container object that defines the offsetTop and offsetLeft properties of the object. 这个解释有些模糊。我们再来看看他的r转载 2010-09-16 15:33:00 · 855 阅读 · 0 评论