前端設(shè)計與開發(fā) 課件 模塊8 JavaScript基礎(chǔ)_第1頁
前端設(shè)計與開發(fā) 課件 模塊8 JavaScript基礎(chǔ)_第2頁
前端設(shè)計與開發(fā) 課件 模塊8 JavaScript基礎(chǔ)_第3頁
前端設(shè)計與開發(fā) 課件 模塊8 JavaScript基礎(chǔ)_第4頁
前端設(shè)計與開發(fā) 課件 模塊8 JavaScript基礎(chǔ)_第5頁
已閱讀5頁，還剩86頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

模塊8JavaScript基礎(chǔ)制作精選圖書模塊任務8.1任務描述在數(shù)字化閱讀日益普遍的時代背景下，線上圖書館、電子書城等平臺逐漸成為人們獲取知識、享受閱讀的重要途徑。利用HTML5和JavaScript技術(shù)為某個線上閱讀平臺或教育項目開發(fā)一個精選圖書模塊。這個模塊將展示一系列經(jīng)過精挑細選的書籍，用戶可以通過這個模塊輕松瀏覽、查找和深入了解這些書籍，從而增強用戶在平臺上的閱讀體驗，推廣優(yōu)秀作品，傳播知識。任務分析通過對本任務的學習，了解JavaScript的特點，掌握JavaScript的基本語法和屬性，掌握BOM和DOM對象中的各種語法和屬性，掌握JavaScript中各種函數(shù)的語法，了解事件的分類并掌握事件的調(diào)用方法，掌握JavaScript中各種對象的基本語法和屬性，最后利用所學知識制作精選圖書模塊網(wǎng)頁。相關(guān)知識8.1.1JavaScript語言基礎(chǔ)解釋型語言，基于對象和事件驅(qū)動，廣泛應用于Web開發(fā)，直接嵌入HTML中，通過<script>標簽顯示JavaScript語法特點01在HTML中，使用<script></script>標簽對來嵌入JavaScript代碼。這個標簽可以放置在網(wǎng)頁的任何位置，但一般會將它放置在<head></head>標簽對中。<script></script>標簽對的主要作用是告訴瀏覽器：它需要開始解析標簽對之間的內(nèi)容，并將其作為JavaScript腳本來運行。在<script></script>標簽對中，可以編寫JavaScript代碼，包括變量聲明、函數(shù)定義、條件語句、循環(huán)等。JavaScript的語法021）JavaScript注釋JavaScript注釋用于解釋代碼和阻止執(zhí)行，單行注釋以//開始，多行注釋以/*開始，*/結(jié)束2）JavaScript數(shù)據(jù)結(jié)構(gòu)JavaScript標識符是用戶為變量和函數(shù)定義的名稱，應由字母、數(shù)字、下劃線或中文組成，首字符不能是數(shù)字，且區(qū)分大小寫。不能與JavaScript關(guān)鍵字同名（1）標識符規(guī)則（2）常量常量也稱為“常數(shù)”，在JavaScript代碼運行時，值不能被改變的量為常量，主要為程序提供固定且精確的值。例如，數(shù)字、邏輯值（true和false）等都是常量。JavaScript中的常量包括下列6種基本類型。 數(shù)字（Number）:包括整數(shù)和浮點數(shù)，如“constPI=3.14;”。 邏輯值（Boolean）:只有兩個值，分別為true和false，如“constIS_ACTIVE=true;”。 字符串（String）:一系列字符的集合，如“constGREETING="Hello";”。 空（Null）:表示空或不存在的值，如“constEMPTY=null;”。 未定義（Undefined）:表示聲明了變量但未賦值的情況，如“constUNDEFINED_VALUE=undefined;”。 符號（Symbol）:JavaScript中新增的數(shù)據(jù)類型，表示唯一的標識符，如“constKEY=Symbol();”。（3）變量變量是存取數(shù)字、提供存放信息的單元。對于變量，必須明確變量的命名、變量的聲明與賦值、變量的作用范圍。在JavaScript中，雖然可以不用聲明變量，但是不進行聲明的變量無法作為存儲單元。聲明變量就是對變量進行命名。在一般情況下，可以使用關(guān)鍵字var對變量進行命名（4）關(guān)鍵字JavaScript中的關(guān)鍵字是指在JavaScript中具有特定含義的、可以成為JavaScript語法中一部分的字符。關(guān)鍵字用于標識JavaScript語句的開頭和結(jié)尾，它不能作為變量名或函數(shù)名，但可保留。JavaScript中常用的關(guān)鍵字如表所示。3）JavaScript數(shù)據(jù)類型JavaScript中的基本數(shù)據(jù)類型比較簡單，主要有數(shù)值型、字符型、布爾型、空值（null）和未定義（undefined）值5種（1）數(shù)值型。JavaScript中的數(shù)值型數(shù)據(jù)可以分為整型和浮點型兩種①整型。JavaScript中的整型數(shù)據(jù)可以是正整數(shù)、負整數(shù)和0，并且可以采用十進制、八進制或十六進制來表示。②浮點型。浮點型數(shù)據(jù)由整數(shù)部分和小數(shù)部分組成，只能采用十進制，但是可以使用科學記數(shù)法或標準方法來表示。（2）字符型。字符型數(shù)據(jù)是使用單引號或雙引號括起來的一個或多個字符。（3）布爾型。布爾型數(shù)據(jù)只有兩個值，分別為true或false，主要用來說明或表示一種狀態(tài)或標志。在JavaScript中，也可以使用整數(shù)0表示false，使用非0的整數(shù)表示true。（4）空值。JavaScript中有一個空值（null），用于定義空的或不存在的引用。4）JavaScript運算符包括算術(shù)、比較、位、邏輯、條件和賦值運算符，用于變量賦值和表達式計算JavaScript運算符類型與Excel運算符類似，用于數(shù)值計算、變量比較和邏輯判斷，構(gòu)成JavaScript語句的基礎(chǔ)運算符功能（1）算術(shù)運算符包括加、減、乘、除、求模、自增、自減，如7*3返回21，7%4返回3，i++和++i改變變量值JavaScript算術(shù)運算符（3）比較運算符比較運算符主要包括==（等于）、！=（不等于）、<（小于）、<=（小于或等于）、>（大于）、>=（大于或等于）6種運算符。（3）位運算符位運算符是一種針對兩個二進制的位進行邏輯運算的運算符，主要包括&（位與）、|（位或）、^（位異或）、~（取反）、＜＜（左移）、＞＞（右移）6種運算符。（4）邏輯運算符JavaScript中常用的邏輯運算符包括&&（邏輯與）、||（邏輯或）、?。ㄟ壿嫹牵?種運算符（5）條件運算符JavaScript條件運算符用于根據(jù)條件賦值，如：條件？值1：值2。當條件為真時取值1，為假時取值2（6）賦值運算符賦值運算符用于將數(shù)值賦給變量，在使用該運算符時，需要保證運算符兩側(cè)的操作數(shù)的類型一致。（7）運算符的優(yōu)先級JavaScript中的各個運算符會構(gòu)成不同的表達式，而一個表達式中往往又會包含多種運算符。在使用多種運算符時，JavaScript就會根據(jù)運算符的優(yōu)先級決定計算的順序。8.1.2BOM對象和DOM對象JavaScript中的BOM（瀏覽器對象模型）和DOM（文檔對象模型）的結(jié)合使用，賦予了JavaScript實現(xiàn)豐富網(wǎng)頁交互功能的能力。通過BOM，用戶可以操作瀏覽器窗口，實現(xiàn)頁面的滾動、大小調(diào)整等交互功能。通過DOM，用戶可以動態(tài)地改變頁面的內(nèi)容和樣式，以實現(xiàn)更加靈活和交互性強的網(wǎng)頁體驗。1.BOM對象瀏覽器窗口交互，無標準，window對象是核心，既是JavaScriptAPI，也是Global對象BOM對象核心01控制瀏覽器窗口，如大小位置，對話框，收藏夾，不受網(wǎng)頁內(nèi)容限制，不同瀏覽器實現(xiàn)方式可能不同BOM對象功能02DOM對象關(guān)注網(wǎng)頁結(jié)構(gòu)，BOM對象關(guān)注瀏覽器交互，兩者都是JavaScript操作對象，但對象類型和作用范圍不同BOM對象與DOM對象區(qū)別03（1）對象屬性01BOM對象屬性詳細列舉了BOM對象的屬性，如window.closed返回窗口是否關(guān)閉，window.document引用Document對象，window.innerHeight返回文檔顯示區(qū)高度等，覆蓋了窗口狀態(tài)、尺寸、位置等信息02BOM對象與DOM對象關(guān)系說明了BOM（BrowserObjectModel）與DOM（DocumentObjectModel）的關(guān)系，BOM提供了與瀏覽器交互的接口，而DOM則用于操作HTML文檔結(jié)構(gòu)，window.document屬性即為BOM與DOM的橋梁（2）對象方法window對象中提供了多種方法，用于實現(xiàn)與瀏覽器窗口交互的功能，如關(guān)閉瀏覽器窗口的close()方法、打印當前窗口的內(nèi)容的print()方法等2.DOM對象它是W3C標準，用于操作HTML文檔結(jié)構(gòu)，包括文檔、元素及屬性，document對象是其核心DOM對象定義01DOM對象中的document對象既是BOM的一部分，也是DOM的一部分，它允許從腳本訪問HTML元素BOM與DOM關(guān)系02（1）對象屬性document對象的屬性主要包括返回當前文檔的域名的domain屬性、返回當前文檔的標題的title屬性、返回當前文檔的URL的URL屬性等7種常用屬性2）對象方法document對象的方法包括返回帶有指定名稱的對象集合的getElementsByName()方法、返回帶有指定標簽名的對象集合getElementsByTagName()方法、向文檔寫HTML表達式或JavaScript代碼的write()方法等7種常用方法3）對象集合document對象的對象集合主要用于對一些其他對象的引用，包括HTML元素、anchor對象、applet對象、form對象、image對象等6種常用對象8.1.3JavaScript函數(shù)JavaScript中的函數(shù)是具有某種特定功能的一系列的代碼集合，可以完成特定的任務并返回數(shù)據(jù)，但只有函數(shù)被調(diào)用時，函數(shù)體內(nèi)的代碼才會被執(zhí)行。1.關(guān)鍵字定義JavaScript函數(shù)定義使用function關(guān)鍵字,語法:function名稱(參數(shù)1,參數(shù)2,...){語句組}return表達式;函數(shù)名、參數(shù)為必選,return為可選JavaScript函數(shù)元素函數(shù)包含必選的函數(shù)名和參數(shù),以及可選的語句組和return表達式,return用于結(jié)束函數(shù)執(zhí)行并返回值2.變量定義JavaScript提供預定義的內(nèi)置函數(shù)，如eval()、isFinite()和isNaN()，便于編程和提升效率JavaScript中的函數(shù)對象對應的類型是Function，可以通過newFunction()來創(chuàng)建一個函數(shù)對象進行變量定義1.eval()函數(shù)eval()函數(shù)用于計算某個字符串，并執(zhí)行其中的JavaScript代碼，它的返回值是通過計算輸入的字符串得到的值。2．isFinite()函數(shù)檢查參數(shù)是否為有限數(shù)值，非數(shù)字或無窮返回false，數(shù)字返回trueisFinite函數(shù)作用isFinite(number)，number為必選參數(shù)，字符串數(shù)字自動轉(zhuǎn)化為數(shù)字型isFinite函數(shù)語法HTML代碼示例展示isFinite函數(shù)對不同類型參數(shù)的檢測結(jié)果isFinite函數(shù)示例3．isNaN()函數(shù)isNaN()函數(shù)用于判斷參數(shù)是否為非數(shù)字值，如果為非數(shù)字，返回true；否則返回false4.parselnt()函數(shù)將字符串轉(zhuǎn)換為整數(shù)，語法：parseInt(string,radix)，string為必填，radix可選，表示進制基數(shù)，省略或為0則以10為基數(shù)，以“0x”開頭則以16為基數(shù)，小于2或大于36返回NaNparseFloat()函數(shù)將字符串轉(zhuǎn)換為浮點數(shù)，忽略非數(shù)字字符，首字母空格會被忽略（5）parseFloat()函數(shù)Number()函數(shù)將對象值轉(zhuǎn)換為數(shù)字，若無法轉(zhuǎn)換則返回NaN（6）Number()函數(shù)unescape()函數(shù)用于解碼escape()編碼的字符串，如：unescape(escape(string))（9）unescape()函數(shù)String()函數(shù)用于將對象轉(zhuǎn)換為字符串，參數(shù)object為要轉(zhuǎn)換的對象（7）String()函數(shù)escape()函數(shù)用于對字符串進行編碼，確保字符串能在所有計算機上被正確讀?。?）escape()函數(shù)8.1.4事件事件是瀏覽者通過鼠標或鍵盤執(zhí)行的操作，對此事件做出的響應代碼稱為事件處理程序，而事件的發(fā)生使得響應的事件處理程序被執(zhí)行，稱為事件驅(qū)動1.事件的分類JavaScript中的事件可以分為鼠標事件、鍵盤事件、表單事件、窗口事件等2）鍵盤事件鍵盤事件（KeyboardEvents）是指在文本框中輸入文本時所發(fā)生的事件1）鼠標事件鼠標事件（MouseEvents）是用戶單擊或移動鼠標時所產(chǎn)生的事件，此時事件指定的事件處理程序或代碼將被調(diào)用執(zhí)行。4）窗口事件窗口事件（WindowEvents）是當瀏覽器窗口改變或文檔加載時觸發(fā)的事件3）表單事件表單事件（FormEvents）是在HTML表單元素（如<form>、<input>、<select>等）上發(fā)生特定動作時觸發(fā)的事件2.關(guān)聯(lián)事件與處理代碼1）HTML屬性綁定在HTML元素中直接使用事件屬性（如onclick、onmouseover、onchange等）來綁定相應的事件處理函數(shù)。2）DOM屬性綁定使用JavaScript在DOM元素上直接設(shè)置事件屬性，將事件處理函數(shù)賦給相應的事件屬性。3）addEventListener()方法使用addEventListener()方法來為DOM元素添加事件監(jiān)聽器，可以同時綁定多個事件處理函數(shù)，并且可以指定事件的冒泡或捕獲階段。3.調(diào)用事件在JavaScript中，可以運用函數(shù)和代碼來調(diào)用事件，也就是自定義響應事件，從而增加了網(wǎng)頁的交互性。運用函數(shù)調(diào)用事件是將一個函數(shù)作為事件的處理程序，在調(diào)用函數(shù)時需要先定義函數(shù)，再調(diào)用該函數(shù)。運用代碼調(diào)用事件是將代碼作為事件的處理程序，對于比較簡單的事件響應，則可以將響應代碼直接寫入事件，而不必寫入<script></script>標簽對。在處理事件時，除運用函數(shù)和代碼來調(diào)用事件以外，還可以將事件綁定到對象中。該綁定屬于動態(tài)綁定，需要結(jié)合DOM對象一起使用。在HTML中分配事件處理程序，只需要在HTML標簽中添加相應的事件，并在其中指定要執(zhí)行的代碼或函數(shù)名即可。8.1.5JavaScript對象JavaScript中的所有事物都是對象，如字符串、數(shù)值、日期、數(shù)組等，用戶還可以創(chuàng)建自定義對象。1.字符串對象在JavaScript中，既可以直接聲明字符串對象，也可以使用關(guān)鍵字new來創(chuàng)建字符串對象。2）使用關(guān)鍵字new除了直接聲明字符串對象，還可以使用關(guān)鍵字new來創(chuàng)建字符串對象。1）直接聲明直接聲明字符串對象類似于聲明函數(shù)，使用關(guān)鍵字var對其進行聲明。2．數(shù)值對象javaScript中內(nèi)置了大量的數(shù)值對象的屬性和方法，包括求平方根、求絕對值、取整等。3．日期對象在Web程序開發(fā)過程中，可以使用JavaScript的日期（Date）對象來對日期和時間進行操作。4．數(shù)組對象在JavaScript中，數(shù)組對象以Array對象進行表示，用于在單個的變量中存儲多個值任務規(guī)劃通過開發(fā)精選圖書模塊，不僅能提升開發(fā)者對HTML5和JavaScript技術(shù)的實際應用能力，還能為用戶提供一個直觀、便捷、內(nèi)容豐富的閱讀空間，有助于提升平臺的整體品質(zhì)和市場競爭力。任務實施（1）打開開發(fā)工具VSCode，在本地磁盤中新建項目文件夾，并命名為book。（2）在VSCode中打開項目文件夾book，在該項目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在文本框中輸入文件的名稱“l(fā)ist.html”，然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊list.html文件，進入代碼編輯窗口。在<title></title>標簽對中設(shè)置網(wǎng)頁的標題為“精選圖書模塊”，并引入外部樣式表。（4）在<body></body>標簽對中添加一組<section></section>標簽對，用來放置精選圖書，并設(shè)置好id，然后在<section></section>標簽對中插入標題“精選圖書·感悟智慧的力量”和一個無序列表<ul>。（5）在<body></body>標簽對中引入JS文件。（6）在項目文件夾book上右擊，在彈出的快捷菜單中選擇“新建文件夾”命令，在出現(xiàn)的文本框中輸入文件夾的名稱“css”，然后按Tab鍵或Enter鍵，在css文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“style.css”，然后按Tab鍵或Enter鍵。任務實施（7）單擊步驟（6）中新建的style.css文件，進入代碼編輯窗口，設(shè)置網(wǎng)頁各部分內(nèi)容的樣式。（8）在項目文件夾book上右擊，在彈出的快捷菜單中選擇“新建文件夾”命令，在出現(xiàn)的文本框中輸入文件夾的名稱“js”，然后按Tab鍵或Enter鍵，在js文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“scripts.js”，然后按Tab鍵或Enter鍵。（9）單擊scripts.js文件，進入代碼編輯窗口。首先創(chuàng)建一個圖書對象數(shù)組，對象包含書名、作者等相關(guān)信息。（10）在scripts.js文件中創(chuàng)建DOM元素，生成頁面內(nèi)容。（11）在scripts.js文件中綁定事件，在頁面加載后立即生成精選圖書列表。制作美麗鄉(xiāng)村信息網(wǎng)網(wǎng)頁任務8.2任務描述我國近年來大力推行鄉(xiāng)村振興戰(zhàn)略和生態(tài)文明建設(shè)。美麗鄉(xiāng)村建設(shè)已成為推進農(nóng)業(yè)現(xiàn)代化、農(nóng)村經(jīng)濟社會全面發(fā)展的重要組成部分。利用HTML5技術(shù)制作美麗鄉(xiāng)村信息網(wǎng)，旨在適應移動互聯(lián)網(wǎng)時代的信息傳播特點，通過數(shù)字化手段展示和推廣各地的美麗鄉(xiāng)村，吸引更多人關(guān)注鄉(xiāng)村發(fā)展，參與鄉(xiāng)村建設(shè)，帶動鄉(xiāng)村旅游和地方經(jīng)濟的發(fā)展。任務分析通過對本任務的學習，了解什么是jQuery，能夠下載和引入jQuery，掌握jQuery中的各種選擇器的用法，掌握DOM的制作步驟和方法，最后利用所學知識制作“美麗鄉(xiāng)村信息網(wǎng)”網(wǎng)頁。相關(guān)知識8.2.1jQuery簡介jQuery是一款出色的JavaScript框架，在Web開發(fā)中廣受歡迎。它以簡潔的語法、跨瀏覽器兼容性和強大的功能而著名。jQuery的主旨是“writeless，domore”，即通過減少編寫的代碼量來實現(xiàn)更多的功能。作為一個輕量級的JavaScript庫，它具有其他庫所不具備的優(yōu)勢。8.2.2jQuery下載與引入從官網(wǎng)下載頁面，選擇"Downloadthecompressed,productionjQuery3.7.1"，右鍵選擇"將鏈接另存為"，指定本地路徑保存為jquery-3.7.1.min.js訪問，點擊Download，找到指定jQuery版本，使用“另存為”保存到需要的文件夾jQuery庫下載途徑下載步驟說明下載jquery-3.7.1.min.js，放入新建項目中的"js"文件夾。HBuiderX中需創(chuàng)建"js"文件夾并移動文件jQuery庫本地配置在HTML中通過<script>標簽引入"js"文件夾下的jquery-3.7.1.min.js，確保路徑正確jQuery庫引用步驟引用jQuery庫使用相對路徑和絕對路徑引入jQuery文件將jQuery引入頁面，使用如下代碼：```<scriptsrc="js/jquery-3.7.1.min.js"type="text/javascript"></script>```若jQuery與HTML在同一目錄，直接寫文件名；否則，使用相對或絕對路徑引入HTML5script標簽屬性HTML5中script標簽默認類型是JavaScript，無需再寫type="text/javascript"8.2.3jQuery選擇器提供多種選擇器，如ID選擇器、類選擇器，方便快速定位DOM節(jié)點，簡化用戶操作，提升開發(fā)效率選擇器功能結(jié)合實際場景，如表單元素選擇、事件綁定節(jié)點選擇，提供便捷API，使用戶能更專注于業(yè)務邏輯實現(xiàn)選擇器應用支持組合選擇器和偽類選擇器，幫助用戶更高效地選取復雜結(jié)構(gòu)，同時減少瀏覽器的計算量，優(yōu)化性能選擇器優(yōu)化0102031.基本選擇器基本選擇器是jQuery中最常用也是最簡單的選擇器，它通過元素的id、class和標簽名等來查找DOM元素1）ID選擇器id選擇器用于根據(jù)給定的id匹配一個元素，返回單個元素。例如，“$("#test")”表示選取id為test的元素。類選擇器(".test")用于選取所有class為test的元素，效率低于id選擇器，但可選多個2）類選擇器全選擇器*，匹配所有元素，返回元素集合，$("*")選取所有的元素。5）全選擇器元素選擇器通過元素名匹配并返回相應元素集合，如$("p")選取所有<p>元素，$("div")選取所有div標簽3）元素（標簽）選擇器并集選擇器將多個選擇器匹配的元素合并成一個集合，如$("p,span,p.myClass")選取所有<p>、<span>和class為myClass的<p>元素4）并集選擇器2.層次選擇器層次選擇器通過DOM元素之間的層次關(guān)系來獲取元素，主要的層次關(guān)系包括父子關(guān)系、后代關(guān)系、相鄰兄弟關(guān)系、一般兄弟關(guān)系3.過濾選擇器過濾選擇器是根據(jù)某類過濾規(guī)則進行元素的匹配，其用法與CSS中的偽類選擇器相似。過濾選擇器用冒號（:）開頭。在jQuery中，過濾選擇器分為基本過濾選擇器、內(nèi)容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器。1）基本過濾選擇器基本過濾選擇器是過濾擇器中使用最廣泛的選擇器.2）內(nèi)容過濾選擇器基本篩選選擇器主要針對元素DOM節(jié)點進行操作，但如果我們希望通過內(nèi)容來進行過濾，jQuery也為我們提供了一組內(nèi)容篩選選擇器，這些選擇器的規(guī)則可以應用于所選元素的子元素或文本內(nèi)容上元素有顯示狀態(tài)與隱藏狀態(tài)，jQuery根據(jù)元素的狀態(tài)擴展了可見性過濾選擇器3）可見性過濾選擇器4）屬性過濾選擇器01屬性選擇器功能允許用戶根據(jù)元素屬性定位，不考慮屬性值，有具體示例02屬性選擇器類型包括[attribute]、[attribute=value]等7種，用于精確匹配元素屬性4）屬性過濾選擇器屬性過濾選擇器允許用戶根據(jù)元素的屬性來定位它們。用戶可以僅指定元素的某個屬性，這樣所有具有該屬性的元素都會被選中，而不考慮屬性值4.表單元素選擇器jQuery中專門加入了表單元素選擇器，從而能夠極其方便地獲取到某個類型的表單元素8.2.4jQuery的DOM制作在jQuery中，DOM操作是一個重要的功能領(lǐng)域，涵蓋了新建、添加、刪除、修改和查找等方面。1.新建DOM節(jié)點使用HTML字符串描述節(jié)點結(jié)構(gòu)，如：$("<div></div>")，可創(chuàng)建元素節(jié)點創(chuàng)建元素節(jié)點創(chuàng)建元素節(jié)點的方法同樣適用于創(chuàng)建屬性節(jié)點，例如：$("<divid='test'class='aaron'>Ex</div>")創(chuàng)建屬性節(jié)點創(chuàng)建文本節(jié)點可參照創(chuàng)建元素節(jié)點的方式，如：`<div>我是文本節(jié)點</div>`創(chuàng)建文本節(jié)點0102032.添加DOM節(jié)點將新建的節(jié)點插入文檔的方法有多個，如append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。append()`append()`方法用于向指定元素內(nèi)部添加新的內(nèi)容.appendTo()prependTo()`prependTo()方法用于將元素添加到指定的元素的內(nèi)部開頭位置appendTo()方法用于將所有匹配的元素追加到指定的元素中，該方法是append0方法的顛倒操作prepend()prepend()方法用于將指定的元素添加到匹配的元素內(nèi)部作為它的第一個子元素after()方法用于向匹配的元素后面添加元素，新添加的元素作為目標元素后的緊鄰的兄弟元素。after()05insertAfter()方法用于將新建的元素插入査找到的目標元素的后面，作為目標元素的兄弟節(jié)點。insertAfter()06before()方法在每個匹配的元素之前插入新建的元素，作為匹配元素的前一個兄弟節(jié)點。before()07insertBefore()insertBefore()方法用于將新建元素添加到目標元素的前面，作為目標元素的前一個兄弟節(jié)點。3.刪除DOM節(jié)點remove()方法用于刪除所有匹配的元素，傳入的參數(shù)用于篩選元素，該方法能刪除元素中的所有子節(jié)點，當匹配的節(jié)點及子節(jié)點被刪除后，該方法的返回值是指向被刪除節(jié)點的引用，從而允許再次使用這些被刪除的元素。remove()empty()方法嚴格來講并不是刪除元素，該方法只是清空節(jié)點，它能清空元素中的所有子節(jié)點。empty()如果想要刪除文檔中的某個元素節(jié)點，jQuery提供了兩種刪除節(jié)點的方法：remove()和empty()。4.修改節(jié)點修改文檔中的元素節(jié)點可以使用多種方法：復制節(jié)點、替換節(jié)點、包裹節(jié)點01復制節(jié)點復制節(jié)點方法能夠復制元素節(jié)點，并且能夠根據(jù)參數(shù)決定是否復制元素節(jié)點的行為。02替換節(jié)點替換節(jié)點方法能夠替換某個節(jié)點，有兩種實現(xiàn)方法：replaceWith()和replaceAll()。replaceWith()方法用于使用后面的元素替換前面的元素replaceAll()方法用于使用前面的元素替換后面的元素wrap()將元素用其他元素包裏起來，也就是給它增加一個父元素wrapAll()將集合中的元素用其他元素包裹起來，也就是給它們增加一個父元素。wrapAll()將集合中的元素內(nèi)部所有的子元素用其他元素包裏起來，并當作指定元素的子元素。3）包裹節(jié)點包裏節(jié)點方法使用其他標簽包起目標元素，從而改變元素的顯示形式等，并且該操作不會破壞原始文檔的詞義。包裹節(jié)點有三種實現(xiàn)形式：wrap()、wrapAll()、wraplnner()。5.查找DOM節(jié)點children()方法用于快速查找指定元素集合中匹配元素的直接子元素。1）children()查找節(jié)點的方法有多種，如children()、find()、parent()、parents()、next()、prev()、siblings()。find()方法find()方法用于快速查找DOM樹中的匹配元素的后代元素children()方法children()方法是父子關(guān)系査找，find()方法是后代關(guān)系（包含父子關(guān)系）查找。2）find()3）parent()6）prev()5）next()4）parents()快速查找合集里面的這些元素的父級元素。快速查找合集里面的每一個元素的所有祖輩元素?？焖俨檎抑付ㄔ丶现忻恳粋€元素緊鄰的后面同輩元素的元素集合.快速查找指定元素集合中每一個元素緊鄰的前面同輩元素的元素集合。（7）siblin

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論