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);

进入网站的口令设置

οnclick="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元素中，会发生错误。 因为解析器会把它当作新元素的开始

避免：用&lt 来代替字符"<"

&lt	<	小于
&gt	>	大于
&amp	&	和号
&apos	'	单引号
&quot	"	引号

 

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 οnclick="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"  οnclick="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属性（特性）。

 

 

 

AJAX 步骤： 创建XHR对象 打开和服务器的链接 open 发送请求 （IE:如果当次的请求参数与上一次一样，就不会发送,只读取缓存 解决：在URL加上date=new Date()） //在服务器端判断post方法 if (request.getMethod().equalsIgnoreCase("POST")) 为XHR对象绑定事件监听器（onreadystartechange , readyState=4 , status=200） post比get请求多了一个 设置请求头setRequestHeader() ; ---如果已经存在已此名称命名 的http头，则覆盖之。此方法必须在open方法后调用 setRequestHeader(("Content-Type" , "application/x-www-form-urlencoded")) ; send( = & = ..) ; 异步post请求默认采用utf-8的编码方式 如果用get请求方式，IE用gbk,firefox用utf-8，所以不稳定 jquery基础： jquery-1.4.2.js $美元符号： 得到的是一个jquery对象 选择器 10-4 功能函数前缀 10-5 简化window.onload 创建DOM 属性选择器 位置选择器 jQuery(表达式) jQuery(html字符串) jQuery(dom节点) 该函数的返回值可能是多个DOM节点所包装成的jQuery对象， 由于该jQuery对象里包装了多个DOM节点，因此我把这个jQuery对象称为类数组的对象。 类数组的过滤方法 DEMO DE MO2 jQuery对象提供了一些方法来操作类数组的jQuery对象。 有一个用于迭代处理每个DOM节点的方法： each() 使用了jQuery库之后，开发者编程应该面向jQuery对象。 通过get()/get(index)可以jQuery对象恢复成为DOM节点。 jQuery ←→ DOM节点 两个之间相互转换 jQuery → DOM节点 get()/get(index) DOM节点 → `jQuery $()/jQuery() --------------------------- 过滤相关的方法：作用用于将jQuery里的部分DOM节点排除掉。 DE MO2 仿DOM导航的方法：DOM节点之间肯定存在父子、兄弟关系。 jQuery也支持这种方式。 链接相关的方法：andSelf() 将过滤之前的结果和过滤之后拼接到一起。 end() 取消上次上次过滤的结果。 jQuery命名空间的一些方法： DEMO 你可以把这些方法当成jQuery的静态方法。 ------------------------------------- jQuery数据存取相关的方法。 相当于可以jQuery对象当成Map来使用。 操作属性的方法： attr 操作CSS相关属性的方法： css width height jQuery的方法有一个特征： html()/html(val) —— 不需要参数时相当于Java的getter/需要参数时相当于Java的setter 该方法相当于操作innerHTML属性。 val()/val(val) －－ 该方法相当于操作value属性。 DOM编程中，input.value cell.innerHTML 操作DOM节点的方法： A.append(B) -- 将B添加到A的尾部。 A.appendTo(B) -- 将A添加到B的尾部。 A.prepend(B) -- 将B添加到A的前部。 A.prependTo(B) -- 将A添加到B的前部。 动态改变列表项. 在节点外部操作 A.after(B) -- 在A的后面添加B A.insertAfter(B) -- 把A的添加到B的后面 A.before(B) -- 在A的前面添加B A.insertBefore(B) -- 把A的添加到B的前面 包裹，指在指定DOM节点的前后都要添加内容。 DEM)O 事件相关的方法： bind(事件，额外的数据, 监听器) one(事件, 额外的数据 , 监听器) － 当绑定的监听器函数被触发一次之后，该监听器函数就会被删除。 trigger － 用代码触发指定DOM节点上的事件。 jQuery默认支持动画很有限： 动态MENU 1. 渐隐 fade 2. 卷帘 slide 3. 移动效果。 4. 自定义动画。 鱼眼效果 Query的Ajax支持 两个工具方法： serialize()：转换为查询字符串。 DEMO serializeArray()：转换为查询数组。 ----------www.json.org的JSON支持-------------JsonWriter类 java库：可以非常方便地把java对象、java数组、java集合转换JSON字符串。 js库：可以非常方便地把JSON字符串，转为json对象。 c++库， =======jQuery的Ajax支持======== load(url , data , callback) DEMO data参数不是普通的查询字符串，而是查询数组。 jQuery.ajax(options)：是jQuery Ajax支持的根本实现。 DEMO get/post： 它们只是对jQuery.ajax()方法稍做封装。 jquery控制页面： 标记的属性： 获得属性的值 设置属性的值 元素的样式： 添加css类 动态切换 页面的元素： 直接获取、编辑内容 克隆元素 jquery处理事件： 事件监听 移除事件监听 jquery制作动画： 元素的显示与隐藏： show()和hide() 渐入渐出的变： deomo fadeOut fadeIn 幻灯片效果： slideUp slideDown jquery的功能函数： 浏览器的检测： $.brower对象 盒子模型： ie盒子模型 DOCTYPE声明 处理javascript对象： $.each遍历 $.each(object.fn) 获取未知对象的信息 数组的过滤 数组的转化 jquery与ajax: load方法 $.get $.post 控制ajax: 设置ajax的细节 $.ajax 相当于修改上面的$.get例 全局设置ajax $.ajaxSetup jquery插件： 表单插件： UI插件：Draggable jquery实例： jQuery UI Tabs