JAVA初中級備課完美版-DOM編程-document對象課件

DOM編程－document對象第三章DOM編程－document對象第三章回顧window對象有哪些常用的方法及其含義？請說明Date對象主要用來做什么？請詳細解釋setTimeout()方法的功能。回顧window對象有哪些常用的方法及其含義？回顧……<SELECTname="selTopic"id="selPTopic"><OPTIONvalue="gard.html">網(wǎng)上談兵</OPTION><OPTIONvalue="IT.html">IT茶館</OPTION><OPTIONvalue="news.html">新聞貼圖</OPTION><OPTIONvalue="education.html">教育大家談</OPTION></SELECT>……如果要把"新聞貼圖"設(shè)為默認選中選項，該如何修改下面代碼？回顧……如果要把"新聞貼圖"設(shè)為默認選中選項，該如何修改下面本章任務演示示例1：浮動的廣告圖片演示示例2：帶關(guān)閉按鈕的浮動窗口演示示例3：全選/全不選特效制作浮動的廣告圖片特效制作帶關(guān)閉按鈕的浮動窗口制作全選/全不選特效本章任務演示示例1：浮動的廣告圖片本章目標會使用document對象的getElementById()方法訪問DIV層對象會使用document對象的getElementsByName()方法訪問表單元素會使用DIV對象的樣式屬性控制層的隱藏和顯示本章目標會使用document對象的getElementdocument對象屬性方法名稱說明bgColor設(shè)置或檢索Document對象的背景色名稱說明getElementByID()根據(jù)HTML元素指定的ID，獲得唯一的一個HTML元素。如：訪問DIV層對象、圖片Img對象getElementsByName()根據(jù)HTML元素指定的name，獲得相同名稱的一組元素。如：訪問表單元素(全選功能)document對象屬性名稱說明bgColor設(shè)置或檢索制作浮動的廣告圖片-1如何在頁面上方顯示廣告圖片？如何控制圖片的移動？使用DIV層，把圖片放在層中，然后使用JavaScript控制層的位置坐標制作浮動的廣告圖片-1如何在頁面上方顯示廣告圖片？如何控制圖制作浮動的廣告圖片-2實現(xiàn)思路：在頁面中插入層，然后在層中插入圖片編寫腳本1、使用getElementByID()方法獲取層對象2、捕獲鼠標滾動事件，改變層對象的位置坐標制作浮動的廣告圖片-2實現(xiàn)思路：制作浮動的廣告圖片-3常見的頁面坐標的介紹top:指定元素的上邊界位置。pixelTop:設(shè)置或返回元素的上邊界。left:指定元素的左邊界位置。scrolltop:頁面滾動的高度制作浮動的廣告圖片-3制作浮動的廣告圖片-4<SCRIPTlanguage="javascript">varadvInitTop=0;functioninix(){

x=document.getElementById("advLayer").style.pixelTop;}functionmove(){

document.getElementById("advLayer").style.pixelTop=

advInitTop+document.body.scrollTop;} window.onscroll=move;//當頁面滾動時調(diào)用move()函數(shù)</SCRIPT>……<BODYonload="inix(

)">……<DIVid="advLayer"style="position:absolute; left:16px; top:129px;width:144px; height:95px;z-index:1;"><Ahref=""><IMGsrc="images/advpic.gif"width="180"height="230"border="0"></A></DIV>查看完整代碼獲取層的初始與上邊界的距離通過頁面滾動的高度來改變層距離上邊界的距離制作浮動的廣告圖片-4<SCRIPTlanguage="j制作帶關(guān)閉按鈕的浮動窗口-1如何實現(xiàn)帶關(guān)閉功能的浮動窗口？把帶關(guān)閉的圖標放到層中，當點擊圖標時層消失。制作帶關(guān)閉按鈕的浮動窗口-1如何實現(xiàn)帶關(guān)閉功能的浮動窗口？把制作帶關(guān)閉按鈕的浮動窗口-2實現(xiàn)思路：在頁面中插入層，在層中插入圖片編寫腳本1、使用getElementById()方法獲得層對象2、設(shè)置層的樣式style的顯示屬性display="none"制作帶關(guān)閉按鈕的浮動窗口-2實現(xiàn)思路：制作帶關(guān)閉按鈕的浮動窗口-3<SCRIPTlanguage="javascript">varadvInitTop=0;functioninix(){advInitTop=document.getElementById("advLayer").style.pixelTop;}functionmove(){document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop; }functioncloseMe(){

document.getElementById("closeLayer").style.display="none";document.getElementById("advLayer").style.display="none";} window.onscroll=move;//當頁面滾動時調(diào)用move()函數(shù)</SCRIPT><BODYonload="inix()"><DIVid="closeLayer"onclick="closeMe(

)"style="position:absolute;left:166px;top:132px;width:27px; height:19px;z-index:2;"><IMGsrc="images/close.jpg"width="26"height="18"></DIV>查看完整代碼隱藏關(guān)閉圖標所在的層和浮動窗口所在的層制作帶關(guān)閉按鈕的浮動窗口-3<SCRIPTlanguage制作帶關(guān)閉按鈕的浮動窗口-4上一張PPT中示例能實現(xiàn)關(guān)閉了，但關(guān)閉圖片不能跟隨滾動，怎么辦？讓關(guān)閉圖標所在的層像浮動窗口一樣，也跟隨滾動條同步滾動。解決辦法：在move()方法中添加圖標所在的層與頁面滾動的高度保持同步的代碼即可制作帶關(guān)閉按鈕的浮動窗口-4上一張PPT中示例能實現(xiàn)關(guān)閉了，制作帶關(guān)閉按鈕的浮動窗口-5<SCRIPTlanguage="javascript">varadvInitTop=0;varcloseInitTop=0;functioninix(){advInitTop=document.getElementById("advLayer").style.pixelTop;closeInitTop=document.getElementById("closeLayer").style.pixelTop;}functionmove(){document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop;

