非IE浏览器增加 contains 方法:

if (typeof (HTMLElement) != "undefined") {
    HTMLElement.prototype.contains = function (element) {
        while (!!(element && element.nodeType == 1)) {
            if (element== this) return true;
            element= element.parentNode;
        }
        return false;
    }
}

在 mouseover 事件执行时先进行如下判断,结果为 true 时再执行方法体:

var element = e.fromeElement || e.relatedTarget; //此处 e 为 mouseover event 事件对象;
if (!this.contains(element)) mouseOverFunc();

在 mouseout 事件执行时先进行如下判断,结果为 true 时再执行方法体:

var element = e.toElement || e.relatedTarget; //此处 e 为 mouseover event 事件对象;
if (!this.contains(element)) mouseOutFunc();

在IE中,所有的HTML元素都有一个contains方法,它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发,如果内部元素导致了不需要的事件被触发,那我们就忽略这个事件。

event.fromElement 指向触发 onmouseover 和 onmouseout 事件时鼠标离开的元素;

event.toElement 指向触发 onmouseover 和 onmouseout 事件时鼠标进入的元素。

那么上面两行代码的含义就分别是:

当触发onmouseover事件时,判断鼠标离开的元素是否是当前元素的内部元素,如果是,忽略此事件;

当触发onmouseout事件时,判断鼠标进入的元素是否是当前元素的内部元素,如果是,忽略此事件;

这样,内部元素就不会干扰外层元素的 onmouseover 和 onmouseout 事件了。

使用 Javascript 的 window.open 方法弹出窗口后,弹出窗口(子窗口)与母窗口之间互相访问对象的方法:

子窗口访问母窗口对象的方法:子窗口使用 window.opener 即引用母窗口,比如:

window.opener.setStr(); //执行母窗口的 setStr 方法;

母窗口访问子窗口对象的方法:母窗口在 window.open 执行时把它引用给一个变量,这个变量既是子窗口的引用,比如:

var w = window.open("new.html"); //变量 w 既是弹出窗口的引用;
w.setStr(); //执行弹出窗口的 setStr 方法;

GET和POST两种方法都是将客户端数据发送到服务器

HTTP标准认为,POST是用于创建或修改资源,资源的内容会被编录到HTTP请求的内容中。例如:我们要在数据库中插入新的数据或者编辑某一条数据。GET则是用于查询资源。例如:搜索引擎,我们要在数据库中查询一条或多条数据。一个实际的问题,使用GET方法时可能会产生很长的URL,或许会超过某些浏览器与服务器对URL长度的限制,此时则用POST方法。

当请求的URL与收集的数据及HTML表单内输入的字段名称的总长度不超过1024个字符且请求是为了查找资源,HTML表单数据仅用来帮助查找时则用GET方法。

当使用GET方法时表单收集到的数据可能让URL过长或请求是为了创建或修改资源时则使用POST方法。

本文章不断更新中…

1. firefox、safari、chrome、opera 四款浏览器 script 标签的 src 地址文件不存在时不会触发此 script 标签的 load 事件。opera 浏览器的 script 标签的 src 地址文件是一个空文件(0字节)的话会当作文件不存在来处理,也不会触发此 script 标签的 load 事件。IE浏览器无上述情况。

2. opera 浏览器下文本框设置背景图片的同时设置背景颜色,背景图片失效,只会显示背景颜色,不设置背景颜色情况下会显示背景图片。

阅读全文»

jLoader 引用地址:http://code.joyfulboy.cn/js/jloader/1.1.1/jloader.js 使用方法:

<script type="text/javascript">

 var loader = jLoader.create();
 //创建 jLoader 对象;

 loader.deps = {
     "http://code.joyfulboy.cn/js/prototype-extend/1.0.0/prototype-extend.js": ["http://code.joyfulboy.cn/js/prototype/1.6.1/prototype-1.6.1.js"]
 }
 //设置文件加载管理器,控制文件加载顺序;

 loader.load("http://code.joyfulboy.cn/js/prototype-extend/1.0.0/prototype-extend.js", function(paths, head) {
     alert(paths);
 });
 //载入外部JS并执行函数;

