ios0213的专栏

原创 用window.onload方法加载函数

例如脚本中要执行一个函数，当页面也没有触发行为或者其他调用的时候，函数无法被执行。这个时候可以用window.onload进行调用函数进行执行。如：function ce1(){ alert("123");}window.onload=ce1;注意后面不用加() .当脚本内部有几个函数的时候，如果只用如下面function ce1(){ alert("

原创 toString()没有参数

toString() toString() 方法可把一个逻辑值转换为字符串，并返回结果。

原创 判断文本框是否已经获取焦点 和 判断复选框是否选定

无标题文档* { margin: 0; padding: 0;}div { margin-top: 80px; margin-left: 100px; position: relative;}textarea { outline: none; margin: 0;}p { margin: 0; padding: 0; display: inline-block;

转载 JavaScript让登录或搜索文本框自动获得焦点

这确实是个值得注意的细节，今天在XX网站登录界面上遇到了，就先记录下来了，每个网页都有其专注的功能，有的专注于文章资讯等信息呈现，有的专注于视频播放，有的专注于登录，今天要说的就是专注于像登录或搜索等类似功能的网页，打开这一类页面，你会发现有些做得比较好的页面，输入焦点会自动落在要填写信息的第一个文本框里，这样我们就不需要再点击鼠标让此类文本框获得焦点了，这样无形中为用户减少了一步点鼠标的操作，易

原创 activeElement 获取焦点

activeElement 当前获得焦点的元素:var x = document.activeElement.tagName;获取当前焦点IDvar x = document.activeElement.id;1、document.activeElement属性　　Document.activeelem

转载 jquery $(document).ready() 与window.onload的区别

1.执行时间         window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。         $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数不同          window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个         

原创 onload什么时候执行

在JS中，如果希望在页面加载完成后执行某些操作的话，一般的写法如下：window.onload = function(){// some thing to do};但 是，onload函数的执行并不是我们通常所理解的浏览器构建完html页面对应的DOM树后立刻执行，而是要等到页面中所引用的图片等外部资源 完全下载完成后并且在浏览器中显示才执行，也就是说，如果页面中包括很多图片或者图

原创 document.forms.length 与 document.forms.elements.length 的区别

document.forms.length计算文档中form 表单的数目；如：document.forms.elements.length是统计form 表单中元素节点的总数。如：统计这个表单里面元素的总数可以直接这样：document.fr.elements.length;如在提交表单的时候进行验证，单独验证单个元素可以怎样：d

原创 js判断所有表单项不为空则提交表单

无标题文档function check(){for(var i=0;i{if(document.form1.elements[i].type=="submit") continue;if(document.form1.elements[i].value==""){alert("表单不能为空!");document.form1.elements[i].fo

原创 javascript 检查邮件是否正确

无标题文档function check(){ var input=document.getElementsByTagName("input")[2]; if(input.value.indexOf("@")==-1 || input.value.indexOf(".")==-1) { alert("您输入的邮件不正确!"); return false; } else{ a

原创 循环遍历form元素里的表单元素

原创 form元素 length 是form元素里的表单元素的总个数

原创 简单的图片自动轮换

代码如下：无标题文档div{ width:70%; padding:0; margin:0 auto; border:1px solid #CCC; text-align:center;} var imgshow=new Array();imgshow[0]="photo01.jpg";imgshow[1]="photo02.jpg";imgs

转载 js中SetInterval与setTimeout用法

JS里设定延时：使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象SetInterval为自动重复，setTimeout不会重复。clearT

原创 利用calssName给元素修改样式

之前是用DOM style 方式给元素设置或者刷新样式，可以利用元素的className属性设置元素的样式。如：无标题文档.demo1{ color:#F00;}.demo2{ background-color:#066;}how are you?var m=document.getElementById("test");m.className="de

原创 JavaScript DOM 中 实现元素对象的访问

无标题文档double1double2double3double4double5var table=document.getElementsByTagName("table")[0];var tableTr=table.getElementsByTagName("tr");/* + - 为保留的特殊字符，不允许用在变量或者函数里面*/for(var i=0;i<tableTr

原创 循环获取表格各节点属性值。

无标题文档double1double2double3double4double5var table=document.getElementsByTagName("table")[0];var tableTr=table.getElementsByTagName("tr");/* + - 为保留的特殊字符，不允许用在变量或者函数里面*/for(var i=0;i<tableTr

原创 nextSibling

nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。被返回的节点以 Node 对象返回。 previousSibling 返回列表项的 previousSibling（前一个同胞节点）：document.getElementById("item2").previousSibling;

原创 firstChild.nodeValue 和 lastChild.nodeValue

原创 鼠标经过图像变大，IE8以下不兼容

无标题文档* { padding: 0; margin: 0;}body { background-color: #F2F2F2;}.wrap { width: 55%; margin: 0 auto; padding: 50px;}.header { margin-top: 10px; margin-bottom: 50px; text-align: cente

原创 body css样式中 设置宽度和背景色

无标题文档body{ padding:0; margin:0; margin:0 auto; background-color:#069; width:80%; height:800px; border:1px solid #F00;}div{ height:200px; width:200px; border:1px solid #0F0;}如上

转载 Magic Zoom V3图片放大镜特效 仿凡客诚品商城图片细节放大展示

Magic Zoom v3.1.19 是最新版的图片放大镜组件，非常的好用，可以任意的定义放大镜的尺寸，放大镜的显示位置，可以定义图片标题，甚至滤镜的透明度均可定义，设置参数相当丰富，可以根据自己要求DIY出不同的效果。这个组件兼容IE6以上和Firefox，代码整合简易。1.在区加入以下代码：2. 图片使用如下面示例：如果需要不同的效果，就增加相应的代码参数，具

原创 把多个JavaScript函数帮顶到一个onload事件处理函数上

原创 文本框获取焦点的时候默认值消失，当默认值发生改变时文本框内容为改变后的内容

无标题文档function ceh(element){ if(element.value=="中文/拼音"){ element.value=""; } element.focus();}function cef(element){ if(element.value=="")element.value="中文/拼音"; else element.defaultValue=el

转载 RGBA实现背景颜色透明

所谓RGBA颜色，顾名思意就是R+G+B+A的颜色，再具体点就是RED+GREEN+BLUE+ALPHA的颜色，小写一下就是red+green+blue+alpha的颜色，翻译一下就是红+绿+蓝+Alpha透明的颜色。RGBA颜色归为CSS3属性，其余RGB的区别在于多了个A，也就是Alpha透明度，这是个很好的东西啊，我们以后要实现半透明效果（无论是背景，边框，文字颜色等都可以用半透明实

转载 CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了。今天呢，主要是重新温习一下这个属性，并实际测试来说明正确的写法，和IE各版本的支持度和书写区别。

原创 兼容IE,Firefox,CSS3 opacity透明度-FireFox 3.5+不支持-moz-opacity属性

让div 透明，兼容IE FFtransparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;} filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity

转载 CSS3 经典教程系列——CSS3 RGBA 用法详解

CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。今天这篇文章我们一起来探讨一下 CSS3 中的 RGBA 属性。RGB 对于大家来说一点不陌生，他就是 Red（红色） Green（绿色）和 Blue（蓝色），那么现在我们所说的 RGBA 又是什么呢？您可能感兴趣的相关文章Web 开发人员和设计师必读文

原创 简单的鼠标经过图片时变大，IE低版本浏览器不兼容

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：规定您希望把效果添加到哪个 CSS 属性上规定效果的时长多项改变如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：如：div{transition: width 2s, height 2s, transform 2s;-moz-tra

转载 Data URL和图片

Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。本文中，我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。Data URL基本原理为什么Data URL是个好东西

转载 CSS实现背景透明而背景上的文字不透明

在我们设计制作一些网页的时候可能会用到半透明的效果，首先我们可能会想到用PNG图片处理，当然这是一个不错的办法，唯一的兼容性问题就是ie6 下的BUG，但这也不困难，加上一段js处理就行了。但假如我们需要一个半透明遮罩的弹出层，如登陆框、注册框、提示等，这时可能需要整个页面都要被半透 明的遮罩层覆盖，那么如用背景平铺的话，此时此刻也许就不是一个好办法了，图片大了会影响加载速度，图片小了同样会增加页

原创 超链接中的javascript：void(0)问题

最近看了好几个关于标签和javascript：void(0)的帖子，谨记于此，以资查阅。 注：以下代码未经全面测试，但每一种方法可能会出现的情况都基本做了说明。 在做页面时，如果想做一个链接点击后不做任何事情，或者响应点击而完成其他事情，可以设置其属性 href = "#"，但是，这样会有一个问题，就是当页面有滚动条时，点击后会返回到页面顶端，用户体验不好。 目前有如下几种解决办法： 

原创 百度首页 focus() select() line-height

无标题文档* { padding: 0; margin: 0;}div { margin: 0 auto; margin-top: 100px; text-align: center;}.search { width: 500px; height: 35px; line-height:35px; /*设置行高让光标IE浏览器下在文本框中居中显示*/ border:

转载 JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点

今天遇见这么一个小小的问题，就是文本框中需要输入内容才可以提交，如果没有输入就提示并使该文本框获得焦点！这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了，JavaScript Code复制内容到剪贴板//这样执行，jquery只会当获取焦点后执行焦点函数的语句了。  $(”#nameInput”).focus();  

转载 JS的onpropertychange方法怎么使用？

onpropertychange事件，顾名思义，就是property(属性)change(改变)的时候，触发事件。这是IE专有的！如果想兼容其它浏览器，有个类似的事件，oninput！onpropertychange会在设置disable=true的时候失效。而且，onpropertychange是在触发对象改变任何属性时都会触发。而oninput只是在改变input的value值时才触发

转载 JavaScript让登录或搜索文本框自动获得焦点

这确实是个值得注意的细节，今天在XX网站登录界面上遇到了，就先记录下来了，每个网页都有其专注的功能，有的专注于文章资讯等信息呈现，有的专注于视频播放，有的专注于登录，今天要说的就是专注于像登录或搜索等类似功能的网页，打开这一类页面，你会发现有些做得比较好的页面，输入焦点会自动落在要填写信息的第一个文本框里，这样我们就不需要再点击鼠标让此类文本框获得焦点了，这样无形中为用户减少了一步点鼠标的操作，易

原创 CSS JavaScript DOM写的仿谷瀑网搜索导航

无标题文档.wrap{ margin:0 auto; border:1px solid #FFF;}.menu { width: 80%; height: 40px; margin: 0 auto; margin-top: 50px; border-top:1px solid #F1F1F1;}.menuin { padding: 0; margin: 0; flo

原创 JavaScript DOM中获取元素节点的父节点和父节点名

例如当我们要获取id="test1"的父节点的时候，可以这样：var node=documentElementById("test1");var parentnode=node.parentNode;获取父节点名可以这样：var parentnodeName=node.parentNode.nodeName;

转载 理解伪元素 :before 和 :after

层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。你一定听说过这个词，尤其是当你一直关注着我们的教程。点此浏览原作者的其他文章事实上，的确有一些CSS家族的成员（CSS选择器）被分类为伪元素比如：:first-line, :fir

原创 CSS中 伪类和伪元素的用法 --实现元素前后添加[]框

无标题文档a{ position:relative; display:inline-block; outline:none; text-decoration:none; color:#636; font-size:24px; padding:5px 25px;}a:hover::before,a:hover::after{ position:absolute; /*注意