document.getElementById("closeLayer").style.pixelTop=closeInitTop+document.body.scrollTop;}functioncloseMe(){document.getElementById("closeLayer").style.display="none";document.getElementById("advLayer").style.display="none"; }window.onscroll=move;//窗口的滾動事件</SCRIPT>查看完整代碼關(guān)閉圖片所在的層和滾動條同步滾動制作帶關(guān)閉按鈕的浮動窗口-5<SCRIPTlanguage課堂練習制作在頁面中能自由飄動的圖片。制作無縫滾動圖片的效果課堂練習制作在頁面中能自由飄動的圖片。小結(jié)1制作右邊欄浮動的帶關(guān)閉按鈕的廣告圖片與滾動條同步滾動廣告窗口小結(jié)1制作右邊欄浮動的帶關(guān)閉按鈕的廣告圖片與滾動條同步滾動制作實現(xiàn)全選效果-1如何實現(xiàn)如圖所示的全選或全不選效果？全選效果全不選效果制作實現(xiàn)全選效果-1如何實現(xiàn)如圖所示的全選或全不選效果？全選制作實現(xiàn)全選效果-21、復選框是否選中的屬性是哪個？2、寫代碼逐個復選框設(shè)置為true，有沒有更好的辦法？checked屬性解決辦法:使用復選框數(shù)組，通過循環(huán)給checked屬性賦值制作實現(xiàn)全選效果-21、復選框是否選中的屬性是哪個？chec制作實現(xiàn)全選效果-3實現(xiàn)思路：創(chuàng)建一組同名的復選框編寫腳本1、使用getElementsByName()方法獲得一組同名的復選框?qū)ο蟆?、通過循環(huán)來改變復選框是否被選中屬性checked的值。制作實現(xiàn)全選效果-3實現(xiàn)思路：制作實現(xiàn)全選效果-4<SCRIPTlanguage="javascript">functioncheckAll(boolValue){varallCheckBoxs=document.getElementsByName("isBuy");for(vari=0;i<allCheckBoxs.length;i++){

