是JaaScit應用跳動的心臟，進行交互，使網頁動起來。當我們與瀏覽器中Web頁面進行某些類型的交互時，就發(fā)生了。可能是用戶在某些內容上的點擊、鼠標經過某個特定元素或下鍵盤上的某些按鍵。還可能是Web瀏覽器中發(fā)生的事情，比如說某個Web頁面加載完成，或者是用戶滾動窗口或改變窗口大小。通過使用JavaScript，你可以特定的發(fā)生，并規(guī)定讓某些發(fā)生以對這些做出 ；處理：扣分罰款 當我們用戶在頁面中進行的點擊動作，鼠標移動的動作，網頁頁面加載完成的動作等，都可以稱之為名稱，即：clck、msemve、lad等都是名稱，對應具體的執(zhí)行代碼處理，響應某個的函數。1123456789<!--onload<body<scripttype="text/javascript">functionloadWindow(){}JavaScript可以處理的類型為：鼠標、鍵盤、HTMLWindow屬性:針對window對象觸發(fā)的（應用 Form:由HTML表單內的動作觸發(fā)的（應用到幾乎所有HTML元素，但最常用在form元中Keyboard:鍵Mouse:由鼠標或類似用戶動作觸發(fā) :由媒介（比 、圖像和音頻）觸發(fā) （適用于所有HTML元素，但常見于媒

<audio>、<embed> 、

