当前位置: article > 正文

ajax_hy66666网站

作者：很楠不爱3 | 2024-03-14 19:31:27

踩

hy66666网站

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：

<div id="mydiv" onclick="myfun()" /> 等价于：

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()函式

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

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

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{ } 如果不支持的,整块都会忽略掉

判断浏览器分辨率调用不同CSS（js+css）像素

新建1024.css代码

新建800.css代码

html判断IE版本不能用于其他 css中条件注释只能在windows Internet Explorer(以下简称IE)下使用

这个代码在非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 快速浏览说明解释

AJAX 分页设计标签

自动输入选取类似搜索引擎自动提示功能另一个实例

秀图机电子相册另一个相册实例

实现新闻滚动播放

动态加载列表框

显示进度条

根据代码列出城市

实时更新股价 mt_rand -- 生成更好的随机数

js高级效果，实例

改变IE地址栏的IE图标

滑过显亮 8.5.2 缺少的点击空间

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 是编码。

@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 快捷方式：

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/236886