</script>

jLoader.deps是一个对象,控制文件加载顺序。几个例子说明:

jLoader.deps = { "1.js": ["2.js", "3.js"] }

jLoader.load("1.js");

当利用load方法载入1.js时系统会先载入2.js和3.js后才会载入1.js。

演示:http://demo.joyfulboy.cn/js/jloader/1.1.1/

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

javascript 在不同浏览器下取区域高度宽度方法

<script type=”text/javascript”>// <![CDATA[
function getInfo(){
var s = “”;
s += “网页可见区域宽:”+ document.body.clientWidth;
s += ” 网页可见区域高:”+ document.body.clientHeight;
s += ” 网页可见区域宽:”+ document.body.offsetWidth + ” (包括边线和滚动条的宽)”;
s += ” 网页可见区域高:”+ document.body.offsetHeight + ” (包括边线的宽)”;
s += ” 网页正文全文宽:”+ document.body.scrollWidth;
s += ” 网页正文全文高:”+ document.body.scrollHeight;
s += ” 网页被卷去的高(ff):”+ document.body.scrollTop;
s += ” 网页被卷去的高(ie):”+ document.documentElement.scrollTop;
s += ” 网页被卷去的左:”+ document.body.scrollLeft;
s += ” 网页正文部分上:”+ window.screenTop;
s += ” 网页正文部分左:”+ window.screenLeft;
s += ” 屏幕分辨率的高:”+ window.screen.height;
s += ” 屏幕分辨率的宽:”+ window.screen.width;
s += ” 屏幕可用工作区高度:”+ window.screen.availHeight;
s += ” 屏幕可用工作区宽度:”+ window.screen.availWidth;
s += ” 你的屏幕设置是 “+ window.screen.colorDepth +” 位彩色”;
s += ” 你的屏幕设置 “+ window.screen.deviceXDPI +” 像素/英寸”;
alert (s);
}
// ]]></script>

javascript控制css中style.height和style.width时应注意px单位问题

1、document.getElementById(‘div’).style.height=100;    //这样写以IE里会正确执行,把ID为div元素高改为100象素。

2、但是读的时候,alert(document.getElementById(‘div’).style.height + 10);    //这样将会出错,因为读取style.height的时候,会以”100px”的形式出现。

3、到了FF里,不光读出来的是”100px”,写的时候,也必须是document. getElementById(‘div’).style.height=’100px’;这样才能有效果。

在线演示地址:http://demo.joyfulboy.cn/js/loader/

JS调用方法:

<script type=”text/javascript” src=”http://www.joyfulboy.cn/demo/js/loader/js/loader.js”></script>
<script type=”text/javascript”>
<!–
开启载入效果(“载入中…”);
//–>
</script>

wordpress_logo

在线工具

2010年03月02日 | 前端技术

基于 javascrip 的在线颜色取色器

工具地址:http://tool.joyfulboy.cn/online/colorpicker/

基于 javascrip 的在线自动刷新页面工具

工具地址:http://tool.joyfulboy.cn/online/pv/

js写的日期选择器,摘自discuz论坛程序。可用于生日等日期选择。不多说了,看演示。

演示地址:http://demo.joyfulboy.cn/js/calendar/

CSS手册

参考手册下载

2010年03月02日 | 资源

HTML参考手册:下载此文件

HTML参考手册:下载此文件

XHTML参考手册:下载此文件

DHTML参考手册:下载此文件

XML参考手册:下载此文件

XML第二版英文版参考手册:下载此文件

HtmlDom参考手册:下载此文件

CSS2.0参考手册:下载此文件

CSS参考手册:下载此文件

JavaScript参考手册:下载此文件

JavaScript1.5英文版参考手册:下载此文件

PHP5参考手册:下载此文件

MySql5.1参考手册:下载此文件