以 <!DOCTYPE3<metacharset="utf-8"<styledivwidth:height:background:margin-top: <body<buttontype="button"onclick="clickFunc();">點擊</button><br/> 用戶名：<inputid="user_id"type="text"onblur="blurFunc();"onfocus="focusFunc();"onkeydown="keydownFunc();"onkeyup="keyupFunc();"/><span<br <select <divonclick="clickFunc();"onmouseover="moverFunc();"<scriptfunctionloadFunc() //onloadwindow.onload=function() //onclickfunctionclickFunc() //onblurfunctionblurFunc() .geementById('user_span').innerTML='用戶名不能為空 //onkeydownfunctionkeydownFunc()//m是if(77==event.keyCode)//onfocusfunctionfocusFunc() ementById('user_span').innerTML='用戶名為4~10} ementById('user_span').innerTML='不 ，息無效}}//onkeyupfunctionkeyupFunc(){if(77==event.keyCode)ementById('user_id').value}}//onchangefunctionchangeFunc()TML=' }//onmouseover：鼠標移動到某個元素上functionmoverFunc(){ ementById('user_span').innerTML='鼠標已移動至}//onmouseout：鼠標從某個元素上離開functionmoutFunc(){ ementById('user_span').innerTML=}就是用戶或瀏覽器自身執(zhí)行的某種動作。例如clck、lad和mever都是的名字，而響應某個的函數就叫做處理程序（或偵）。處理程序的名字以n”開頭，因此k的處理程序就是onclick，為指定處理程序的方式有好幾種某個元素支持的每種，都可以用一個與相應處理程序同名的HTL特性來指定。這個特的值應該是能夠執(zhí)行的JaaScit代碼： <inputtype="button"value="Pressme"onclick="alert('thanks');"這樣做有一些缺點，例如耦合度過高，還可能存在時差問題（載到，此時處理函數是單獨寫的一段s代碼），而且在不同的瀏覽器上可能會有不同的效果。通過JaaSci指定處理程序的傳統(tǒng)方式，就是將一個函數賦值給一個處理程序屬性。這種方式被所有現(xiàn)代瀏覽器所支持。這種方式首先必須取得一個要操作的對象的，每個元素都有自己的處理程序屬性，這些屬性通常全都小寫，例如oclick，然后將這種屬性的值設為一個函數，就可以指定處理程序了。例如：1123456789<!DOCTYPE<metacharset="UTF-<styletype="text/css">div{width:300px;height:200px;background:gray;margin-top:100px;}<buttonid="myBtn">按鈕<span<divid="dv">我是一個<scriptvarbtnbtn.onclick=function(){alert('youclickabutton');}//onclickfunctionclickFunc()}//onmouseoverfunctionmoverFunc()TML='鼠標已移動至}//onmouseoutfunctionmoutFunc() ementById('user_span').innerTML=}DOMvardvdv.onclick=clickFunc;dv.onmouseout=moutFunc;11234btn.onclick=null;dv.onclick=null;dv.onmouseout=DOM：ObjectModel文檔對象模要實現(xiàn)頁面的動態(tài)交互效果，BOM操作遠遠不夠，需要操作html才是。如何操作html，就是DOM。簡單的說，DOM提供了用程序動態(tài)控制html接口。DOM即文檔對象模型描繪了一個層次化的節(jié)點樹，運行開發(fā)人員添加、移除和修改頁面的某一部分。DOM處于javascript的地位上。每個載入瀏覽器的HTML文檔都會成 對象使我們可以從中HTML頁面中的所有元素進行 對象是Window對象的一部分，可通過HTML頁面時，Web瀏覽器生成一個樹型結構，用來表示頁面內部結構。DOM將這種樹型結構<a>、<div、o<!----1123456789<!DOCTYPE<metacharset="utf-8"<!--點擊 跳<a--當HTML文檔在被解析為一顆DO樹以后，里面的每一個節(jié)點都可以看做是一個一個的對象，我們成為DO創(chuàng)建某種節(jié)點對象，可以在某個位置添加節(jié)點對象，甚至可以動態(tài)地刪除節(jié)點對象，這些操作可以使我們的頁面看起來有動態(tài)的效果，后期結合使用，就能讓我們的頁面在特定時機、特定的下執(zhí)行特定的變換。注意：操作dom必須等節(jié)點初始化完畢后，才能執(zhí)行。處理方式兩種把script調用移到html末尾即可使用onload來處理JS，等待html加載完畢再加載onload里的JS1123456789window.onload=function()//<!DOCTYPE<metacharset="UTF-<!--注意script塊的位置<scripttype="text/javascript">window.onload=function()vardvdv.innerTML="我是一個}<div根據名獲取==dom對象數組根據樣式名獲取==dom對象數組<!DOCTYPE<metacharset="UTF-<!--根據idclass獲取元素<pid="p1"class="ptext">這是一個段落<span>文本<pid="p2"class="ptext">這又是一個段落</p><!--根據name名稱獲取元素--<inputtype="checkbox"name="hobby"value="游泳"/><inputtype="checkbox"name="hobby"value="籃球"/><inputtype="text"value="我是一個輸入框"/><!--href="javascript:void(0);"偽協(xié)議，表示不執(zhí)行跳轉，而執(zhí)行指定的--<ahref="javascript:void(0);"onclick="testById();">根據id獲取元素<ahref="javascript:void(0);"onclick="testByName();">根據name獲取元素<ahref="javascript:void(0);"onclick="testByTagName();">根名稱獲取元<a<ahref="javascript:void(0);"onclick="testByClass();">根據class<script//根據idfunctiontestById()varp console.log(p.innerTML);//表示獲取元素開始和結束之間的html結 console.log(p.innerText);//表示獲取之間的普通文 //根據namefunctiontestByName()//varhobby=.ge//for(vari=0;i<hobby.length;i++) //根據名稱獲取元functiontestByTagName()//varinputArr=.ge // for(vari=0;i<inputArr.length;i++) //判斷是否是text if("text"==inputArr[i].type) //判斷是否是checkbox }elseif("checkbox"==inputArr[i].type) // if(inputArr[i].checked) //根據classfunctiontestByClass()//varptext=.geconsole.log(ptext[0].innerptext[0].innerTML+="，這是一段新的文本 說明 下幾種方式創(chuàng)建新節(jié)點。1123456789<!DOCTYPE<metacharset="utf-8"<buttononclick="addP();">添加段落<div<scriptfunctionaddP()式//根據id獲取元素varcontainer//創(chuàng)建pvarp//vartxt//p//div元素添加p元素////向pp.innerTML="以后的你會感謝現(xiàn)在努力的你//將p節(jié)點追加到container//將字符串類型的 varstr="<p>以后的你會感謝現(xiàn)在努力的你3</p>";container.innerTML=str;}1123456789<!DOCTYPE<metacharset="utf-8"<buttononclick="addImg();"><div<script//functionaddImg()//創(chuàng)建imgvarimg//式//設置img元素的srcimg.src="htimg.style.width='500px';////setAttribute()//設置img元素的srcimg.setAttribute('src',img.setAttribute("style","width:500px;height://獲取divvarcontainer //將img元素節(jié)點追加到div////將字符串類型的 container.innerTML= /img/bd_logo1.png' 1123456789<!DOCTYPE<metacharset="utf-8"<buttononclick="addTxt();">添加文本框<div<script//functionaddTxt()//創(chuàng)建inputvartxt//式txt.type="text";txt.value="添加成功";//txt.type=//txt.value=//txt.setAttribute('type',,//獲取divvarcontainer //將input節(jié)點追加到div////將字符串類型的 container.innerTML="<inputtype='password'}<!DOCTYPE3<metacharset="utf-8"8<buttononclick="addOptions()">添加選項<select<optionvalue="0">---請選擇---<optionvalue="1">南山南<optionvalue="2">喜歡你<script//functionaddOptions()//第//varoption option.value=option.text="需要人陪//varsel ////varoption option.value=option.text="光年之外//varsel // // // varsel // sel.innerTML+="<optionvalue='5'>風的季節(jié) 方法|<!DOCTYPE3<metacharset="utf-8"8<buttontype="button"id="btn">測試按鈕</button><div<input<input<inputid="inp"<scriptvardv= //childNodesfunctionget_childNodes()console.log(dv.childNodes[1]);//獲取到 //firstChildfunctionget_firstChild() //lastChildfunctionget_lastChild() previousSiblingfunctionget_previousSibling()varinp }//nextSiblingfunctionget_nextSibling()varinp}//parentNodefunctionget_parentNode()varinp}varbtnbtn.onclick=get_childNodes;//DOM方法|123456789<!DOCTYPE<metacharset="utf-8"<div<spanid="cxy">程序猿<ahref="javascript:void(0)"onclick="delNode();">刪除<scriptfunctiondelNode()//vardvvarcxy ////varcxy}方法|設置或者返回元素的1123456789<!DOCTYPE<metacharset="utf-8"<buttontype="button"id="btn">測試按鈕</button><br<inputtype="text"value="加油，勝利就在眼前"id="txt"class="test"<br：<inputtype="radio"checked="true" "value="1"><inputtype="radio" "value="0"><br <imgsrc="img/timg.jpg"id="sxtimg"title="sxt"/><scriptvartxt=.gevar=.geementsByName("varsxtimg=.geementById("sxtimg");//functiongetValue()// //functiongetAttr()varid=varvalue=varclazz= //functiongetChecked()console.log(.checked);//指定選項是否被選 // functionsetAttr() sxtimg.style.disy='none';//隱 txt.setAttribute("value","success");// txt.setAttribute("aaa","000000");// console.log(txt.getAttribute("aaa"));// //functiondelAttr() varbtn=.gebtn.onclick= QQ空間表單驗證，利用JavaScript實現(xiàn)模擬QQ<!DOCTYPE<metacharset="utf-8"<!--設置網頁的圖標<linkrel="shortcuticon"type="image/x-icon"href="img/2.ico"<!--引入外部css文件<linkrel="stylesheet"href="css/qqzone.css" 1.設置背景大小位2.左上角的.網頁的 <!--q_logostart--<div<imgsrc="img/logo.png"<!--q_logoend--><!--q_bottomstart--<div<div<liclass="ul_li_<span <li<span <li <span <li <span <span <li <spanclass="span_other">其他 <div <ahref="htt target="_blank">反饋建議</a>| <a /" </a> <a /"target="_blank"></a> <a /"target="_blank"></a> <ahref="http:/ 館</a>| <a /"target="_blank">QQ互聯(lián)</a> <ahref="htt target="_blank">QQ登錄</a>| <ahref="htt target="_blank">社交組件</a>| </a> intGuidelines</a> <p>Copyright©2005-2018Tencent.<a target="_blank">AllRights <p>騰訊公司 </a><ahref=" <div ;<ahref="ht <!--q_loginstart--<div<div <div <span>推薦使用<ahref="#"style="color:#3481cf;"> <divclass="q_login_tip"id="q_login_tip"style="dis <imgid="tip_img"src="img/!.bmp"/><spanid="tips_span"style="color:#ff3b30;"></span> <div<inputid="qq_inp"value="/郵箱號登錄"/><br/><inputid="pwd_inp""<div<!--點擊按鈕觸發(fā)點擊事情調用指定函數<buttontype="button"onclick="form_submit()">登 <div<p><a target="_blank">target="_blank">;| ;| ;<a <!--q_loginend--<!--編寫javascript部分的代碼<scripttype="text/javascript"1123456789/*采用什么編碼解析文件@charset"utf-backgroundbackground-sizebackground-positionfont-sizebackground-size:1366px909px;background-position:0px-135px;font-size:}/*q_logostart*q_logo.q_logoposition:absolute;top:95px;left:}/*q_logoend/*q_bottomstart.q_bottom.q_bottom_iconposition:left:bottom: *color*list-style*widthheight*text-align*position*cursor**transitioncss鼠標上移的樣式0.3.q_bottom.q_bottom_iconullicolor:list-style:width:height:text-align:position:cursor: transition:all *.q_bottom.q_bottom_iconulli:hovertransform:translate(0px,- *設置指定span**設置寬度為.q_bottom.q_bottom_iconullispanposition: y:width: *設 background:background-position:-60px-top:left: .span_top:left:- *設置ipad.ul_li_ipadbackground:background-position:-60px-top:-left: .span_ipadtop:left:- *設置android.ul_li_androidbackground:background-position:-90px-top:left: .span_androidtop:left:- *設置windowsphone.ul_li_windowsphonebackground:background-position:-90px-top:-left: .span_windowstop:left:- .span_wphonetop:left:- *設置其他的圖標和文.ul_li_otherbackground:background-position:-90px-top:-left: .span_othertop:left:- /*設置所有p元素的字體為白色pcolor: /*設置所有a元素的字體為白色取消下劃線樣式acolor:text-decoration: /*鼠標上移添加下劃線樣式a:hovertext-decoration: *.q_bottom.q_bottom_texttext-align:position:line-height:bottom:left: .q_bottom.q_bottom_showposition:bottom:right: /*q_bottomend*//*q_loginstart**background*border*border-radius*position.q_loginwidth:height:background:border:2pxsolidborder-radius:position:right:top: *text-align*font-size*color*padding-top內間距從頂部開始移動.q_login.q_login_titletext-align:font-size:color:padding-top: *font-size*color*text-align*padding-top內間距從頂部開始移動.q_login.q_login_entryfont-size:color:text-align:padding-top: *設置input.q_login.q_login_inputposition:top:left: *widthheight*margin-top*padding-left*border邊框1px*border-radius*color*font-family*font-size.q_login.q_login_inputinputwidth:height:margin-top:padding-left:border:1pxsolidborder-radius:color:font-family:font-size: /*修改登錄按鈕的位置.q_login.q_login_buttonposition:bottom:left:}**text-align*border邊框實線*color*font-size*cursor.q_login.q_login_buttonbuttonwidth:height:text-align:border:1pxsolidbackground:color:font-size:cursor: /*設置底部按鈕找回信息的位置.q_login.q_login_bottomposition:bottom:-right: /*設置找回的字體顏色和樣式.q_login.q_login_bottomp,.q_login.q_login_bottoma color: /*設置提示文字信息的位置.q_login.q_login_tipposition:top:left: /*設置提示文字!的位置#tip_imgposition:top:-left:- /*q_loginend11234//頁面加載完成執(zhí)行的函數生成隨機數切換bodywindow.onload=function()varnum=Math.round(Math.random()*ementById("body").style="background:url(img/bg"+num".jpg);" "background-size:1366px909px;"+"background-position:0px- 7 * 1.不能為空( 長度>=5且<=11( 1.不能