PAGE10PAGE大數(shù)據(jù)可視化分析課程教案首頁(yè)7-2一、核心要素章節(jié)名稱項(xiàng)目4智慧農(nóng)業(yè)大屏數(shù)據(jù)傳輸任務(wù)4.2jQuery4.2.1jQuery基礎(chǔ)語(yǔ)法4.2.2jQuery選擇器教學(xué)課時(shí)2授課班級(jí)大數(shù)據(jù)2401班授課時(shí)間第7周-2授課地點(diǎn)介夫樓307教學(xué)目標(biāo)知識(shí)目標(biāo)1了解jQuery的相關(guān)概念和知識(shí)。2.掌握jQuery的基礎(chǔ)語(yǔ)法。3.了解使用jQuery操作DOM的方法。4.了解使用jQuery選擇器。5.了解使用jQuery加載JSON數(shù)據(jù)的方法。能力目標(biāo)1.能正確使用jQuery基礎(chǔ)語(yǔ)法。2.能使用jQuery將數(shù)據(jù)顯示在頁(yè)面的指定位置。3.能使用jQuery加載本地JSON文件，解析并提取相關(guān)數(shù)據(jù)。4.能使用瀏覽器的調(diào)試工具查看指定位置代碼。素質(zhì)目標(biāo)1.在完成任務(wù)后，協(xié)助其他小組成員完成相關(guān)任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作能力。2.通過(guò)對(duì)任務(wù)功能的理解，完成相關(guān)功能開發(fā)，培養(yǎng)理解能力。3.通過(guò)描述功能的研發(fā)過(guò)程，在小組內(nèi)相互演練、講解，培養(yǎng)表達(dá)能力。4.通過(guò)功能實(shí)現(xiàn)，了解與掌握相關(guān)知識(shí)并對(duì)其應(yīng)用，培養(yǎng)學(xué)習(xí)能力。教學(xué)內(nèi)容主要內(nèi)容4.2.1jQuery基礎(chǔ)語(yǔ)法4.2.2jQuery選擇器重點(diǎn)jQuery基礎(chǔ)語(yǔ)法難點(diǎn)jQuery選擇器教法改革教學(xué)方法問答法/范例教學(xué)法教學(xué)手段（1）通過(guò)課堂討論提出問題和相關(guān)視頻學(xué)習(xí)，活躍課堂氣氛并激發(fā)學(xué)生的學(xué)習(xí)興趣；（2）教材、電子課件、超星信息化教學(xué)。教學(xué)反思?學(xué)生常見的問題有：將$(document).ready()簡(jiǎn)寫為$()時(shí)出現(xiàn)語(yǔ)法錯(cuò)誤；鏈?zhǔn)骄幊虝r(shí)忽略jQuery對(duì)象緩存，出現(xiàn)重復(fù)選擇；原生DOM對(duì)象與jQuery對(duì)象轉(zhuǎn)換混亂（get(0)vs$()）等。改進(jìn)方法：增加選擇器對(duì)照表（原生JSvsjQueryvsCSS）；使用Chrome開發(fā)者工具實(shí)時(shí)調(diào)試jQuery選擇器。

