Javascript森林

“小沈阳”版设计师

By 愚人码头, 2009年07月3日 1:17 下午

1.做图其实可痛苦的了……设计一做一改，一天就过去了；嚎~设计再一改一调，整个晚上就过去了；嚎~
2.做图最痛苦的事儿是啥，知道不？就是，图没做完，设计又改了；
3.做图最最痛苦的事儿是啥，知道不？就是，图好不容易做完了，方案全改了；
4.做图最最最痛苦的事儿是啥，知道不？就是，图做完了，狗日的客户跑了；
5.做图最最最最最痛苦的事儿是啥，知道不？就是，狗日的客户又回来了,图给删没了；

森林里的生活该日志被浏览了11次

js对输入框的字数限制

By 愚人码头, 2009年07月2日 8:34 下午

js对输入框的字数限制，限制文本框输入的字符数,若达到数目则停止其输入!代码如下：

<!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>无标题文档</title> <script type="text/javascript"> var textCounter=function (field,counter,maxlimit){ var charcnt = field.value.length; if (charcnt > maxlimit) { field.value = field.value.substring(0, maxlimit); }else { document.getElementById(counter).innerHTML=charcnt; } } </script> </head> <body> <p><span id="progressbar1">0</span>/12</P> <form><input type="text" id="maxcharfield" onFocus="textCounter(this,'progressbar1',12)" onKeyDown="textCounter(this,'progressbar1',12)" onKeyUp="textCounter(this,'progressbar1',12)" size="34"/> </form> </body> </html>

提示：你可以先修改部分代码再运行。

新手心得 | 字数限制该日志被浏览了23次

几个实用的JavaScript自定义函数

By ♀王子很壞♀,

如果你写js有一段时间了,你会发现有些代码我们需要经常的写,重复的写,我是一个比较懒的人,所以我会经常整理一些常用的好用的自定义函数,废话不说了,看我的poc.

