JavaScript笔记

最新推荐文章于 2024-11-02 12:42:04 发布

程序开发员

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量513

点赞数

Cellspacing 设置单元格间距，其取值为像数值

Cellpadding 设置表格分隔线与表格内容的间距，其取值为像数值

<framename=”top” src=”标题.html”></frame>

<framesetcols=”200,*”>

<framename=”left” src =班级.html”></frame> <frame name=”right” src=”11.html”></frame>

</frameset>

<body>

<p>此网页使用了框架，您的web浏览器不支持框架功能。</p>

</body>

</noframes>

</frameset

班级.html

<html>

<body>

<ahref=”11.html” target=”right”>一(1)班</a><br>

<ahref=”12.html” target=”right”>一(2)班</a><br>

<ahref=”13.html” target=”right”>一(3)班</a><br>

</body>

</html>

处理不支持JavaScript脚本情况

<!—

//脚本语句

…………

//-à

</script>

这样，不支持脚本的浏览器完全忽略<!—和-à注释标记之间的内容，而支持脚本的浏览器则忽略<script>标记对里包含的注释符。

转义字符

\b(退格符) \f（换页） \n（换行） \r(回车) \t(制表符) \’（单引号） \”（双引号）

document.write(“<br>”)

typeof操作符返回一个字符串，表明操作数的类型

将字符串转换为数值

JavaScript语言提供了两个内置函数来将表示数值的字符串转换为真实的数值：parseInt()和parseFloat().

JavaScript全局函数

escape()和unescape()

escape()用于将一些特殊的字符变成ASCII编码,这些特别字符不包括字母和数字字符

unescape()用于还原

基于对象的编程

Window对象:在层次的顶部是window对象。此对象代表HTML文档在浏览器窗口的内容区域。在多框架环境中，每个框架都是一个窗口。

navigator对象:此对象主要用于读取处理当前文档的浏览器的商标和版本。它是只读的，以防止恶意的修改浏览器的非法访问

screen对象:

histroy对象：借助此对象，脚本可以模拟浏览器的“前进“和”后退“

location对象:此对象是将不同网页载入到当前窗口或框架的主要方法。

document对象：每个载入窗口中的HTML文档都是一个document对象

document.getElementById(“clicker”).name

document.getElementById(“clicker”).value

document.getElementById(“orderForm”).submit(); //将表单发送到服务器上

document.getElementById(“entry”).focus();

document.write(navigator.appVersion+”<br>”);

document.write(navigator.appName)

window.moveTo(50,100) //将窗口移动到坐标点

String对象

Var result = string.toUppereCase(); string.toLowerCase()

indexOf() substring()

Math对象

Math.PI

Math.max()

Math.pow(10，3)到一个数的n次方

Math.round():把一直四舍五入为最相近的整数值

Math.random()

Math.floor()返回浮点数的整数部分

Date对象

var someDate = new Date(“Month dd,yyyy hh:mm;ss”);

var someDate = new Date(“Month dd, yyyy,yyyy””);

var someDate = new Date(yy,mm,dd,hh,mm,ss);

var someDate = new Date(yy,mm,dd);

var today = new Date();

getDate(); 得到一月中的日期

getMonth();getYear()

getTime()

setTime()

setMonth(val)

setDate(val) //日期

setDay(val) ///星期

Array对象

var array = new Array(51); //声明对象数组

访问window对象的属性和方法

Window.propertyName

Window.methodName(参数)

当脚本引用指向存放文档的窗口时，window对象还有一个同义词------self

创建窗口

Window.open(URL,…..);

Window.close();

Window.status属性

当鼠标指向一个链接时，浏览器窗口底部的状态栏通常显示该链接的URL

window.alert();

window.confirm(“是否开始应用服务?”){

location.href= “index.html”

}

Window.prompt()方法有两个参数,第一个参数是提示信息，第二个显示文本框的默认值

Window.onload()

Window.location()

Location对象

navigator对象

document对象

document.forms[]属性:在document对象中包含document.forms[]属性对脚本编程比较方便，其值是文档中所以表单元素的数组，方括号内的索引值指向数组中的某个元素。

Document.images[]属性:

Document.images属性的存在表示浏览器支持图像交换，这样就可以使用已存在的属性作为

一个控制器，以确保在执行一些图像的脚本动作前浏览器使用对象支持图像

document.title属性

document.write()方法

document.createElement()和document.createTextNode()方法

var form = window.document.forms[0];

for(var i=0;i<form.elements.length;i++){

if(form.elements[i].type== “text”)

form.elements[i].value= “”;

}

<html>

<head><title>SelectNavigation</title>

<scripttype="text/javascript">

<!--

functiongoThere(){

varlist = document.forms[0].urlList;

location.href= list.options[list.selectedIndex].value;

}

//-->

</script>

</head>

<body>

<form>

选择需要显示的页面:

<selectname="urlList" οnchange="goThere()">

</select>

</form>

</body>

</html>

Image图像

可交换的图像

预缓存图像

语法如下:

varmyImage = new Image(width,height);

myImage.src = “someart.gif” //gif图像为网页形式的图像

<html>

<head><title>image对象</title>

<scripttype="text/javascript">

<!---

varimageLibrary = new Array();

imageLibrary["image1"]= new Image(120,90);

imageLibrary["image1"].src= "image1.gif";

imageLibrary["image2"]= new Image(120,90);

imageLibrary["image2"].src= "image2.gif";

imageLibrary["image3"]= new Image(120,90);

imageLibrary["image3"].src= "image3.gif";

imageLibrary["image4"]= new Image(120,90);

imageLibrary["image4"].src= "image4.gif";

//从选择列表中载入图像

functionloadCached(list){

varimg = list.options[list.selectedIndex].value;

document.thumbnail.src= imageLibrary[img].src;

}

//-->

</script>

</head>

<body>

<h2>image图像</h2>

