本文目錄一覽：
什麼地JS?什麼是JSP?
JS:
一種代碼,英文名JAVA SCRIPT,是java 腳本語言,很多網站頁面兩邊有小廣告,那個就是JS搞的~~~
附: (JS代碼大全):
1. oncontextmenu=”window.event.returnvalue=false” 將徹底屏蔽鼠標右鍵
table border oncontextmenu=return(false)tdno/table 可用於Table
2. body onselectstart=”return false” 取消選取、防止複製
3. onpaste=”return false” 不準粘貼
4. oncopy=”return false;” oncut=”return false;” 防止複製
5. link rel=”Shortcut Icon” href=”favicon.ico” IE地址欄前換成自己的圖標
6. link rel=”Bookmark” href=”favicon.ico” 可以在收藏夾中顯示出你的圖標
7. input style=”ime-mode:-Disabled” 關閉輸入法
8. 永遠都會帶着框架
script language=”javascript”!–
if (window == top)top.location.href = “frames.htm”; //frames.htm為框架網頁
// –/script
9. 防止被人frame
SCRIPT LANGUAGE=javascript!–
if (top.location != self.location)top.location=self.location;
// –/SCRIPT
10. 網頁將不能被另存為
noscriptiframe src=*.html/iframe/noscript
11. input type=button value=查看網頁源代碼
onclick=”window.location = `view-source:`+ `”;
12.刪除時確認
a href=`javascript:if(confirm(“確實要刪除嗎?”location=”boos.asp?areyou=刪除page=1″`刪
除/a
13. 取得控件的絕對位置
//javascript
script language=”javascript”
function getIE(E){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert(“top=”+t+”/nleft=”+l);
}
/script
//VBScript
script language=”VBScript”!–
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName”BODY”
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
wend
msgbox “top=”tchr(13)”left=”l,64,”得到控件的位置”
end function
–/script
14. 光標是停在文本框文字的最後
script language=”javascript”
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart(`character`,e.value.length);
r.collapse(true);
r.select();
}
/script
input type=text name=text1 value=”123″ onfocus=”cc()”
15. 判斷上一頁的來源
javascript:
document.referrer
16. 最小化、最大化、關閉窗口
object id=hh1 classid=”clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″
param name=”Command” value=”Minimize”/object
object id=hh2 classid=”clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″
param name=”Command” value=”Maximize”/object
OBJECT id=hh3 classid=”clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11″
PARAM NAME=”Command” value=”Close”/OBJECT
input type=button value=最小化 onclick=hh1.Click()
input type=button value=最大化 onclick=hh2.Click()
input type=button value=關閉 onclick=hh3.Click()
本例適用於IE
17.屏蔽功能鍵Shift,Alt,Ctrl
script
function look(){
if(event.shiftKey)
alert(“禁止按Shift鍵!”; //可以換成ALT CTRL
}
document.onkeydown=look;
/script
18. 網頁不會被緩存
META HTTP-EQUIV=”pragma” CONTENT=”no-cache”
META HTTP-EQUIV=”Cache-Control” CONTENT=”no-cache, must-revalidate”
META HTTP-EQUIV=”expires” CONTENT=”Wed, 26 Feb 1997 08:21:57 GMT”
或者META HTTP-EQUIV=”expires” CONTENT=”0″
19.怎樣讓表單沒有凹凸感？
input type=text style=”border:1 solid #000000″
或
input type=text style=”border-left:none; border-right:none; border-top:none; border-bottom:
1 solid #000000″/textarea
20.divspanlayer的區別？
div(division)用來定義大段的頁面元素，會產生轉行
span用來定義同一行內的元素，跟div的唯一區別是不產生轉行
layer是ns的標記，ie不支持，相當於div
21.讓彈出窗口總是在最上面:
body onblur=”this.focus();”
22.不要滾動條?
讓豎條沒有:
body style=`overflow:-Scroll;overflow-y:hidden`
/body
讓橫條沒有:
body style=`overflow:-Scroll;overflow-x:hidden`
/body
兩個都去掉？更簡單了
body scroll=”no”
/body
23.怎樣去掉圖片鏈接點擊後，圖片周圍的虛線？
a href=”#” onFocus=”this.blur()”img src=”logo.jpg” border=0/a
24.電子郵件處理提交表單
form name=”form1″ method=”post” action=”mailt****@***.com” enctype=”text/plain”
input type=submit
/form
25.在打開的子窗口刷新父窗口的代碼里如何寫？
window.opener.location.reload()
26.如何設定打開頁面的大小
body onload=”top.resizeTo(300,200);”
打開頁面的位置body onload=”top.moveBy(300,200);”
27.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動
style
body
{background-image:url(logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
/style
28. 檢查一段字符串是否全由數字組成
script language=”javascript”!–
function checkNum(str){return str.match(//D/)==null}
alert(checkNum(“1232142141”
alert(checkNum(“123214214a1”
// –/script
29. 獲得一個窗口的大小
document.body.clientWidth; document.body.clientHeight
30. 怎麼判斷是否是字符
if (/[^/x00-/xff]/g.test(s)) alert(“含有漢字”;
else alert(“全是字符”;
31.TEXTAREA自適應文字行數的多少
textarea rows=1 name=s1 cols=27 onpropertychange=”this.style.posHeight=this.scrollHeight”
/textarea
32. 日期減去天數等於第二個日期
script language=javascript
function cc(dd,dadd)
{
//可以加上錯誤處理
var a = new Date(dd)
a = a.valueOf()
a = a – dadd * 24 * 60 * 60 * 1000
a = new Date(A)
alert(a.getFullYear() + “年” + (a.getMonth() + 1) + “月” + a.getDate() + “日”
}
cc(“12/23/2002”,2)
/script
33. 選擇了哪一個Radio
HTMLscript language=”vbscript”
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
/scriptBODY
INPUT name=”radio1″ type=”radio” value=”style” checkedstyle
INPUT name=”radio1″ type=”radio” value=”barcode”Barcode
INPUT type=”button” value=”check” onclick=”checkme()”
/BODY/HTML
34.腳本永不出錯
SCRIPT LANGUAGE=”javascript”
!– Hide
function killErrors() {
return true;
}
window.onerror = killErrors;
// —
/SCRIPT
35.ENTER鍵可以讓光標移到下一個輸入框
input onkeydown=”if(event.keyCode==13)event.keyCode=9″
36. 檢測某個網站的鏈接速度：
把如下代碼加入body區域中:
script language=javascript
tim=1
setInterval(“tim++”,100)
b=1
var autourl=new Array()
autourl[1]=””;
autourl[2]=”javacool.3322.net”
autourl[3]=””;
autourl[4]=””;
autourl[5]=””;
function butt(){
document.write(“form name=autof”
for(var i=1;iautourl.length;i++)
document.write(“input type=text name=txt”+i+” size=10 value=測試中…… =》input type=text
name=url”+i+” size=40 =》input type=button value=GO
onclick=window.open(this.form.url”+i+”.value)br”
document.write(“input type=submit value=刷新/form”
}
butt()
function auto(url){
document.forms[0][“url”+b].value=url
if(tim200)
{document.forms[0][“txt”+b].value=”鏈接超時”}
else
{document.forms[0][“txt”+b].value=”時間”+tim/10+”秒”}
b++
}
function run(){for(var i=1;iautourl.length;i++)document.write(“img
src=http://”+autourl+”/”+Math.random()+” width=1 height=1
onerror=auto(http://”;+autourl+”`)”}
run()/script
37. 各種樣式的光標
auto ：標準光標
default ：標準箭頭
hand ：手形光標
wait ：等待光標
text ：I形光標
vertical-text ：水平I形光標
no-drop ：不可拖動光標
not-allowed ：無效光標
help ：?幫助光標
all-scroll ：三角方向標
move ：移動標
crosshair ：十字標
e-resize
n-resize
nw-resize
w-resize
s-resize
se-resize
sw-resize
38.頁面進入和退出的特效
進入頁面meta http-equiv=”Page-Enter” content=”revealTrans(duration=x, transition=y)”
推出頁面meta http-equiv=”Page-Exit” content=”revealTrans(duration=x, transition=y)”
這個是頁面被載入和調出時的一些特效。Duration表示特效的持續時間，以秒為單位。Transition表示使
用哪種特效，取值為1-23:
0 矩形縮小
1 矩形擴大
2 圓形縮小
3 圓形擴大
4 下到上刷新
5 上到下刷新
6 左到右刷新
7 右到左刷新
8 豎百葉窗
9 橫百葉窗
10 錯位橫百葉窗
11 錯位豎百葉窗
12 點擴散
13 左右到中間刷新
14 中間到左右刷新
15 中間到上下
16 上下到中間
17 右下到左上
18 右上到左下
19 左上到右下
20 左下到右上
21 橫條
22 豎條
23 以上22種隨機選擇一種
39.在規定時間內跳轉
META http-equiv=V=”REFRESH” content=”5;URL=”
40.網頁是否被檢索
meta name=”ROBOTS” content=”屬性值”
其中屬性值有以下一些:
屬性值為”all”: 文件將被檢索，且頁上鏈接可被查詢；
屬性值為”none”: 文件不被檢索，而且不查詢頁上的鏈接；
屬性值為”index”: 文件將被檢索；
屬性值為”follow”: 查詢頁上的鏈接；
屬性值為”noindex”: 文件不檢索，但可被查詢鏈接；
屬性值為”nofollow”: 文件不被檢索，但可查詢頁上的鏈接。
41.變換網頁的鼠標光標
BODY style=”CURSOR: url(`)”
42.怎樣實現在任務欄顯示小圖標的效果？ (要使用絕對地址)
有些站點，訪問時會在地址欄地址前顯出小圖標，添加到收藏夾後也在收藏欄中顯示圖標，
這樣很好的與其它站點有了區別。
要達到這個效果，先需做出這個圖標文件，圖像為16*16像素，不要超過16色。文件格式為ico，然後上傳至你的網站。
然後，在需要的頁面中，加上以下html語句到文件的head和/head之間（假設以上ico文件的地址）。
link REL=”SHORTCUT ICON”href=””;
如果訪問者的瀏覽器是IE5.0，就不需加任何代碼，只要將圖標文件上傳到網站的根目錄下即可。
1,META標籤里的代碼是什麼意思？
META是放於HEAD與/HEAD之間的標記.以下是我總結它在網頁中最常見的幾種。
meta name=”Keywords” content=”圖片, 新聞, 音樂, 軟件”
該網頁的關鍵字，作用於搜索引擎的登錄，事實上它在現在的網站中並沒什麼用。
meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″
設定這是 HTML 文件及其編碼語系，簡體中文網頁使用charset=gb2312，繁體中文使用charset=big5，或者不設編碼也可，純英文網頁建議使用 iso-8859-1。
meta name=”GENERATOR” content=”Microsoft FrontPage 5.0″
這隻表示該網頁由什麼編輯器寫的。
meta http-equiv=”refresh” content=”10; url=”
這行較為實用，能於預定秒數內自動轉到指定網址。原代碼中 10 表示 10秒。
2，怎麼改變滾動條的顏色，只有ie5.5版本以上才能支持。
這是使用CSS語言，在次說明一下，它和我的瀏覽器版本有一定的關係。
scrollbar-arrow-color：上下按鈕上三角箭頭的顏色。
scrollbar-base-color：滾動條的基本顏色。
scrollbar-dark-shadow-color：立體滾動條強陰影的顏色
scrollbar-face-color：立體滾動條凸出部分的顏色
scrollbar-highlight-color：滾動條空白部分的顏色
scrollbar-shadow-color立體滾動條陰影的顏色。
scrollbar-track-color:#99CC33;
scrollbar-3dlight-color:#A8CBF1;
代碼如下：
style
!–
BODY {
scrollbar-face-color:#99CC33;//(立體滾動條凸出部分的顏色)
scrollbar-highlight-color:#A8CBF1;//(滾動條空白部分的顏色)
scrollbar-shadow-color:#A8CBF1;//(立體滾動條陰影的顏色)
scrollbar-arrow-color:#FF9966;//(上下按鈕上三角箭頭的顏色)
scrollbar-base-color:#A8CBF1; //(滾動條的基本顏色)
scrollbar-darkshadow-color:#A8CBF1; //(立體滾動條強陰影的顏色)
scrollbar-track-color:#99CC33;
scrollbar-3dlight-color:#A8CBF1;
}
—
/style
在這我補充幾點：
1.讓瀏覽器窗口永遠都不出現滾動條。
body style=”overflow-x:hidden;overflow-y:hidden”或body style=”overflow:hidden” 或body scroll=no
2，沒有水平滾動條
body style=”overflow-x:hidden”
3，沒有垂直滾動條
body style=”overflow-y:hidden”
3,如何給圖片抖動怎做的.
SCRIPT language=javascript1.2
!–
var rector=2
var stopit=0
var a=1
var count=0
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all!document.getElementById)||stopit==1||count==100)
return
count++
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a4)
a++
else
a=1
setTimeout(“rattleimage()”,50)
}
function stoprattle(which){
stopit=1
count=0
which.style.left=0
which.style.top=0
}
//–
/SCRIPT
style.shakeimage {POSITION: relative}
/style
img src=”圖片的路徑” onmouseout=stoprattle(this) onmouseover=init(this);rattleimage() class=shakeimage
4，在DW如何給水平線加顏色。
在DW中沒有此項設置，你只能在HTML中加入代碼：hr color=red noshade按F12的預覽在能看到。由於在NC中不支持hr的COLOR屬性，所以在DW中沒有此項設置。
5，如何在網頁中實現flash的全屏播放？
只要在調用swf文件的HTML中將WIDTH和HEIGHT的參數設為100％即可，當然也可以在Flash導出HTML文件的設置中進行設置，方法是：打開File菜單；選Publish Settings彈出導出設置對話框；在HTML標籤下的Dimensions選項,下拉後選中Percent（百分比）,並在WIDTH 和HEIGHT框中填100.就行了。
6,為什麼我在DW中插入的Flash動畫缺看不找！
如果你沒有正確地安裝Dreamweaver和Flash，那麼在你預覽的時候，Dreamweaver會提示你缺少播放的插件，請你按裝InstallAXFlash.exe 並從新啟動計算機。現在IE6已經捆綁這個程序。
7，在Flash中，如果屏蔽鼠標右鍵?FS命令都是什麼意思?
fscommand (“fullscreen”, “true/false”;（全屏設置，TRUE開，FALSE關）
fscommand (“showmenu”, “true/false”;（右鍵菜單設置，TRUE顯示，FALSE不顯示）
fscommand (“allowscale”, “true/false”;（縮放設置，TRUE自由縮放，FALSE調整畫面不影響影片本身的尺寸）
fscommand (“trapallkeys”, “true/false”;（快捷鍵設置，TRUE快捷鍵開，FALSE快捷鍵關）
fscommand (“exec”;（EXE程序調用）
fscommand (“quit”;（退出關閉窗口）
8，Flash中什麼是隱形按鈕。
利用button中的hit幀來製作只有感應區域而完全透明的按鈕。
9，如何給Flash動畫做鏈接。
Dreamweaver是不能給Flash製作鏈接的，只能在Flash中用geturl()加鏈接，然後再插入Dreamweaver中。
10，DW中的層的技巧。
層是可以嵌套的，我個人給大家一個技巧，在層面板中按住CTRL再拖放層到你想去成為其子層的地方就行了，我認為這是最簡單直觀的方法了。
11，如何改變鼠標的形狀？
在Dreamweaver4中CSS樣式面板：
按CTR+SHIFT+E–出現樣式表對話框,點擊NEW，出現編輯對話框,在左邊最後一項extensions-cursor 選擇你要改的指針形式就可以了，然後把你要想改變的地方運用樣式表，如果整頁都有在body bgcolor=”#003063″ text=”#ffffff” id=all中加入就行了。
span style=”cursor:X`樣例/span
這裡選擇（文本）作為對象，還可以自己改為其他的，如link等。
x可以等於=hand（手形）、crosshair（十字）、text（文本光標）、wait（顧名思義啦）、default（默認效果）、help（問號）、e-size（向右箭頭）、ne-resize（向右上的箭頭）、nw-resize（向左上的箭頭）、w-resize（向左的箭頭）、sw-resize（左下箭頭）、s-resize（向下箭頭）、se-resize（向右下箭頭）、auto（系統自動給出效果）。
12，用CSS做郵票，看看吧！
input type=button value=我象不象郵票？ style=”height:80px;border:2px dashed #cccccc”
13，經常上網的朋友可能會到過這樣一些網站，一進入首頁立刻會彈出一個窗口，怎麼做呢！
這javascript代碼即可實現，摘錄藍色論壇。
【1、最基本的彈出窗口代碼】
其實代碼非常簡單：
SCRIPT LANGUAGE=”javascript”
!–
window.open (`page.html`)
—
/SCRIPT
因為著是一段javascripts代碼，所以它們應該放在SCRIPT LANGUAGE=”javascript”標籤和/script之間。!– 和 –是對一些版本低的瀏覽器起作用，在這些老瀏覽器中不會將標籤中的代碼作為文本顯示出來。要養成這個好習慣啊。
window.open (`page.html`) 用於控制彈出新的窗口page.html，如果page.html不與主窗口在同一路徑下，前面應寫明路徑，絕對路徑(http://)和相對路徑(../)均可。用單引號和雙引號都可以，只是不要混用。
這一段代碼可以加入HTML的任意位置，head和/head之間可以，body bgcolor=”#003063″ text=”#ffffff” id=all間/body也可以，越前越早執行，尤其是頁面代碼長，又想使頁面早點彈出就盡量往前放。
【2、經過設置後的彈出窗口】
下面再說一說彈出窗口的設置。只要再往上面的代碼中加一點東西就可以了。
我們來定製這個彈出的窗口的外觀，尺寸大小，彈出的位置以適應該頁面的具體情況。
SCRIPT LANGUAGE=”javascript”
!–
window.open (`page.html`, `newwindow`, `height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no`)
//寫成一行
—
/SCRIPT
參數解釋：
SCRIPT LANGUAGE=”javascript” js腳本開始；
window.open 彈出新窗口的命令；
`page.html` 彈出窗口的文件名；
`newwindow` 彈出窗口的名字（不是文件名），非必須，可用空“代替；
height=100 窗口高度；
width=400 窗口寬度；
top=0 窗口距離屏幕上方的象素值；
left=0 窗口距離屏幕左側的象素值；
toolbar=no 是否顯示工具欄，yes為顯示；
menubar，scrollbars 表示菜單欄和滾動欄。
resizable=no 是否允許改變窗口大小，yes為允許；
location=no 是否顯示地址欄，yes為允許；
status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；
/SCRIPT js腳本結束
【3、用函數控制彈出窗口】
下面是一個完整的代碼。
html
head
script LANGUAGE=”javascript”
!–
function openwin() { window.open (“page.html”, “newwindow”, “height=100, width=400, toolbar=
no, menubar=no, scrollbars=no, resizable=no, location=no, status=no”
//寫成一行
}
//–
/script
/head
body onload=”openwin()”
…任意的頁面內容…
/body
/html
這裡定義了一個函數openwin(),函數內容就是打開一個窗口。在調用它之前沒有任何用途。
怎麼調用呢？
方法一：body onload=”openwin()” 瀏覽器讀頁面時彈出窗口；
方法二：body onunload=”openwin()” 瀏覽器離開頁面時彈出窗口；
方法三：用一個連接調用：
a href=”#” onclick=”openwin()”打開一個窗口/a
注意：使用的「#」是虛連接。
方法四：用一個按鈕調用：
input type=”button” onclick=”openwin()” value=”打開窗口”
14，沒有用表格寫的，讓大家隨便看看，沒什麼。
html
head
title江南荷花扇面/title
meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
style type=”text/css”
!–
.font1 { font-size: 12px; color: #999999; text-decoration: none}
a { font-size: 12px; color: #999999; text-decoration: none}
a:hover { font-size: 12px; color: #000000; text-decoration: none}
—
/style
/head
body bgcolor=”#FFFFFF” text=”#000000″
div class=”font1″ style=”writing-mode=tb-rl;height:200px” width=300
p盛夏 尚 濤
pa href=”index.htm”一夜露痕黃粉香 袁運甫 /a
p瑤池昨夜新涼 王金嶺
p一朵白蓮隨意開 吳冠南
p新雨迎秋欲滿塘 齊辛民
p十里荷香 齊辛民
p濯清蓮而不妖 盧世曙
/div
/body
/html
15,IE6已支持自定義cursor!
語法格式 cursor:url(圖標) //cur或是ani文件.
cur就是WINDOWS中的光標(cursor)文件，光標文件與圖標（ICON)文件除了文件頭有一個位置的值不同外，實際是一樣的。
ani是WINDOWS中的動畫光標（圖標）文件。
style type=”text/css”
!–
.unnamed1 { cursor:url(arrow2c.cur)}
—
/style
16,用marquee做的滾動字幕.這也我剛看到論壇的朋友在問。
語法：
align=# | top | middle| bottom //對齊方式)
BEHAVIOR=ALTERNATE | SCROLL | SLIDE //移動的方式
BGCOLOR=color//底色區域顏色
DIRECTION=DOWN | LEFT | RIGHT | UP //移動的方向
Loop=n //循環次數（默認是循環不止）
Scrolldelay=milliseconds//延時
height=# width=# //區域面積
hspace=# vspace=# //空白區域
scrollamount=# //移動的速度
marquee align=top behavior=ALTERNATE BGCOLOR=#000000 height=60 width=433 scrollamount=5/marquee
17，在FLASH5中也存在一些字體，打散後變成一團的事是為什麼？有解決的辦法嗎。
這是大家很常見的問題！可能是對字庫支持的不好！我個是做成透明的gif圖片格式，然後倒入。
18，flash的網頁里「加入收藏夾」功能怎麼實現？
在as中加getUrl(“java script:window.external.addFavorite(`,`我的工作室`)”
19，在Flash中，文本的動態屬性和輸入屬性的區別。
input text在運行時可被用戶或程序改變其值。
ynamic text僅允許被程序修改。
20,怎樣在IE中調用Dreamweaver進行編輯.
相信很多在使用WinME或Window2000的朋友，會遇見是個問題。很簡單，把我們筆記本程序打開，保存為一個 *.reg 文件。雙擊它將信息添加到註冊表即可。
REGEDIT4
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver]
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell]
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit]
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit\command]
@=”\”c:\\Program Files\\Macromedia\\Dreamweaver 4\\dreamweaver.exe\” \”%1\””
21，設置表格虛線。
方法一：作一個1X2的圖。半黑半白，再利用表格作成線。
方法二：在css裏面設，要IE5。5才支持這種效果。
style=”BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #
求個簡單javascript代碼 謝謝，網站菜單功能
不用說自己菜不菜的，能有這個學習的精神已經很值得鼓勵了
呵呵，下面，我來給你介紹幾個網站常見的菜單
第一個：仿網易的滑動門導航菜單
html xmlns=””
head
meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /
title仿網易的滑動門技術，用DIV+CSS技術實現/title
style type=”text/css”
!–
#header {
background-color: #F8F4EF;
height: 200px;
width: 400px;
margin: 0px;
padding: 0px;
border: 1px solid #ECE1D5;
font-family: “宋體”;
font-size: 12px;
}
#menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display: block;
width: 100px;
text-align: center;
float: left;
margin: 0px;
padding-top: 0.2em;
padding-right: 0px;
padding-bottom: 0.2em;
padding-left: 0px;
cursor: hand;
}
.sec1 { background-color: #FFFFCC;}
.sec2 { background-color: #00CCFF;}
.block { display: block;}
.unblock { display: none;}
—
/style
/head
body
script language=javascript
function secBoard(n)
{
for(i=0;imenu.childNodes.length;i++)
menu.childNodes[i].className=”sec1″;
menu.childNodes[n].className=”sec2″;
for(i=0;imain.childNodes.length;i++)
main.childNodes[i].style.display=”none”;
main.childNodes[n].style.display=”block”;
}
/script
div id=”header”
ul id=”menu”
li onMouseOver=”secBoard(0)” class=”sec2″最新新聞/li
li onMouseOver=”secBoard(1)” class=”sec1″最新文章/li
li onMouseOver=”secBoard(2)” class=”sec1″最新日誌/li
li onMouseOver=”secBoard(3)” class=”sec1″論壇新帖/li
/ul
!–內容顯示區域–
ul id=”main”
li class=”block”第一個內容/li
li class=”unblock”第二個內容/li
li class=”unblock”第三個內容/li
li class=”unblock”第四個內容/li
/ul
!–內容顯示區域–
/div
/body
/html
這裡基本上是使用Css與Div的結合，在整個布局中已層為單位，實行滑動菜單的是一個javascript腳本函數，調用就可以了，看不懂不要緊，日漸積累才是重要
第二個：經典實用的觸髮型導航（這是鼠標單擊事件控制）
html
head
meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
title網頁特效代碼|JsCode.CN|—經典實用的觸髮型導航菜單/title
/head
body
STYLE type=text/css.sec1 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP:
#ffffff 1px solid; BORDER-LEFT: #ffffff 1px
solid; CURSOR: hand; COLOR: #000000; BORDER-
BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR:
#eeeeee
}
.sec2 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP:
#ffffff 1px solid; FONT-WEIGHT: bold; BORDER-
LEFT: #ffffff 1px solid; CURSOR: hand; COLOR:
#000000; BACKGROUND-COLOR: #d4d0c8
}
.main_tab {
BORDER-RIGHT: gray 1px solid; BORDER-
LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-
BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8
}
/STYLE
!–JavaScript部分–
SCRIPT language=javascript
function secBoard(n)
{
for(i=0;isecTable.cells.length;i++)
secTable.cells
[i].className=”sec1″;
secTable.cells[n].className=”sec2″;
for(i=0;imainTable.tBodies.length;i++)
mainTable.tBodies
[i].style.display=”none”;
mainTable.tBodies
[n].style.display=”block”;
}
/SCRIPT
!–HTML部分–
TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0
TBODY
TR align=middle height=20
TD class=sec2 onclick=secBoard(0) width=”10%”關於TBODY標記/TD
TD class=sec1 onclick=secBoard(1) width=”10%”關於cells集合/TD
TD class=sec1 onclick=secBoard(2) width=”10%”關於tBodies集合/TD
TD class=sec1 onclick=secBoard(3) width=”10%”關於display屬性/TD/TR/TBODY/TABLE
TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0!–關於TBODY標記–
TBODY style=”DISPLAY: block”
TR
TD vAlign=top align=middleBRBR
TABLE cellSpacing=0 cellPadding=0 width=490 border=0
TBODY
TR
TD指定行做為表體。
BR注釋：TBODY要素是塊要素，並且需要結束標
簽。BR 即使如果表格沒有顯式定義TBODY
要素，該要素也提供給所有表。BRBR
參考：《動態HTML參考和開發應用大全》（人民郵電出
版社
Microsoft Corporation著
北京華中興業科技發展有限公司
譯）
BRBR/TD/TR/TB
ODY/TABLE/TD/TR/T
BODY!–關於cells集合–
TBODY style=”DISPLAY:
none”
TR
TD vAlign=top
align=middleBRBR
TABLE cellSpacing=0
cellPadding=0 width=490 border=0
TBODY
TR
TD檢索錶行或者整個
表中所有單元格的集合。BR應用於TR、TABLE。
BRBR參考：《動態HTML參考和開發應
用大全》（人民郵電出版社
Microsoft Corporation著
北京華中興業科技發展有限公司
譯）
BRBR/TD/TR/TB
ODY/TABLE/TD/TR/T
BODY!–關於tBodies集合–
TBODY style=”DISPLAY:
none”
TR
TD vAlign=top
align=middleBRBR
TABLE cellSpacing=0
cellPadding=0 width=490 border=0
TBODY
TR
TD檢索表中所有TBODY
對象的集合。對象在該集合中按照HTML源順序排列。
BR應用於TABLE。BRBR參考：
《動態HTML參考和開發應用大全》（人民郵電出版社
Microsoft Corporation著
北京華中興業科技發展有限公司
譯）
BRBR/TD/TR/TB
ODY/TABLE/TD/TR/T
BODY!–關於display屬性–
TBODY style=”DISPLAY:
none”
TR
TD vAlign=top
align=middleBRBR
TABLE cellSpacing=0
cellPadding=0 width=490 border=0
TBODY
TR
TD設置或者檢索對象
是否被提供。BR可能的值為block、none、
inline、list-item、table-header-group、table-
footer-group。BR該特性可讀寫，塊要素默認
值為block，內聯要素默認值為inline；層疊樣式表
（CSS）屬性不可繼承。BRBR參考：《
動態HTML參考和開發應用大全》（人民郵電出版社
Microsoft Corporation著
北京華中興業科技發展有限公司譯）
BRBRA
href=”” target=_blank點擊此處
/A可參閱微軟A href=”” target=_blankMSDN在線/A上的解釋。
/TD/TR/TBODY/TABLE
;/TD/TR/TBODY/TABLEg
t;/body
/html
這裡跟上面不同的區別在與這是鼠標移動和滑動的事件區別！
第三個：仿拍拍的切換效果菜單（裏面的圖片是我放上去的，所以會看不到圖片的，呵呵 繼續）
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”
html xmlns=”” lang=”zh-CN”
head
meta http-equiv=”Content-Language” content=”zh-cn” /
meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /
meta name=”robots” content=”all” /
title網頁特效|網頁特效代碼(JsHtml.cn)—仿拍拍paipai.com首頁產品圖片隨機輪顯切換效果/titlestyle
body {font-size:12px}
img {border:0px}
#sale{right:206px;top:0;width:260px;background:#fff}
#saleTitle{text-align:right;padding-top:5px;padding-right:5px;width:255px;height:20px;background:url(“images/saleTitle.gif”) no-repeat}
#saleList{margin-top:5px}
#saleList .saleTwo{height:108px;background:url(“images/salelineH.gif”) bottom repeat-x;}
#saleList a{display:block;height:108px;width:86px;text-align:center;float:left;overflow:hidden}
#saleList a.saleItem{background:url(“images/salelineV.gif”) right repeat-y;}
#saleList a img{margin:5px 0}
#saleList a:hover{background-color:#EBFFC5}
/style
script type=”text/javascript”
rnd.today=new Date();
rnd.seed=rnd.today.getTime();
function rnd(){
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
}
function rand(number){
return Math.ceil(rnd()*number)-1;
}
function nextSale(order){
if(order==”up”) saleNum–;
else saleNum++;
if(saleNum2) saleNum=0
else if(saleNum0) saleNum=2;
//alert(saleNum);
for(i=0;i3;i++)
document.getElementById(“saleList”+i).style.display=”none”;
document.getElementById(“saleList”+saleNum).style.display=””;
}
/script
/head
body
div id=”sale” class=”absolute overflow”
div id=”saleTitle” class=”absolute”
a href=”javascript:nextSale(‘up’)” title=”點擊到上一屏”
img src=”images/saleFore.gif” hspace=”4″ onmouseover=”this.src=’images/saleForeOver.gif'” onmouseout=”this.src=’images/saleFore.gif'” //aa href=”javascript:nextSale(‘down’)” title=”點擊到下一屏”img src=”images/saleNext.gif” onmouseover=”this.src=’images/saleNextOver.gif'” onmouseout=”this.src=’images/saleNext.gif'” //a/div
div class=”overflow” style=”height:330px” id=”saleList”
script type=”text/javascript”var saleNum=rand(3);/script
div id=”saleList0″ style=”display:none”
div class=”saleTwo”
a class=”saleItem” href=”” target=”_blank”
div
img alt=”聖誕浪漫飾品超級大促” src=”/jsimages/UploadFiles_3321/200804/20080423085515804.jpg” width=”65″ height=”65″ //div
div
聖誕浪漫飾品br /
超級大促/div
/a
a class=”saleItem” href=”” target=”_blank”
div
img alt=”攝像頭集結號給你新的感覺” src=”/jsimages/UploadFiles_3321/200804/20080423085516472.jpg” width=”65″ height=”65″ //div
div
攝像頭集結號br /
給你新的感覺/div
/aa href=”” target=”_blank”
div
img alt=”好感度提升韓版娃娃裝” src=”/jsimages/UploadFiles_3321/200804/20080423085516162.jpg” width=”65″ height=”65″ //div
div
好感度提升br /
韓版娃娃裝/div
/a/div
div class=”saleTwo”
a class=”saleItem” href=”” target=”_blank”
div
img alt=”復古牛仔外套特惠119元起” src=”/jsimages/UploadFiles_3321/200804/20080423085516293.jpg” width=”65″ height=”65″ //div
div
復古牛仔外套br /
特惠119元起/div
/a
a class=”saleItem” href=”” target=”_blank”
div
img alt=”聖誕拍拍特供運動服3折” src=”/jsimages/UploadFiles_3321/200804/20080423085516802.jpg” width=”65″ height=”65″ //div
div
聖誕拍拍特供br /
運動服3折/div
/aa href=”” target=”_blank”
div
img alt=”攝像頭集結號給你新的感覺” src=”/jsimages/UploadFiles_3321/200804/20080423085516472.jpg” width=”65″ height=”65″ //div
div
攝像頭集結號br /
給你新的感覺/div
/a/div
div
a class=”saleItem” href=”” target=”_blank”
div
img alt=”聖誕拍拍特供電腦周邊4折” src=”/jsimages/UploadFiles_3321/200804/20080423085516530.jpg” width=”65″ height=”65″ //div
div
聖誕拍拍特供br /
電腦周邊4折/div
/a
a class=”saleItem” href=”” target=”_blank”
div
img alt=”party扮靚甜美腮紅” src=”/jsimages/UploadFiles_3321/200804/20080423085516658.jpg” width=”65″ width=”65″ height=”65″ //div
div
party扮靚br /
甜美腮紅/div
/aa href=”” target=”_blank”
div
img alt=”好感度提升韓版娃娃裝” src=”/jsimages/UploadFiles_3321/200804/20080423085516162.jpg” width=”65″ height=”65″ //div
div
好感度提升br /
韓版娃娃裝/div
/a/div
/div
div id=”saleList1″ style=”display:none”
div class=”saleTwo”
a class=”saleItem” href=”” target=”_blank”
div
img alt=”新奇好玩便宜盡在網遊頻道” src=”/jsimages/UploadFiles_3321/200804/20080423085516612.jpg” width=”65″ height=”65″ //div
div
新奇好玩便宜br /
盡在網遊頻道/div
/a
a class=”saleItem” href=”” target=”_blank”
div
img alt=”展現高貴氣質騎士系馬靴” src=”/jsimages/UploadFiles_3321/200804/20080423085516202.jpg” width=”65″ height=”65″ //div
div
展現高貴氣質br /
騎士系馬靴/div
/aa href=”” target=”_blank”
div
img alt=”攝像頭集結號給你新的感覺” src=”/jsimages/UploadFiles_3321/200804/20080423085516472.jpg” width=”65″ height=”65″ //div
div
攝像頭集結號br /
給你新的感覺/div
/a/div
div class=”saleTwo”
a class=”saleItem” href=”” target=”_blank”
div
img alt=”永不過時條紋毛衣” src=”/jsimages/UploadFiles_3321/200804/20080423085516984.jpg” width=”65″ height=”65″ //div
div
永不過時br /
條紋毛衣/div
/a
a class=”saleItem” href=”” target=”_blank”
div
img alt=”聖誕拍拍特供運動鞋2折” src=”/jsimages/UploadFiles_3321/200804/20080423085516651.jpg” width=”65″ height=”65″ //div
div
聖誕拍拍特供br /
運動鞋2折/div
/aa href=”” target=”_blank”
div
img alt=”好感度提升韓版娃娃裝” src=”/jsimages/UploadFiles_3321/200804/20080423085516162.jpg” width=”65″ height=”65″ //div
div
好感度提升br /
韓版娃娃裝/div
/a/div
div
a class=”saleItem” href=”” target=”_blank”
div
img alt=”精簡唯美索愛K630″ src=”/jsimages/UploadFiles_3321/200804/20080423085516302.jpg” width=”65″ height=”65″ //div
div
精簡唯美br /
索愛K630/div
/a
a class=”saleItem” href=”” target=”_blank”
div
img alt=”原裝瑞士軍刀精選” src=”/jsimages/UploadFiles_3321/200804/20080423085516549.jpg” width=”65″ width=”65″ height=”65″ //div
div
原裝瑞士軍刀br /
精選/div
/aa href=”” target=”_blank”
div
img alt=”超薄機身索愛W880″ src=”/jsimages/UploadFiles_3321/200804/20080423085516711.jpg” width=”65″ height=”65″ //div
div
超薄機身br /
索愛W880/div
/a/div
/div
div id=”saleList2″ style=”display:none”
div class=”saleTwo”
a class=”saleItem” href=”” target=”_blank”
div
img alt=”各就各味秋冬飲食計劃” src=”/jsimages/UploadFiles_3321/200804/20080423085516704.jpgtype=3″ width=”65″ height=”65″ //div
div
各就各味br /
秋冬飲食計劃/div
/aa href=”” target=”_blank”
div
img alt=”好感度提升韓版娃娃裝” src=”/jsimages/UploadFiles_3321/200804/20080423085516162.jpg” width=”65″ height=”65″ //div
div
好感度提升br /
韓版娃娃裝/div
/a/div
div class=”saleTwo”
a class=”saleItem” href=”” target=”_blank”
div
img alt=”聖誕拍拍特供隨身視聽5折” src=”/jsimages/UploadFiles_3321/200804/20080423085516375.jpg” width=”65″ height=”65″ //div
div
聖誕拍拍特供br /
隨身視聽5折/div
/aa href=”” target=”_blank”
div
img alt=”超薄機身索愛W880″ src=”/jsimages/UploadFiles_3321/200804/20080423085516711.jpg” width=”65″ height=”65″ //div
div
超薄機身br /
索愛W880/div
/a/div
div
a class=”saleItem” href=”” target=”_blank”
div
img alt=”我愛我家家居大搶購” src=”/jsimages/UploadFiles_3321/200804/20080423085516954.jpg” width=”65″ height=”65″ //div
div
我愛我家br /
家居大搶購/div
/aa href=”” target=”_blank”
div
img alt=”超值彩妝套裝變身派對女王” src=”/jsimages/UploadFiles_3321/200804/20080423085516919.jpg” width=”65″ width=”65″ height=”65″ //div
div
超值彩妝套裝br /
變身派對女王/div
/a/div
/div
/div
/div
script type=”text/javascript”document.getElementById(“saleList”+saleNum).style.display=””;/script
p /p
p更多網頁特效代碼盡在 a href=””網頁特效代碼/a/p
/body
/html
這個仿拍拍基本上就是2層放圖片，但用起來的效果還是可以的，如果不喜歡我還有下面呢，慢慢學，總會看懂的 (最重要的還是Css哦)
這個主要就是讓層實現隱藏 我覺得這個在層使用方面還是好的
從總體上看，在實現層與層之間的交互，在其代碼 我覺得你有必要去認真看下 ！
以上是我介紹額度菜單，雖然不是很強大，但是卻很使用，而且在J2EE中
菜單基本上是一個假象，都是用層與Css之間的特效做出來的！
學會了層的具體應用，我相信你也可以有自己特色的菜單的
那我祝你好運咯！！加油！！
JS技術是什麼技術？
JS技術是JavaScript腳本代碼特效的簡稱，是一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，是在HTML網頁上使用，用來給HTML網頁增加動態功能。
在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript，設計人員為了方便交流就去簡稱JS技術。
js實現網頁 高度和寬度成比例的代碼
網頁可見區域寬：document.body.clientWidth
網頁可見區域高：document.body.clientHeight
網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)
網頁可見區域高：document.body.offsetHeight (包括邊線的寬)
網頁正文全文寬：document.body.scrollWidth
網頁正文全文高：document.body.scrollHeight
網頁被捲去的高：document.body.scrollTop
網頁被捲去的左：document.body.scrollLeft
網頁正文部分上：window.screenTop
網頁正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區高度：window.screen.availHeight
屏幕可用工作區寬度：window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
IE，FireFox 差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width – border
clientHeight = height – border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技術要點
本節代碼主要使用了Document對象關於窗口的一些屬性，這些屬性的主要功能和用法如下。
要得到窗口的尺寸，對於不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在
IE下需要 深入Document內部對body進行檢測；在DOM環境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window對象的innerWidth屬性包含當前窗口的內部寬度。Window對象的innerHeight屬性包含當前窗口的內部高度。
Document對象的body屬性對應HTML文檔的標籤。Document對象的documentElement屬性則表示HTML文檔的根節點。
document.body.clientHeight表示HTML文檔所在窗口的當前高度。document.body. clientWidth表示HTML文檔所在窗口的當前寬度。
實現代碼
複製代碼 代碼如下:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“”
html xmlns=””
head
title請調整瀏覽器窗口/title
meta http-equiv=”content-type” content=”text/html; charset=gb2312″
/head
body
h2 align=”center”請調整瀏覽器窗口大小/h2hr
form action=”#” method=”get” name=”form1″ id=”form1″
!–顯示瀏覽器窗口的實際尺寸–
瀏覽器窗口 的 實際高度: input type=”text” name=”availHeight” size=”4″br
瀏覽器窗口 的 實際寬度: input type=”text” name=”availWidth” size=”4″br
/form
script type=”text/javascript”
!–
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函數：獲取尺寸
{
//獲取窗口寬度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) (document.body.clientWidth))
winWidth = document.body.clientWidth;
//獲取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通過深入Document內部對body進行檢測，獲取窗口大小
if (document.documentElement document.documentElement.clientHeight document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//結果輸出至兩個文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//調用函數，獲取數值
window.onresize=findDimensions;
//–
/script
/body
/html
源程序解讀
（1）程序首先建立一個表單，包含兩個文本框，用於顯示窗口當前的寬度和高度，並且，其數值會隨窗口大小的改變而變化。
（2）在隨後的JavaScript代碼中，首先定義了兩個變量winWidth和winHeight，用於保存窗口的高度值和寬度值。
（3）然後，在函數findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，並將二者保存在前述兩個變量中。
（4）再通過深入Document內部對body進行檢測，獲取窗口大小，並存儲在前述兩個變量中。
（5）在函數的最後，通過按名稱訪問表單元素，結果輸出至兩個文本框。
（6）在JavaScript代碼的最後，通過調用findDimensions ( )函數，完成整個操作。
怎麼快速的學習基本JS技術
實話說學習是沒有捷徑的，最多也就是有一些學習的方法和技巧。關於學習JavaScript也就是js我分享一下我這個菜鳥的學習方法，只是個人的一些看法，不喜勿噴。
1、基礎要學的好
學過js的都是知道的，js的一些基礎的語法和一些變成語言是不一樣的，所以需要額外的注意一些基礎的語法，舉例來說：作用域，一般的編程語言都是全局變量函數外有效，函數內的變量函數內有效，而js是不一樣的，js的全局變量函數外和函數內都有效，函數內的函數只函數內有效。還有js是基於對象的語言，但是為了支持面向對象的編程思想，js使用函數來模擬類或者是對象的概念，這些都是比較難理解的，含有一些js的地層東西如原型鏈、上下文等也是非常的不好理解，這就需要基礎的知識一定要紮實才能行。
2、多練習和實踐
其實學習編程都是這樣的，多動手多思考是學習編程語言的最好辦法，很多東西看起來簡單但是做起來就非常難了，解決的方法是學習js要和做網頁特效聯繫起來，畢竟js的一個很大的應用方向就是實現網頁的效果和一些交互，所以學習基礎的同時要試着使用原生的js代碼來實現一些網頁特效，從中可以學到js這門語言的博大精深。
2、學習面向對象的編程思想
雖然js對於面向對象編程的支持不是很完美，但是一些js的大神使用了一些很多的方法，如構造函數等模擬了一些比較完整的面向對象編程，所以難點也出來了，那就是js的面向對象要比其他的語言複雜難理解。
4、學習js的一些框架
使用原生的js進行開發太難了，但是我們可以通過js的框架來解決這個問題，基礎的框架如jQuery，還有比較高級的框架如angularjs都是很不錯的東西，只是js原生學的好，這些框架也就比較好理解了
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/245751.html
微信掃一掃 
支付寶掃一掃 