ajax
AJAX: 缺点（搜索引擎不友好，前进后退功能）
IE Firebug调试: Installing Firebug Lite 1.2 [W1]
javasrcipt 支持4种数据类型：
对象(object) 数字(number) 字符串(string) 布尔值(boolean)
JSVM 加载类 www.jsvm.org
$import("example.HelloWorld") //加载位于example包下的HelloWorld类
myvari = 20
var myvari = 20 [W2]
myvari = 42+"the answer" //字符串 [W3]
函数也是一个变量
var myfun = function() { } 就可以引用myfun()了
外部javasrcipt：
<script type= "text/javascript" src=" "> </script>
<div id="mydiv" onclick="myfun()" /> 等价于：
<script type="text/javascript">
document.getelementById("mydiv").onclick = myfun(); [W4]
</script>
var divElement = document.getElementById(" ");
divElement.innerHTML = "good kdfdfdfdf";
getAttributte ，setAttributte 访问来修改属性值 [W5]
返回一个input或其他元素时，div.value =
javascript对大小写敏感 [W6]
document.write("Hello/ [W7]
World")
var txt = "we are the so-called /"Viking/" from the" ;
=== （三个等号，全等，值和类型）
条件：给定 x=5，
| === |
全等（值和类型） |
x===5 为 true；x==="5" 为 false |
javascript中，当比较两个字符串时，实际比较的是字符串首字母的AS 码的大小 [W8]
避免使用 IE Behaviors 其他浏览器不支持
遍历：for/in语句
for(变量 in 对象)
{
子语句
} [W9]
in运算符： （检查第一个运算符是否是第二个运算符的属性名）
var a = { x:1,y:2};
'x' in a; //返回true
'z' in a; /返回fault
抛出异常：throw语句 [W10]
if( )
{
throw new Error("年龄未潢。。。")
}
异常处理：
try { }
catch( e ) { alert( )};
[finally{ }]
if(typeof age == 'undefined' )
{ }
空语句在某种特定的情况下会很有作用
大小写敏感：常量用大写，变量名小写
数组的length属性是可写的，可以直接改变数组的长度 [W11]
数组函数：
unshift //将新元素加到数组开头 a.unshift(2);
push //将新元素加到数组末尾 a.push(2);
shift //删除第一个元素 a.shift();
pop //删除最后一个元素 a.pop();
splice //删除多个元素 a.splice(1,1,'a','b','c',);
slice //得到数组片段 [W12]
reverse() //反转数组
join() //数组转换为字符串 [W13]
sort() //排序 [W14]
字符串截取：
var a ="I love ajax"
var b = a.substring(2,4); //b = "lo"
字符串替换：
var a = "I love ajax";
var b = a.replace(' ','_'); //b = "_love_ajax";
字符符转换数组：split (理解为Array对象的join方法的逆运算)
拼接字符串的优化方法：[W15]
FF中类似 obj.style.height = imgoby.height 的语句无效
应改为： obj.style.height = imgobj.height +'px'
[W16]
浏览器兼容性引用：
var form = document.getElementById("form");
var button = form.elements["btn "];
=form.elements[0];
=form.elements; //获取元素集合
form.getAttribute(' ') //获取属性值
调用window对象的属性和方法时，可以省略"window."
| firefox 不支持showModamPoulog(横态窗口) |
要用window.open 来代替 [W17] |
| window.frameId (FF不支持) |
window.frameName (获得对frame页面 window页面的引用) |
| innerText (FF不支持) |
用textContent或者用 属性构造器 |
| parentElement (FF不支持) |
parentNode |
| outerHTML、outText |
属性构造器 |
| Firebug调试 |
| console.info(qw) |
| console.group(标识语) console.groupEnd() //分组 |
| console.time(..[W18] ) console.timeEnd() //计时 |
| console.count(' ') //函数执行次数 |
| debugger; //断点控制 |
JsUnit测试： 下载地址：http://www.jsunit.net/
在JavaScript的領域中，有個類似 JUnit 的測試工具 JsUnit，其觀念與使用上與 JUnit 都十分類似。
测试实例
設定setUp()、tearDown()或setUpPage()函式
<script type='text/javascript'
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
两种声明都可以，建议用var的，var的声明如果在一个语句块里声明，则对外面的无效
在函数体内如果存在与全局变量同名的局部变量，则此局部变量的优先级比同名的全局变量高
当“+”运算符作用于 一个字符串和一个其他类型的运算时，其他类型的数会被转换为字符串类型再运算
坏处是：引用html之后才能解析getelementById
div.setAttribute("sytyle","background:red")
div.style.color =
名为myfunction 的函数和名为 myFunction的函数是两个不同的，
变量myvar 和 myVar也一样
换行书写格式
"abc" < "b"
var person =
{
name : ' ' ;
sex : ' ' ;
}
for( o in person)
{
document.write(o + '=' person[o] + '</br>') ;
}
注意：try...catch 使用小写字母。大写字母会出错。
注意：使用小写字母编写 throw。使用大写字母会出错！
var a = [1,2,3,4,5]
a.length = 3; //a = [1,2,3]
a.length = 5; //a = [1,2,3,undefined,undefined]
var a = [1,2,3,4,5]
a.slice(1); //返回[2,3,4,5]
a.slice(1,4);
var a = [1,2,3,4,5]
a.join() //"1,2,3,4,5"
a.join('_') //"1-2-3-4-5"
a.join('**') //"1**2**3**4**5"
var a = ['d','csd',32,1,'ef1','2as'];
a.sort(); //返回 [1,'2as','32','csd','d','ef1'] 默认从大到小排序
a.sort(
function(x,y)
{
return y-x;
}
) //从小到大排序
var a = "I";
var b ="love";
var c ="ajax";
var d =[a,b,c].join(' '); //d = "I love ajax"
运算过程中没有多余的字符串实例生成
function setSize(size)
{
document.getElemetById(' ').style.fontsize = size + 'px';
}
onclick = "setSize(12)"
全屏显示
window.open
("http://www.baidu.com","","width="+screen.width+",height="+screen.height+",top=0,left=0,scrollbars");
窗口的定位
window.open
("sdfsdf.htm","","width=300,heigh=300,top=300,left=450,screenX=450,screenY=300,scrollbars");
无标题栏的全屏显示
window.open("http://www.baidu.com","","fullscreen=yes");
打开窗体的动态变化
the_w1=window.open("sdfsdf.htm","","width=300,height=300,scrollbars");
setTimeout("the_w1.location.href='etrtert.htm'",3000);
必须填写：如：123,'sum'
元字符从功能上大致分为：
（一）限定符
| 字符 |
描述 |
| * |
匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。 |
| + |
匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。 |
| ? |
匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。 |
| {n} |
n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。 |
| {n,} |
n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。 |
| {n,m} |
m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。 |
（二）选择匹配符 只有一个 "|"
（三）分组组合和反向引用符/1 ( ) /( /)匹配字面上的 ( )
要匹配连续的5个数字字符，可以使用/d{5} 作为正则表达文
要匹配连续的5个相同的数字字符，(/d)/1{4}
(?:pattern)
不能将'industry|industries'简单地改写成"industr(y|ies)"，如果不需要引用或检索括号里的表达式所匹配的结果，最好还是改写成"indstr(?:y|ies)"
(?=pattern) 正向“预测先行”匹配
使用"windows(?=NT|2000)"作为正则表达式模式，它只与"windows 2000"或"windows NT"中的windows匹配
(?!pattern) 反向“预测先行”匹配
使用"windows(?!NT|2000)"作为正则表达式模式，它不与"windows 2000"或"windows NT"中的windows匹配
（四）特殊字符
/xn "/x41"匹配字符"A"。 "/x041"的意义是"/x04"所表示的字符后加"1" asc2码的值不会大于256
/n
/nm
/nml
/un /u00A9 匹配版权符号
/cX /cM 匹配Control+M表示的控制字符，也就是回车符
/f 换页符 ，等效于/x0c和/cL
/n 换行符， 等效于/x0a和/cJ
/r 回车符， 等效于/x0d和/cM
/t 制表符， 等效于/x09和/cl
/v 垂直制表符，等效于/x0b和/cK
（五）字符匹配符 replace DEMO
[...] []中的字符'/'仍然作为转义符，若要在[]中包含"/"字符本身，需要使用"//"
[^..] 只要字符^还是出现在第一个"["后面，它就还是字面意义上的"^"
[a-z]
[^a-z]
/d [0-9] 数字
/D [^0-9] 非数字
/s 任何空白字符 等效于[ /f/n/r/t/v] //第一个是空格
/S 任何非空白字符 [^ /f/n/r/t/v]
/w 任何英文，数字以及下划线 [A-Za-z0-9_]
/W [^A-Za-z0-9_]
. 除了/n之外的任何单个字符
(.)/1 匹配除"/n"之外的两个连续的相同字符。若要匹配包括"/n"在内的任意字符,可以使用"[/s/S]" "[/d/D]" "[/w/W]" 等模式。若要匹配"."字符本身，需要使用"/."
（六）定位符
^
$
/b "er/b"匹配"never ok"中的"er",但不匹配"never"中的"er"
/B 与上相反
注意：
1.如果要在一大段文本中执行替换任务 ，创建正则表达式时需要十分小心。
例如调用replace(/win/g,"lose")替换"win a window"中的内容时，得到的结果是"lose a losedow"
如果想得到"lose a window"的结果，需要调用replace(//bwin/b/,"lose")
2. 要在一段文本内容中的每行前面都加上同一个标记文本，只需要用'^'作全局替换 DEMO
（七）原义字符
需要进行转义的字符
'$' '(' ')' '*' '+' '.' '[' ']' '?' '/' '/' '^' '{' '}' '|'
优先级
字符比"|"的优先级高，
a|bc 是b 和c组合后，再和前面的"a"进行选择组合
贪婪匹配 使用最长的匹配原则
非贪婪匹配 当字符?紧随任何其他限定符（*,+,?,{n},{n,},{n,m}）之后
javascript 正则表达式对象 RegExp:
var reg1 = new RegExp('//d+'); [W1] 显式构造函数
var reg1 = //d+1/g; 隐匿构造函数
属性 "g"、"i" 和 "m"，分别用于指定全局匹配、忽略大小写的匹配和多行匹配（/r /n）。
RegExp对象的属性分为两类：
所有RegExp对象实例共享的静态属性
单个对象实例的属性
RegExp 对象方法
| 方法 |
描述 |
FF |
IE |
| compile |
编译正则表达式。 将新的正则表达式编译为内部格式，从而使以后的匹配过程更快 |
1 |
4 |
| exec [W2] |
检索字符串中指定的值。返回找到的值，并确定其位置。 |
1 |
4 |
| test [W3] |
检索字符串中指定的值。返回 true 或 false。 |
1 |
4 |
如果为正则表达式设置了全局标志（g），可以多次调用exec和test方法在字符串中执行连续搜索，每次都是从RegExp对象的lastIndex属性值指定的位置开始搜索字符串。如果没有设置全局标志，则exec 和test方法忽略RegExp对象的lastIndex属性值，从字符串的起始位置开始搜索
综合举例
支持正则表达式的 String 对象的方法
FF: Firefox, IE: Internet Explorer
| 方法 |
描述 |
FF |
IE |
| search |
检索与正则表达式相匹配的值。 |
1 |
4 |
| match |
找到一个或多个正在表达式的匹配。 |
1 |
4 |
| replace |
替换与正则表达式匹配的子串。 |
1 |
4 |
| split |
把字符串分割为字符串数组。 |
1 |
4 |
replace DEMO
RegExp的exec 与 String的match相反
//d/d/ 匹配两位数字
/[jJ]avascript/ 匹配javascript 和 Javascript
/a.b/ 匹配 abb 、anbnnnnn 等
/[^0-9]/ 匹配 任何一个非数字字符
/[a-z]/ 匹配 a-z 任的
/^www$/
JS常用正则表达式：
检验ip地址是否合法程序1 DEMO
jsscript弹出窗口： alert confirm prompt
window对象：
if(confirm("是否确认删除邮件"))
{
alert("邮件已经被删除");
}
else
{
alert("您取消了此邮件的删除操作");
}
var password = prompt("请输入你的密码"," "); [W4]
alert(password );
窗口状态信息：
window.status = "I love ajax'; [W5]
修改status并不总是可靠的，因为在某些浏览器中，例如firefox，默认关闭这项功能，需要修改本地设置才能使用
延迟执行：setTimeout [W6] 一次 window.clearTimeout() 清除
定时执行：setInterval 每次时间间隔后都会执行一次 window.clearInterval() 清除
获取URL: window.location [W7]
历史记录的前进与后退： history (go back forward)
back和forward分别相当于history.go(-1); history.go(1);
控制窗口的大小和位置：
resizeTo [W8] resizeBy moveTo moveBy
window.open() window.close()
window.focus 获得焦点
window.blur 失去焦点
取得用户显示器信息：
screen.availWidth
screen.availHidth
取得用户浏览器信息： [W9]
navigator.appName
navigator.appVersion
navigatororuserAgent
操作HTML文档，document文档：
document.write
document.writeln
document.title
document.images[i].style.border = ''
document.links
document.fforms[i]
getElementsByName( ); 该方法返回的是一个数组
getElementsByTagName( ); 返回的是一个数组 [W10]
[W11]
等价于 var reg1 = //d+1/;
<script type="text/javascript">
var str = "Visit W3School";
var patt = new RegExp("W3School","g");
var result;
while ((result = patt.exec(str)) != null) {
document.write(result);
document.write("<br />");
document.write(result.lastIndex);
}
</script>
var str = "Visit W3School";
var patt1 = new RegExp("W3School");
var result = patt1.test(str);
进入网站的口令设置
onclick="input()"
function input()
{
var msg=prompt("请输入口令：")；
if(msg=="小光")
{
window.open("dsf/htm","window","")；
}
else
{
alert("中令错误")；
}
}
xmlhttp.status http发送状态
window. setTimeout
(
function1(){ },5000
)
t = setTimeout("timecount()",1000);
clearTimeout(t);
地址的跳转：
var url = document.getElementById('texturl').value;
window.localtion.href = url;
用document.location.href切换后，可以退回到原页面。而用document.location.replace切换后，不可以通过“后退”退回到原页面。
window.resizeTo(500,300)
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
重要事项：在 IE 5.0 及以后版本中，版本号是不正确的！在 IE 5.0 和 IE 6.0 中，微软为 appVersion 字符串赋的值是 4.0。怎么会出现这样的错误呢？无论如何，我们需要清楚的是，JavaScript 在 IE6、IE5 和 IE4 中的获得的版本号是相同的。
var links = document.body.getElementByTagName('a');
link[i]
var ul = document.getElementById('ddd');
ul .firstChild.style.backgroundcolor =
ul .lastChild.style.backgroundcolor =
for(var i =1; i<ul.childnodes.lengh-1;i++)
{
ul.childnodes[i].style.backgroundcolor =
}
节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
· nodeName（节点名称）
· nodeValue（节点值）
· nodeType（节点类型）
| xmlHttpRequest 方法 |
xmlHttpRequest 属性 |
| abort getAllResponseHeaders() getResponseHeaders() open() send() setRequestHeader [W1] |
onreadyStatechange readystate responseText() responseXMl() status() statusText() |
XMLHttpRequest 对象的属性：
onreadystatechange 状态改变的事件触发器
readyState 对象状态(integer):
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
AJAX一套件：
创建XMLHttpRequest 最低兼容 [W2] 兼XML [W3]
创建XMLHttpRequest 兼容IE5
创建XMLHttpRequest 多浏览器兼容性 (古老的)
XML小实例 02 014-product 013-getProduct。php
使用get xmlhttp.send()
使用post xmlhttp.send(para)
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); [W4]
CSS 媒体显示
@media print{ } 如果不支持的,整块都会忽略掉
<link herpf="print.css" rel="stylesheet" media="screen"> (media="all")
判断浏览器分辨率调用不同CSS（js+css） 像素
新建1024.css代码
新建800.css代码
html判断IE版本 不能用于其他 css中 条件注释只能在windows Internet Explorer(以下简称IE)下使用
这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。
<!--[if !IE]><!--> DEMO DEMO2
offsetLeft,Left,clientLeft的区别
JS实例：ajax实例
动态新增表格 isNaN() NaN 即Not a Number不是数字
innerHTML使用例-设定
跟着鼠标
图层拖、拉、放 完整实例 dragable="dragable" 可以拖
setAttribute('dragable','fixed') 不可以拖
aw=parseInt(a.style.width);
各式窗体取值
解决乱码问题php php服务器端先指定文件骗码格式
如果传回的接收方式是以responseTest方式接收，则服务器端先指定编码格式： header("Content-Type:text/html;charset=utf-8");
如果以Xml格式回传，则是
header("Content-Type:text/xml");
及时账号检查
AJAX 登录
解析xml文件
AJAX 以 XML 格式回传
AJAX XML 目录 导航
AJAX 提示内容 实时名词解释
AJAX 快速浏览 说明解释
AJAX 动态加载内容 切换标签
AJAX 分页设计 标签
自动输入选取 类似搜索引擎 自动提示功能 另一个实例
秀图机 电子相册 另一个相册实例
实现新闻滚动播放
动态加载列表框
显示进度条
根据代码列出城市
实时更新股价 mt_rand -- 生成更好的随机数
js高级效果，实例
不同时间段显示不同问候语
改变IE地址栏的IE图标
让网页随意后退
单击鼠标右键弹出添加收藏夹对话框
随机变换背景图象
实现Title动态效果JS脚本
滑过显亮 8.5.2 缺少的点击空间
IE常见私有属性-Scrollbar
css星级效果 01
小时钟
加入收藏夹 设为主页
窗口类
慢慢变大的窗口
弹出式窗口 弹出式窗口参数
类似MSN提示的页面效果(右下角短消息提示)
从由下脚自动弹出的一个小POP窗口
随滚动条滚动的QQ客服咨询特效代码
图片滚动显示代码
用层模拟可移动的小窗口 可用Jquery
带阴影的可拖动的浮动层 可用Jquery
CSS封闭页面 展开
链接的提示 弹出框
表格滚动信息示例
随滚动条移动的层
弹出无边全屏窗口 类似朩马
链接 简单显示框 title属性 [W5]
图片简单自动切换
菜单导航类
CSS styles 导航 压缩包
菜单导航类小实例
鼠标 背景类
进入页面类
禁止右键
真正的右键屏蔽
禁用右键并自动进入网站
右键 弹出导航菜单
JS代码素材 网络
prototype
每个函数对象都具有一个子对象prototype。顾名思义，prototype表示了该函数的原型，表示一个类的成员集合。当通过new关键字来获取一个类的对象时，prototype对象的成员都会成为实例化对象的成员。
所有JavaScript对象中的String对象缺少一个人们常用的函数，用户可以通过prototype为其添加。
function String_NewFunc()
{
somestatement;
}
String.prototype.NewFunc=String_NewFunc;
上述代码也可以表示为：
String.prototype.NewFunc=Function()
{
somestatement;
}
document 对象 属性
onblur 失去焦点
onfocus 得到焦点
http://www.souzz.net/online/dhtmlcn/objects/obj_document.html
window.open()的所有参数列表
IE下JavaScript迁移到FireFox (转 区别，兼容
△ 取集合元素时, ie支持 [],() 2种写法, 但是ff仅支持[],如:
table.rows(5).cells(0)
改为:
table.rows[5].cells[0
△ 判断对象是否是object的方法应该为
if( typeof 对象变量 == "object")
而不是 if(对象变量 == "[object]"
△ eval(对象名称) -> document.getElementById
FF支持eval函数
△ 通过id直接调用对象
对象id.value = ""
改为
document.getElementById("name").value =
△ createElement不支持HTML代码
用document.write(esHTML); 可以解决一部分情况
△ innerText -> textContent
△ className -> class
FF下用class代替IE下的className
由于class是关键字, 所以需要用 setAttribute/getAttribute才行
setAttribute("class","css样式名称");
△ FF里select控件不再是:总是在顶端显示
所以需要设置控件的zIndex
△ 对于if ( vars == undefined ) 下面的值用于判断是等同的
undefined
null
false
0
△ children -> childNode()
△ 判断函数或者变量是否存在
IE: if (funcName) funcName();
if (varName == undefined) varName=1;
FF: if (window.funcName) funcName();
if (window.varName == undefined) varName=1;
即前面要加 window.
注册事件处理： 对其进行封装
window.addEventListener('load',init,false) [W6]
window.attachEvent('on'+eventName,eventHander) [W7]
注销事件：
document.getElementById( ).onclick = null
发送请求：
oxmlHttpRequest.send(varbody) [W8]
当方法为post ，需要设置http头
xmlhttp.setReauestHeader('Content-thpe','application/ ')
document.getElementById(' ');
document.body.getElementById(' ');
IE不区分大小写 FF区分大小写
parentNode 常被用来改变文档的结构 （返回某节点的父节点）
var x = document.getElementById(' ');
x.parentNode.removechild(x); //删除子节点
创建元素节点：
document.createElement('div')
创建文本节点：
document.createTextNote( 'dfdfdfdf') ;
增加结点：
div.appendChild( );
document.getElementById('link').getAttribute.('href') //返回其属性
document.getElementById('link').removeAttribute.(target) //删除其属性
获取和设置元素css类：
document.getElementById('link').classname = 'link'
获取和设置元素样式：
node.style.backgroundcolor= [W9]
onreadystatechange 传送请求的状态
readyState
status = 200 相当于 statusText = 'ok'
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
// 从服务器的response获得数据
}
}
url='012/'+n+'.xml?timestamp='+new Date().getTime();
解决GET 的缓存问题，加上一个参数每次都有不同的数值
放在open方法之后
send()方法之前
I just read <a href=http://www.downwithwallpaper.com/tips.html title="DownWithWallpaper.com | How to Take Down Wallpaper">a great article</a> that gave me a few home improvement tips.
标准模型浏览器，在window 的load事件被触发时，执行init函数
removeEventListener 注销事件
IE浏览器，在事件前加on
detachEvent 注销事件
通过请求发送的数据，可以是字符串，DOM树，或者其它
如果发送的数据是字符串型，则回应的数据被编码为utf-8
可以按需要设置一个包含charset的文档类型开头。如果发送的数据为XML DOM Object ，则回应的数据将被编码为在XML文档中声明的编码类型。
如果XML文档中并没有声明编码类型，则使用默认utf-8
当使用get方法提交请求时，或者没有需要发送的数据时，可以send(null)或者省略参数send()
命名规则：
CSS属性如果由多个单词组成，则省略掉单词之间的横线，将单词连接在一起
，从第二个单词开始首字母大写，而如果CSS属性只是单个单词，则直接使用
background-color 改为 backgroundColor
如果CSS属性与javascript属性有保留字冲突，则在单词前面加上style
单词首字母大写：
float 改为 styleFloat
JSON数据格式：
function showJSON()
{
var user =
{
username:"andy",
age:20,
info:｛tel:"123456",cellphone:"98765"｝,
address:[{city:"beijing",postcode:"10000"},{city:"newyork",postcode:"555666"}]
}
alert(user.username);
alert(user.address[0].postcode);
}
XML数据格式:
使用CSS显示XML不够好，使用XSTL显示XML更加完善
标签对大小写敏感
属性值需加引号
元素不能为空
使用DTD来描述数据
如果把"<"放在XML元素中，会发生错误。 因为解析器会把它当作新元素的开始
避免：用< 来代替字符"<"
| < |
< |
小于 |
| > |
> |
大于 |
| & |
& |
和号 |
| &apos |
' |
单引号 |
| " |
" |
引号 |
XML中空格会被保留
避免使用XML属性 [W1]
有时候会向XML元素分配ID引用 [W2]
XPath 节点 教程
XML获取元素的值
下面的代码检索第一个 <title> 元素的文本值：
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;结果：txt = "Harry Potter"
获取属性的值
下面的代码检索第一个 <title> 元素的 "lang" 属性的文本值：
txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");结果：txt = "en"
改变元素的值
下面的代码改变第一个 <title> 元素的文本值：
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";
XML DOM:
定位DOM节点 [W3]
parentNode (返回本节点的父节点)
childchild
lastChild
nextChild
previousiblling
节点的属性：
nodeName 节点名称
nodeValue 节点值
nodeType 节点类型
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
.
创建元素节点： createElemen('span')
创建文本节点： createTextNode('it is a node')
DEMO
· x.getElementsByTagName(name) - 获取带有指定标签名称的所有元素 ..ById（）
· x.appendChild(node) - 向 x 插入子节点
· insertBefore(new ,ref)
· x.removeChild(node) - 从 x 删除子节点
· hasChildNodes() 检查是否有子节点存在
· replaceChild(new ,old) 将原节点内容转换成新的
· createElemen
· createTextNode
· getAttribute() 取得指定对象的属性值
· setAttribute(attr,value) 设定对象属性
·
setAttribute(attribute,value)：增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
element.setAttribute("class", value); //for firefox
element.setAttribute("className", value); //for IE
if (document.all){
a.setAttribute('onmouseover',function() {mouseOver(this);}); //IE
}else{
a.setAttribute('onmouseover','mouseOver(this);'); //非IE
}
函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。
解析 XML 文件 - 跨浏览器实例
重新声明 JavaScript 变量
如果您再次声明了 JavaScript 变量，该变量也不会丢失其原始值。[W4]
换行格式：
您可以在文本字符串内部使用反斜杠对代码进行折行。下面的例子是正确的：
document.write("Hello /
World!")
但是不能像这样折行：
document.write /
("Hello World!")
var myDate=new Date() [W5]
myDate.setFullYear(2008,7,9)
注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。
document.write("<h",i,">这是标题文字</h",i,">"); 也可以定成
document.write("<h"+i+">这是标题文字</h"+i+">");
with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中，请注意 Math 的重复使用： [W6]
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10)
y = Math.tan(14 * Math.E)
当使用 with 语句时，代码变得更短且更易读：
with (Math){
x = cos(3 * PI) + sin (LN10)
y = tan(14 * E)
}
字符集
· 一种是字符集是 GB2312，编码使用 ANSI。占用磁盘空间最少，网络传输效率最高。
· 一种是字符集是 UTF-8，编码使用 UTF-8。虽然占用磁盘空间大，传输效率略低，但因为兼容面广，在应用 Ajax 以及包含多种语言文字时使用方便。鉴于此原因，现在许多网页开发工具都默认使用 UTF-8 来保存网页，比如 Visual Web Developer。
Charset 是字符集，Encoding 是编码。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
@charset 字符集名称 css文件 [W7]
tbody实例
Ps设计质感播放器: photoshop
http://www.uimaker.com/plus/view.php?aid=1728
使用放射式渐变填充背景
复制背景，杂色，数量：5%；单色。透明度到30%。
制作主界面，圆角矩形，半径5px，颜色渐变参数为：＃3d4a59;＃1c2329;＃303a44 ，描边颜色为#191919。
600 × 600px。 充填50％灰色。 然后，添加杂色，参数设置：80％;高斯噪声，单色。 然后再选择滤镜模糊-径向模糊：旋转参数为100。 之后可以根据自己的感觉，使用快捷键CTRL + F重复径向模糊，直到你满意。
复制到之前创建的“base”图层上。更改混合模式为柔光，不透明度为80％。Ctrl + Shift +I, 选择Texture图层点击删除不要的选区。
”Higlights”，铅笔工具画两条线，分别放置在base图层的视频界面顶端和底部。大一点，80％不透明度的橡皮擦擦除两侧的线条。
最小化和最大化及关闭按钮。圆角矩形工具，半径为2px，画一个小按钮，
创建一个新层，命名为“X”。为了让X更好看，你可以使用你喜欢的字体或用铅笔绘制工具，之后再添加一个渐变（暗灰色，浅灰色）和1px阴影得到这个效果。
“进度条”。使用圆角矩形工具，半径设置为5px，绘制一个细长的矩形，黑色填充并添加图层样式：渐变叠加颜色设置为＃303a44-＃1c2329；添加描边1px，颜色为＃afbbc6，不透明度为16％。
“进度条旋钮”。一个小矩形，并填充黑色。图层样式选项为：内阴影：混合模式正常，颜色-白色，距离0，大小1，渐变叠加：＃5c6977 -＃212a30 -＃5c6977; 外描边：1px，颜色＃222b31。
关键是掌握和控制高光和细节的过渡
photoshop 调色技巧
调整蒙版边缘 滤镜 其它 最大值/最小值
最后一步 滤镜 锐化
调整 阴影/高光
标志设计
版式设计
JavaScript语法中12个需要绕开的陷阱 注意 细节
Javascript 快捷方式：
<a href = "javascript:alert(new Date())">abc</a>
<input type=button value=test onclick="alert(new Date())">
JavaScript 严格区分大小写
/**/中可以嵌套//
Null常量 已经有值
Undefined常量 根本不存在，或没赋值
Var mystr = "ddddfdf";
Alert(mysrt.length); //作属性用
但在java中好像要用mystr.length() //作方法用
Math对象
LN10 代表10的自然对数
LN2 代表2的自然对数
SQRT1-2 代表2的平方根分之一
SQRT2 代表2的平方根
Date对象
Parse方法 分析一个表示日期时间的字符串，反回它所表示的时间值，静态方法
Var x= 328;
x.toString(16) 转为16进制数
对象专用语句
With(对象名称){ }
For(变量 in 对象){ }
DOM对象的层次关系
Window
Location
Frames
History
Navigator
Event
Screen
Document
Links
Anchors
Images
Filters
Forms
Applets
Embeds
plugIns
Frames
Scripts
All
Selection
styleSheets
Body
禁止右键 DEMO
<a href = "44444" onclick="return false">abc</a>
<script language="javascript" for="document" event="oncontextmenu">
window.event.returnValue = false;
</script>
escape 编码 加密
unescape 解除编码
document.write(unescape(escape( '<html><><>fdsfsdfsdfsdf<><><</html>' )));
//这样就可以加密 输出的内容 与最终的文档效果是一样的
用原型(prototype) 重载 javascript 对象:
让我们用现实世界中的猫来举个例子.猫的 name 和 color 是猫的属性.meeyow(猫叫)是它的一个方法.重要的是任何不同的猫都可能有不同的 name 和 meeyow 的叫声.为了建立适应这些特征的对象类,我们将使用对象构造器.
<script language="javascript" type="text/javascript">
<!--
function cat(name) {
this.name = name;
this.talk = function() {
alert( this.name + " say meeow!" )
}
}
cat1 = new cat("felix")
cat1.talk() //alerts "felix says meeow!"
cat2 = new cat("ginger")
cat2.talk() //alerts "ginger says meeow!"
//-->
</script>
在这里,函数 cat() 是一个对象构造器,它的属性和方法在函数体里用this来定义,用对象构造器定义的对象用 new 来实例化.主意我们如何非常容易的定义多个cat 的实例.每一个都有自己的名字,这就是对象构造器带给我们的灵活性.
构造器建立了对象的蓝图. 并不是对象本身.
在原型里增加方法.
在上面我们看到的例子里,对象的方法是在构造器里定义好的了.另外一种实现的途径是通过原型 (prototype).xxx
原型是javascript继承的一种形式.我们可以为对象定义好后,再创造一个方法.原来所有对象的实例都将共 享.
让我们来扩展最初的 cat 对象.增加一个改名的方法.用 prototype 的方式.
<script language="javascript" type="text/javascript">
<!--
cat.prototype.changeName = function(name) {
this.name = name;
}
firstCat = new cat("pursur")
firstCat.changeName("Bill")
firstCat.talk() //alerts "Bill says meeow!"
//-->
</script>
就象你所看到的.我们仅只用了 关键字 prototype 实现了在对象定义后马上增加了changeName方法.这个方法被所有的实例共享.
原型(prototype)是JavaScript实现面向对象编程的一个基础，但它并不是唯一的构造类的方法，我们完全可以不使用prototype而 实现类的编写(把属性和方法的附加全都写在构造函数里面就行了)。不过原型除了可以为Object的子类添加新的属性和方法外，它还可以为脚本环境中的内 部对象继续添加原型属性和方法，比如我们最常用的给内部对象String添加一个Trim方法来删除字符串两端的空格，代码为：
String.prototype.Trim = function()
{
return this.replace(/(^/s*)|(/s*$)/g, '');
}
属性无法包含多个值（子元素可以）
属性无法描述树结构（子元素可以）
属性不易扩展（为未来的变化）
属性难以阅读来维护
<notr id = "501"> 它起作用的方式与HTML是一样的
添加结点实例：
var name = document.getElementById(" ").value;
var content = document.getElementById(" ").value;
var span = document.createElement("span"); //创建span结点
var nameText = document.createTextNode(name); //创建文本结点，值为name值
span.appendChild(nameText ); //将文本结点添加到span结点中
插入子结点：
paretNode.insertBefore(newNode,childNode);
var lis = ul.getElementByTagName('li');
li.appendChild(text);
ul.insertBefore(li,lis[i]);
ul.replaceChild(li.lis[2]); //替换
复制结点：
var p= document.body.getElementByTagName('p')[0];
var newNode = p.cloneNode(true); //true：包括原结点的子结点
document.getElementById('container').appendChild(newNode);
删除：
li.parentNode.removeChild(li);
读取结点属性（修改）：
document.getElementById("click").setAttribute("target","_blank");
另一种做法：
document.getElementById("click").target = "_blank";
var x=5;
var x;
在以上语句执行后，变量 x 的值仍然是 5。在重新声明该变量时，x 的值不会被重置或清除。
获取时间
function counttime()
{
var a=new Date();
var hour=a.getHours();
var minute=a.getMinutes();
var second=a.getSeconds();
var time=hour+":"+minute+":"+second;
alert("???úê±??ê?:"+time);
}
dfd.getTime()是以豪秒为单位
dfd.getTime()/1000 以秒为单位
窗口内框的设置
if(document.all)
{
with(window.document.body.style)
{
borderWidth="10";
borderStyle="solid";
borderColor="red";
}
}
在外部样式表文件内使用。指定该样式表使用的字符集。请参阅附 录：字符集。
在外部样式表文件内，此规则只允许发生一次。且必须在样式表的最前面。
对于内部样式表来说，其字符集由HTML文档 的字符集指定。请参阅meta对象的content属性（特性）。