魔鬼字典 JavaScript 筆記代碼比較多亂第2/3頁(yè)

更新時(shí)間：2010年03月09日 21:03:36 作者：

魔鬼字典 JavaScript 筆記代碼比較多亂，對(duì)于有經(jīng)驗(yàn)的看容易點(diǎn)。

/例子/ /原型方法如果如果自己重新定義了一遍，再改變基類的原型方法后就不隨著它的改變而改變了/
『
function Person(name,sex) { //Person類的構(gòu)造函數(shù)
this.name = name;
this.sex = sex;
}
Person.prototype.age = 12; //為Person類的prototype屬性對(duì)應(yīng)的prototype對(duì)象的屬性賦值,
//相當(dāng)于為Person類的父類添加屬性
Person.prototype.print = function() { //為Person類的父類添加方法
alert(this.name+"_"+this.sex+"_"+this.age);
};
var p1 = new Person("name1","male"); //p1的age屬性繼承子Person類的父類(即prototype對(duì)象)
var p2 = new Person("name2","male");
p1.print(); //name1_male_12
p2.print(); //name2_male_12
p1.age = 34; //改變p1實(shí)例的age屬性
p1.print(); //name1_male_34
p2.print(); //name2_male_12
Person.prototype.age = 22; //改變Person類的超類的age屬性
p1.print(); //name1_male_34(p1的age屬性并沒(méi)有隨著prototype屬性的改變而改變)
p2.print(); //name2_male_22(p2的age屬性發(fā)生了改變)
p1.print = function() { //改變p1對(duì)象的print方法
alert("i am p1");
}
p1.print(); //i am p1(p1的方法發(fā)生了改變)
p2.print(); //name2_male_22(p2的方法并沒(méi)有改變)
Person.prototype.print = function() { //改變Person超類的print方法
alert("new print method!");
}
p1.print(); //i am p1(p1的print方法仍舊是自己的方法)
p2.print(); //new print method!(p2的print方法隨著超類方法的改變而改變)
』
JS高級(jí)編程第四章 BOM ↑↓←→
BOM(瀏覽器對(duì)象模型)
瀏覽器對(duì)象分為
{
1、Window窗口對(duì)象（包含整個(gè)瀏覽器）
2、Location地址對(duì)象（主要包含地址欄）
3、Document文檔對(duì)象（用Document.write()輸出時(shí)顯示的地方，占瀏覽器的大部分空間）
4、Form表單對(duì)象（包含在文檔對(duì)象中，由表單組成）
}
//window對(duì)象（Window對(duì)象表示整個(gè)瀏覽器窗口，但不必表示其中包含的內(nèi)容，主要用于調(diào)整瀏覽器的大?。?
{
window對(duì)象表示整個(gè)瀏覽器窗口
moveBy(dx,dy)——把瀏覽器窗口相對(duì)當(dāng)前位置水平移動(dòng)dx個(gè)像素，垂直移動(dòng)dy個(gè)像素。dx值為負(fù)數(shù)，向左移動(dòng)窗口，dy值為負(fù)數(shù)，向上移動(dòng)窗口。
moveTo(x,y)——移動(dòng)瀏覽器窗口，使它的左上角位于用戶屏幕的(x,y)處?？梢允褂秘?fù)數(shù)，不過(guò)這樣會(huì)把部分窗口移出屏幕的可視區(qū)域。
function click1() {
window.moveTo(Math.random()*1000,Math.random()*1000);
}
resizeBy(dw,dh)——相對(duì)于瀏覽器窗口的當(dāng)前大小，把它口的寬度調(diào)整dw個(gè)像素，高度調(diào)整dy個(gè)像素。dw為負(fù)數(shù)，把縮小窗口的寬度，dy為負(fù)數(shù)，縮小窗口的高度。
resizeTo(w,h)——把窗口的寬度調(diào)整為w，高度調(diào)整為h。不能使用負(fù)數(shù)。
窗口對(duì)象的方法主要用來(lái)提供信息或輸入數(shù)據(jù)以及創(chuàng)建一個(gè)新的窗口?！　?chuàng)建一個(gè)新窗口open()使用window.open（參數(shù)表）方法可以創(chuàng)建一個(gè)新的窗口。其中參數(shù)表提供有窗口的主要特性和文檔及窗口的命名。
open（”打開(kāi)窗口的url”，”窗口名”，”窗口特征”）
窗口的特征如下，可以任意組合：
top=# 窗口頂部離開(kāi)屏幕頂部的像素?cái)?shù)
left=# 窗口左端離開(kāi)屏幕左端的像素?cái)?shù)
width=# 窗口的寬度
height=# 窗口的高度
menubar=... 窗口有沒(méi)有菜單，取值yes或no
toolbar=... 窗口有沒(méi)有工具條，取值yes或no
location=... 窗口有沒(méi)有地址欄，取值yes或no
directories=... 窗口有沒(méi)有連接區(qū)，取值yes或no
scrollbars=... 窗口有沒(méi)有滾動(dòng)條，取值yes或no
status=... 窗口有沒(méi)有狀態(tài)欄，取值yes或no
resizable=... 窗口給不給調(diào)整大小，取值yes或no
}
//對(duì)話框
{
alert (“m提示信息") //顯示包含消息的對(duì)話框。
alert("第一種對(duì)話框"); //彈出一個(gè)警告框
confirm（“提示信息”） //顯示一個(gè)確認(rèn)對(duì)話框，包含一個(gè)確定取消按鈕 //confirm : 確定; 使鞏固; 批準(zhǔn)
if(confirm("Are you sure?")) （）中寫(xiě)的是提示信息，此方法會(huì)返回一個(gè)Boolean值，點(diǎn)擊確定返回TRUE，點(diǎn)擊取消返回FALSE
{
alert("你點(diǎn)的yes"); //通常用法，當(dāng)你點(diǎn)擊確定時(shí)顯示的信息
}
else
{
alert("你點(diǎn)的no"); //當(dāng)你點(diǎn)擊取消時(shí)顯示的信息
}
Prompt（”提示信息“） //彈出提示信息框
open ("url","name") //打開(kāi)具有指定名稱的新窗口，并加載給定 URL 所指定的文檔；如果沒(méi)有提供 URL，則打開(kāi)一個(gè)空白文檔，再加一個(gè)參數(shù)就是描述（打開(kāi)的瀏覽器的寬、高....）
close ( ) //關(guān)閉當(dāng)前窗口
/例子/
<script type="text/javascript" language="javascript">
var win;
function openwindow() {
win = open("http://www.sina.com","新浪","height=150,width=300,top=10,left=10,resizable=yes");
}
function closewindow() {
win.close();
}
</script>
</head>
<body>
<input type="text" id="txtname"/>
<script language="javascript" type="text/javascript">
文本框中的默認(rèn)值
↓
document.getElementById("txtname").value = prompt("請(qǐng)輸入你的名字","qw");
↑
腳本提示的文本
</script>
<input type="button" value="打開(kāi)一個(gè)新的窗口" onclick="openwindow()"/>
<input type="button" value="關(guān)閉剛才打開(kāi)的窗口" onclick="closewindow()"/>
</body>
}
defaultStatus status :設(shè)置瀏覽器最下端的狀態(tài)欄，defaultStatus是持久性的，status是臨時(shí)性的，注意：IE7默認(rèn)情況下是將“允許狀態(tài)欄通過(guò)腳本更新”設(shè)置為禁用的，可以在INternet選項(xiàng)-》安全性里修改此設(shè)置
『
<script language="javascript" type="text/javascript">
function mystatus()
{
//window.defaultStatus = "你有沒(méi)有注意我的存在？？";
window.status = "你有沒(méi)有注意我的存在？";
}
</script>
</head>
<body onload="mystatus()">
<a onmouseover="window.status='你有沒(méi)有注意我的變化？？';return true" onmouseout="window.status='你有沒(méi)有注意我的存在？？';return true">www.baidu.com</a>
↑ ↑
注意用的是單引分號(hào)和return true不能省略，return true可以防止地址出現(xiàn)在狀態(tài)欄中
</body>
』
history
『
<head>
<title>無(wú)標(biāo)題頁(yè)</title>
<script language="javascript" type="text/javascript">
function go_destination()
{
history.go(-1); //history.go(-1)和history.back()效果是一樣的
}
function go_back()
{
history.back();
}
</script>
</head>
<body>
<input type="button" onclick="go_destination()" value="上一頁(yè)" />
<input type="button" onclick="go_back()" value="上一頁(yè)" />
</body>
Back ( ) 方法相當(dāng)于后退按鈕
forward ( ) 方法相當(dāng)于前進(jìn)按鈕
go (1)代表前進(jìn)1頁(yè)，等價(jià)于forward( )方法；
go(-1) 代表后退1頁(yè)，等價(jià)于back( )方法；
』
Document對(duì)象
『
alinkColor 設(shè)置或檢索文檔中所有活動(dòng)鏈接的顏色
bgColor 設(shè)置或檢索 Document 對(duì)象的背景色
body 指定文檔正文的開(kāi)始和結(jié)束
linkColor 設(shè)置或檢索文檔鏈接的顏色
location 包含關(guān)于當(dāng)前 URL 的信息
title 包含文檔的標(biāo)題
url 設(shè)置或檢索當(dāng)前文檔的 URL
vlinkColor 設(shè)置或檢索用戶訪問(wèn)過(guò)的鏈接的顏色
<head>
<title>無(wú)標(biāo)題頁(yè)</title>
<script language="javascript" type="text/javascript">
function showTitle()
{
document.title="我不做大哥好多年"; //設(shè)置標(biāo)題
}
function change(color)
{
document.bgColor=color;
}
</script>
</head>
<body>
<input type="button" onclick="showTitle()" value="點(diǎn)擊我顯示標(biāo)題" />
<h2>移過(guò)來(lái)我變色show給你</h2>
<span onmouseover="change('#CCCCCC')">變紅色</span>
<span onmouseover="change('blue')">變紅色</span>
<span onmouseover="change('yellow')">變紅色</span>
<img src="../js02/img/3.jpg"alt="" height="200" width="200" onmouseover="alert(document.images[0].src)" />
<img src="../js02/img/4.jpg"alt="" height="200" width="200" onmouseover="alert(document.images[1].src)" />
</body>
cookie屬性
這里主要介紹一下cookie屬性。cookie是當(dāng)你瀏覽某網(wǎng)站時(shí)，網(wǎng)站存儲(chǔ)在你機(jī)器上的一個(gè)小文本文件，它記錄了你的用戶ID，密碼、瀏覽過(guò)的網(wǎng)頁(yè)、停留的時(shí)間等信息，當(dāng)你再次來(lái)到該網(wǎng)站時(shí)，網(wǎng)站通過(guò)讀取cookie，得知你的相關(guān)信息，就可以做出相應(yīng)的動(dòng)作，如在頁(yè)面顯示歡迎你的標(biāo)語(yǔ)，或者讓你不用輸入ID、密碼就直接登錄等等。
cookie屬性也包含了自己的一些屬性值：
expires：用來(lái)設(shè)置cookie的過(guò)期時(shí)間。
domain：用來(lái)設(shè)置cookie的起作用的網(wǎng)站域名范圍。
path：用來(lái)設(shè)置cookie起作用的網(wǎng)站路徑。
secure：如果設(shè)置了這個(gè)屬性，cookie的值只能在安全設(shè)置很高的環(huán)境下才能被讀取。
cookie的目的就是為用戶帶來(lái)方便，為網(wǎng)站帶來(lái)增值。cookie屬性也包含了自己的一些屬性值：
我們可以通過(guò)document.cookie操作來(lái)設(shè)置某個(gè)cookie值。
』
Location對(duì)象
『
屬性
host 設(shè)置或檢索位置或 URL 的主機(jī)名和端口號(hào)
hostname 設(shè)置或檢索位置或 URL 的主機(jī)名部分
href 設(shè)置或檢索完整的 URL 字符串
方法
assign("url") 加載 URL 指定的新的 HTML 文檔。
reload() 重新加載當(dāng)前頁(yè)
replace("url") 通過(guò)加載 URL 指定的文檔來(lái)替換當(dāng)前文檔
<head>
<title>無(wú)標(biāo)題頁(yè)</title>
<script language="javascript" type="text/javascript">
function jump()
{
location.href=document.myform.menu.value;
}
function jump1()
{
location.replace(document.myform.menu.value); //注意replace中放的是字符串給用"" //replace() 不記錄歷史即點(diǎn)完后不能后退
}
function jump2() {
location.assign(document.myform.menu.value); //記錄歷史，可以后退
}
function showHost()
{
alert(location.host);
}
function showHostName()
{
alert(location.hostname);
}
function reLoad() {
location.reload();
}
</script>
</head>
<body>
<form name="myform" action="">
<select name="menu" onchange="jump2()"> //<select> ：下拉菜單 <option>每一個(gè)選項(xiàng)
<option >-請(qǐng)選擇-</option>
<option value="test1.htm">犬夜叉</option>
<option value="test2.htm">殺生丸</option>
</select>
<input type="button" value="顯示主機(jī)名和端口號(hào)" onclick="showHost()" />
<input type="button" value="顯示主機(jī)名" onclick="showHostName()" />

<input type="button" value="刷新" onclick="reLoad(true)" />
</form>
</body>
』
Navigator //Navigator 對(duì)象是由 JavaScript runtime engine 自動(dòng)創(chuàng)建的，包含有關(guān)客戶機(jī)瀏覽器的信息（基本不用）
『
document.write(navigator.appCodeName, "<br />"); //與瀏覽器相關(guān)的內(nèi)部代碼名
document.write(navigator.appName, "<br />"); //瀏覽器的正式名稱
document.write(navigator.appVersion, "<br />"); //瀏覽器的版本號(hào)
document.write(navigator.browserLanguage,"<br />");//FireFox不支持
document.write(navigator.cpuClass, "<br />"); //FireFox不支持,返回用戶計(jì)算機(jī)的cpu的型號(hào)，通常intel芯片返回"x86"
document.write(navigator.language,"<br />");//IE不支持
document.write(navigator.platform, "<br />"); // 瀏覽器正在運(yùn)行的操作系統(tǒng)平臺(tái)
document.write(clientInformation.appName);//微軟特有的對(duì)象、
/顯示/
Mozilla
Microsoft Internet Explorer
4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
zh-cn
x86
undefined
Win32
Microsoft Internet Explorer
』
//screen對(duì)象
『
availHeight——窗口可以使用的屏幕的高度（以像素計(jì)），其中包括操作系統(tǒng)元素（如Windows工具欄）需要的空間。
availWidth——窗口可以使用的屏幕的寬度（以像素計(jì)）。
colorDepth——用戶表示顏色的位數(shù)。大多數(shù)系統(tǒng)采用32位。
height——屏幕的高度，以像素計(jì)。
width——屏幕的寬度，以像素計(jì)
window.moveTo(0,0); //將瀏覽器調(diào)整到最左上角
window.resizeTo(screen.availWidth,screen.availHeight,"<br />"); //將屏幕設(shè)置到最大化
document.write(screen.availWidth + " " + screen.availHeight, "<br />"); //輸出顯示屏幕的可用最大寬和高 “開(kāi)始狀態(tài)欄占一部分”
document.write(screen.height + " " + screen.width, "<br />"); //屏幕的最大高和寬
document.write(" " + screen.colorDepth, "<br />");
』
//打開(kāi)一個(gè)新的窗體
『
<SCRIPT language="JavaScript" >
function openwindow( ) {
var newWindow = window.open("about:blank", "newWindow", "toolbars=yes, scrollbars=yes, location=yes,statusbars=yes,menubars=yes,resizable=yes,width=650,height=150"); //（）里面的東西給寫(xiě)對(duì)了否則讀不出來(lái)實(shí)在不行用“"","",""”也行
newWindow.document.open(); //流體打開(kāi)
newWindow.document.write("<html><head><title>極品名茶--鐵觀音</title></head>");
newWindow.document.write("<body><h1>先生您好，來(lái)點(diǎn)鐵觀音嘗嘗吧？<a href=''>來(lái)點(diǎn)</a>    <a href=''>不了</a></h1></body></html>");
newWindow.document.close(); //流體關(guān)閉
}
</SCRIPT>
</head>
<body onload="openwindow()">
』
//跨窗體傳值↑↓←→
『
主窗體
『
<title>無(wú)標(biāo)題頁(yè)</title>
<script type="text/javascript" language="javascript">
function aa()
{
open("a2.htm","aaa","");
}
</script>
</head>
<body>
<form name="f1" action="" method="post">
↑
是name不是id，用id會(huì)有錯(cuò)誤
<input type="text" name="t1"/>
<button onclick="aa()">sdf</button>
</form>
</body>
』
副窗體（a2.htm）
『
<title>無(wú)標(biāo)題頁(yè)</title>
<script type="text/javascript" language="javascript">
function bb()
{
document.f1.t2.value=window.opener.document.f1.t1.value;
↑
f1后面的東西全部點(diǎn)不出來(lái)，都給硬打
}
</script>
</head>
<body onload="bb()">
<form name="f1" action="" method="post">
<input type="text" name="t2"/>
</form>
</body>
』
』
JS 第五章 DOM(文本對(duì)象模型) ↑↓←→
//節(jié)點(diǎn)類型
『
1、元素節(jié)點(diǎn)
2、文本節(jié)點(diǎn)
<p>段落</p> //<p>為元素節(jié)點(diǎn)，“段落”為文本節(jié)點(diǎn)
』
//節(jié)點(diǎn)的三個(gè)屬性
『
nodeName節(jié)點(diǎn)元素名稱
nodeType節(jié)點(diǎn)元素類型（1-12）
nodeValue節(jié)點(diǎn)元素的值
1 element_node 2 attribute_node 3 text_node
4 cdata_section_node 5 entity_reference_node 6 entity_node
7 processing_instruction_node 8 comment_node 9 document_code
10 document_type_node 11 document_fragment_node 12 notation_node
『例子』
『
<a id="sirius" href="">Journey to the stars</a>
-------------------------------------------------
外置JS腳本：
addLoadListener(init);
function init()
{
var elementRef = document.getElementById("sirius");
elementRef.firstChild.nodeValue = "sdfsd"; //將“Journey to the stars”動(dòng)態(tài)的改變?yōu)椤皊dfsd” ；注意要加上“firstChild”
alert("The element is:" + elementRef.nodeName); //顯示：A
alert("The element is:" + elementRef.nodeType); //顯示： 1
alert("The element is:" + elementRef.firstChild.nodeValue); //顯示：sdfsd
return true;
}
function addLoadListener(fn)//注冊(cè)事件函數(shù)
{
if(typeof window.addEventListener!="undefined")
{
window.addEventListener("load",fn,false);
}
else if(typeof document.addEventListener!="undefined")
{
document.addEventListener("load",fn,false);
}
else if(typeof window.attchEvent!="undefined")
{
document.attchEvent("onload",fn);
}
else
{
var oldfn=window.onload;
if(typeof window.onload!="function")
{
window.onload=fn;
}
else
{
window.onload=function()
{
oldfn();
fn();
};
}
}
}
』
』
訪問(wèn)DOM中的元素
『
getElementById可以通過(guò)唯一的ID屬性值。
getElementById很適合用于查找一個(gè)單獨(dú)的元素
<a id="sirius" href="sirius.html">Journey to the stars</a>
var elementRef = document.getElementById("sirius");
『例子』

魔鬼字典 JavaScript 筆記 代碼比較多亂第2/3頁(yè)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

魔鬼字典 JavaScript 筆記代碼比較多亂第2/3頁(yè)