随笔分类 - javascript
setTimeout和setInterval的使用
摘要:这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。方 法实际上,setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。虽然表面上看来setTimeout只能应用在on-off方式的动作上,不过可以通过创建一个函数循环重复调用setTimeout,以实现重复的操作:Fi
阅读全文
js冒泡事件
摘要:JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素。事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这 一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。目标元素: 任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的元素对象中以属性的形 式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以很方便地得知这个事件是从哪个元素开始 的。事件的冒泡和捕获捕获是从上级元素到下级元素,冒泡是从下级元素到上级
阅读全文
JavaScript 中万变不离其宗的 this 应用场景
摘要:this 是 JavaScript 中的一个关键字,它可以指向 window、函数、对象、全局变量,甚至是一个 Dom 元素,this 这是闹哪样啊?this 到底是指向什么?“模棱两可”的 this 几乎把前端开发们逼疯了。但我认为“模棱两可”的 this 恰恰是 JavaScript 灵活性的体现,如果摸清 this 的“脾气”,不旦不会加剧程序的复杂性,反而会让我们的代码更健壮。this 的“脾气”并非是老虎的 P 股摸不得。我对使用 this 的场景作了一下分类,不过大家要知道,不管 this 的用法有多少,都是万变不离其宗的,它的宗旨可以总结成两句话,第一句话引自《JavaScrip
阅读全文
闲谈 JavaScript 之事件绑定(转载自万戈)
摘要:原文地址关于 JavaScript 的事件绑定在网上已经有不少相关的资料了,今天这篇文章也是在被同事问及的时候才顺便把它记录下来,算是 JavaScript 事件绑定中的一个小技巧,如果能在工作中善加利用,会有出其不意的效果。其实没有什么新的知识点,只是为了方便其他有需要的朋友们翻阅,对自己而言也算是一个积累,所以只能算是闲谈 JavaScript,老鸟们可以尽情飘过。在进入正题之前,先提个问题热热身吧。现在有如下 HTML 结构:<div id="wrap"> <input type="button" value="按钮一&
阅读全文
marquee.js - jQuery 多功能无缝滚动插件
摘要:(点击查看原文地址)这个基于 jQuery 的多功能无缝滚动插件是我在几个月之前就写好的,只是碍于时间没有把插件公开出来,近段时间,这个插件陆续在公司的几个项目中得到应用,尝试效果还算不错,期间也修复了一些 bug,自我感觉这个插件在功能上已经比较成熟,现在就分享给大家。首先,来说明一下,这个“多功能”无缝滚动插件,到底怎么“多功能”?marquee.js 插件一共提供了 13 个可选的配置参数,是我所能想到的一般无缝滚动所可能涉及到的多样化了。简单来看一下这些参数有:auto {boolean} 是否自动滚动interval {number} 间隔时间(毫秒)speed {number} 移
阅读全文
JavaScript 执行性能比较和性能测试的方法(作者-万戈)
摘要:JavaScript 执行性能比较和性能测试的方法(作者-万戈)JavaScript 松散的语言特性注定了它是一门灵活的语言,为了达到同一种功能或者效果,我们可能会有多种不同的实现方法,但是哪种方法才是最好的呢?我们又可以从可读性、可扩展以及执行性能等方面去比较。本文就从执行性能的角度探讨一下客观、直观的 JavaScript 性能比较和性能测试的方法。为什么要做 JavaScript 的性能测试和比较?很多人都会有这样的疑问,现在的计算机硬件都在提升,执行的响应速度越来越快,浏览器的解释器也越来越强大,JS 的性能问题还值得关注吗?确实,JavaScript 有良好的垃圾回收机制,区区几个内
阅读全文
表单的focus事件和onblur事件的两种写法(你懂得)!
摘要:第一种:js代码直接书写在html文档中:<input name="pwuser" type="text" id="pwuser" class="input" value="楼盘账号" onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号') this.value='';" /> &
阅读全文
js 利用image对象实现图片的预加载
摘要:大量采用高解析度的图像的确可以让一个Web站点容光焕发。但同样也会造成站点访问速度下降——图片是文件,文件就要占用带宽,而带宽直接同访问等待时间相关。现在,让我们来学习一种名为图像预装载(image preloading)的小技巧来提高图像访问速度。一些浏览器试图通过在本地缓存中保存这些图片来解决此问题。这样一来可以顺序调用这些图片——但对于首次使用这些图片的时候仍然会存在延时。预装载 就是一种在需要图片之前就将图片下载到缓存的技术。采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回来并立即显示。Image()对象最简单的图像预装载办法是使用JavaScript新建一个新的Imag
阅读全文
JS正则匹配入门基础!
摘要:js 正则什么是正则表达式?这个问题可以参见:“正则表达式30分钟入门教程”,很多编程语言都支持正则表达式,本文仅仅讨论JavaScript中的正则表达式。创建一个正则表达式第一种方法:var reg = /pattern/;第二种方法:var reg = new RegExp('pattern');正则表达式的exec方法简介语法:reg.exec(str);其中str为要执行正则表达式的目标字符串。例如:将会输出test,因为正则表达式reg会匹配str(‘testString’)中的’test’子字符串,并且将其返回。我们使用下面的函数来做匹配正则的练习:function
阅读全文
expression解决IE6下固定定位的兼容
摘要:本文所使用的技巧是用了一条 Internet Explorer 的 CSS 表达式 (expression) 。你不可以直接使用该表达式,因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用 eval 包裹你的语句。如何解决“振动”的问题?显然 IE 有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重新渲染页面,这个时候它就会重新处理 CSS 表达式。这会引起一个丑陋的“振动” bug ,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。 解 决此问题的技巧就是使用 background-attachment:fixed 为 body
阅读全文
JavaScript表单验证
摘要:验证QQ号码<inputtype="text"value="1321"onblur="alert(/^[1-9]\d{4,9}$/.test(this.value))">cript表单验证年龄href="http://www.ijavascript.cn/yanzheng/validate-198.html"<<b>JavaScript表单验证年龄JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现。//检查年龄function isAge(str){ va
阅读全文
[转载]Javascript中批量定义CSS样式 - cssText属性
摘要:原文地址:Javascript中批量定义CSS样式-cssText属性作者:APJE给一个html元素设置css属性,传统做法:var mybox= document.getElementByIdx("mybox");mybox.style.width ="200px";mybox.style.height ="70px";mybox.style.display ="block";这样写很烦,尤其是很多的时候,一个样式一行,天啊,那是很大的工作量!这时候可以使用cssText属性使用cssText属性,想怎么写就怎
阅读全文
DIV透明度设置
摘要:<div id="Layer1" style="position:absolute; width:200px; height:115px; left:50px;top:50px;filter:alpha(opacity=30);opacity: 0.6;background-color:blue"></div>opacity值越大,透明度越高FF<script>document.getElementByIdx_xx_x("Layer1").style.opacity= "0.3"
阅读全文
浙公网安备 33010602011771号