Javascript | 快乐心情

存档

‘javascript’ 分类的存档

jQuery1.4.1 API 中文参考文档下载，

2010年5月26日 joyboy 没有评论

jQuery1.4.1 API中文参考文档放在自己电脑上很久了，有一朋友要，就想着挂上来，直接去下载算了，也方便其他的朋友们，呵呵。
下载地址：jQuery1.4.1 API 中文参考文档
在jQuery 1.4中，很多常用的jQuery方法重写过了，这些方法的改变使得它更容易使用，对性能也是一个大的提升，具体的改变，网上有很多文章介绍，这里就不说了，呵呵。

分类: javascript 标签: jquery, 下载

js对cookie的写入，读取及删除

2010年1月7日 joyboy 没有评论

忘记了从那篇网文拷贝过来的，这里的js对cookie的写入，读取及删除方法，都很实用，呵呵，宣传下…

/*
name:cookie 名
value:cookie 值
*/
//写入cookie
function SetCookie(name,value)
{
var Days = 30; //此 cookie 将被保存 30 天
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

///删除cookie
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

//读取cookie
function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null)
return unescape(arr[2]);
return null;
}

分类: javascript 标签: cookie, javascript, 前端

javascript 中的全部变量与局部变量

2009年9月23日 joyboy 没有评论

因为一个面试题，我今天测试了下，居然我写的答案是错的，下面是大概意思的源程序：

var a = 100;
function showout(){
   var fullrange = 2 * a;
   var a = 200;
   var halfrange = a / 2;
   alert(fullrange);
   alert(halfrange);
}

开始我想的是既然在function里面定义了局部变量 a ，那function外定义的全局变量在function里面是不会起作用的，所以fullrange和halfrange的值应该分别是：400和100。因为当时是笔试，而不是上机（上机也不会出现这问题，呵呵），所以得出这个答案，面试老师看了之后回答是正确结果，我放心了。
但面试还是有几道题没有做出来，回家仔细的想了下，包括这道题，我在电脑上一测试，俺的天，得到fullrange的值居然是NaN,大呼怎么可能…. 于是我反复测试，如果我把function里面定义的：var a = 200;改为：a = 200;那么得出fullrange和halfrange的值的答案分别是：200和100，想了下其实如果我这里这样改的话，那么function里面的a就不是局部变量了，而是全局变量a，改变了全局变量a的值而已，所以得到值也就200和100了。那我就纳闷了，为什么定义了局部变量，而得不到fullrange的值呢，而且是个NaN，说明var fullrange = 2 * a;中a是没有定义的即typeof a为undefined。那么这也只能说明，在JavaScript中的function里面是严格按照顺序执行的，在function里面如果定义了与全局变量名称相同的局部变量，那么function里面引用到这个变量的都以局部变量来处理，用 this.变量名字或 window.变量名字才能引用function外部与变量名字相同的全局变量。
这里的全局变量和局部变量搞的很头晕了，我个人认为是:
在JavaScript执行代码之前，先处理变量声明，不管这个变量在什么位置，如果在function中变量显示声明，即变量在赋值语句中出现在左边，但没有用var声明，则把这个变量看成时全局变量。在function中，如果存在着用var声明的局部变量的名称与全局变量的名称相同，那么function中引用这个变量值的时候在应为局部变量的值，除非用this或window来修饰这个变量，才能取到全局变量的值。

分类: javascript 标签: function, javascript, 全局变量, 局部变量

javascript中二进制八进制十进制十六进制相互转换

2009年9月21日 joyboy 没有评论

在有的时候，我们需要把某些十进制数字，或则字母转换成二进制，或八进制，或十六进制，在JavaScript中，像这种进制很容易转换，如：
十进制转换成其他进制：

objectname.toString([radix])

objectname 必选项。要得到字符串表示的对象。

radix 可选项。指定将数字值转换为字符串时的进制。

radix 的最小值是 2，最大值是 36（用 10 个数字和 26 个英文字母表示）。

返回对象的字符串表示。

var num = 10;
document.write(m.toString(2) + "<br>"); // 显示为 1010
document.write(m.toString(8) + "<br>"); // 显示为 12
document.write(m.toString(10) + "<br>"); // 显示为 10
document.write(m.toString(16) + "<br>"); // 显示为 a，注意是小写。

其他进制转换成十进制:
parseInt(numstring, [radix])

numstring 必选项。要转换为数字的字符串。

radix 可选项。在 2 和 36 之间的表示 numstring 所保存数字的进制的值。如果没有提供，则前缀为 ’0x’ 的字符串被当作十六进制，前缀为 ’0′ 的字符串被当作八进制。所有其它字符串都被当作是十进制的。

返回由字符串转换得到的整数。

