**1.document.write(""); 輸出語句 **
**2.JS中的注釋為// **
**3.傳統的HTML文檔順序是:document->html->(head,body) **
**4.一個瀏覽器窗口中的DOM順序是:window->(navigator,screen,history,location,document) **
**5.得到表單中元素的名稱和值:document.getElementById("表單中元素的ID號").name(或value) **
**6.一個小寫轉大寫的JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase(); **
**7.JS中的值類型:String,Number,Boolean,Null,Object,Function **
**8.JS中的字符型轉換成數值型:parseInt(),parseFloat() **
**9.JS中的數字轉換成字符型:(""+變量) **
**10.JS中的取字符串長度是:(length) **
**11.JS中的字符與字符相連接使用+號. **
**12.JS中的比較操作符有:==等于,!=不等于,>,>=,<.<= **
**13.JS中聲明變量使用:var來進行聲明 **
**14.JS中的判斷語句結構:if(condition){}else{} **
**15.JS中的循環結構:for([initial expression];[condition];[upadte expression]) {inside loop} **
**16.循環中止的命令是:break **
**17.JS中的函數定義:function functionName([parameter],...){statement[s]} **
**18.當文件中出現多個form表單時.可以用document.forms[0],document.forms[1]來代替. **
**19.窗口:打開窗口window.open(), 關閉一個窗口:window.close(), 窗口本身:self **
**20.狀態欄的設置:window.status="字符"; **
**21.彈出提示信息:window.alert("字符"); **
**22.彈出確認框:window.confirm(); **
**23.彈出輸入提示框:window.prompt(); **
**24.指定當前顯示鏈接的位置:window.location.href="URL" **
**25.取出窗體中的所有表單的數量:document.forms.length **
**26.關閉文檔的輸出流:document.close(); **
**27.字符串追加連接符:+= **
**28.創建一個文檔元素:document.createElement(),document.createTextNode() **
**29.得到元素的方法:document.getElementById() **
**30.設置表單中所有文本型的成員的值為空: **
**var form = window.document.forms[0] **
**for (var i = 0; i<form.elements.length;i++){ **
** if (form.elements.type == "text"){ **
** form.elements.value = ""; **
** } **
**} **
**31.復選按鈕在JS中判斷是否選中:document.forms[0].checkThis.checked (checked屬性代表為是否選中返回TRUE或FALSE) **
**32.單選按鈕組(單選按鈕的名稱必須相同):取單選按鈕組的長度document.forms[0].groupName.length **
**33.單選按鈕組判斷是否被選中也是用checked. **
**34.下拉列表框的值:document.forms[0].selectName.options[n].value (n有時用下拉列表框名稱加上.selectedIndex來確定被選中的值) **
**35.字符串的定義:var myString = new String("This is lightsword"); **
**36.字符串轉成大寫:string.toUpperCase(); 字符串轉成小寫:string.toLowerCase(); **
**37.返回字符串2在字符串1中出現的位置:String1.indexOf("String2")!=-1則說明沒找到. **
**38.取字符串中指定位置的一個字符:StringA.charAt(9); **
**39.取出字符串中指定起點和終點的子字符串:stringA.substring(2,6); **
*40.數學函數:Math.PI(返回圓周率),Math.SQRT2(返回開方),Math.max(value1,value2)返回兩個數中的最在值,Math.pow(value1,10)返回value1的十次方,Math.round(value1)四舍五入函數,Math.floor(Math.random()(n+1))返回隨機數 **
**41.定義日期型變量:var today = new Date(); **
**42.日期函數列表:dateObj.getTime()得到時間,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,dateObj.getMonth()得到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期幾,dateObj.getHours()得到小時,dateObj.getMinutes()得到分,dateObj.getSeconds()得到秒,dateObj.setTime(value)設置時間,dateObj.setYear(val)設置年,dateObj.setMonth(val)設置月,dateObj.setDate(val)設置日,dateObj.setDay(val)設置星期幾,dateObj.setHours設置小時,dateObj.setMinutes(val)設置分,dateObj.setSeconds(val)設置秒 [注意:此日期時間從0開始計] **
**43.FRAME的表示方式: [window.]frames[n].ObjFuncVarName,frames["frameName"].ObjFuncVarName,frameName.ObjFuncVarName **
**44.parent代表父親對象,top代表最頂端對象 **
**45.打開子窗口的父窗口為:opener **
**46.表示當前所屬的位置:this **
**47.當在超鏈接中調用JS函數時用:(JavaScript :)來開頭后面加函數名 **
**48.在老的瀏覽器中不執行此JS: **
**49.引用一個文件式的JS:<script type="text/javascript" src="aaa.js"></script> **
**50.指定在不支持腳本的瀏覽器顯示的HTML:<noscript></noscript> **
**51.當超鏈和onCLICK事件都有時,則老版本的瀏覽器轉向a.html,否則轉向b.html.例:<a href="a.html" onclick="location.href=’b.html’;return false">dfsadf</a> **
**52.JS的內建對象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number,Object,RangeError,ReferenceError,RegExp,String,SyntaxError,TypeError,URIError **
**53.JS中的換行:\n **
**54.窗口全屏大小:<script>function fullScreen(){ this.moveTo(0,0);this.outerWidth=screen.availWidth;this.outerHeight=screen.availHeight;}window.maximize=fullScreen;</script> **
**55.JS中的all代表其下層的全部元素 **
**56.JS中的焦點順序:document.getElementByid("表單元素").tabIndex = 1 **
**57.innerHTML的值是表單元素的值:如<p id="para">"how are <em>you</em>"</p>,則innerHTML的值就是:how are <em>you</em> **
**58.innerTEXT的值和上面的一樣,只不過不會把<em>這種標記顯示出來. **
**59.contentEditable可設置元素是否可被修改,isContentEditable返回是否可修改的狀態. **
**60.isDisabled判斷是否為禁止狀態.disabled設置禁止狀態 **
**61.length取得長度,返回整型數值 **
**62.addBehavior()是一種JS調用的外部函數文件其擴展名為.htc **
**63.window.focus()使當前的窗口在所有窗口之前. **
**64.blur()指失去焦點.與FOCUS()相反. **
**65.select()指元素為選中狀態. **
**66.防止用戶對文本框中輸入文本:onfocus="this.blur()" **
**67.取出該元素在頁面中出現的數量:document.all.tags("div(或其它HTML標記符)").length **
**68.JS中分為兩種窗體輸出:模態和非模態.window.showModaldialog(),window.showModeless() **
**69.狀態欄文字的設置:window.status=’文字’,默認的狀態欄文字設置:window.defaultStatus = ’文字.’; **
**70.添加到收藏夾:external.AddFavorite("http://www.dannyg.com";;,"jaskdlf"); **
**71.JS中遇到腳本錯誤時不做任何操作:window.onerror = doNothing; 指定錯誤句柄的語法為:window.onerror = handleError; **
**72.JS中指定當前打開窗口的父窗口:window.opener,支持opener.opener...的多重繼續. **
**73.JS中的self指的是當前的窗口 **
**74.JS中狀態欄顯示內容:window.status="內容" **
**75.JS中的top指的是框架集中最頂層的框架 **
**76.JS中關閉當前的窗口:window.close(); **
**77.JS中提出是否確認的框:if(confirm("Are you sure?")){alert("ok");}else{alert("Not Ok");} **
**78.JS中的窗口重定向:window.navigate("http://www.sina.com.cn";;); **
**79.JS中的打印:window.print() **
**80.JS中的提示輸入框:window.prompt("message","defaultReply"); **
**81.JS中的窗口滾動條:window.scroll(x,y) **
**82.JS中的窗口滾動到位置:window.scrollby **
**83.JS中設置時間間隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout **
**84.JS中的模態顯示在IE4+行,在NN中不行:showModalDialog("URL"[,arguments][,features]); **
**85.JS中的退出之前使用的句柄:function verifyClose(){event.returnValue="we really like you and hope you will stay longer.";}} window.onbeforeunload=verifyClose; **
**86.當窗體第一次調用時使用的文件句柄:onload() **
**87.當窗體關閉時調用的文件句柄:onunload() **
**88.window.location的屬性: protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80),pathname("/a/a.html"),hash("#giantGizmo",指跳轉到相應的錨記),href(全部的信息) **
**89.window.location.reload()刷新當前頁面. **
**90.window.history.back()返回上一頁,window.history.forward()返回下一頁,window.history.Go(返回第幾頁,也可以使用訪問過的URL) **
**91.document.write()不換行的輸出,document.writeln()換行輸出 **
**92.document.body.noWrap=true;防止鏈接文字折行. **
**93.變量名.charAt(第幾位),取該變量的第幾位的字符. **
**94."abc".charCodeAt(第幾個),返回第幾個字符的ASCii碼值. **
**95.字符串連接:string.concat(string2),或用+=進行連接 **
**96.變量.indexOf("字符",起始位置),返回第一個出現的位置(從0開始計算) **
**97.string.lastIndexOf(searchString[,startIndex])最后一次出現的位置. **
**98.string.match(regExpression),判斷字符是否匹配. **
**99.string.replace(regExpression,replaceString)替換現有字符串. **
**100.string.split(分隔符)返回一個數組存儲值. **
**101.string.substr(start[,length])取從第幾位到指定長度的字符串. **
**102.string.toLowerCase()使字符串全部變為小寫. **
**103.string.toUpperCase()使全部字符變為大寫. **
**104.parseInt(string[,radix(代表進制)])強制轉換成整型. **
**105.parseFloat(string[,radix])強制轉換成浮點型. **
**106.isNaN(變量):測試是否為數值型. **
107.定義常量的關鍵字:const,定義變量的關鍵字:var
108.getElementsByclassName,獲取元素class名稱.
==================================================
JS之Window對象
一.說明：他是JS中最大的對象，它描述的是一個瀏覽器窗口，一般要引用他的屬性和方法時，不需要用“Window.XXX”這種形式，而是直接使用“XXX”。一個框架頁面也是一個窗口。
二.Window窗口對象有如下屬性。
1.name 窗口的名稱，由打開它的連接（<a target="...">）或框架頁（<frame name="...">）或某一個窗口調用的 open() 方法（見下）決定。一般我們不會用這個屬性。
2.status 指窗口下方的“狀態欄”所顯示的內容。通過對 status 賦值，可以改變狀態欄的顯示。
3.opener 用法：window.opener；返回打開本窗口的窗口對象。注意：返回的是一個窗口對象。如果窗口不是由其他窗口打開的，在 Netscape 中這個屬性返回 null；在 IE 中返回“未定義”（undefined）。undefined 在一定程度上等于 null。注意：undefined 不是 JavaScript 常數，如果你企圖使用“undefined”，那就真的返回“未定義”了。 4.self 指窗口本身，它返回的對象跟 window 對象是一模一樣的。最常用的是“self.close()”，放在<a>標記中：“<a href="javascript:self.close()">關閉窗口</a>”。 5.parent 返回窗口所屬的框架頁對象。
6.top 返回占據整個瀏覽器窗口的最頂端的框架頁對象。
三.Window窗口對象有如下方法。
1.open(<URL字符串>, <窗口名稱字符串>, <參數字符串>);
說明：
<URL字符串>：描述所打開的窗口打開哪一個網頁。如果留空（''），則不打開任意網頁。 <窗口名稱字符串>：描述被打開的窗口的名稱（window.name），可以使用'_top'、'_blank'等內建名稱。這里的名稱跟“<a href="..." target="...">”里的“target”屬性是一樣的。 <參數字符串>：描述被打開的窗口的樣貌。如果只需要打開一個普通窗口，該字符串留空（''），如果要指定樣貌，就在字符串里寫上一到多個參數，參數之間用逗號隔開。例：打開一個 400 x 100 的干凈的窗口：open('','_blank','width=400,height=100,menubar=no,toolbar=no,location=no,directories=no,status=no, scrollbars=yes,resizable=yes') open()的參數
top=# 窗口頂部離開屏幕頂部的像素數 left=# 窗口左端離開屏幕左端的像素數 width=# 窗口的寬度 height=# 窗口的高度 menubar=... 窗口有沒有菜單，取值yes或no toolbar=... 窗口有沒有工具條，取值yes或no location=... 窗口有沒有地址欄，取值yes或no directories=... 窗口有沒有連接區，取值yes或no scrollbars=... 窗口有沒有滾動條，取值yes或no status=... 窗口有沒有狀態欄，取值yes或no resizable=... 窗口給不給調整大小，取值yes或no 注意：open() 方法有返回值，返回的就是它打開的窗口對象。比如
var newWindow = open('','_blank');
這樣把一個新窗口賦值到“newWindow”變量中，以后通過“newWindow”變量就可以控制窗口了。close() 關閉一個已打開的窗口。
blur() 使焦點從窗口移走，窗口變為“非活動窗口”。 focus() 是窗口獲得焦點，變為“活動窗口”。不過在 Windows 98，該方法只能使窗口的標題欄和任務欄上的相應按鈕閃爍，提示用戶該窗口正在試圖獲得焦點。 scrollTo() 用法：[<窗口對象>.]scrollTo(x, y)；使窗口滾動，使文檔從左上角數起的(x, y)點滾動到窗口的左上角。 scrollBy() 用法：[<窗口對象>.]scrollBy(deltaX, deltaY)；使窗口向右滾動 deltaX 像素，向下滾動 deltaY 像素。如果取負值，則向相反的方向滾動。 resizeTo() 用法：[<窗口對象>.]resizeTo(width, height)；使窗口調整大小到寬 width 像素，高 height 像素。 resizeBy() 用法：[<窗口對象>.]resizeBy(deltaWidth, deltaHeight)；使窗口調整大小，寬增大 deltaWidth 像素，高增大 deltaHeight 像素。如果取負值，則減少。 alert() 用法：alert(<字符串>)；彈出一個只包含“確定”按鈕的對話框，顯示<字符串>的內容，整個文檔的讀取、Script 的運行都會暫停，直到用戶按下“確定”。 confirm() 用法：confirm(<字符串>)；彈出一個包含“確定”和“取消”按鈕的對話框，顯示<字符串>的內容，要求用戶做出選擇，整個文檔的讀取、Script 的運行都會暫停。如果用戶按下“確定”，則返回 true 值，如果按下“取消”，則返回 false 值。 prompt() 用法：prompt(<字符串>[, <初始值>])；彈出一個包含“確認”“取消”和一個文本框的對話框，顯示<字符串>的內容，要求用戶在文本框輸入一些數據，整個文檔的讀取、Script 的運行都會暫停。如果用戶按下“確認”，則返回文本框里已有的內容，如果用戶按下“取消”，則返回 null 值。如果指定<初始值>，則文本框里會有默認值。 四.Window窗口對象有如下事件：window.onload;發生在文檔全部下載完畢的時候。全部下載完畢意味著不但 HTML 文件，而且包含的圖片，插件，控件，小程序等全部內容都下載完畢。本事件是 window 的事件，但是在 HTML 中指定事件處理程序的時候，我們是把它寫在<body>標記中的。window.onunload;發生在用戶退出文檔（或者關閉窗口，或者到另一個頁面去）的時候。與 onload 一樣，要寫在 HTML 中就寫到<body>標記里。
window.onresize;發生在窗口被調整大小的時候。 window.onblur;發生在窗口失去焦點的時候。 window.onfocus;發生在窗口得到焦點的時候。 window.onerror;發生在錯誤發生的時候。它的事件處理程序通常就叫做“錯誤處理程序”(Error Handler)，用來處理錯誤。上邊已經介紹過，要忽略一切錯誤，就使用： function ignoreError() { return true;}window.onerror = ignoreError;
****============================================================
js獲取url參數值
方法一：正則分析法
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
調用:
alert(GetQueryString("參數名1"));
alert(GetQueryString("參數名2"));
alert(GetQueryString("參數名3"));
方法二：
<span style="font-size: 16px;"><Script language="javascript">
function GetRequest() {
var url = location.search; //獲取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
</Script></span>
這樣調用：
<Script language="javascript">
var Request = new Object();
Request = GetRequest();
var 參數1,參數2,參數3,參數N;
參數1 = Request['參數1'];
參數2 = Request['參數2'];
參數3 = Request['參數3'];
參數N = Request['參數N'];
</Script>
==================================================================
JS獲取屏幕大小
<html>
<script>
function a(){
document.write(
"屏幕分辨率為："+screen.width+""+screen.height
+"<br />"+
"屏幕可用大小："+screen.availWidth+""+screen.availHeight
+"<br />"+
"網頁可見區域寬："+document.body.clientWidth
+"<br />"+
"網頁可見區域高："+document.body.clientHeight
+"<br />"+
"網頁可見區域寬(包括邊線的寬)："+document.body.offsetWidth
+"<br />"+
"網頁可見區域高(包括邊線的寬)："+document.body.offsetHeight
+"<br />"+
"網頁正文全文寬："+document.body.scrollWidth
+"<br />"+
"網頁正文全文高："+document.body.scrollHeight
+"<br />"+
"網頁被卷去的高："+document.body.scrollTop
+"<br />"+
"網頁被卷去的左："+document.body.scrollLeft
+"<br />"+
"網頁正文部分上："+window.screenTop
+"<br />"+
"網頁正文部分左："+window.screenLeft
+"<br />"+
"屏幕分辨率的高："+window.screen.height
+"<br />"+
"屏幕分辨率的寬："+window.screen.width
+"<br />"+
"屏幕可用工作區高度："+window.screen.availHeight
+"<br />"+
"屏幕可用工作區寬度："+window.screen.availWidth
);
}
</script>
<body onload="a()" >
</body>
</html>
================================================================
經典的選項卡原生js代碼
<script type="text/javascript">
function setContentTab(name, curr, n) {
for (i = 1; i <= n; i++) {
var menu = document.getElementById(name + i);
var cont = document.getElementById("con_" + name + "_" + i);
menu.className = i == curr ? "current" : "";
if (i == curr) {
cont.style.display = "block";
} else {
cont.style.display = "none";
}
}
}
</script>
<style type="text/css">
/全局樣式/
{font-size:12px;}
body{margin:0;padding:0;background-color:#FFFFFF;font-size:12px;color:#666666;font-family:"宋體",Arial, Helvetica, sans-serif;}
a{color:#5e5e5;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
/主導航菜單*/
menu ul{padding:0;border:0;list-style:none;line-height:150%;margin-top:0;margin-right:0;margin-bottom:0;margin-left:15px;}
menu_out{width:966px;padding-left:4px;margin:50px auto;background:url(images/menu_left.gif) no-repeat left top;}
menu_in{background:url(images/menu_right.gif) no-repeat right top;padding-right:4px;}
menu{background:url(images/menu_bg.gif) repeat-x;height:73px;}
.menu_line{background:url(images/menu_line.gif) no-repeat center top;width:8px;}
.menu_line2{background:url(images/menu_line2.gif) no-repeat center top;width:15px;}
nav{padding-left:20px;}
nav li{float:left;height:35px;}
nav li a{float:left;display:block;padding-left:6px;height:35px;background:url(images/menu_on_left.gif) no-repeat left top;cursor:pointer;text-decoration:none;}
nav li a span{float:left;padding:11px 14px 10px 10px;line-height:14px;background:url(images/menu_on_right.gif) no-repeat right top;font-size:14px;font-weight:bold;color:#FFFFFF;text-decoration:none;}
nav li .current{background-position:left 100%;}
nav li .current span{background-position:right 100%;color:#333333;text-decoration:none;padding:14px 14px 7px 10px;}
/子欄目/
menu_con{text-align:left;padding-left:20px;clear:both;}
menu_con li{float:left;height:22px;margin-top:8px;}
menu_con li a{display:block;float:left;background:url(images/menu_on_left2.gif) no-repeat left top;cursor:pointer;padding-left:3px;}
menu_con li a span{float:left;padding:6px 10px 4px 10px;line-height:12px;background:url(images/menu_on_right2.gif) no-repeat right top;}
menu_con li a:hover{text-decoration:none;background:url(images/menu_on_left2.gif) no-repeat left bottom;}
menu_con li a:hover span{background:url(images/menu_on_right2.gif) no-repeat right bottom;}
</style>
<div id="menu_out">
<div id="menu_in">
<div id="menu">
<ul id="nav">
<li><a href="#" id="one1" onmouseover="setContentTab('one',1,6)" class="current"><span>首 頁</span></a></li>
<li class="menu_line"></li>
<li><a href="#" id="one2" onmouseover="setContentTab('one',2,6)"><span>jQuery 特效</span></a></li>
<li class="menu_line"></li>
<li><a href="#" id="one3" onmouseover="setContentTab('one',3,6)"><span>javascript特效</span></a></li>
<li class="menu_line"></li>
<li><a href="#" id="one4" onmouseover="setContentTab('one',4,6)"><span>flash特效</span></a></li>
<li class="menu_line"></li>
<li><a href="#" id="one5" onmouseover="setContentTab('one',5,6)"><span>div+css教程</span></a></li>
<li class="menu_line"></li>
<li><a href="#" id="one6" onmouseover="setContentTab('one',6,6)"><span>HTML5教程</span></a></li>
</ul>
<div id="menu_con">
<div id="con_one_1" style="display:block">
<ul>
<li>jsfoot 網頁特效主要有jquery 特效 js特效 flash特效 div+css教程 Html5教程</li>
</ul>
</div>
<div id="con_one_2" style="display:none">
<ul>
<li><a href="#"><span>jquery圖片特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>jquery導航菜單</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>jquery選項卡特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>jquery文字特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>jquery表單特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>jquery表格特效</span></a></li>
</ul>
</div>
<div id="con_one_3" style="display:none">
<ul>
<li><a href="#"><span>js圖片特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>js導航菜單</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>js選項卡特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>js文字特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>js表單特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>js表格特效</span></a></li>
</ul>
</div>
<div id="con_one_4" style="display:none">
<ul>
<li><a href="#"><span>flash圖片特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>flash導航菜單</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>flash文字特效</span></a></li>
</ul>
</div>
<div id="con_one_5" style="display:none">
<ul>
<li><a href="#"><span>div+css布局</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>div+css菜單</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>CSS3教程</span></a></li>
</ul>
</div>
<div id="con_one_6" style="display:none">
<ul>
<li><a href="#"><span>html5特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>html5圖表</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