二、教學(xué)設(shè)計(jì)教學(xué)步驟教學(xué)內(nèi)容與情境設(shè)計(jì)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配一、課程導(dǎo)入jQuery是一個(gè)JavaScript庫(kù)。jQuery極大地簡(jiǎn)化了JavaScript編程。jQuery很容易學(xué)習(xí)。jQuery庫(kù)可以通過(guò)一行簡(jiǎn)單的標(biāo)記被添加到網(wǎng)頁(yè)中。下載jQuery有兩個(gè)版本的jQuery可供下載：Productionversion-用于實(shí)際的網(wǎng)站中，已被精簡(jiǎn)和壓縮。Developmentversion-用于測(cè)試和開發(fā)（未壓縮，是可讀的代碼）這兩個(gè)版本都可以從jQ下載。如果不希望下載并存放jQuery，那么也可以通過(guò)CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）引用它。谷歌和微軟的服務(wù)器都存有jQuery。教師演示，引導(dǎo)思考與實(shí)踐認(rèn)識(shí)jQuery，做好jQuery庫(kù)的準(zhǔn)備5分鐘二、jQuery基礎(chǔ)語(yǔ)法jQuery是一個(gè)JavaScript庫(kù)，極大地簡(jiǎn)化了編程工作。通過(guò)<scriptsrc="jquery.js"></script>引入jQuery庫(kù)。jQuery語(yǔ)法是為HTML元素的選取編制的，可以對(duì)元素執(zhí)行某些操作。通過(guò)jQuery，可以選取（查詢，query）HTML元素，并對(duì)它們執(zhí)行“操作”（actions）。jQuery語(yǔ)法實(shí)例$(this).hide()演示jQueryhide()函數(shù)，隱藏當(dāng)前的HTML元素。$("#test").hide()演示jQueryhide()函數(shù)，隱藏id="test"的元素。$("p").hide()演示jQueryhide()函數(shù)，隱藏所有<p>元素。$(".test").hide()演示jQueryhide()函數(shù)，隱藏所有class="test"的元素。jQuery語(yǔ)法jQuery語(yǔ)法是為HTML元素的選取編制的，可以對(duì)元素執(zhí)行某些操作。基礎(chǔ)語(yǔ)法是：$(selector).action()美元符號(hào)定義jQuery選擇符（selector）“查詢”和“查找”HTML元素jQuery的action()執(zhí)行對(duì)元素的操作示例$(this).hide()-隱藏當(dāng)前元素$("p").hide()-隱藏所有段落$(".test").hide()-隱藏所有class="test"的所有元素$("#test").hide()-隱藏所有id="test"的元素提示：jQuery使用的語(yǔ)法是XPath與CSS選擇器語(yǔ)法的組合。文檔就緒函數(shù)：這是為了防止文檔在完全加載（就緒）之前運(yùn)行jQuery代碼。如果在文檔沒有完全加載之前就運(yùn)行函數(shù)，操作可能失敗。下面是兩個(gè)具體的例子：試圖隱藏一個(gè)不存在的元素獲得未完全加載的圖像的大小同學(xué)們觀看幻燈片，進(jìn)行思考，提出問題，教師進(jìn)行答疑和解決。————————————————思政點(diǎn)：通過(guò)功能實(shí)現(xiàn)，了解與掌握相關(guān)知識(shí)并對(duì)其應(yīng)用，培養(yǎng)學(xué)習(xí)能力。教師講解演示與答疑學(xué)生觀看演示并同步操作15分鐘三、jQuery選擇器jQuery選擇器和屬性選擇器允許通過(guò)標(biāo)簽名、屬性名或內(nèi)容對(duì)HTML元素進(jìn)行選擇，選擇器可以對(duì)HTML元素組或單個(gè)元素進(jìn)行操作，具體如表所示。在文件中添加兩個(gè)div和一個(gè)按鈕，并通過(guò)單擊按鈕來(lái)獲取這兩個(gè)div元素，并修改它們的內(nèi)容。jQuery選擇器的示例代碼如下。(1)創(chuàng)建一個(gè)名為index.html的文件,并在該文件的head中使用下面的語(yǔ)句引入jQuery庫(kù)。<scripttype="text/javascript"src="./js/jquery-3.3.1.min.js"></script>(2)在body中添加兩個(gè)div和一個(gè)按鈕。<div><imgsrc="images/strawberry.jpg"/>這里種植了一棵草莓</div><div><imgsrc="images/fish.jpg"/>這里養(yǎng)了一條魚</div><inputtype="button"id="button"value="若干年后"/>(3)在引入jQuery庫(kù)的代碼下方編寫jQuery代碼，實(shí)現(xiàn)通過(guò)單擊按鈕來(lái)獲取全部div元素，并修改它們的內(nèi)容。<scripttype="text/javascript">$(document).ready(function(){//為按鈕綁定單擊事件$("#button").click(function(){$("div").eq(0).html("<imgsrc="images/strawbemyLjpg/>這里長(zhǎng)出了一片草莓");//獲取第一個(gè)div元素$("div").get(1).innerHTML="<imgsrc="images/fishl.jpg/>這里的魚沒有了"http://獲取第二個(gè)div元素});});</script>在上面的示例中，使用元素選擇器獲取了一組div元素的jQuery包裝集，它是一組Object對(duì)象，存儲(chǔ)方式為[ObjectObject]，但是這種方式并不能只顯示其中一個(gè)元素的文本信息，需要通過(guò)索引器來(lái)確定要選取哪個(gè)div元素，在這里分別使用了兩個(gè)不同的索引器eq()和get()。索引器類似于房間的門牌號(hào)，是從0開始計(jì)數(shù)的。示例中使用了兩種方式設(shè)置元素的文本內(nèi)容,html()方法是jQuery的庫(kù),innerHTML()方法屬于DOM對(duì)象。這里使用了$(document).ready()方法,當(dāng)頁(yè)面元素載入就緒時(shí),會(huì)自動(dòng)執(zhí)行程序，自動(dòng)為按鈕綁定單擊事件。由于eqO方法返回的是一個(gè)jQuery包裝集，所以它只能調(diào)用jQuery庫(kù)中的方法，而get()方法返回的是一個(gè)DOM對(duì)象，所以它只能使用DOM對(duì)象的方法。eqO方法與get()方法默認(rèn)都是從0開始計(jì)數(shù)的。$("#test").get(0)等效于$("#test")[0]。同學(xué)們查看運(yùn)行結(jié)果，提出問題，教師進(jìn)行答疑和解決。——————————————————————————————————思政內(nèi)容：通過(guò)對(duì)任務(wù)功能的理解，完成相關(guān)功能開發(fā)，培養(yǎng)理解能力。教師講解演示與答疑學(xué)生觀看演示并同步操作15分鐘四、課堂練習(xí)任務(wù)1：基礎(chǔ)選擇器應(yīng)用html<!--基礎(chǔ)HTML結(jié)構(gòu)--><divid="dashboard"><h2>學(xué)生信息表</h2><ulclass="info-list"><li>張三-計(jì)算機(jī)科學(xué)</li><li>李四-數(shù)據(jù)科學(xué)</li><liid="special">王五-人工智能</li></ul><divclass="operations"><buttonclass="btn">高亮特殊項(xiàng)</button></div></div>要求：使用ID選擇器將#special元素的文字顏色改為紅色使用類選擇器為所有.btn按鈕添加藍(lán)色邊框使用元素選擇器將h2標(biāo)題改為綠色任務(wù)2：層次選擇器與事件處理html<!--新增結(jié)構(gòu)--><tableclass="score-table"><tr><th>姓名</th><th>成績(jī)</th></tr><tr><td>張三</td><td><span>92</span></td></tr><tr><td>李四</td><td><span>88</span></td></tr></table><divclass="operations"><buttonclass="highlight-btn">高亮及格分?jǐn)?shù)</button></div>要求：使用后代選擇器將分?jǐn)?shù)>90的背景設(shè)為金色使用子元素選擇器為表頭添加灰色背景點(diǎn)擊按鈕時(shí)，為所有≥60的分?jǐn)?shù)添加綠色背景任務(wù)3：過(guò)濾選擇器應(yīng)用html<!--新增結(jié)構(gòu)--><ulclass="course-list"><li>大數(shù)據(jù)基礎(chǔ)</li><li>數(shù)據(jù)可視化</li><li>機(jī)器學(xué)習(xí)</li><li>數(shù)據(jù)庫(kù)原理</li></ul>要求：使用:first選擇器為第一個(gè)課程添加粗體使用:odd選擇器為奇數(shù)項(xiàng)添加淺藍(lán)背景使用:contains選擇器為包含"數(shù)據(jù)"的課程添加下劃線任務(wù)4：屬性選擇器與表單操作html<!--新增結(jié)構(gòu)--><divclass="search-box"><inputtype="text"placeholder="輸入學(xué)號(hào)"id="searchInput"><buttondata-action="search">搜索</button><buttondata-action="reset">重置</button></div>要求：使用屬性選擇器為所有data-action元素添加懸停效果點(diǎn)擊搜索按鈕時(shí)獲取輸入框的值并alert顯示點(diǎn)擊重置按鈕時(shí)清空輸入框內(nèi)容任務(wù)5：綜合應(yīng)用html<!--新增結(jié)構(gòu)--><divclass="dynamic-content"><p>當(dāng)前選擇：<spanid="selection"></span></p><divclass="controls"><buttonclass="toggle">切換顯示</button></div></div>要求：當(dāng)鼠標(biāo)滑過(guò)表格行時(shí)，在#selection中顯示學(xué)生姓名點(diǎn)擊切換按鈕時(shí)漸隱/漸顯整個(gè)信息面板使用鏈?zhǔn)秸Z(yǔ)法同時(shí)修改標(biāo)題顏色和字體大小參考代碼（完整版）html<!DOCTYPEhtml><html><head><scriptsrc="/jquery-3.6.0.min.js"></script><style>.highlight{background-color:gold;}.pass{background-color:#90EE90;}.active{border:2pxsolidblue;}</style></head><body><!--完整結(jié)構(gòu)--><divid="dashboard"><!--原有結(jié)構(gòu)+新增結(jié)構(gòu)--></div><script>$(function(){//任務(wù)1$('#special').css('color','red');$('.btn').addClass('active');$('h2').css({color:'green','font-size':'24px'});//任務(wù)2$('.score-tabletr:has(span:contains("92"))').addClass('highlight');$('.score-table>thead>tr').css('background','#eee');$('.highlight-btn').click(function(){$('.score-tablespan').filter(function(){returnparseInt($(this).text())>=60;}).parent().addClass('pass');});//任務(wù)3$('.course-listli:first').css('font-weight','bold');$('.course-listli:odd').css('background','#f0f8ff');$('li:contains("數(shù)據(jù)")').css('text-decoration','underline');//任務(wù)4$('[data-action]').hover(function(){$(this).css('opacity',0.7);},function(){$(this).css('opacity',1);});$('[data-action="search"]').click(function(){alert('搜索值：'+$('#searchInput').val());});$('[data-action="reset"]').click(function(){$('#searchInput').val('');});//任務(wù)5$('.score-tabletr').hover(function(){$('#selection').text($(this).find('td:first').text());},function(){$('#selection').text('');});$('.toggle').click(function(){$('#dashboard').fadeToggle(500);});});</script></body></html>——————————————————————————————————思政內(nèi)容：在完成任務(wù)后，協(xié)助其他小組成員完成相關(guān)任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作能力。教師講解演示與答疑學(xué)生觀看演示并同步操作35分鐘五、課堂小結(jié)?課程總結(jié)與答疑。總結(jié)知識(shí)點(diǎn)問答、討論10分鐘

大數(shù)據(jù)可視化分析課程教案首頁(yè)7-2一、核心要素章節(jié)名稱項(xiàng)目4智慧農(nóng)業(yè)大屏數(shù)據(jù)傳輸4.2.3使用jQuery操作DOM4.2.4Ajax在jQuery中的應(yīng)用教學(xué)課時(shí)2授課班級(jí)大數(shù)據(jù)2401班授課時(shí)間第7周-2授課地點(diǎn)介夫樓307教學(xué)目標(biāo)知識(shí)目標(biāo)1.掌握jQuery與DOM的相關(guān)知識(shí)。2.掌握使用jQuery操作DOM的方法。3.了解使用jQuery操作DOM的方法。4.了解Ajax在jQuery中的應(yīng)用。能力目標(biāo)能熟練使用jQuery并使用jQuery操作DOM。能夠掌握操作DOM的方法。能夠使用HTTPGet和HTTPPost從遠(yuǎn)程服務(wù)器上請(qǐng)求文本、HTML、XML或JSON。能夠?qū)⑼獠繑?shù)據(jù)直接載入網(wǎng)頁(yè)的被選元素。素質(zhì)目標(biāo)培養(yǎng)代碼規(guī)范工匠精神?：jQuery選擇器標(biāo)準(zhǔn)化命名，通過(guò)代碼審查強(qiáng)調(diào)可維護(hù)性。培養(yǎng)科技助農(nóng)責(zé)任擔(dān)當(dāng)：通過(guò)設(shè)置數(shù)據(jù)更新超時(shí)熔斷機(jī)制，引導(dǎo)學(xué)生思考農(nóng)業(yè)物聯(lián)網(wǎng)系統(tǒng)的可靠性責(zé)任。培養(yǎng)數(shù)據(jù)安全守護(hù)者?：通過(guò)對(duì)比明文傳輸與加密傳輸?shù)牟町悾龑?dǎo)學(xué)生理解農(nóng)業(yè)數(shù)據(jù)安全對(duì)國(guó)家糧食安全的戰(zhàn)略意義。教學(xué)內(nèi)容主要內(nèi)容使用jQuery操作DOM；Ajax在jQuery中的應(yīng)用。重點(diǎn)使用jQuery操作DOM。難點(diǎn)Ajax在jQuery中的應(yīng)用。教法改革教學(xué)方法問答法/范例教學(xué)法教學(xué)手段（1）通過(guò)課堂討論提出問題和相關(guān)視頻學(xué)習(xí)，活躍課堂氣氛并激發(fā)學(xué)生的學(xué)習(xí)興趣；（2）教材、電子課件、超星信息化教學(xué)。教學(xué)反思?學(xué)生能識(shí)別內(nèi)存泄漏風(fēng)險(xiǎn)，學(xué)生線性操作思維固化，缺乏DOM樹性能優(yōu)化意識(shí)。

