Category ArchiveJavaScript/DOM/XML
JavaScript/DOM/XML 11 Sep 2008 05:50 pm
静态html用js取中文参数,无乱码
<coolcode>
<script type=”text/javascript”>
String.prototype.getQueryString = function(name)
{
var reg = new RegExp(”(^|&|\\?)”+ name +”=([^&]*)(&|$)”), r;
if (r=this.match(reg)) return unescape(r[2]); return null;
};
</script>
<script>
var msg=window.location.href.getQueryString(”msg”);
if (msg)
{
document.write(’<li>· ’+msg+’</li>’);
}
</script>
</coolcode>
在ff下中文会乱码,参数传递过来时需先escape();
<coolcode>
function phpescape($str){
preg_match_all(”/[\x80-\xff].|[\x01-\x7f]+/”,$str,$newstr);
$ar = $newstr[0];
foreach($ar as $k=>$v){
if(ord($ar[$k])>=127){
$tmpString=bin2hex(iconv(”GBK”,”ucs-2″,$v));
if (!eregi(”WIN”,PHP_OS)){
$tmpString = substr($tmpString,2,2).substr($tmpString,0,2);
}
$reString.=”%u”.$tmpString;
} else {
$reString.= rawurlencode($v);
}
}
return $reString;
}
</coolcode>
参考:
PHP实现Javascript的escape(),unescape()的方法
JavaScript/DOM/XML & 技术 14 Nov 2007 11:52 am
复制到系统剪贴板之IE,ff兼容版
http://www.w3c-cn.com/article.asp?id=88
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <script type="text/javascript">
- // <![CDATA[
- function copy_clip(copy){
- if (window.clipboardData){
- window.clipboardData.setData("Text", copy);}
- else if (window.netscape){
- netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
- var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
- if (!clip) return;
- var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
- if (!trans) return;
- trans.addDataFlavor('text/unicode');
- var str = new Object();
- var len = new Object();
- var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
- var copytext=copy;
- str.data=copytext;
- trans.setTransferData("text/unicode",str,copytext.length*2);
- var clipid=Components.interfaces.nsIClipboard;
- if (!clip) return false;
- clip.setData(trans,null,clipid.kGlobalClipboard);}
- alert("已复制"+copy)
- return false;
- }
- // ]]>
- </script>
- <h1>请另存代码测试</h1>
- <input type="text" id="ff" value="我要复制的东西" /><button onclick="copy_clip(document.getElementById('ff').value)">复制
- </button>
FF下需设一下安全
第一步.在Firefox浏览器的地址栏中输入 about:config
第二步.将 signed.applets.codebase_principal_support 的值从 false 更新为 true 。
JavaScript/DOM/XML & 技术 31 May 2007 10:40 am
[转]《JavaScript权威指南》读书笔记
- --------------------第一部分 javascript的核心--------------------
- 第二章 词法结构
- 1、javascript使用Unicode字符集
- 2、大小写敏感
- 3、JS会忽略程序中记号之间的空格、制表符、换行符,除非它们是字符串或正则表达式直接量的一部分
- 4、单行注释//,多行注释/*......*/,注释不能嵌套。
- 第三章 数据类型和值
- 1、
- 五种基本类型:数字、文本字符串、布尔值、null(空)、undefined(未定义)。
- 三种引用类型:数组、函数、对象。对象分为:普通对象、专用对象(例如Date、Error、RegExp)
- 第四章 变量
- 1、js的变量是无类型的
- 2、变量的声明:
- var i;//声明
- var i = 10; //声明+初始化
- var i = 0, j = 0, k =0;//声明多个变量
- 3、重复声明:不会出错,重复声明作为一条负值语句
- 4、遗漏声明:未声明就赋值的变量会被隐式声明为全局变量,即使此变量在函数体内。
- 5、变量的作用域:分为全局变量和局部变量,没有级块作用域({}之间不是一个作用域)。
- 6、未定义的变量和未赋值的变量
- 未定义的变量指未声明(包括隐式声明)的变量,使用它会产生错误。未赋值的变量是声明了但没有赋值,会得到默认值undefined。
- 7、基本类型和引用类型:参考第二章1中内容,注意,字符串是基本类型,但它的传递确实引用传递。
- 8、无用存储单元的收集(GC)
- 9、全局变量是全局对象的变量,局部变量是调用对象的变量
- 第五章 表达式和运算符
- 1、最简单的表达式是直接量(值是本身)或变量名(值是变量所存放或引用的值)。表达式是简单表达式通过运算符的合并。
- 2、由于js中所有数字都是浮点型的,所以除法的结果也是浮点型的,eg:5/2=2.5;*/0=正无穷或负无穷;0/0=NaN
- 3、相等运算符(==)和等同运算符(===),(!==和!===道理一样)
- 第六章 语句
- 书121页6.20JavaScript语句小节。
- 第七章 函数
- 1、定义方法
- function f(x, y) { return x * y; }
- var f = new Function("x", "y", "return x*y");//前n-1个字符串表示参数,最后一个字符串是函数主体
- var f = function(x, y) { return x * y };//函数直接量,没有函数名
- 2、函数内部有一个Arguments的对象arguments,它包含实际传入此函数的参数信息。
- function f(x,y,z){
- var actual = arguments.length;//实际参数个数
- var expected = arguments.callee.length;//方法名.length表示要求参数个数
- return actual == expected;
- }
- alert(f(1,2,3))
- 第八章 对象
- 1、对象的创建
- var o = new Object();
- var circle = { x:0, y:0, radius:2 };//对象直接量
- 2、属性的枚举(只列出用户定义的属性和方法(包括原型对象的属性和方法),不包含预定义的属性和方法),例子:
- var a = new Object();
- a.num = 10;
- a.fun = function(){return 5;};
- function display(obj){
- var names = "";
- for(var name in obj)
- names += name + "\n";
- alert(names);
- }
- display(a);
- 3、未定义的属性是undefined,与数组一样。
- 4、原型对象和继承:用构造函数把对象的属性和方法初始化效率很低,因为每个此类对象都存一份这些的副本,更有效的方法是通过原型对象的方法声明方法和属性使对象共享这些。寻找方法或属性的方法是现在本对象找,找不到再去原型对象里找,直到Object。
- javascript是以原型对象为基础的继承机制,而不是像java一样以类为基础的继承机制。
- function Father(){}
- function Son(){}
- Father.prototype.name = "max";
- Son.prototype = Father;//只能保证取道Father的变量和方法,无法取到Father.prototype的
- Son.prototype = new Father();//可以取到Father.prototype的
- document.write(Father.name);//不是max,因为不创建Father的对象的话,就只在Father里找,不会到他的prototype里找。
- var father = new Father();
- document.write(father.name);//是max
- 5、关联数组:
- object.property
- object.["property"]
- 以上两种方式访问对象,后一种被称为关联数组(associative array)
- 第九章 数组
- 1、创建数组:
- var a = new Array();
- var a = new Array(5, 4, 3, "test");//数组为[5,4,3,"test"]
- var a = new Array(10);//10表示此数组有10个元素,每个都是undefined(未赋值的数组元素默认为undefined)。
- 数组直接量:
- var a = [2, "test",[1,2]]//多维数组
- 2、数组是稀疏的(不连续)
- a[0] = 1;
- a[1000] = "test";
- a.length =
- 3、数组的长度总是比最大元素的下标多一,
- var a = new Array();
- a[1] = 2;
- a[1000] = 3;
- a.length = 1001;未定义的都为undefined
- 第十章 使用正则表达式的模式匹配
- 1、javascript1.2实现了Perl4正则表达式,javascript1.5实现了Perl1.5正则表达式的大型子集。
- 2、正则表达式可以实现模式匹配、文本检索、替换。
- 3、直接量字符P175,字符类P176,重复字符P177,选择分组引用字符P180,锚字符P181,标志P183,不支持的P183
- 第十一章 JavaScript的更多主题
- 1、自动数据类型转换P190。
- 2、数字到字符串转换:
- var s = String(number);
- var s = number + "";
- 3、Function()构造函数和函数直接量的区别:
- 首先,构造函数Function()允许在运行时动态的创建和编译js代码,但函数直接量却是程序结构的一个静态部分,像function语句一样。
- 其次,作为上面的必然结构,每次调用Function()就会解析函数体并创建一个新的函数对象,如在循环中效率很低,而函数直接量不用每次重新编译,也不用创建对象。
- 再次,Function()创建的函数不使用词法作用域,而总是被当作顶级函数来编译。
- eg:
- var y = "globle";
- function func(){
- var y = "local";
- return new Function("return y");
- }
- alert(func());//输出“globle”对象:javascript中的对象可以作为关联数组使用,因为它们能够将任意的数值和任意的字符串关联起来。如果采用这种方式使用对象.那么要访问对象的属性就要采取不同的语法.即使用一个由中括号封闭起来的、包含所需属性名的字符串,例如:
- <HTML>
- <HEAD>
- <TITLE> New Document </TITLE>
- <META NAME="Generator" CONTENT="EditPlus">
- </HEAD>
- <BODY>
- <INPUT TYPE="submit" name="test" value="提交">
- <script language="javascript">
- document.write(test["name"]);
- document.write(test["value"]);
- </script>
- </BODY>
- </HTML>
- 其中test["name"]这种访问方式和test.name所起到的效果是一样的。
- 9、 对象直接量(也称为初始化对象) 是由一个列表构成的,这个列表的元素是用冒号分隔的属性/值对.元素之间用逗号隔开,整个列表封闭在大括号之内。例如:Var point={x:2.3,y:5.6},对象直接量也可以嵌套,如:
- Var rectangle={uppLeft:{x:2.3,y:5.6},lowerRight{x:4,y:7}},对象直接量并不一定是常量,也可以是表达式。
- 10、 Javascript不支持多位数组,不过它的数组元素还可以是数组。
- 11、 JavaScript的关链字null是一个特殊的值、它表示的是“无值”。null常常被看作是特殊 数据类型Null的唯—合法值。但有时它被看作对象类型的一个特殊值,即代表“无对象”的值。无论在哪种情况下。Null都是个唯一值、有别于所有其他的值。如果一个变量的值为null、那么你就应该知道它的值不是有效的对象、数组、数字、字符串和布尔值。
- Undefined表示一个没有定义或者声明了没有赋值的变量或者属性。但是大多数实际使用中,可以将两者看作是相同的。如果对象my的prop属性并不存在,那么my.prop= =null这句话返回值为true。
- 如果要区分它们两个,那么可以使用typeof运算符,对于没有赋制的变量、没有定义的属性或者变量,返回值是undefined,看看下面的例子:
- Var temp;
- Type=typeof temp; //返回值为undefined
- 而对于null,返回值却是“object”,例:
- Type=typeof null; //返回值为object
- 有一种新的运算符“= = =”可以区分undefined和null,例如:
- Var temp;
- If(temp= = =null) //返回值为false
- 12、 Date对象:Date对象中,月份是从0开始的,所以12月份对应数字11,例如:声明2006年12月23日,new Date(2006,11,23);注意是11而不是12。
- 13、 正则表达式:在javascript语言中,正则表达式由RegExp对象来表示,语法上和Perl语言一样。一对斜线之间的文本就构成了正则表达式直接量。例如:\^Html\
- 14、 变量:javascript中如果没有显式地声明一个变量,那么javascript会隐式为你声明。但是需要注意的是,隐式声明的变量总是全局变量,即使你只是在一个函数体内使用它。所以建议声明变量时,使用var。
- 15、 函数中声明的所有变量,无论是在那里声明的,在整个函数中它们都是有定义的。例如:
- Function test(o)
- {
- Var i=0; //在整个函数体内,i都是有意义
- If(typeof= =”object”)
- {
- Var j=0; //j不仅在块中有定义,在整个函数也都有定义
- For(var k=0;k<10;k++) //k在整个函数体内也都有意义
- {
- Document.write(k);
- }
- Document.write(k); //k仍然有意义,输出10
- }
- Document.write(j); //j仍然有意义
- }
- 注意下面的函数声明:
- Var scope=”globle”;
- Function f()
- {
- Alert(scope); //此处相当于在函数体内又隐式声明了一个变量,但是没有初始化,所以值应该为”undefined”,而不是globle
- Var scope=”local”; //这里相当于对scope进行初始化
- Alert(scope); //输出值为”local”
- }
- 所以我们应该养成良好的习惯,把函数中的变量集中放在函数开头声明。
- 16、基本类型和引用类型:基本类型包括数值,布尔值,null和未定义的值;引用类型包含对象,数组和函数。基本类型和引用类型的区别用下面的例子就可以说明:
- 第一个例子,基本类型:
- Var a=3.14; //声明一个变量并赋值
- Var b=a; //把这个变量的值复制到一个新的变量中
- a=4; //修改原始变量的值
- alert(b); //此时输出3.14,复制是值,所以不变化
- 第二个例子,引用类型:
- Var a={1,2,3}; //初始化一个变量作为数组的对象引用
- Var b=a; //把这个引用(注意是引用,而不是数值)复制给一个新的对象
- a[0]=99; //修改原始变量的值
- alert(b); //因为b和a引用同一个对象,所以当a中的元素变化时,b也变化
- 注意:字符串是一个特例。因为它具有可变的大小,所以显然它不能被直接存储在具有固定大小的变量中。出于效率的原因,我们希望Javascript只复制对字符串的引用而不是字符串的内容。但另一方面.字符串在许多方面都和原始类型的表现相似。而字符串是不可变的这一事实(即没有办法改变一个字符串值的内容)使得字符串是原始类型还是引用类型的问题更加令人费解。无论是将字符串看作是表现与原始类型相似的不可变引用类型.还是将它看作使用引用类型的内部功能实现的原始类型,结果部是一样的。
- 17、在javascript中,变量基本上和对象的属性是一样的。函数体内的局部变量会覆盖函数体外同名的全局变量。
- 18、运算符:在javascript中’a’*’b’是不合法的,但是’3’*’4’却是合法的,因为javascript会根据情况进行转换,所以’3’*’4’的结果是数字12,而不是字符串’12’。
- 如果你对运算符的优先级了解不是很深的话,最好用括号来表示你的意图。
- 19、“=”表示赋值或者得到; “= =”表示等于,可能只是值上的相等;“= = =”表示完全相等,不仅仅是值,包含类型等其他。NaN不等于任何,包括自身。
- “!=”和“!= =”检测的情况恰好与“= =”和“= = =”相反。如果两个值相等,“!=”返回false,否则返回true,如果两个值完全相等,“!= =”返回false,否则返回true。
JavaScript/DOM/XML & 技术 21 May 2007 04:26 pm
使用javascript文档对象模块时记得new string一下
如: var newlocation = new String(document.location)
否则使用newlocation.sqlit(’\?’)等方法会报错。
JavaScript/DOM/XML & 技术 26 Jan 2007 05:04 pm
一个table ui
下午参照lukew的ui做了个table