if(allCheckBoxs[i].type=="checkbox") allCheckBoxs[i].checked=boolValue;}}</SCRIPT>……<TR><TDwidth="6%"><Ahref="javascript:checkAll(true)">全選</TD><TDwidth="6%"><Ahref="javascript:checkAll(false)">全不選</A></TD><TDwidth="88%"><IMGsrc="images/top.jpg"width="845"height="18"></TD></TR>……查看完整代碼判斷同名元素中是否是復選框是復選框就改變是否選中屬性checked的值制作實現(xiàn)全選效果-4<SCRIPTlanguage="ja動態(tài)創(chuàng)建表格<SCRIPT>functioncreateRows(){varoRow1=oTable.insertRow(oTable.rows.length);//插入兩行。varoRow2=oTable.insertRow(oTable.rows.length);//獲取表格的行集合。varaRows=oTable.rows;//獲取第一行的單元格集合。

varaCells=oRow1.cells;//在第一行中插入兩個單元格。varoCell1_1=aRows(oRow1.rowIndex).insertCell(aCells.length);varoCell1_2=aRows(oRow1.rowIndex).insertCell(aCells.length);//獲取第二行的單元格集合。aCells=oRow2.cells;//在第二行中插入兩個單元格。varoCell2_1=aRows(oRow2.rowIndex).insertCell(aCells.length);varoCell2_2=aRows(oRow2.rowIndex).insertCell(aCells.length);//為4個新單元格添加規(guī)范的HTML值。oCell1_1.innerHTML="<B>Cell1.1!</B>";oCell1_2.innerHTML="<B>Cell1.2!</B>";oCell2_1.innerHTML="<B>Cell2.1!</B>";oCell2_2.innerHTML="<B>Cell2.2!</B>";}</SCRIPT><INPUTTYPE="button"VALUE="創(chuàng)建行"onclick="createRows()"><TABLEBORDER=1ID="oTable"><TR><TD></TD></TR></TABLE>動態(tài)創(chuàng)建表格<SCRIPT>functioncreate常見錯誤-1<SCRIPTlanguage="javascript">functioncheckAll(boolValue){alert("OK");varallCheckBoxs=document.getElementsByName("isBuy");alert(allCheckBoxs[0].type);for(vari=0;i<allCheckBoxs.length;i++){if(allCheckBoxs[i].type="checkbox") allCheckBoxs[i].checked=boolValue;}}</SCRIPT>這里是判斷關(guān)系所以應該是比較運算符"=="，而不是賦值運算符"="常見錯誤-1<SCRIPTlanguage="javas常見錯誤-2調(diào)用時，參數(shù)不要加單引號，false和'false'的含義不一樣<SCRIPTlanguage="javascript">functioncheckAll(boolValue){varallCheckBoxs=document.getElementsByName("isBuy");for(vari=0;i<allCheckBoxs.length;i++){if(allCheckBoxs[i].type=="checkbox") allCheckBoxs[i].checked=boolValue;}}</SCRIPT>……<TR><TDwidth="6%"><Ahref="javascript:checkAll('true')">全選</TD><TDwidth="6%"><Ahref="javascript:checkAll('false')">全不選</A></TD><TDwidth="88%"><IMGsrc="images/top.jpg"width="845"height="18"></TD></TR>……常見錯誤-2調(diào)用時，參數(shù)不要加單引號，false和'falsCookie對象是一種以文件（Cookie文件）的形式保存在客戶端硬盤的Cookies文件夾中的用戶數(shù)據(jù)信息（Cookie數(shù)據(jù)）。Cookie文件由所訪問的WEB站點建立，以長久的保存客戶端與web站點間的會話數(shù)據(jù)，并且該Cookie數(shù)據(jù)只允許被所訪問的WEB站點進行讀取。Cookie文件的格式NS：Cookie.txtIE：用戶名@域名.txtCookie對象是一種以文件（Cookie文件）的形式保存寫入Cookie格式：document.cookie=“關(guān)鍵字=值[;expires=有效日期][;……]”varexpireDay=newDate();varmsPerMonth=24*60*60*1000*31;expireDay.setTime(toDay.getTime()+msPerMonth);document.cookie=“name=zhang;expires=”+expireDay.toGMTString;document.writeln(“cookie已經(jīng)寫到