<!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>Kinda Scripts</title> <style type="text/css"> *{margin:0;padding:0;} div,input{ border:1px #f00 dashed; margin:5px; } </style> <script type="text/javascript"> /* *[Collected&Coded by Princeb4d] *[Princeb4d@gmail.com] *[Blog:www.Princeb4d.com] */ /*$这是个使用频率超高的自定义函数,非常实用,主要是能省很多力气,很多人都喜欢只返回一个document.getElementById,是比较省事,不过我喜欢多点功能*/ var $=function(){ if(arguments.length==0) return document; else if(arguments.length==1) return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]); else return arguments; }; /*getCookie(),setCookie(),deleteCookie()正如他们的名字一样,这是三个对cookie操作的函数,各个参数对应cookie的参数,仔细看看吧*/ function getCookie( name ) { var start = document.cookie.indexOf( name + "=" ); var len = start + name.length + 1; if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) { return null; } if ( start == -1 ) return null; var end = document.cookie.indexOf( ';', len ); if ( end == -1 ) end = document.cookie.length; return unescape( document.cookie.substring( len, end ) ); } function setCookie( name, value, expires, path, domain, secure ) { var today = new Date(); today.setTime( today.getTime() ); if ( expires ) { expires = expires * 1000 * 60 * 60 * 24; } var expires_date = new Date( today.getTime() + (expires) ); document.cookie = name+'='+escape( value ) + ( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString() ( ( path ) ? ';path=' + path : '' ) + ( ( domain ) ? ';domain=' + domain : '' ) + ( ( secure ) ? ';secure' : '' ); } function deleteCookie( name, path, domain ) { if ( getCookie( name ) ) document.cookie = name + '=' + ( ( path ) ? ';path=' + path : '') + ( ( domain ) ? ';domain=' + domain : '' ) + ';expires=Thu, 01-Jan-1970 00:00:01 GMT'; } /*inArray Prototype Array object返回一个字符串是否在一个数组中,php里的函数功能,不过js里也经常用到*/ Array.prototype.inArray = function (value) { var i; for (i=0; i < this.length; i++) { if (this[i] === value) { return true; } } return false; }; /*insertAfter(),js已经自带了insertBefore,不过逻辑习惯不同,其实是一样的*/ function insertAfter(newElement,targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) {// 如果最后的节点是目标元素，则直接添加。因为默认是最后 parent.appendChild(newElement); } else { parent.insertBefore(newElement,targetElement.nextSibling);//如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面。 } } //toggle()这是个简单的开关函数 function toggle(obj) { var el = document.getElementById(obj); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = ''; } } /*getElementsByClass by Dustin Diaz js里没有这个函数实在是遗憾啊,其实非常强大,跟getElementsByTagName一样返回一个dom数组,只不过是通过class属性获得 */ function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)'); for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; } /*addLoadEvent() by Simon Willison 为window.onload添加多个处理函数,目前我还不怎么用*/ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } /*Scott Andrew’s original addEvent() function 强大的事件绑定兼容函数,对应参数分别是事件源对象,绑定事件,事件处理函数和事件捕捉方式,详细参考手册addEventListener和attachEvent的说明 */ function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; } } //函数实例 function test1(){ alert($('test1').innerHTML); } function test2(){ setCookie('str',$('cookies').value); } function test3(){ var arr=new Array('this','is','a','test'); alert("is the word 'this' in the Array?"+arr.inArray('this')); } function test4(){ var div=document.createElement('div'); var txt=document.createTextNode('this is another /强大的王子/'); div.appendChild(txt); insertAfter(div,$('after')); } function test5(){ var cls=getElementsByClass('test'); for(var i=0;i<cls.length;i++)alert(cls[i].innerHTML); } addLoadEvent(test1); addLoadEvent(test3); addEvent($('test6'),'click',function(){alert(/强大的王子/)},true); </script> </head> <body> <div id="test1" onclick="test1()">>>>点我this is a $ test./强大的王子/</div> <input id="cookies" type="text" value="强大的王子" /><button onclick="test2()">setCookie</button><button onclick="alert('cookie:str='+getCookie('str'))">getCookie</button><button onclick="deleteCookie('str')">delCookie</button> <div onclick="test3()">>>>点我this is a test./强大的王子/</div> <div id="after" onclick="test4()">>>>点我this is a test./强大的王子/</div> <div onclick="toggle('toggle')">>>>点我this is a toggle test.<span id="toggle" style="display:none">/强大的王子路过/</span></div> <div class="test" onclick="test5()">>>>点我this is a test./强大的王子/</div> <div class="test" onclick="test5()">>>>点我this is another test./强大的王子/</div> <div id="test6">>>>点我this is a $ test./强大的王子/</div> <script>addEvent($('test6'),'click',function(){alert(/强大的王子/)},true);</script> </body> </html>

提示：你可以先修改部分代码再运行。

除了会用这些函数外,其实最重要的是学习代码中的一些写法,这些函数看上去很短很简单,但对新手来说,想自己写出来还是有点难度的.总之,动手+思考+动手+思考+动手+思考+动手+思考+动手+思考..

新手心得 | JavaScript, 函数该日志被浏览了13次

Javascript学习（1）

By xmagic,

1 , javascript字符集：

javascript采用的是Unicode字符集编码。

为什么要采用这个编码呢？

原因很简单，16位的Unicode编码可以表示地球人的任何书面语言。这是语言国际化的一个重要特征。(大家也许见过用中文写脚本，比如：function 我的函数() {} );

Javascript中每个字符都是用2个字节表示的。（因为是16位编码）

2 ,大小写敏感：

js是一种区分大小写的语言。

注意下：以前我也犯过的错误。

HTML是不区分大小写的。经常看见有人这么写,

<input type=”button” onClick=”a()” /> （这样写是对的）

如果放到JS中，就必须使用onclick（小写哦！）

同时XHTML中也只能使用小写。

这个我们并不需要太关心，象这种问题，其实都可以自己给自己定一个标准，自己写程序的时候全部小写。

另外每行程序后分号也是一样，我们都写上。

Continue reading 'Javascript学习（1）'»

javascript基础该日志被浏览了6次

slideUp 和 slideDown 一起的用法和效果

By husha,

/*//点击层#faq里的dd显示dt内容，做点则隐藏
$(function(){
  $(”#faq”).find(”dd”).hide().end().find(”dt”).click(function(){
   var answer = $(this).next();
   if(answer.is(”:visible”)){
    answer.slideUp();
   }else {
    answer.slideDown();
   }
  })
})

html代码

jQuery | slideDown, slideUp 该日志被浏览了6次

addClass和removeClass 一起的用法！

By husha,

//鼠标移到a显示样式b移去去除样式b
$(function(){
  $(”a”).hover(function(){
   $(this).parents(”p”).addClass(”b”);
  },
  function(){
   $(this).parents(”p”).removeClass(”b”);
  })
})

html代码

jQuery | addClass, removeClass 该日志被浏览了4次

JavaScript中的CSS属性对照表(新手必备)

By 愚人码头, 2009年07月1日 11:40 下午

JavaScript中的CSS属性对照表是js初学者必备的基础知识

盒子标签和属性对照

CSS语法 (不区分大小写) JavaScript语法 (区分大小写)

border border

border-bottom borderBottom

border-bottom-color borderBottomColor

border-bottom-style borderBottomStyle

border-bottom-width borderBottomWidth

border-color borderColor

border-left borderLeft

border-left-color borderLeftColor

border-left-style borderLeftStyle

border-left-width borderLeftWidth

border-right borderRight

border-right-color borderRightColor

border-right-style borderRightStyle

border-right-width borderRightWidth

border-style borderStyle

border-top borderTop

border-top-color borderTopColor

border-top-style borderTopStyle

border-top-width borderTopWidth

border-width borderWidth

clear clear

float floatStyle

margin margin

margin-bottom marginBottom

margin-left marginLeft

margin-right marginRight

margin-top marginTop

padding padding

padding-bottom paddingBottom

padding-left paddingLeft

padding-right paddingRight

padding-top paddingTop

颜色和背景标签和属性对照

CSS语法 (不区分大小写) JavaScript语法 (区分大小写)

background background

background-attachment backgroundAttachment

background-color backgroundColor

background-image backgroundImage

background-position backgroundPosition

background-repeat backgroundRepeat

color color

样式标签和属性对照

CSS语法 (不区分大小写) JavaScript语法 (区分大小写)

display display

list-style-type listStyleType

list-style-image listStyleImage

list-style-position listStylePosition

list-style listStyle

white-space whiteSpace

文字样式标签和属性对照

CSS语法 (不区分大小写) JavaScript语法 (区分大小写)

font font

font-family fontFamily

font-size fontSize

font-style fontStyle

font-variant fontVariant

font-weight fontWeight

文本标签和属性对照

CSS语法 (不区分大小写) JavaScript语法 (区分大小写)

letter-spacing letterSpacing

line-break lineBreak

line-height lineHeight

text-align textAlign

text-decoration textDecoration

text-indent textIndent

text-justify textJustify

text-transform textTransform

vertical-align verticalAlign

盒子标签和属性对照
border	border
border-bottom	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-color	borderColor
border-left	borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right	borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-style	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-width	borderWidth
clear	clear
float	floatStyle
margin	margin
margin-bottom	marginBottom
margin-left	marginLeft
margin-right	marginRight
margin-top	marginTop
padding	padding
padding-bottom	paddingBottom
padding-left	paddingLeft
padding-right	paddingRight
padding-top	paddingTop

颜色和背景标签和属性对照
CSS语法 (不区分大小写)	JavaScript语法 (区分大小写)
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
color	color

样式标签和属性对照
CSS语法 (不区分大小写)	JavaScript语法 (区分大小写)
display	display
list-style-type	listStyleType
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style	listStyle
white-space	whiteSpace

文字样式标签和属性对照
CSS语法 (不区分大小写)	JavaScript语法 (区分大小写)
font	font
font-family	fontFamily
font-size	fontSize
font-style	fontStyle
font-variant	fontVariant
font-weight	fontWeight

文本标签和属性对照
CSS语法 (不区分大小写)	JavaScript语法 (区分大小写)
letter-spacing	letterSpacing
line-break	lineBreak
line-height	lineHeight
text-align	textAlign
text-decoration	textDecoration
text-indent	textIndent
text-justify	textJustify
text-transform	textTransform
vertical-align	verticalAlign

javascript教程 | CSS, JavaScript, js基础该日志被浏览了18次

第一篇

By kuku,

纪念

未分类 | 测试该日志被浏览了9次

[顶] 再次领悟正则表达式

By laoshu133,

今天做网页的时候，又碰了正则表达式的问题

——[REVERT=laoshu133 于 2008-11-25 14:59:58 回复]呵呵[/REVERT]
对上句内容的匹配，我一开始是这么写的：

oReg.Pattern=”\[\/REVERT\]”
str=oReg.Replace(str,”</div>”)
oReg.Pattern=”\[REVERT\=(.+)\]”
re_revert=oReg.Replace(str,”<div class=”"guest_rev”"><blockquote>$1</blockquote>”)

测试时没一点问题，可是后来我一向不对啊~
那万一我要回复两次呢？那么要匹配的内容就变成：
——[REVERT=laoshu133 于 2008-11-25 14:59:58 回复]回复测试[/REVERT][REVERT=laoshu133 于 2008-11-25 14:59:58 回复]二次回复测试[/REVERT]
然而，现在问题来了，按我上面写的去全局匹配，就变成： Continue reading '[顶] 再次领悟正则表达式'»

新手心得 | 正则表达式该日志被浏览了15次