本来想实现类似phpmyadmin的显示样式,可以当前行高亮并可以做标记,不过没找到很好的实现方法。
hover目前支持ie7和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>
- <title> table ui </title>
- <meta name="generator" content="editplus" />
- <meta name="author" content="andy chu" />
- <meta name="keywords" content="" />
- <meta name="description" content="" />
- <style type="text/css">
- body {
- margin:0;
- padding:0;
- FONT: 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
- color:#666;
- }
- a:link {
- color:#33CCFF;
- }
- a:visited {
- color:#3399FF;
- }
- a:hover {
- color:#FF33FF;
- }
- a:active {
- color:#FF33FF;
- }
- .DataSheet {
- table-layout:fixed; /*auto | fixed*/
- overflow:hidden; /*firefox*/
- padding:0;
- margin:0;
- border-collapse :collapse;/* separate | collapse*/
- width:700px;
- }
- .DataSheet caption {
- border-top:1px solid #c1dad7;
- border-left:1px solid #c1dad7;
- border-right:1px solid #c1dad7;
- padding:6px;
- padding-left:12px;
- background:#5265B5;
- text-align:left;
- color:#DEEBFF;
- font-weight:bold;
- }
- .DataSheet th {
- border:1px solid #c1dad7;
- padding:6px;
- padding-left:6px;
- background:#FFF7DE;
- color:#393410;
- text-align:left;
- }
- .DataSheet tr {
- background:#FFF;
- }
- .DataSheet td {
- border:1px solid #c1dad7;
- padding:6px;
- }
- .DataSheet tr.Odd {
- background:#FFFFFF;
- }
- .DataSheet tr.Event {
- background:#F7FBFF;
- }
- .DataSheet tr.OddMarked {
- background:#CEEBEF;
- }
- .DataSheet tr.EventMarked {
- background:#CEEBEF;
- }
- table.DataSheet tr:hover {
- background:#F7FBFF;
- }
- </style>
- <script type="text/javascript">
- function markRow(elm){
- var className = elm.className;
- if ((/Marked/).test(elm.className))
- {
- elm.className = className.replace(/Marked/,'');
- }else{
- elm.className = className+'Marked';
- }
- }
- </script>
- </head>
- <body>
- <br />
- <table class="DataSheet" >
- <caption>List</caption>
- <col width="10%" /><col width="50%" /><col width="20%" /><col width="20%" />
- <tr><th>ID</th><th>Name</th><th>Date</th><th>Operation</th></tr>
- <tr class="Odd" onclick="markRow(this);"><td>1</td><td>afffffsafdasdfasdasdgasdgasdg</td><td>2007-1-26</td><td>saffff</td></tr>
- <tr class="Event" onclick="markRow(this);"><td>2</td><td></td><td>2007-1-26</td><td><a href="#">link</a></td></tr>
- <tr class="Odd" onclick="markRow(this);"><td>3</td><td>c</td><td>2007-1-26</td><td>wqr</td></tr>
- <tr class="Event" onclick="markRow(this);"><td>4</td><td>d</td><td>2007-1-26</td><td>wqr</td></tr>
- </table>
- </body>
- </html>
Ajax & JavaScript/DOM/XML & 技术 13 Jan 2007 02:55 pm
table 的dom结构
一般而言,DOM结构准确地反映了HTML文档所包含的内容,也就是说,每个HTML标记表现为一个标记节点(tag node),每个文本项内容表现为一个文本项节点(text node)。这种表现形式一般称为WYSIWYG,即所见即所得。但是,
| This is row 1, cell 1 | This is row 1, cell 2 |
| This is row 2, cell 1 | This is row 2, cell 2 |
| This is row 3, cell 1 | This is row 3, cell 2 |
在分析它的DOM结构前,我们要为这段代码添加上一对
标记:
JavaScript/DOM/XML & 技术 13 Jan 2007 02:39 pm
鼠标不同样式
pointer:ff和ie下通用的手型。
hand:是大家所熟悉的手型。< br>
crosshair:是十字型,就是小乌龟首页所用的样式。< br>
text:是平时鼠标移动到文本上的样式。< br>
wait:是等待的效果。< /span>
default:是默认的那种效果。 < br>
help:是带问号的鼠标样式。< br>
e-resize:是向右的箭头。< br>
ne-resize:是向右上方的箭头。< br>
n-resize:是向上的箭头。< br>
nw-resize:是向左上方的箭头。< br>
w-resize:是向左的箭关。< br>
sw-resize:是向左下的箭头。< br>
s-resize:是向下的箭头。< br>
se-resize:是向右下方的箭头。< br>
auto:是系统自动的效果。
HTML/XHTML/CSS & JavaScript/DOM/XML & 技术 15 Dec 2006 11:17 am
统一textarea在IE、Firefox下的效果
textarea在IE是默认有滚动条的,而FF没有滚动条的。
解决方法:
1、用textarea的宽度(widht)和高度(height)来定义textarea的大小;
2、让滚动条自适应:overflow-y:auto。
3、使用js来自适应高度
- <style type="text/css">
- #content {
- font-size: 12px;
- overflow:hidden;
- background-color: #fff;
- color: #000;
- padding-right:5px;
- padding-left:5px;
- font-family: courier;
- width:100px;
- letter-spacing:0;
- line-height:12px;
- border-style:1px #ccc solid;
- }
- </style>
- <script language="JavaScript">
- function setRows() {
- var textarea = document.getElementById("content");
- var cols = textarea.cols;
- var str = textarea.value;
- // windows - replace \r\n
- // mac - replace just \r
- // linux - is just \n
- str = str.replace(/\r\n?/, "\n");
- var lines = 2;
- var chars = 0;
- for (i = 0; i < str.length; i++) {
- var c = str.charAt(i);
- chars++;
- if (c == "\n" || chars == cols) {
- lines ++;
- chars = 0;
- }
- }
- textarea.setAttribute("rows", lines);
- textarea.style.height = lines*12 + "px";
- }
- </script>
- <span>test textarea</span><br>
- <textarea id="content" rows="2" cols="10" onkeyup="setRows();"></textarea>
当输入连续字符超出textarea宽度边界时,ie会自动换行,而FF会出现水平滚动条。
解决方法:
1、你可以设 overflow-x:hidden;将超出部分隐藏。
2、使用js,但需考虑手动换行,中英文还有英文单词。
JavaScript/DOM/XML & 技术 06 Dec 2006 01:47 pm
JavaScript 中的replace方法
1第一次发现JavaScript中replace() 方法如果直接用str.replace(”-”,”!”) 只会替换第一个匹配的字符.
2而str.replace(/-/g,”!”)则可以替换掉全部匹配的字符(g为全局标志)。
HTML/XHTML/CSS & JavaScript/DOM/XML & 技术 06 Dec 2006 01:44 pm
offsetHeight在ie和ff下的差异
当你的html没设DTD时,设置一个div并包含一张图片,ie的offsetHeight会多出4个象素。
解决方法是去掉img标签后的换行.让
- </img>后紧跟</div>
或者使用js来判断浏览器。
当你设一div width=50px border=1px,ie的offsetHeight和clientHeight分别是50px和48px,ff是52px和50px