HTML & JS & DOM & CSS
关注
分享
扫一扫
文章平均质量分 64
SailingLee
这个作者很懒，什么都没留下…
展开
-
执行ajax加载页面中的js总结
事件背景有一个公用页面需要在多个页面调用，其中涉及到部分js已经写在了公用页面中，通过ajax加载该页面后无法执行其中的js。解决思路1. 采用附加一个iframe的方法去执行js，为我等代码洁癖者所不齿。2. 使用document.write输出代码，我等简洁主义者所不愿。3. 最简单的方法是把js放到需要调用的父页面，那想这样的公用页面，每个地方调用都要写入一次，代码冗余。...原创 2010-12-01 16:09:22 · 333 阅读 · 0 评论 -
一个CSS培训教程 —— 是个好东西
好玩意原版出自下面的链接：http://sofish.de/1725http://sofish.de/file/PPT/css101.pdf原创 2011-03-23 10:42:04 · 97 阅读 · 0 评论 -
js实现键盘选择html元素
原理：根据待选择元素与当前选中元素的最短距离来判断下一操作应该选中哪个元素。 代码如下：/*var arg = { elements:[], current:jqueryObj || index,//index is in elements initCallback:function(){}, moveCallback:function(){}, ensureC...2011-03-28 16:09:59 · 504 阅读 · 0 评论 -
setTimeout和setInterval参数说明
Timers 定时器setTimeout(callback, delay, [arg], [...])To schedule execution of callback after delay milliseconds. Returns a timeoutId for possible use withclearTimeout(). Optionally, you can also ...原创 2011-08-08 21:42:53 · 137 阅读 · 0 评论 -
预加载资源研究
什么是预加载所谓预加载，就是通过一定的编程方法，使浏览器在空间的时候，在后台通过HTTP请求访问某些资源。当用户在一段时间后真正使用这些资源的时候，相比一个完整的（返回200）的请求，可以更快地获得这些资源（返回304或者直接命中浏览器缓存）。预加载在部分情况下有着十分重要的意义，特别是当确定某些资源用户在短时间内会使用，如分页列表的上一页和下一页、以及一些常用的LOGO之类的图片等...原创 2011-08-10 09:36:24 · 202 阅读 · 0 评论 -
High Performance Javascript
见附件。原创 2011-08-10 09:53:21 · 109 阅读 · 0 评论 -
Leak Free Javascript Closures
Javascript closures can be a powerful programming technique. Unfortunately in Internet Explorer they are a common source of memory leaks. Therefore I propose a method to create closures that don't ...原创 2011-10-29 16:56:26 · 125 阅读 · 0 评论 -
Event
// written by Dean Edwards, 2005// with input from Tino Zijdel, Matthias Miller, Diego Perini// http://dean.edwards.name/weblog/2005/10/add-event/function addEvent(element, type, handler)...原创 2011-10-29 16:58:48 · 83 阅读 · 0 评论 -
JavaScript操作某个元素的CSS
需求分析使用JavaScript做前端开发的时候，经常需要操作DOM和CSS来改变界面，而做简单动画时也必须操作css。实现方法以前我一直使用DOM对象的style属性来操作该元素的css，类似下面的代码： < !DOCTYPE html><html> <head> <title>TITLE</ti...原创 2012-06-20 13:15:44 · 103 阅读 · 0 评论 -
js string 截断中英文字串
String.prototype.len=function(){ return this.replace(/[^\x00-\xff]/g,"rr").length; }String.prototype.sub = function(n){ var r = /[^\x00-\xff]/g; if(this.rep...原创 2011-03-18 11:01:16 · 153 阅读 · 0 评论 -
JavaScript Event学习补遗：addEventSimple
这里有个addEventSimple和removeEventSimple函数，有时候需要不那么显眼的事件处理程序的时候我就用这两个函数注册。function addEventSimple(obj,evt,fn) { if (obj.addEventListener) obj.addEventListener(evt,fn,false); else i...原创 2011-10-15 10:41:22 · 110 阅读 · 0 评论 -
JavaScript Event学习：按键的检测
题外：iteye真够垃圾，每天只许发五篇文章，怕什么spam，垃圾。检测用户的按键是事件处理程序的一个很特别的环节。这一章我们着力解决一些非常棘手的问题，并且制定一个完备的表格。第一个问题是对于按键事件来说根本就没有标准，按照规范说的：包含键盘等输入设备的事件模型会在以后的DOM规范中作出解释。正如我们了解到的，浏览器在最开始设计的时候并没有一个标准，大家都像做实验似的，最后的成...原创 2011-10-15 10:38:27 · 136 阅读 · 0 评论 -
javascript通用循环遍历方法forEach
循环遍历一个元素是开发中最常见的需求之一，那么让我们来看一个由框架BASE2和Jquery的结合版本吧. 01var forEach = (function(){02 //数组与伪数组的遍历03 var _Array_forEach = function (array, block, co...原创 2011-07-15 15:15:41 · 224 阅读 · 0 评论 -
伪数组
这篇文章来回答javascript通用循环遍历方法forEach中最后提到的关于伪数组的问题。什么是伪数组能通过Array.prototype.slice转换为真正的数组的带有length属性的对象。这种对象有很多，比较特别的是arguments对象，还有像调用getElementsByTagName,document.childNodes之类的，它们都返回NodeList对象都属...原创 2011-07-15 15:23:32 · 81 阅读 · 0 评论 -
JavaScript Event学习：事件的访问
现在我们已经注册了事件处理程序，对于事件我们还想更深入的了解。我们想知道事件发生时候的鼠标位置，我们想知道用户按下了哪些键。这些都是可能的，虽然这部分有很多烦人的浏览器兼容性问题。（这里可以快速查看浏览器兼容性列表）。 要读出事件的属性，必须要先能访问到事件。 浏览器兼容性 站在浏览器战争的角度看，Netscape实现了一个访问模型（后来被W3C做借鉴）和很多的事件属...原创 2011-10-14 14:11:34 · 98 阅读 · 0 评论 -
JavaScript Event学习：事件属性
当我们想去读一读关于Event的一些资料时，常常会湮没在大量的属性里面，这些属性其中的大多数不能良好的运行在大多数的浏览器。这里有event的兼容性列表。 我不打算给这些属性列个表，因为那些情况实在是太让人晕头了，而且对你的学习也不会有一点点的帮助。在写5段代码前我先要问关于浏览器的5个问题。 1、event的类型（type）是什么？ 2、哪一个HTML元素是event的目...原创 2011-10-14 14:19:14 · 111 阅读 · 0 评论 -
JavaScript Event学习：事件的顺序
基本问题很简单。假设你的一个元素包含在另外一个元素中。-----------------------------------| element1 || ------------------------- || |element2 | || -----------------...原创 2011-10-14 14:58:18 · 211 阅读 · 0 评论 -
JavaScript Event学习：鼠标事件
先看看都有哪些鼠标事件：mousedown,mouseup_and_click,dblclick,mousemove和mouseover mouseout。然后还会解释一下relatedTarget,fromElement和toElement这些事件属性。最后是微软的 mouseenter和mouseleave事件。 浏览器的兼容性问题，可以在浏览器兼容性列表查看。 例子 ...原创 2011-10-14 15:31:59 · 138 阅读 · 0 评论 -
JavaScript Event学习：一些可替换的事件对
这一章我们打算寻找哪些事件可以用来仿真鼠标事件。注意这一系列测试不包括屏幕阅读器。因为我不能满足所有的条件，因此测试也有局限性。这个测试目标仅仅只是那些在图形界面下的浏览器中不使用鼠标的用户。 我假设这些测试一样可以用来在一些移动设备上。因为条件不足，所以也不能测试。很多时候在移动设备上表现总是不尽如人意。 总结 不幸的是，我们不能制定一个严格的鼠标事件和非鼠标的一对一的方...原创 2011-10-14 15:37:29 · 485 阅读 · 0 评论 -
我在工作中用到的几个轻量级的js库
库名描述fn集成了jquery作者封装的一些函数以及我从网上找的一些和自己写的一些简单的函数FX.Animate一个js动画库microajax号称最小的ajax库nc.loader控制css、js加载的库reflection产生图片倒影的js库taffydbjs实现的db库fx另一个轻...原创 2011-03-17 16:31:26 · 138 阅读 · 0 评论 -
JavaScript获取url传参的几个方法
需求分析随着浏览器端JavaScript编程的流行，经常碰到要分析和获取url上带的参数。正则表达式实现先看代码：function getUrlParam(name) { var reg = new RegExp("[?&]" + name + "=([^?&]*)[&]?", "i"); var match = locati...原创 2012-06-20 13:23:25 · 274 阅读 · 0 评论 -
利用CORS实现跨域请求
跨域请求一直是网页编程中的一个难题，在过去，绝大多数人都倾向于使用JSONP来解决这一问题。不过现在，我们可以考虑一下W3C中一项新的特性——CORS（Cross-Origin Resource Sharing）了。 本文的所有代码均来自http://www.html5rocks.com/en/tutorials/cors/，如果您对其中的任何技术细节存在疑问，请以原文为准。客户...原创 2012-06-21 10:12:16 · 369 阅读 · 0 评论 -
服务端解决跨源共享
跨源资源共享是web开发领域中一个非常有趣的话题，互联网上有很多朋友讨论这个话题。跨源共享的官方文档可到这里查看，当然也有很多朋友给出各式各样的解决方案，确实都是OK的，但今天我分享的这套解决方案可能在以往的文章中很少看见—–我们如何在服务器端解决跨源资源共享的问题。做过服务端开发的同学都知道服务器每次响应(http response)都会送回客户端一个http header，而这些ht...原创 2012-06-21 10:18:54 · 225 阅读 · 0 评论 -
CSS实现相对浏览器窗口定位彻底研究
Web Developer / Designer 经常需要将一个元素“固定”在页面的某个位置。例如弹出窗口、漂浮广告位等……本文将详细介绍简单CSS实现元素相对于浏览器窗口进行定位的方法。position:fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。良好支持 W3C 标准的浏览...原创 2014-09-05 18:33:44 · 1638 阅读 · 0 评论 -
innerHTML插入<style>元素
通过innerHTML写入<style>元素没有得到浏览器很好的支持，IE9、Opear 9、Chrome高版本和Firefox高版本支持以直观的方式通过innerHTML插入<style>元素，例如： div.innerHTML = "<style type=\"text/css\">body {background-color: red;}<...原创 2014-09-05 18:37:20 · 1506 阅读 · 0 评论 -
JavaScript插入动态脚本
动态脚本指的是在页面加载时不存在，但将来的某一时刻通过修改该DOM动态添加的脚本。和操作HTML元素一样，创建动态脚本也有两种方式：插入外部文件和直接插入JavaScript代码。动态加载外的外部JavaScript文件能够立即运行，比如下面的<script>元素。 <script type="text/javascript" src="client.js">...原创 2014-09-05 18:47:26 · 421 阅读 · 0 评论 -
Text 类型
文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML字符，但不能包含HTML代码。Text节点具有以下特征：nodeType的值为3；nodeName的值为“#text”；nodeValue的值为节点所包含的文本；parentNode是一个Element；不支持（没有）子节点。可以通过nodeValue属性或data属性访...原创 2014-09-05 18:52:54 · 1181 阅读 · 0 评论 -
今天再讲下js里的继承
js的继承说简单也很简单，请看： function SuperClass(){...}SuperClass.prototype.xxx = function(){...}...function SubClass(){...}SubClass.prototype = new SuperClass(); 看着是不是很简单？不过问题来了。 ...原创 2014-09-18 00:27:41 · 209 阅读 · 0 评论 -
遍历dom tree是一件相当耗时的事情
遍历dom tree是一件相当耗时的事情，尤其是在遍历的同时还做get/set Attribute的事情，尤其是在一个dom上做了很多步的操作。dom tree小还好点，如果有几千上万个节点，那将是灾难。如果你的逻辑的确需要遍历dom tree，那一定要慎重，在实现之前，再考虑是否有更好的方法，比如：预编译。...原创 2014-09-23 01:15:13 · 346 阅读 · 0 评论 -
a simple mvvm library - bird
see here：https://github.com/iamweilee/bird.git原创 2014-10-09 18:26:54 · 213 阅读 · 0 评论 -
MutationObserver
MutationObserverMutationObserver给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力.该API设计用来替换掉在DOM3事件规范中引入的Mutation事件. 构造函数MutationObserver()该构造函数用来实例化一个新的Mutation观察者对象.MutationObserver( function ca...原创 2014-10-27 15:29:22 · 285 阅读 · 0 评论 -
JavaScript插入动态样式
能够把CSS样式包含到HTML页面中的元素有两个。其中，<link>元素用于包含来自外部的文件，而<style>元素用于指定嵌入的样式。与动态脚本类似，所谓动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中。我们以下面这个典型的<link>元素为例： <link rel="stylesheet" type="...原创 2014-09-05 18:07:59 · 231 阅读 · 0 评论 -
循环数组的逻辑怎么写
应用场景这样的：var imgUrls = [ '1.jpg', '2.jpg', '3.jpg', '4.jpg'];现在想做一个Carousel的插件，要求点击某个按钮的时候可以一直循环看图片：1.jpg, 2,jpg, 3.jpg, 4.jpg,1.jpg,2.jpg.... 如此循环下去，反之亦然。。 怎么去做数据层面的处...原创 2015-03-23 10:24:15 · 434 阅读 · 0 评论 -
再理解jQuery；delete原型属性
以前用jQuery的时候曾粗略看了它的源码，但却不求甚解。以致一直以为jQuery()返回的是一个数组，实际上只是一个PlainObject而已。alert({}.toString.call(jQuery())) //显示为[object Object]现在想想也觉得自己无知。倘若真是数组，那么jQuery的设计岂不是侵入式的修改了Array的原型。这种设计并不被推荐，jQuery又怎...原创 2014-05-13 22:05:12 · 272 阅读 · 0 评论 -
Javascript定义类（class）的三种方法
程序员们做了很多探索，研究如何用Javascript模拟”类”。本文总结了Javascript定义”类”的三种方法，讨论了每种方法的特点，着重介绍了我眼中的最佳方法。 在面向对象编程中，类（class）是对象（object）的模板，定义了同一组对象（又称”实例”）共有的属性和方法。Javascript语言不支持”类”，但是可以用一些变通的方法，模拟出”类”。一、构造函数法这是经...原创 2012-07-12 12:35:40 · 112 阅读 · 0 评论 -
JavaScript 操作 Cookie
从事web开发也有些日子了，cookie 是个啥差不多能说明白，可是实际自己一上手操作就是得去搜索(你们懂的)，结果被鄙视了...所以就写一篇博文做为自己的学习笔记，嘿嘿，博客的好处在此体现出来了。 什么是 Cookie “cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来...原创 2012-07-16 11:18:41 · 101 阅读 · 0 评论 -
JavaScript实现 页面滚动图片加载
又到了这个月的博客时间了，原计划是打算在这个月做一个的功能较炫的拖拽类，可是感觉想的太容易，实现起来遇见不少问题，如果技术分享做不到有助于人反而害人，那就歇菜了，所以还是等本人多找些资料研究研究，“拖拽类“先放放吧，下面开始正题... 为什么写这篇文章？ 1.优化页面很实用的方法，技术实现不难； 2.搜索了相关内容的文章，好像都是用jQuery的方法，可是如果不用jQuer...原创 2012-07-16 14:29:00 · 116 阅读 · 0 评论 -
说说我的web前端之路,分享些前端的好书
WEB前端研发工程师，在国内算是一个朝阳职业，这个领域没有学校的正规教育，大多数人都是靠自己自学成才。本文主要介绍自己从事web开发以来(从大二至今)看过的书籍和自己的成长过程，目的是给想了解JavaScript或者是刚接触JavaScript的朋友，介绍如何通过循序渐进的看书来学习javascript。 一. 入门级 ：就是有一定的基础(比如最常见的HTML标签及其属性、事件、方法...原创 2012-07-16 14:38:54 · 117 阅读 · 0 评论 -
Fiddler - 前端开发值得拥有
最近换了新工作，搬了新家，换了新室友，一切都在重新开始。因为家里网还没装好，工作之余上网都得去网吧，所以园子最近比较少上了，可是博客可不能断，就为一口气，坚持就是胜利。好吧，叨叨完了，下面开始正文... 写这篇文章的目的何在： 1.本人还算喜欢看书，JavaScript的相关书看过一些，书本上总能看见对JavaScript类似的评语或者评价 - “JavaScript调试困难”。...原创 2012-07-16 14:41:54 · 114 阅读 · 0 评论 -
undefined 和 void 0 的区别
在读backbone源码时看见这么一段代码： if (options.unset) for (attr in attrs) attrs[attr] = void 0; 调试后发现attrs中的属性都为undefined，既然如此为何不直接用undefined呢？基于此，搜索了相关文章，按照我的理解这一篇解释的比较合理：http://stackoverflow.com/questio...原创 2012-07-20 11:15:37 · 249 阅读 · 0 评论