JavaScript鍏ラ棬璇﹁В
銆��寮�寮�彂宸ヤ綔銆�/span>
涓��Alert Confirm Prompt
<html>
<head>
<script type="text/javascript">
function show_alert(){ alert('绗竴琛孿n绗簩琛�); } function show_confirm(){ var result = confirm('鏄惁鍒犻櫎锛�); if(result){ alert('鍒犻櫎鎴愬姛锛�); }else{ alert('涓嶅垹闄わ紒'); } } function show_prompt(){ var value = prompt('杈撳叆浣犵殑鍚嶅瓧锛�, '榛樿鍚嶅瓧'); if(value == null){ alert('浣犲彇娑堜簡杈撳叆锛�); }else if(value == ''){ alert('濮撳悕杈撳叆涓虹┖锛岃閲嶆柊杈撳叆锛�); show_prompt(); }else{ alert('浣犲ソ锛�+value); } } </script>
</head>
<body>
<input id="alert_button" type="button" value="alert" onclick="show_alert()" >
<input id="confirm_button" type="button" value="confirm" onclick="show_confirm()" >
<input id="prompt_button" type="button" value="prompt" onclick="show_prompt()" >
</body>
</html>
浜屻�瀹炰緥鍒嗘瀽
2.1 绠�崟搴旂敤
銆��1銆佹柊绐楀彛鎵撳紑鏃跺脊鍑虹‘璁ゆ锛屾槸鍚︽墦寮�/span>
銆��鎻愮ず: 浣跨敤 if 鍒ゆ柇纭妗嗘槸鍚︾偣鍑讳簡纭畾锛屽鐐瑰嚮寮瑰嚭杈撳叆瀵硅瘽妗嗭紝鍚﹀垯娌℃湁浠讳綍鎿嶄綔銆�/span>
銆��2銆侀�杩囪緭鍏ュ璇濇锛岀‘瀹氭墦寮�殑缃戝潃锛岄粯璁や负 http锛�/www.imooc.com/
銆��3銆佹墦寮�殑绐楀彛瑕佹眰锛屽400鍍忕礌锛岄珮500鍍忕礌锛屾棤鑿滃崟鏍忋�鏃犲伐鍏锋爮銆�/span>
<!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <script type="text/javascript"> // 鏂扮獥鍙ｆ墦寮�椂寮瑰嚭纭妗嗭紝鏄惁鎵撳紑 function openWindow() { var flag = confirm("鏄惁鎵撳紑鏂扮獥鍙ｏ紵"); var url; if(flag) { url = prompt("鎵撳紑浠�箞缃戦〉",http锛�span style="color: #008000;">//www.imooc.com/); window.open(url,"height=500,width=400,menubar=no,toolbar=no"); } } // 閫氳繃杈撳叆瀵硅瘽妗嗭紝纭畾鎵撳紑鐨勭綉鍧�紝榛樿涓�http锛�/www.imooc.com/ //鎵撳紑鐨勭獥鍙ｈ姹傦紝瀹�00鍍忕礌锛岄珮500鍍忕礌锛屾棤鑿滃崟鏍忋�鏃犲伐鍏锋爮銆�/span> </script> </head> <body> <input type="button" value="鏂扮獥鍙ｆ墦寮�綉绔� onclick="openWindow()" /> </body> </html>
2.2getElementById
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
var mychar= document.getElementById("con") ; document.write("缁撴灉:"+mychar); //杈撳嚭鑾峰彇鐨凱鏍囩銆�
</script>
</body>
</html>
缁撴灉:[object HTMLParagraphElement]銆�/span>
銆��娉�鑾峰彇鐨勫厓绱犳槸涓�釜瀵硅薄锛屽鎯冲鍏冪礌杩涜鎿嶄綔锛屾垜浠閫氳繃瀹冪殑灞炴�鎴栨柟娉曘�
2.3innerHTML
銆��1. 鍦ㄥ彸杈圭紪杈戝櫒涓紝绗�1琛岃ˉ鍏呬唬鐮侊紝閫氳繃id鑾峰彇h2鏍囩鍏冪礌,骞惰祴缁欏彉閲弇ychar銆�/span>
銆��2. 鍦ㄥ彸杈圭紪杈戝櫒涓紝绗�3琛岃ˉ鍏呬唬鐮侊紝浣跨敤innerHTML灞炴�锛屽皢鑾峰彇鐨刪2鏍囩鍐呭淇敼涓�Hello world!"
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript鏄竴绉嶅熀浜庡璞°�浜嬩欢椹卞姩鐨勭畝鍗曡剼鏈瑷�紝宓屽叆鍦℉TML鏂囨。涓紝鐢辨祻瑙堝櫒璐熻矗瑙ｉ噴鍜屾墽琛岋紝鍦ㄧ綉椤典笂浜х敓鍔ㄦ�鐨勬樉绀烘晥鏋滃苟瀹炵幇涓庣敤鎴蜂氦浜掑姛鑳姐�</p>
<script type="text/javascript">
var mychar= document.getElementById("con") ; document.write("鍘熸爣棰�"+mychar.innerHTML+"<br>"); //杈撳嚭鍘焗2鏍囩鍐呭
mychar.innerHTML="Hello World1" document.write("淇敼鍚庣殑鏍囬:"+mychar.innerHTML); //杈撳嚭淇敼鍚巋2鏍囩鍐呭
</script>
</body>
</html>
2.4 Style
銆��1. 鍦ㄥ彸杈圭紪杈戝櫒涓紝绗�2琛岃ˉ鍏呬唬鐮侊紝淇敼h2鏍囩鐨勬牱寮忥紝灏嗛鑹茶涓虹孩鑹层�
銆��2. 鍦ㄥ彸杈圭紪杈戝櫒涓紝绗�3琛岃ˉ鍏呬唬鐮侊紝淇敼h2鏍囩鐨勬牱寮忥紝灏嗚儗鏅鑹茶涓虹伆鑹�#CCC)銆�/span>
銆��3. 鍦ㄥ彸杈圭紪杈戝櫒涓紝绗�4琛岃ˉ鍏呬唬鐮侊紝淇敼h2鏍囩鐨勬牱寮忥紝灏嗗璁句负300px銆�/span>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style鏍峰紡</title>
</head>
<body>
<h2 id="con">I love JavaScript</H2>
<p> JavaScript浣跨綉椤垫樉绀哄姩鎬佹晥鏋滃苟瀹炵幇涓庣敤鎴蜂氦浜掑姛鑳姐�</p>
<script type="text/javascript">
var mychar= document.getElementById("con"); mychar.style.color="red"; mychar.style.backgroundColor("#CCC"); mychar.style.width="300px"
</script>
</body>
</html>
2.5 display
銆��鎴戜滑鏉ュ疄鐜癷d="con"鐨刾鏍囩鍏冪礌鐨勯殣钘忓拰鏄剧ず:
銆��1. 鍦ㄥ彸杈圭紪杈戠10琛岃ˉ鍏呬唬鐮侊紝閫氳繃style.display瀹炵幇闅愯棌銆�/span>
銆��2. 鍦ㄥ彸杈圭紪杈戠15琛岃ˉ鍏呬唬鐮侊紝閫氳繃style.display瀹炵幇鏄剧ず銆�/span>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext() { var mychar = document.getElementById("con"); mychar.display = "none"; } function showtext() { var mychar = document.getElementById("con"); mychar.display="block"; } </script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">鍋氫负涓�釜Web寮�彂甯堟潵璇达紝濡傛灉浣犳兂鎻愪緵婕備寒鐨勭綉椤点�浠ょ敤鎴锋弧鎰忕殑涓婄綉浣撻獙锛孞avaScript鏄繀涓嶅彲灏戠殑宸ュ叿銆�lt;/p>
<form>
<input type="button" onclick="hidetext()" value="闅愯棌鍐呭" />
<input type="button" onclick="showtext()" value="鏄剧ず鍐呭" />
</form>
</body>
</html>
2.6 className
銆��1.鍦ㄥ彸杈圭紪杈戠33琛岃ˉ鍏呬唬鐮侊紝缁檌d="p1"鍏冪礌閫氳繃className娣诲姞"绫诲悕涓簅ne"鐨勬牱寮忋�褰撶偣鍑�娣诲姞鏍峰紡"鎸夐挳锛岀涓�鏂囧瓧娣诲姞鏍峰紡銆�/span>
銆��2.鍦ㄥ彸杈圭紪杈戠37琛岃ˉ鍏呬唬鐮侊紝缁檌d="p2"鍏冪礌閫氳繃className淇敼涓�绫诲悕涓簍wo"鐨勬牱寮忋�褰撶偣鍑�鏇存敼澶栬"鎸夐挳锛岀浜屾鏂囧瓧鏇存敼鏍峰紡銆�/span>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className灞炴�</title>
<style> body{ font-size:16px;} .one{ border:1px solid #eee; width:230px; height:50px; background:#ccc; color:red; } .two{ border:1px solid #ccc; width:230px; height:50px; background:#9CF; color:blue; } </style>
</head>
<body>
<p id="p1" > JavaScript浣跨綉椤垫樉绀哄姩鎬佹晥鏋滃苟瀹炵幇涓庣敤鎴蜂氦浜掑姛鑳姐�</p>
<input type="button" value="娣诲姞鏍峰紡" onclick="add()"/>
<p id="p2" class="one">JavaScript浣跨綉椤垫樉绀哄姩鎬佹晥鏋滃苟瀹炵幇涓庣敤鎴蜂氦浜掑姛鑳姐�</p>
<input type="button" value="鏇存敼澶栬" onclick="modify()"/>
<script type="text/javascript">
function add(){ var p1 = document.getElementById("p1"); p1.className = "one"; } function modify(){ var p2 = document.getElementById("p2"); p2.className = "two"; } </script>
</body>
</html>
銆��1.鑾峰彇鍏冪礌鐨刢lass 灞炴�
銆��2. 涓虹綉椤靛唴鐨勬煇涓厓绱犳寚瀹氫竴涓猚ss鏍峰紡鏉ユ洿鏀硅鍏冪礌鐨勫瑙�/span>