document.write(parseInt(1010, 2) + "<br>"); // 显示为 10
document.write(parseInt(12,  + "<br>"); // 显示为 10
document.write(parseInt(10, 10) + "<br>"); // 显示为 10
document.write(parseInt("a", 16) + "<br>"); // 显示为 10
document.write(parseInt("A", 16) + "<br>"); // 显示为 10

分类: javascript 标签: javascript

attachEvent 与 addEventListener 对同一物件事件多次绑定的触发顺序

2009年9月20日 joyboy 没有评论

再来讲述JavaScript中的attachEvent 与 addEventListener使用方法，在有的时候，可以想像一下使用注册事件方法对同一物件事件进行多次绑定，那么这里就存在了一个触发顺序，看下面实例：

<!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=gb2312">
<script type="text/javascript">
window.onload=function(){
var testbut = document.getElementById("btn_test");
var info = document.getElementById("info")
 if (window.attachEvent)
{
    //IE
    testbut.attachEvent("onclick", function () { info.innerHTML += "1" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "2" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "3" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "4" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "5" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "6" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "7" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "8" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "9" + "
"; });
}
else
{
    //Firefox
    testbut.addEventListener("click", function () { info.innerHTML += "1" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "2" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "3" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "4" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "5" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "6" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "7" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "8" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "9" + "
"; }, false);
}
}
</script>
</head>
<body>
<input id="btn_test" type="button" value="测试" />
<div id="info"></div>
</body>
</html>

IE下输出的结果为：
4 6 8 9 7 5 3 2 1
Firefox下输出的结果为：
1 2 3 4 5 6 7 8 9
从这可以看出在IE下它的触发顺序是乱七八糟的，而在火狐Firefox下，先绑定的先执行，以后得注意点了….

分类: javascript 标签: addEventListener, attachEvent, javascript

JavaScript 中的attachEvent与addEventListener方法

2009年9月18日 joyboy 没有评论

很久没用又忘了在JavaScript中注册事件的使用方法了，这里再回顾下：因为浏览器的不同，在IE下我们用的是attachEvent()方法，而在Mozilla系列，并不支持该方法，需要用到addEventListener(),下面举例说明：

<!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=gb2312" />
<title>TesyJS</title>
</head>
<body>
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
<script type="text/javascript">
function method1(){
alert("事件触发了");
 }
 var but = document.getElementsByTagName("button");
//IE下用addEventListener，
//Mozilla系列（如FireFox)下用addEventListener
 if(navigator.userAgent.toLowerCase().indexOf("msie")>-1)
    but[0].attachEvent("onclick",method1);
else
   but[0].addEventListener("click",method1,false);
</script>
</body>
</html>

其中ie浏览器下用的结构为：

element.attachEvent(type,listener)

其中element是要绑定函数的对象,括号中只带2个参数：

type是事件名称，事件名带”on”（如onclick、onfocus）。

listener是要绑定的函数了，记住不要跟括号。

在Mozilla系列的浏览器下，用的结构为：
element.addEventListener(type,listener,useCapture)
其中element是要绑定函数的对象,括号中带3个参数：

type是事件名称，要注意的是”onclick”要改为”click”,”onblur”要改为”blur”,也就是说事件名不要带”on”。

listener当然就是绑定的函数了，记住不要跟括号.

最后一个参数是个布尔值，表示该事件的响应顺序,auserCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false,因为看下面例子(只在Mozilla系列（如Firefox)中测试)：

<!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=gb2312" />
<title>TesyJS</title>
<script type="text/javascript">
window.onload=function(){
/**
   *改变第三个参数的值，可以发现当都为true的时候，从外到内依次触发事件
   *当都改为false的时候，从内到外依次触发事件
   *当一个true一个false之时，哪个为true先触发哪个的事件。
   **/
document.getElementById("div_test").addEventListener("click",test1,true); document.getElementById("btn_test").addEventListener("click",test2,true);
 }
 function test1(){ alert("外部div层触发") }
 function test2(){ alert("内部input按钮触发") }
</script>
<body>
 <div id="div_test">
   <input id="btn_test" type="button" value="测试" />
 </div>
</body>
</html>

分类: javascript 标签: addEventListener, attachEvent, javascript

javascript 中的location.pathname

2009年9月18日 joyboy 没有评论

今天在弄FCKediter的时候，看了下源码，发现在源码中用到：

location.pathname;

这在之前我没怎么注意过，所以研究研究。
location.pathname：
返回URL的域名（域名IP）后的部分。例如 http://www.joymood.cn/wordpress/返回/wordpress/，又或则 http://127.0.0.1/index.html 返回/index.html，注意是带url的域名或域名IP，在磁盘上随便建个Html文件进行location.pathname测试，如浏览器上的路径是：
C:\Documents and Settings\Administrator\桌面\testjs.html，
这样，得到的结果是:
/C:\Documents and Settings\Administrator\桌面\testjs.html
既然提到这了，那我们就分析下下面的URL：
http://www.joymood.cn:8080/test.php?user=admin&pwd=admin#login
想得到整个如上的完整url，我们用：location.href;
得到传输协议http:,我们用：location.protocol;
得到主机名连同端口www.joymood.cn:8080，我们用：location.host;
得到主机名www.joymood.cn，我们用：location.hostname;
得到主机后部分不包括问号?后部分的/test.php，就用我们刚才讲的：location.pathname;
得到url中问号?之后井号#之前的部分?user=admin&pwd=admin，我们就用：
location.search;
得到#之前的部分#login，我们就用location.hash;
经过上面的讲述，我们可以通过location对象的某些属性得到一个完整URL的各个部分。

分类: javascript 标签: javascript, location对象, 属性

javascript字符串的连接优化

2009年9月9日 joyboy 1 条评论

在很多时候，我们在web前端技术中用到JavaScript中的字符串连接操作，一般都会用“+”运算符，如：

var stra="abc";
stra+="def";

上面的代码执行的步骤如下：
(1) 创建存储”abc”的字符串。
(2) 创建存储”def”的字符串。
(3) 创建存储连接结果的字符串。
(4) 把str的当前内容复制到结果中。
(5) 把”def”复制到结果中。
(6) 更新stra，使它指向结果。
每次完成字符串连接都会执行步骤2到6，使得这种操作非常消耗资源。如果重复这一过程几百次，甚至几千次，就会造成性能问题。
能不能就像java里面，字符串通连接常都不用“+”运算符，而用StringBuffer类中的append方法来达到性能上的优化，事实也证明在java里面，后者要比前者在性能方面得到很大的提高。于是利用JavaScript仿造java中的StringBuffer类，用Array对象存储字符串，然后用join()方法（参数是空字符串）创建最后的字符串。想像用下面的代码代替前面的代码：

var arr = new Array();
arr.push("abc");
arr.push("def");
var str = arr.join("");

这样，无论在数组中引入多少字符串都不成问题，因为只在调用join()方法时才会发生连接操作。此时，执行的步骤如下：
(1) 创建存储结果的字符串。
(2) 把每个字符串复制到结果中的合适位置。

总结: 如何程序中需要多次进行字符串连接,最好使用Array的join方法.
下面我把这个功能封成一个类:

function StringBuffer(){
　　　　this._strings=new Array;
}
StringBuffer.prototype.append=function(str){
　　　　this._strings.push(str);
}
StringBuffer.prototype.toString=function(){
　　　　returnthis._strings.join("");
}

这是在《javascript高级程序设计》一书中作者所提倡的，并且用如下代码来测试这个类与“+”运算来进行字符串连接的性能：

//使用 "+=" 拼接字符串
var d=new Date();
var str="";
for(var i=0;i<10000;i++){
　　str+="test";
}
var d2=new Date();
document.writeln(d2.getTime()-d.getTime());

//使用 StringBuffer
var sd = new Date();
var str2 = new StringBuffer();
for(var i=0;i<10000;i++){
　　str2.append("test");
}
var res = str2.toString();
var ed = new Date();
document.writeln(ed.getTime()-sd.getTime());

(进行了小部分修改)
在作者当时的情况下作者得出的多次测试结果看来：
使用StringBuffer可以节省50%以上的时间。

我在网上也查了n多关于javascript字符串的连接优化的网文，即使到现在还有很多网友像追风一样，对作者这个结果深信无疑，但我今天亲自测试了一下，结果让我大吃一惊：
当然IE6及IE7上作者的结果是正确的，性能方面StringBuffer可以节省50%以上的时间。
当在火狐FF3.5上,Opera浏览器上，chrome浏览器上结果却刚好相反，“+”运算明显要高于我们写的StringBuffer方法，而且也是50%的差距，这里左下修改，发布这篇文章后有人提醒，我这里只循环10000次，如果把循环次数加到一百万(1000000)次，结果就不会令我吃惊了，确实当循环次数达到一百万的时候，测试出来的结果如作者说的一样，StringBuffer运算要快，但与”+=”运算的时间相差不大，当我用Google测试的时候，发现问题不对，结果相反，用”+=”比用StringBuffer运算要快得多。再用一千万(10000000)测试，google浏览器还是”+=”运算比用StringBuffer运算要快得多，从10000次开始，我比较下了火狐和google浏览器的连接字符串的运算速度，明显的火狐运算速度比google浏览器要快很多，随着循环的次数加大，很明显这样的运算速度火狐要比google快n倍。
最后我感觉，当我们处理javascript字符串的连接优化的时候，是不是要考虑到浏览器的问题。特别是字符串链接很多的时候。出现这种情况，可能是随着浏览器版本的提高，JavaScript的版本更新，对“+”运算进行了很多的优化而导致“+”运算明显要高于我们前面说写的StringBuffer方法。

分类: javascript 标签: javascript, 字符串的连接

JavaScript 执行顺序

2009年9月3日 joyboy 没有评论

先看下面两段js程序，先是定义式函数写法：

<script type="text/javascript">
function myfunc(){
alert("第一次调用");
};
myfunc(); //得出的是 第二次调用
function myfunc() {
alert("第二次调用");
};
myfunc(); //得出的是 第二次调用
</script>

接下来是变量式函数写法：

<script type="text/javascript">
var myfunc = function (){
alert("第一次调用");
};
myfunc(); //得出的是 第一次调用
myfunc = function () {
alert("第二次调用");
};
myfunc(); //得出的是 第二次调用
</script>

阅读全文…

分类: javascript 标签: javascript, 优先权, 函数, 执行顺序

JavaScript中的nodeName nodeType nodeValue区别

2009年8月28日 joyboy 没有评论

在JavaScript中，存在有nodeName 、nodeType、 nodeValue这三个属性，今天我们来了解下JavaScript中的nodeName 、nodeType 、nodeValue区别

nodeName

nodeName 属性含有某个节点的名称。

* 元素节点的 nodeName 是标签名称
* 属性节点的 nodeName 是属性名称
* 文本节点的 nodeName 永远是 #text
* 文档节点的 nodeName 永远是 #document

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的.

nodeValue

对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是：
元素类型                  节点类型
元素element               1
属性attr                       2
文本text                       3
注释comments          8
文档document         9

HTML文件:

<!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" />
<title>DOM标准</title>
<script type="text/javascript" src="test.js"></js>
</head>
<body>
<h1 id="h1">An HTML Document</h1>
<p id="p1">This is a <i>W3C HTML DOM</i> document.</p>
<p><input id="btnDemo1" type="button" value="取H1 Element节点值"></p>
<p><input id="btnDemo2" type="button" value="取H1 Element节点文本"></p>
<p><input id="btnDemo3" type="button" value="取Document Element节点文本"></p>
<p><input type="button" alt="这是个演示按钮" title="演示按钮提示标题" name="btnShowAttr" id="btnShowAttr" value="按钮节点演示" /></p>
</body>
</html>

JS:

function showElement(){
var element=document.getElementById("h1");//h1是一个<h1>标签
alert('nodetype:'+element.nodeType);//nodeType=1
alert('nodeName:'+element.nodeName);
alert('nodeValue:'+element.nodeValue); //null
alert('element:'+element);
}

function showText(){
var element=document.getElementById("h1");
var text=element.childNodes[0];
alert('nodeType:'+text.nodeType);  //nodeType=3
alert('nodeValue:'+text.nodeValue);  //文本节点的nodeValue是其文本内容
text.nodeValue=text.nodeValue+"abc"; //文本内容添加修改删除等等。
alert('nodeName:'+text.nodeName);
alert(text.data);   //data同样是其内容,这个属性下同样可以增删改。
}

function showDocument(){
alert('nodeType:'+document.nodeType);  //9
alert('nodeName:'+document.nodeName);
alert(document);
}

function showAttr(){
var btnShowAttr=document.getElementById("btnShowAttr"); //演示按钮，有很多属性
var attrs=btnShowAttr.attributes;
for(var i=0;i<attrs.length ;i++){
var attr=attrs[i];
alert('nodeType:'+attr.nodeType); //attribute 的nodeType=2
alert('attr:'+attr);
alert('attr.name:'+attr.name+'='+attr.value);
}
}

function demo(){
var btnDemo1=document.getElementById("btnDemo1");
btnDemo1.onclick=showElement; //按钮1取节点nodetype值
var btnDemo2=document.getElementById("btnDemo2");
btnDemo2.onclick=showText;
var btnDemo3=document.getElementById("btnDemo3");
btnDemo3.onclick=showDocument;
var btnShowAttr=document.getElementById("btnShowAttr");
btnShowAttr.onclick=showAttr;
}
window.onload=demo;

分类: javascript 标签: javascript

快乐心情

存档

jQuery1.4.1 API 中文参考文档下载，

js对cookie的写入，读取及删除

javascript 中的全部变量与局部变量

javascript中二进制八进制十进制十六进制相互转换

attachEvent 与 addEventListener 对同一物件事件多次绑定的触发顺序

JavaScript 中的attachEvent与addEventListener方法

javascript 中的location.pathname

javascript字符串的连接优化

JavaScript 执行顺序

JavaScript中的nodeName nodeType nodeValue区别

Recent Posts

Recent Comments

Hot Views

Categories

FriendLink

Archives

Meta

存档