<form>

<optionvalue="image1">带</option>

<optionvalue="image2">回形针</option>

<optionvalue="image3">灯</option>

<optionvalue="image4">橡皮

</option>

</select>

</form>

</body>

</html>

通过W3C DOM节点动态处理网页内容

varnewElem = document.createElement(“p”);

newElem.className= “centered”;

varnewText = document.createTextNode(“谢谢浏览”+document.forms[0].firstName.value);

//在新的节点中插入文本节点

newElem.appendChild(newText);

//将完成的段落插入到placeholder

Document.getElementById(“placeholder”).appendChild(newElem);

通过InnerHTML属性动态处理网页的内容

Document.getElementyId(“calcButton”).addEventListener(“click”,doCalc,false):第一个参数是要监听的事件的字符串，第二个是当事件被激活时被调用函数的引用，第三个是boolean值设为true时，不管何时该事件指向目标，它都启动事件捕获。

节点方法

appendChild()

cloneNode();得到当前节点的副本

hasChildNodes();

insertBefore(new,ref

removeChild();

replaceChild()

isSupported(feature,version)

var newText = document.createTextNode(“Thisis the second paragraph.”);

accessKey:可以为元素指定一个键盘字符（字母，数值或标点符号，也就是输入“Alt+键”组合键

all属性是当前对象引用域内HTML和XML标记的集合（数组）。数组中的项以源代码顺序出现，并且数组不考虑每个项中的包含元素。

attributes[]

attributes属性包括一个为元素指定的属性数组

behaviorUrns属性用来提供一个URN形式的地址列表，如果没有行为，该数组的长度为0.

canHaveChildren属性表示一个特定的元素是否包含一个子元素

canHaveHTML属性让脚本发现一个特定的对象是否可接收HTML内容

childNodes[]:属性是指当前对象中包含的节点对象的数组。

Childred属性是指包含在当前对象中的元素对象的数组

className:是赋值元素class属性的标识符

firstChild lastChild

<scripttype="text/javascript">

<!--

functionmakeNewLI(txt){

varnewItem = document.createElement("li");

newItem.innerHTML= txt;

returnnewItem;

}

functionprepend(form){

varnewItem = makeNewLI(form.input.value);

varfirstLI = document.getElementById("myList").fristChild;

document.getElementById("myList").insertBefore(newItem,firstLI);

}

//-->

</script>

innerHTML innerText

innerHTML属性包括网页上见到的元素的文本内容，还包括与内容相关的每个HTML标记语言（如果没有标记，文本照样显示）

<p id=”paragrapj1”>”How<em>are</em> you ? “he asked<</p>

段落对象的innerHTML属性的值是”How <em>are</em>you ? “he asked

innerText属性只知道元素容器的文本内容：”How are you ? “he asked

通用HTML元素对象

accessKey：可以为元素指定一个键盘字符 “Alt+键”组合或 Ctrl+键

all[]: all属性是当前对象作用域内ＨＴＭＬ元素和ＸＭＬ标记的集合。数组中的项以源代码顺序出现，并且数组不考虑每个项中的包含元素，每个document.all集合都包含html,head,title和body元素对象。all属性对任何容器元素都是可用的，例如，document.forms[0].all显示定义在网页第一个表单中的所有元素。还可以使用赋给id属性的标识符的字符串形式访问任何元素。如:var paragraph =document.all[“myp”];.如果出现id相同的元素，通过 varsecondRadio = document.all(“group0”,1);还可以var secondRadio = document.all.item(“group0”,1);

attributes[]:attributes属性包含一个为元素指定的属性数组。attributes数组包含浏览器为元素定义的每个可能的属性，即使这些元素在HTML标记中没有明确设置。通过脚本功能（如setAttributes（）方法）添加的任何属性都不反映在attributes数组中

behaviorUrns[]: behaviorUrns属性用来提供一个URN形式的地址列表。如果没有行为，该数组的长度为0.

varnum = document.getElementById(“myP”).behaviorUrns.length;

canHaveChildren:属性表示一个特定的元素是否包含一个子元素，这在一些动态内容情况下很有用

canHaveHTML:虽然大多数HTML元素是HTML内容的容器，但不全是。canHaveHTML属性让脚本发现一个特定的对象是否可接收HTML内容。对于p元素，该属性的值为true，对于br元素，该属性的值为false

childNodes[]：childNodes属性是指当前对象中包含的节点对象的数组。注意子节点包括元素对象和文本对象，childNodes[i].nodeType == 1是否为1，如果不为1，则跳过

children：children属性是指包含在当前对象中的元素对象的数组，children不考虑文本节点，而是从当前对象的视图位置来考虑的，将重点放在HTML元素的包含层次上

className:className是赋给元素class属性的标识符。为了使一个CSS规则和文档中的几个元素相关联，最好把相同的标识符赋给那些元素的class属性并且使用该标识符作为CSS规则选择符。

clientHeight clientWidth:这两个属性用于显示元素内容像素高度和宽度。从理论上来说，它们不考虑任何通过样式表加入元素中的页边距、边框或填充符

clientLeft clientTop属性只返回元素周围边框的厚度

contentEditable:

currentStyle

dir:属性控制元素文本从左至右显示还是从右至左显示

disabled

document：属性是保护对象的文档引用。

filters[]数组：滤镜是IE指定的样式表附件，它提供各种样式表显示，并可使元素隐藏或可见，每个滤镜规范都是一个filter对象。

firstChild lastChild

height width:属性反映元素的宽度和高度

innerHTML

innerText

isContentEditable:属性返回一个Boolean值，表明一个特定的元素对象是否设置为可编辑的。

isDisabled:表明一个特定的元素是否可用

isMultiLine：属性表示元素对象是否能够占据或显示多行文本。

isTextEdit：属性显示一个对象是否可拥有其内容创建的TextRange对象

lang

language

length

nextSibling previousSibling兄弟元素和另一个元素在相同嵌套层上的元素。

nodeName

nodeType

nodeValue

offsetHeight offsetWidth：属性显示元素的宽度和高度

offsetParent：属性返回作为当前元素位置上下文的对象的引用。对于大多数文档而言，offsetParent对象是document.body对象

outerHTML

outerText

parentElement

parentNode

parentTextEdit

readyState:属性用于让用户知道元素的载入状态

recordNumber

rutimeStyle:属性用于告知用户浏览器的样式表属性

scopeName

scrollHeight

scrollWidth

sourceIndex

style

tabIndex:控制当前对象在Tab序列中的何处接收焦点，该属性只应用在可接收焦点的元素中

appendChild（）：方法用于插入一个元素或文本节点，作为当前元素的最后一个子节点或元素

applyElement();：用于插入新元素，将其作为当前元素的父元素或子元素

attachEvent(“eventName”,functionRef)：事件绑定

detachEvent(”eventName”,functionRef);

window.blur()：方法从元素中移去焦点

window.focus()：

click()：方法让脚本完成几乎和单击元素相同的动作

clearAttributes():方法从元素中删除除name和id属性外的所有属性

cloneNode():产生一个当前节点的副本

componentFromPoint(x,y);：方法一般用于某些冲突检测中。

contains（elementObjectReference）:方法报告当前对象在其HTML包含层次中是否包含另一个已知的对象

dispatchEvent(eventObject):方法允许脚本激活一个事件，其目标为能支持此事件的任何对象

fireEvent()

getAdjacentText(“position”):方法允许提取元素对象的纯文本组件

getAttribute();

getAttributeNode();

getBoundingClientRect();

getClientRects()：方法返回事件触发时当前对象的所有TextRectangle对象的数组

getElementsByTagName(“”)：方法返回当前对象的所有元素数组

getException(“”);方法返回表达式的文本

hasChildNodes();

insertAdjacentElement(“location”,elementObject);:方法在相对于当前对象的特定位置插入一个元素对象。第一个参数为4个可能位置之一：beforeBegin afterBegin beforeEnd afterEnd

insertAdjacentHTML(“location”,”HTMLText”)

insertAdjacentText(“location”,”text”);

insertBefore();:将心得节点插入到现有元素的W3C DOM语法，俩个参数的节点引用必须是有效的Node对象，方法只从父元素起作用

item()方法使用大多数对象，它们本身是其他对象的集合。

Document.getElementById(“myTable”).childNodes.item(2)= document.getElementById(“myTable”).childNodes[2];

mergeAttributes();方法是在新创建元素中复制属性的一种方法，可以不费力地每次加入一个属性

normalize()

releaseCapture();

setCapture();

removeAttribute();;

removeAttributeNode();

setAttributeNode();

removeBehavior();::方法使对象与一个行为解除关联

removeChild()：方法从当前元素中删除一个子元素，和子元素相关的内容在网页上不再可见。

removeExpression();:通过setExpression()方法把一个表达式赋给一个对象属性，那么可使用removeExpression()方法在脚本控制下删除它

removeNode();

replaceChild(newNodeObject,oldNodeObject);:方法允许用一个新节点替换一个现有子节点对象。

setActive()方法让脚本指定一个元素对象为当前活动元素，

onbeforecopy:：在复制之前触发这个动作

onbeforecut:在剪切之前触发

onbeforepaste: 在粘贴之前触发

onblur:当一个具有焦点的元素要失去焦点时触发

onclick

oncontextmenu:当用户用鼠标右击一个对象时，调用oncontextmenu事件处理程序

oncontrolselect

oncopy

oncut

ondblclick

ondrag //拖放

ondragend

ondragstart

ondragenter

ondragleave

ondragover

ondrop:拖放结束时触发

onfilterchange:

onfocus

onhelp

onkeydown

onkeypress

onkeyup

onmousedown

onmouseup

onmouseenter

onmouseleave

onmousemove

onmouseout

onmouseover

onpaste

onpropertychange:不管何时脚本修改对象属性，都将触发

onreadystatechange：当对象准备状态改变时

onresize

onresizeend

onresizestart

onselectstart:当用户开始选择网页上的内容时，事件被激活

Window对象和Frame对象

window有top,self ,parent和Frame等多个同义词

框架

</frameset5>

禁止载入框架

if(top!= self)

top.locatioin= location;

</script>

强行载入框架集

top.location.href = “myFrameset.html

window.open(“”,”subwindow”,”height=200,width=200”)

window.closed();

defaultStatus:在状态栏中显示一个字符串

<html>

<head>

<title>window.defaultStatusproperty</title>

<scripttype="text/javascript">

<!--

window.defaultStatus= "Welcome to my Web site.";

//-->

</script>

</head>

<body>

<ahref="http://www.baidu.com" οnmοuseοver="windowe.status='VisitMicrosoft\'s Home page.';return true"οnmοuseοut="window.status='';return true">baidu</a>

</body>

</html>

dialogArguments

dialogHeight,dialogWidth,dialogLeft,dialogTop

directiories

locationbar

menubar

personalbar

scrollbars

statusbar

toolbar

var originalLocationbar =window.locationbar.visible;

var originalMenubar =window.menubar.visible;

var originalPeronalbar =window.personalbar.visible;

document

event

external:只有当浏览器窗口作为另一个应用程序的组成部分时，external属性才有用

frameElement

frames：要利用frames属性在框架之间进行通信，它必须是以parent或者top属性开头的引用。如parent.frames.length, parent.frames[0] parent.frames[1].document.title

history

innerHeight

innerWidth

outerHeight

outerWidth

inner测试的是窗口的活动文档区域（有时被称为窗口的内容区域）

outer测试的是整个窗口的外部边界，包括所有显示在窗口中的窗框：滚动条和状态栏

window.resizeTo()：方法用于改变窗口的外部尺寸，用像素的高度和宽度作为参数

<html>

<head>

<title>windowSizer</title>

<scripttype="text/javascript">

<!--

varoriginalWidth = window.outerWidth;

varoriginalHeight = window.outerHeight;

functionsetInner(width,height){

window.innerWidth= width;

window.innerHeight= height;

}

functionsetOuter(width,height){

window.outerWidth= width;

window.outerHeight= height;

}

functionrestore(){

window.outerWidth= originalWidth;

window.outerHeight= originalHeight;

}

//-->

</script>

</head>

<body>

<form>

<b>SettingInner Sizes</b><br />

<hr/>

<b>SettingOuter Sizes</b><br />

<hr/>

</form>

</body>

</html>

location

name

navigator

offscreenBuffering

onerror:直接使用window.eonerron时会报没有定义，需把它封装到函数中去，调用函数来实现处理. 如:

function doNothing(){return true}

widnow.onerror = doNothing();

oppener属性的目的在于为新窗口的脚本提供一个有效引用，使之回到原窗口中

var newwindow = window.open(“script14-12.html”,”subWindow”,”height=200,width=350,resizable”);

pageXOffset:是横向偏移

pageYOffset:是纵向偏移

parent:当文档作为多框架窗口的一部分显示时，parent属性将首先起作用

returnValue

screen

screenLeft

screenTop

screenX

screenY

screenMaxX

scrollMaxY

scrollX

scrollY

self

window.document.title = self.document.title= document.title

status

top

alert(“message”)

confirm()

prompt()

back()

forward()

history.back(),history.forward(),history.go()

captureEvents(eventTypeList) ：如果想让window对象截获待定类型的事件，则使用

window.captureEvents()方法

window.captureEvents(Event.CLICK);对于多个事件，中间需要加(|)符号将它们分开

window.captureEvents(Event.MOUSEDOWN |Event.KEYPRESS);

clearInterval();

window.clearInterval()方法用于终止window.setInterval()方法启动的时间间隔循环动作，其参数是setInterval()方法返回的ID值

clearTimeout(tiemoutIDnumber); 跟上面的差不多

window.clearTimeout()方法与window.setTimeout()方法相对应

close();

confirm(“message”);

createPopup():产生的窗口仅在内存中创建对象而不显示对象。”

execScript(““):用于执行一个或者多个脚本语句

window.execScript(“myVar = 10; myVar +=5”);

find();

var success = window.find(“contract”)

handleEvent(event);

home()

navigate(“URL”):用于将新文档载入到窗口中或者框架中。这个方法的功能与为location.href属性指定一个URL一样

window.navigate(“http://www.baidu.com”);

print():方法提供了从框架集将窗口或者框架传递到打印机的脚本方法

prompt(“message”,”defaultReply”)

releaseEvents(eventTypeList):用于释放捕获的事件

window.captureEvents(Event.CLICK |Event.KEYPRESS | Event.CHANGE) 捕获事件

window.releaseEvents(Event.KEYPRESS |Event.CHANGE);

resizeBy(deltaX,deltaY):方法将窗口沿一个或两个坐标轴移动一定的像数值，与先前指定的窗口大小无关，仅与每个坐标轴的改变有关

resizeTo(outerwidth,outerheight)

rotuteEvent(event)

scroll():方法有两个参数，即文档的窗口和框架左上角位置的横坐标和纵坐标

scroll(deltaX,deltaY)

scrollTo(x,y)

setInterval()

setInterval(function，时间)

setTimeout();

clearTimeout();取消当前的计时器

showHelp()

showModalDialog()

showModalessDialog();

var specifications =window.showModalDialog(“preferences.html”)

sizeToContent();:能确定窗口是否调整到了最适合内容显示的大小

stop()

事件处理程序

onafterprint

onbeforeprint

这些事件处理程序在用户单击IEPrint对话框的OK按钮后触发

function showPrintCopyright(){

document.all.printCopyright.style.display= “block”;

}

function hidePrintCopyright(){

document.all.printCopyright.style.display= “none”

}

window.onbeforeprint = showPrintCopyright;

window.onafterprint = hidePrintCopyright;

ondraydrop

onerror

onhelp

onmove

onresize

onunload

frame元素对象

访问frameset的frame元素对象的属性的语法如下

document.all.frameID.property

属性

allowTransparency:该属性表示框架的背景是否是透明的

borderColor

document.getElementById(“contentFrame”).borderColor= “red”

只适用于IE浏览器的语法是：

document.all[“contentsFrame”].borderColor =“red”

contentDocument

frame元素对象的contentDocument属性是框架所包含文档的引用，这一属性消除了frame元素对象和frame对象的隔阂。

contentWindow

frame元素对象的contentWindow属性是对框架产生窗口的引用，此属性提供对框架窗口的访问，可以用于到达框架中的文档。

var win = document.getElementById(“Frame3”).contentWindow;

frameBorder

frameBorder属性提供对frame元素对象的frameborder属性的脚本化访问。

frameBorder属性的值是字符串，但它们具有boolean值的意义，yes或者1表示边框打开，no或者0表示边框关闭

function toggleFrameScroll(frameID){

vartheFrame = document.getElementById(frameID);

if(theFrame.frameBorder== “yes”)

theFrame.frameBorder= “no”;

else{

theFrame.frameBorder= “yes”

}

height

width

var frameWidth = document.getElementById(“leftFrame”).width;

longDesc

marginHeight

marginWidth

frame.marginHeight

name:属性是与框架相关的标识符，用于框架引用

noResize

下列语句将关闭框架的大小调整功能

parent.document.getElementById(“myFrame1”).noResize= true;

scrolling属性使脚本在框架集的单框架中打开和关闭滚动条。

Scrolling属性的值为字符串，但其含义是Boolean值。Yes或者1表示滚动条可见，no或者0表示在框架中隐藏滚动条

<html>

<head>

<title>frame.scrollingPropeerty</title>

<scripttype="text/javascript">

<!--

functiontoggleFrameScroll(frameID){

vartheFrame = document.getElementById(frameID);

if(theFrame.scrolling!= "no")

theFrame.scrolling= "no";

else{

theFrame.scrolling= "yes";

}

functionfillFrame(frameID){

varpage = "<html><bodyοnclick='parent.toggleFrameScroll(\"" + frameID +"\")'><span style='font-size:24pt'>";

page+= "<p>This frame has the ID of:<\/p><p>" + frameID+ ".<\/p>";

page+= "<\/span><\/body><\/html>";

returnpage;

}

//-->

</script>

</head>

<framesetid="outerFrameset" cols="50%,50%">

<framesetid="innerFrameset1" rows="25%,25%,25%,25%">

</frameset>

<framesetid="innerFrameset2" rows="25%,25%,25%,25%">

</frameset>

</html>

src:frame元素对象的src属性提供了允许在框架中浏览不同页的另外一种方式

Frameset元素对象

border

borderColor属性能读出指定框架集标记bordercolor属性的颜色值。

var borderColor =parent.document.all.outerFrameset.borderColor;

cols

rows

frameBorder

frameSpacing:此属性能读出框架集之间的间距

var spacing = parent.document.all.outerFrameset.frameSpacing();

iframe元素对象

属性

align：align属性控制iframe元素与其他内容对齐，其依据是网页上元素周围的内容

iframe的默认对齐方式为baseline，使用下列的脚本语句可变为右对齐方式

document.getElementById(“iframe1”).align = “right”;

contentTranparency:此属性表示iframe的背景是否是透明的

contentDocument:iframe元素对象的contentDocument属性就是框架所包含文档的引用。

contentWindow:ifame元素的contentWindow属性用于框架产生的window对象的引用

height

width

hspace

vspace

longDesc

marginHeight

marginWidth

name

scrolling

src

popup对象

语法

创建popup对象

varpoputObj = window.createPopup();

从创建弹出式窗口的文档中访问popup对象的属性

属性

document:通过此属性来控制弹出式菜单的内容

myPopup.document.body.style.border = “solid3px gray”;

isOpen:当一个弹出式菜单可见时，isOpen属性返回true，否则，返回false

方法

hide()

show(left,top,width,height,””);有5个参数，前四个参数是必需的，用于定义弹出式窗口的位置和大小。为了限制浏览窗口内容区域，可以将document.body作为第5个参数定义元素的引用

<html>

<head>

<title>popupObject</title>

<scripttype="text/javascript">

<!--

varpopup;

functioninitContent(){

if(popup&& !popup.isOpen){

varpopBody = popup.document.body;

poBody.style.border= "solid 3px red";

popBody.style.padding= "10px";

popBody.style.fontSize="24pt";

popBody.style.textAlign="center";

varbodyText = "<p>This popup will self-destrut in";

bodyText+= "<span id='counter'>05<\/span>";

bodyText+= "seconds...<\/p>";

popBody.innerHTML= bodyText;

}

functioncountDown(){

if(popup&& popup.isOpen){

varcurrCount = parseInt(popup.document.all.counter.innerText,10);

if(--currCount== 0){

popup.hide();

popup= null;

}else{

popup.document.all.counter.innerText= "0"+currCount;

setTimeout("countDown",1000);

}

functionselfTimer(){

popup= window.createPopup();

initContent();

popup.show(200,200,400,100,document.body);

setTimeout("countDown()",1000);

}

//-->

</script>

</head>

<body>

<form>

</form>

</body>

</html>

Location对象和histroy对象

浏览器将当前网页的URL信息保存在location对象中，将浏览过的网页的URL保存在histroy对象中。

Location对象

在文档对象层次结构中，location对象比window对象低一个层次，它表示当前打开的窗口或框架的URL信息。多框架窗口在浏览器的location域中显示其父窗口的URL

通过将window.location.href属性设置为需要的URL，可以将浏览器导航到另一个URL

Window.location.href=”http://www.baidu.com”;

hash

<html>

<head>

<title>location.hash</title>

<scripttype="text/javascript">

<!--

functiongoNextAnchor(where){

window.location.hash= where;

}

-->

</script>

</head>

<body>

<form>

</form>

<hr/>

<h1><aid="sec1" name="sec1">Section 1</a></h1>

<form>

</form>

<hr/>

<h1><aid="sec1" name="sec2">Section 2</a></h1>

<form>

</form>

<hr/>

<h1><aid="sec1" name="sec2">Section 3</a></h1>

<form>

</form>

</body>

</html>

host

location.host属性描述URL的主机名和端口

hostname

典型URL的主机名是存储在浏览器中的文档的网络服务器名。

href:在所有的location对象属性中，href是脚本中最常使用的一个，它提供了指定window对象的完整URL字符串

window.location =”http://www.baidu.com”

windlow.location.href =”http://www.baidu.com”

pathname

URL的路径名部分由相对于服务器的根卷表的目录结构组成

port

protocol

方法

assign(“URL”)

reload()

location.reload()方法容易与浏览器工具栏中的Reload、Refresh

replace（”URL”）；

location.replace(“aa.html”)可以导航到另一个网页

history对象

使用histroy对象及其back()或者go（）方法

属性

Current

Length

History.length:：属性可以计算历史记录时的列表项地方个数

<html>

<head>

<title>HistroyObject</title>

<scripttype="text/javascript">

<!--

functionshowCount(){

alert("laizhibing");

varhistCount = window.histroy.length;

if(histCount>=5){

alert("My,my, you\'ve been busy. You have visited"+hisCount+"pages sofar");

}else{

alert("Youhave been to "+hisCount+"Web pages this session");

}

-->

</script>

</head>

<body>

<form>

<inputtype="button" name="activity" value="My Activity"οnclick="showCount()">

</form>

</body>

bck(),forward()方法

Document对象和body元素对象

Document对象包括浏览器窗口或整个窗口框架的内容区域，文档是内容以及网页可访问元素的组合

Document.forms.length 获取所有浏览器中form对象的数目

Document.getElementByTagName(“form”).length

activeElement:确定哪个元素具有焦点，返回值为一个元素对象的引用

alinkColor

bgColor

linkColor

vlinkColor

anchors[]：对象是HTML文档中用<aname=””>标记定义的点

anchors数组以索引值0开始，因此，文档中第一个锚点是document.anchor[0]

applets[]

body

document.body属性是现代对象模型中body元素对象的快捷引用

charset属性表示字符集

characterSet属性显示浏览器当前文档使用的字符集

compatMode属性显示文档中使用DOCTYPE内容说明的兼容模式

cookie:通常被作为一种保存用户名和密码的方法

defaultCharset:属性表示浏览器用于显示当前文档的字符数

document.charset = document.defaultCharset

defaultView:属性返回对服务于当前文档的阅读器对象的引用。阅读器显示当前文档

designMode：只有在将

doctype:属性返回documenbtType对象引用

documentElement:属性返回一个HTML元素对象引用，该对象包含当前文档的所有内容

domain

embeds：无论何时载入那些需要插件程序才能运行和显示的数据，都可以使用<embed>标记，document.embeds属性用于确定定义在文档中的标记数目

var count = document.embeds.length

expando：microsoft将任何自定义属性都称为expando属性，这个属性不是document.expando属性的默认是true

fileCreateDate

fileModifiedDate

fileSize

forms[]

frames[]

height

width

ids[]:IE特有的，相当于document.all

images[]:

implementation

lastModified

layers[]:document.layers属性是文档中的定位元素数组

links【】

location

URL

media

mimeType

nameProp

namespaces[]

parentWindow

plugins[]:document.plugins属性返回一个数组

protocol：document.protocol属性返回用来访问当前文档的协议的纯语言版本

referrer

scripts[]:IE特有的document.scripts属性返回当前文档所有script元素对象的数组

security

selection

styleSheets[]

tags[]

title

URLUnencoded

方法

captureEvents

clear()

close()

crateAttribute()

createComment

createElements(“tagName”)

createEventObjecy():方法创建event对象，它能作为参数传递到任何元素对象的fireEvent()方法中

createRange()

createStyleSheet()

createTextMode(“textf”)

elementFromPoint(x,y):IE特有的方法，返回任何元素对象的引用

execCommand()

getElementByIf();

getElementsByName()

getSelection();handleEvent(event)

open（）

recalc()

releaseEvent()

routeEvent(event)

onselectionchange

onstop

body元素对象

aLink

byColor

link

text

vLink

background

document.body.background

bottomMargin

leftMargin

rightMargin

topMargin

noWrap:属性能修改body元素的行为

document.body.noWrap = true;

scroll

document.body.scroll = “no”

scrollLeft

scrollTop

方法

CreateControlRange():创建一个控件范围，控件范围用于基于控件的选择

createTextRange()

doScroll(“”)

事件处理程序

Onafterprint

Onbeforeprint

TreeWalker对象

TreeWalker对象是节点列表的容器。

属性

currentNode:属性返回当前节点的引用

方法

firstChild()

lastChild()

nextSibling()

parentNode()

previousSibing()

nextNode()

priviousNode();

Link对象和anchor对象

属性

charset:属性代表a元素的HTML4.0的charset属性它建议由href属性表示文档需要使用的字符集

coords

shape

这两个属性是HTML4.0为适应不同形状和坐标的a元素而提供的

hrefLang

Methods

mimeType:这一属性用于获取a元素超链接文档的MIME类型

name属性

nameProp

protocolLong

rel

rev

rel和rev属性定义a元素目的文档前进和后退方向之间的关系，浏览器仍然有待于开发这些属性潜在的功能

target:link对象的一个重要属性是target。这一属性值反映由a元素的target属性指定的窗口名

text；在超链接的首尾标记之间是一项在文档指定可分辨超链接高亮显示的文本

type

urn：属性表示IE特有的URN属性，它允许编程人员对a元素的目标使用URN

NN4脚本可以通过link.x和link.y属性获得link对象的x和y坐标，一般是通过a元素的offsetLeft和offsetTop属性来获得超链接的坐标

Image对象、area对象和map对象

image对象和img元素对象

image对象是包含在文档中的对象之一，静态image对象实例存在于浏览器的内存中但不向用户显示

属性

align：属性的值

absbottom middle

absmiddle right

baseline texttop

bottom left

<html>

<head>

<title>imgalign Property</title>

<scripttype="text/javascript">

<!--

functionsetAlignment(sel){

alert("laizhibing!!!");

document.getElementById("myIMG").align= sel.options[sel.selectIndex].value;

}

//-->

</script>

</head>

<body>

<h1>imgalign Property</h1>

<hr/>

<form>

Choosethe image alignment:

<selectοnchange="setAlignment(this)">

<optionvalue="absbottom">absbottom</option>

<optionvalue="absmiddle">absmiddle</option>

<optionvalue="baseline">baseline</option>

<optionvalue="left">left</option>

<optionvalue="bottom" selected="selected">bottom</option>

<optionvalue="middle">middle</option>

<optionvalue="right">right</option>

<optionvalue="texttop">texttop</option>

<optionvalue="top">top</option>

</select>

</form>

<hr/>

<p>

agarwehyaehjaejhaejaejaejnjtrasjaejaeja;hraeh

hraehaejhaejnaejhnet

hreahaehjaejhae.

<imgalt="image" id="myIMG"src="achor1.gif"/>harwdehrwhawehbaEHREAhbaW

HREAHUJAEHJAEJHAEJNTAEFJNASh

hrawhbawehAWEHwhaEWH

</p>

</body>

</html>

alt:属性在网页下载到客户端之前，设置或修改浏览器显示在图像矩形区域中的文本

border属性定义图像边框的厚度。记住，如果在a元素中放入图像来使用鼠标事件，则要确保将<img>标记的border设置为0，从而防止浏览器在图像周围的边框创建普通超链接类型

complete:在进行网页编程时，有时需要在允许载入另一个网页前确认当前图像是否已载入完毕。这与在触发其他进程前等待图像载入完全不同。为验证img对象是否显示一个完整的图像，可以检验complete属性的Boolean值；为验证一个特定的图形文件是否已经载入，应首先检查complete属性是否为true，然后比较src属性和期望的文件名

if(document.myImage.complete){

//statementsthat work with document.myImage

}

<html>

<head>

<title>Scriptingimage.complete</title>

<scripttype="text/javascript">

<!--

functionloadIt(theImage,form){

form.result.value= "";

document.images[0].src= theImage;

}

functioncheckLoad(form){

form.result.value= document.images[0].complete;

}

//-->

</script>

</head>

<imgalt="image" src="1.jpg" width="120"height="90" οnlοad="" />

<form>

<inputtype="button" value="1.jps"onClick="loadIt('1.jpg',this.form)" />

<inputtype="button" value="2.jpg"onClick="loadIt('2.jpg',this.form)" />

<p>

<inputtype="button" value="Is it loaded yet?"onClick="checkLoad(this.form)">

<inputtype="text" name="result" />

</p>

</form>

<body>

</body>

</html>

\dynsrc:属性是指向视频源文件的URL，在IE中它可以用img元素播放。通过img元素对象的dynsrc属性指定有效的视频源文件的URL，可以将静态图像的区域变成一个视频播放器

<html>

<head>

<title>imgdynsrc Property</title>

<scripttype="text/javascript">

<!--

vartrainImg = new Image(160,120);

trainImg.src= "2.jpg";

trainImg.dynsrc= "a.mpg";

functionsetLoop(){

varselector = document.forms[0].looper;

document.getElementById("myIMG").loop= selector.options[selector.selectedIndex].value;

}

functionsetImage(type){

if(type=="jpg"){

document.getElementById("myIMG").dynsrc="";

document.getElementById("myIMG").src= trainImg.src;

}else{

document.getElementById("myIMG").src= "";

document.getElementById("myIMG").start= "fileopen"

setLoop();

document.getElementById("myIMG").dynsrc= trainImg.dynsrc;

}

//-->

</script>

</head>

<body>

<h1>imgdynsrc Property</h1>

<hr/>

<form>

Chooseimage type:

<inputtype="radio" name="imgGroup" checked="checked"onClick="setImage('jpg')">Still

<inputtype="radio" name="imgGroup"onClick="setImage('mpg')">Video

<p>Playvideo how many times after loading: <select name="looper"onChange="setLoop()">

<optionvalue="1" selected="selected">Once</option>

<optionvalue="2">Twice</option>

<optionvalue="-1">Continueously</option>

</select></p>

</form>

<hr/>

<imgalt="image" id="myIMG" src="2.jpg"height="120" width="160" />

</body>

</html>

fileCreatedDate

fileModifiedDate

fileSize

这三个IE特有的属性返回在img元素中显示的文本信息，其中前两个属性显示创建和修改当前图像的日期，对于未修改的文件，其创建日期和修改日期是一样的

height和width属性返回并控制image对象的宽度和高度

hpace和vspace属性控制包围图像的透明页边距的宽度。Hspace属性专门控制图像顶部和底部页边距

isMap：用于设置下图像是否作为服务器的图像映射

longDesc

loop：设置为-1表示图像连续播放

【笔记1】】【【【【【【【【【【【【【【【【【【【【【【【【【【【【【【【【】】】】】】】】】】】】】】】】】】】】】】】】】】】】】

Form及其相关对象

使用表单在很大程度上取决于如何应用来自表单元素对象的信息。如果需要表单完全用于JavaScript目的，就不需要action，target和method

Input元素对象

acceptCharset:属性表示form元素的acceptcharset属性，其值为一个或多个可识别的字符集合。

action

autoComplete:autoComplete的值是字符串on或off。

Elements【】

Document.fomrs[0].elements[0].value;

Encoding

Length

Method

Name

Target:

方法

handleEvent(event)

reset();

submit

事件处理程序

onreset

onsubmit

fieldset和legend对象

<form>

<legend>LegendText</legend>

Allyour fom controls and their labels go here.

</fieldset>

</fomr>

label元素对象

label元素能用上下文标记包围控件的标记文本。

<label for=”speed1”>Fastest (lowerquality)</label>

For属性被指定为与标记相关控件的ID

按钮对象

属性

form

name

type

value

方法

click()

onclick()

onmousedown

onmouseup

文本域

方法

blur()

focus()

select()P

事件处理程序

Onafterupdate

Onbeforeupdate

Onerrorupdate

如果在text元素上使用WinIE数据绑定，那么该元素在得到更新数据期间可能会触发三个事件

Onblur

Onfocus

Onselect

Onchange:使用这个事件处理程序对用户输入到域中的任何数据进行确认。

Password对象

Hidden输入对象

Textarea对象

文本域中的回车符

当用户输入文本并按下Enter、Return键时，一个或多个不可见的字符插入到字符串中。在JavaScript中，回车符由新行字符（\n）和返回字符（\r）的某种组合构成

属性

Cols

Rows

Wrap：当wrap属性设置成off时，文本将继续扩展超过文本域的右边界，直到用户手工按下Enter/Return键为止。

方法

createTerxtRange()

textarea对象的createTextRange()方法与document.createTextRange()方法的行为相同，只是范围由textarea表单中的文本组成，但不包括body中的内容。如果想用脚本控制textarea表单中的文本插入指针的位置，则可使用TextRange对象

Select，option和fileUpload对象

<form>

<selectname=”RGBColors” οnchange=”changeColor(this)”>

<optionselected=”selected”>Red</option>

<option>Green</option>

</form>

属性

Length

Multiple:multiple属性表示select元素对象设置为multiple属性，如果其值为true，那么元素接受用户的多项选择

主体文本对象

Blockquote元素对象和q元素对象

Blockquote元素是一个有特殊目的的文本容器。浏览器遇到以此元素开始的内容时，一般在左边和右边的页边距都有大约40像素的缩进。

Cite:属性可以包含一个URL（为字符串），它指向blockquote或者q元素中的引用域。

Clear

Font

Color

Face：font对象的字体可以通过face属性控制，可以再一个以逗号分隔的字符串中指定一个或多个字体名

Size

Align

Color

Marquee元素对象

Behavior属性控制文本在滚动空间中移动的细节，这个属性的值是下列三个字符串之一:alternage,scroll和slide。当设置为alternate时，滚动在左边和右边

Direction

Direction属性用于获得或设置文本水平滚动或者垂直滚动的方向，4种可能的字符串值是left，ringht，down和up，默认值是left

事件处理程序

Onbounce

Onfinish

Onstart

Range对象

主体文本对象

blockquote元素对象和q元素对象

blockquote元素是一个有特殊目的的文本容器，浏览器遇到以此元素开始的内容时，一般在左边和右边的页边距都有大约40像素的缩进。内嵌的引用文本可以包含在q元素中，它使引用的内容不从下一行开始。

blockquote元素对象和q元素对象都只有一个属性cite

cite属性可以包含一个URL（为字符串），它指向blockquote或者q元素中的引用源。未来的浏览器版本可能提供链接到源文档的自动用户接口，但支持cite属性的浏览器对这一消息不进行任何特殊的处理。。

font元素对象

属性

Color

face：font对象的字体可以通过face属性控制，可以在一个以逗号分隔的字符串中通指定一个活多个字体名

size

hr元素对象

align

color

noShade：hr元素默认以一种称为“阴影”的三维效果显示。

label元素对象:label元素能指定表单控件和其他独立文本之间的对应关系。这些独立文本用于标识网页控件。

属性

accessKey

form

htmlFor:属性是一个表单控件元素ID的字符串，该元素与标记有关。这个值通常通过label元素标记中的htmlfor属性设置，改变这一属性不会改变标记的位置或显示方式，但会改变标记和控件之间的关系

定位对象和嵌入对象

改变元素背景

style.backgroudImage();

applet元素对象：用于载入Java applet ，applet本身提供公共实例变量和公共方法作为applet对象的方法和属性，

属性

align

alt:属性表示当applet没有载入或在用户浏览器的参数设置中关闭Java时，显示在浏览器中的文本属性

altHTML：属性在applet没有载入时，将HTML内容提供给applet元素进行显示

archive:属性指向一个包含applet所需Java类文件的压缩(.zip)文件URL。Archive必须包含赋给code属性的类文件，以便载入applet并启动它。

code：属性是Java类文件的URL字符串，通过此字符串载入applet

XML对象

XMLHttpRequest对象是一个抽象对象，允许脚本从一些URL中获取XML数据或将XML数据发送到一些URL。所有发生的动作对用户是不可见的，脚本的责任是与服务器连接并处理XML数据

属性

readyState：在脚本中读取readyState属性值可确定XMLHttpRequest对象的状态，特别是在对象初始化和数据传输期间

responseXML

status：读取事务的状态

方法

abort（）：方法停止当前进程中的所有事务

getAllResponseHeaders()

getResponseHeader(“headerName”)

open()

send(content):触发在网络上的实际请求

JavaScript核心语言

<script>标记

</script>

标记中的语句只在事件触发时执行，不需要函数定义

脚本库(.js文件)

核心语言基础

===和==的差别

var a = “9”

var b = 9;

a == b //结果是true，数字9等于9

a === b //结果是false，运算数类型不同

in操作符让脚本检查对象，看一个对象中是否有命名的属性和方法。

如: “write” in document //结果为true

Instanceof:操作符可以让脚本测试一个对象是否是某个JavaScript内部对象或DOM对象的实例。操作符左边的操作数是要测试的值，右边是根类的引用。

例如：

a = new Array(1,2,3);

ainstanceof Array //结果为true

new

typeof:定义一个变量或表达式的值的类型

if(typeof myval == “number“)

myval= parseInt(myval)

控制结果语句

for-in语句

with语句

with(object){

statements

}

label语句

核心对象

new String(“Hello”);

String对象

属性

Constructor:属性是一个函数引用，这个函数用来创建当前字符串。

Length

prototype:是指一个属性或方法

解析方法

string.charAt(index):从字符串中取出单个字符

string.chaarCodeAt(index):将字符串的单个字符转换为它所对应的数值

“abc”.charCodeAt(0) //result = 97

String.fromCharCode():将数值转换成字符

string.concat(string2):用于连接字符串

string.indexOf(searchString):在字符串中searchString开始位置的索引值

string.lastIndexOf(searchString);

string.localeCompare(string2):让脚本比较两个字符串的unicode值。

String.match(regExpression)

string.replace(regException,replaceString)

string.search(regExpresstion)

string.slice(startIndex):提取一个字符串

string.split()

string.substr()

string.substring(indexA,indexB)

string.toLocaleLowerCase()

string.toLocaleUpperCase()

string.toLowerCase()

string.toUpperCase()

string.toString()

string.valueOf()

Math对象

Math.random()

Number对象

Number.MAX_VALUE

Number.MIN_VALUE

NaN属性是一个常数

Number.toLocaleString():方法根据浏览器按一定格式返回当前数值的字符串值版本

number.toString()

number.valueOf()

程序开发员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