二、教學(xué)設(shè)計(jì)教學(xué)步驟教學(xué)內(nèi)容與情境設(shè)計(jì)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配一、課程導(dǎo)入回顧上次課的內(nèi)容：1、什么是JavaScript？JavaScript是Netscape公司的布蘭登·艾奇(BrendanEich)為1995年發(fā)布的NetscapeNavigator2開發(fā)的一種名為L(zhǎng)iveScript的腳本語(yǔ)言。在NetscapeNavigator2瀏覽器發(fā)布前夕,將LiveScript改為了JavaScript。JavaScript誕生時(shí),其主要目的是處理一些由服務(wù)器負(fù)責(zé)的輸入驗(yàn)證操作(前端驗(yàn)證)，增強(qiáng)網(wǎng)頁(yè)的交互型。2、JavaScript引入方式？?jī)?nèi)部JavaScript、內(nèi)聯(lián)JavaScript、外鏈?zhǔn)絁avaScript。教師提問、引導(dǎo)討論，給出答案回答問題，進(jìn)行思考10分鐘二、使用jQuery操作DOM：查找獲取、插入1.查找獲取text()：設(shè)置或返回所選元素的文本內(nèi)容。html()：設(shè)置或返回所選元素的內(nèi)容(包括HTML標(biāo)簽)。val()：設(shè)置或返回表單字段的值。2.插入1)內(nèi)部插入append()：向每個(gè)匹配的元素內(nèi)部追加內(nèi)容。appendTo()：將所有匹配的元素追加到另一個(gè)指定的元素集合中。prepend()：向每個(gè)匹配的元素內(nèi)部前置內(nèi)容。prependTo()將所有匹配的元素前置到另一個(gè)指定的元素集合中。2)外部插入after()：在每個(gè)匹配的元素之后插入內(nèi)容。insertAfter()：將所有匹配的元素插入另一個(gè)指定的元素集合的最后面，或?yàn)槟繕?biāo)元素的下一個(gè)兄弟節(jié)點(diǎn)。before()：在每個(gè)匹配的元素之前插入內(nèi)容。insertBefore()：將所有匹配的元素插入另一個(gè)指定的元素集合的最前面。3.jQuery過(guò)濾·eqO：返回被選元素集合中帶有指定索引號(hào)的元素。first()：返回被選元素集合的首個(gè)元素。last()：返回被選元素集合的最后一個(gè)元素。hasClass()：檢查當(dāng)前元素集合中是否有至少一個(gè)元素包含指定的類名。如果有，則返回true;如果沒有,則返回false。filter()：篩選與指定表達(dá)式匹配的元素集合。not()：從當(dāng)前的元素集合中排除與指定表達(dá)式匹配的元素。同學(xué)們觀看幻燈片，進(jìn)行思考，提出問題，教師進(jìn)行答疑和解決。思政點(diǎn)：培養(yǎng)代碼規(guī)范工匠精神：jQuery選擇器標(biāo)準(zhǔn)化命名，通過(guò)代碼審查強(qiáng)調(diào)可維護(hù)性。對(duì)比規(guī)范代碼與隨意命名代碼的長(zhǎng)期維護(hù)成本。教師講解演示與答疑學(xué)生觀看演示并同步操作20分鐘三、Ajax在jQuery中的應(yīng)用Ajax是與服務(wù)器交換數(shù)據(jù)的技術(shù)，它在不重載全部頁(yè)面的情況下，實(shí)現(xiàn)了對(duì)部分頁(yè)面的更新。通過(guò)jQuery庫(kù)中的方法，能夠使用HTTPGet和HTTPPost從遠(yuǎn)程服務(wù)器上請(qǐng)求文本、HTML、XML或JSON，同時(shí)能夠?qū)⑦@些外部數(shù)據(jù)直接載入網(wǎng)頁(yè)的被選元素。jQuery的Ajax工具包封裝了3個(gè)層次,具體如下。·最底層是Ajax，封裝了基礎(chǔ)Ajax的部分操作，ajaxO方法是最底層的方法。·第2層是load()方法、get()方法和post()方法。·第3層是getScript()方法和etJSON()方法。1.load()方法load()方法是簡(jiǎn)單而強(qiáng)大的Ajax方法。load()方法從服務(wù)器中加載數(shù)據(jù)，并將返回的數(shù)據(jù)放入被選元素。語(yǔ)法格式如下。$(selector).load(URL[,data][,callback]);URL:規(guī)定希望加載的URL。data：規(guī)定與請(qǐng)求一同發(fā)送的查詢字符串鍵/值對(duì)集合。callback:load()方法執(zhí)行結(jié)束后所執(zhí)行的方法名。2.使用get()方法請(qǐng)求數(shù)據(jù)使用get()方法請(qǐng)求數(shù)據(jù)的語(yǔ)法格式如下。$.get(URL[,callback]);URL:規(guī)定希望請(qǐng)求的URL。·callback：請(qǐng)求成功后所執(zhí)行的方法名。3.使用post()方法請(qǐng)求數(shù)據(jù)使用post()方法請(qǐng)求數(shù)據(jù)的語(yǔ)法格式如下。$.post(URL[,data][,callback]);URL:規(guī)定希望請(qǐng)求的URL。data：規(guī)定連同請(qǐng)求發(fā)送的數(shù)據(jù)。·callback：請(qǐng)求成功后所執(zhí)行的方法名。同學(xué)們查看運(yùn)行結(jié)果，提出問題，教師進(jìn)行答疑和解決。——————————————————————————————————思政內(nèi)容：培養(yǎng)數(shù)據(jù)安全守護(hù)者：Ajax數(shù)據(jù)傳輸加密實(shí)現(xiàn)：在實(shí)現(xiàn)Ajax數(shù)據(jù)傳輸時(shí)，要求學(xué)生采用HTTPS協(xié)議并設(shè)置Content-Security-Policy頭部防護(hù)。通過(guò)對(duì)比明文傳輸與加密傳輸?shù)牟町悾龑?dǎo)學(xué)生理解農(nóng)業(yè)數(shù)據(jù)安全對(duì)國(guó)家糧食安全的戰(zhàn)略意義。教師講解演示與答疑學(xué)生觀看演示并同步操作20分鐘四、使用getJSON()方法加載JSON文件使用getJSON()方法加載JSON文件jQuery的getJSON()方法用于通過(guò)HTTPGET請(qǐng)求從服務(wù)器中獲取JSON編碼的數(shù)據(jù)。語(yǔ)法格式如下。$(selector).getJSON(url[.data][,success(data,status,xhr)])·URL：必需參數(shù)，用于以請(qǐng)求發(fā)送的字符串的形式指定URL。·data：可選參數(shù)，用于指定將發(fā)送到服務(wù)器的數(shù)據(jù)。·success(data,status,xhr):可選參數(shù),在請(qǐng)求成功時(shí)運(yùn)行。(參數(shù)status為請(qǐng)求的狀態(tài):參數(shù)xhr為XMLHttpRequest對(duì)象)方法的返回值用于返回XMLHttpRequest對(duì)象。使用getJSON()方法加載JSON文件的示例代碼如下。(1)創(chuàng)建text.json文件,內(nèi)含如下數(shù)據(jù)。{"na