1、程序員 web/php 學院PHP 高手-jQuery(2)作業 1：漂浮的第一步：html 代碼條第二步：css 樣式代碼第三步：jquery 代碼第 1 頁程序員 web/php 學院第四步：運行結果作業 2：樹形菜單第一步：html 代碼第 2 頁程序員 web/php 學院第二步：css 樣式第三步：jquery 代碼第 3 頁程序員 web/php 學院第四步：運行結果一jQeuryDom 操作回顧 js 的 domcreateElementappendChildreplacechildremovechild1.1 Dom 內部追加append()：父元素追加子元素，放到后面第 4

2、頁程序員 web/php 學院prepend()：父元素追加子元素，放在前面appendTo()：子元素追加到父元素后面prependTo()：子元素追加到父元素前面具體實例應用如下:第 5 頁程序員 web/php 學院總結說明：（選擇器）.append(內容)：先后添加（選擇器）.prepend(內容)：先前添加（內容）.appendTo(選擇器)：先后添加（內容）.prependTo(選擇器)：先前添加通過表單輸入向 ul 中添加內容的實例：1.2 Dom 外部追加after()：在指定的元素后面追加內容before()：在指定的元素前面追加內容第 6 頁程序員 web/php 學院in

3、sertAfter()：將添加的內容追加到指定的元素后面insertBefore()：將添加的內容追加到指定的元素前面具體實例應用如下:第 7 頁程序員 web/php 學院1.3 Dom 包裹節點wrap(html 元素)：使用 html語法：$(內容).wrap(選擇器); wrapAll(html 元素)：使用 html單獨包裹匹配的元素將匹配的元素整體包裹unwrap():取消包裹，這個具體實例應用 1：將移出元素的父元素第 8 頁程序員 web/php 學院具體 wrapAll 實例應用 2：unwrap:取消包裹第 9 頁程序員 web/php 學院1.4 Dom 替換節點repl

4、aceWith():把被選元素替換為新的內容。replaceAll():把被選元素替換為新的 HTML 元素。具體實例應用：第10程序員 web/php 學院總結說明：（選擇器）.repalceWith(內容)（內容）.repalceAll(選擇器)1.6 Dom 刪除節點remove():直接刪除節點,detach():直接刪除節點，也沒有了。內容都刪除保留,內容都刪除。empty():僅僅清空內容。清空看具體實例：的內容，保留11第程序員 web/php 學院清空節點：empty()remove 和 detach第12程序員 web/php 學院1.7 克隆節點clone()：克隆節點語法

5、：$(selector).clone(true|false)處理程序。處理程序。：true:規定需false:默認。規定不實例 1，沒有第13程序員 web/php 學院實例 2：節點第14程序員 web/php 學院二jQeury Dom 遍歷（重點）祖先是父、祖父、曾祖父等等。后代是子、孫、曾孫等等。同胞擁有相同的父。2.1 jQuery 遍歷 - 祖先（1） parent()：返回被選元素的直接父元素。（2） parents()：返回被選元素的所有祖先元素，直到根元素html。（3）parentsUntil()：返回兩個被選元素。parent 父類的具體實例：間的所有祖先元第15程序員

6、web/php 學院第16程序員 web/php 學院第17程序員 web/php 學院parents()具體實例：第18程序員 web/php 學院parentsUntil()的具體實例：第19程序員 web/php 學院2.2 jQuery 遍歷- 后代children()：返回被選元素的所有直接子元素。find()：返回被選元素的后代元素，一路向下直到最后一個后代。第20children 的具體實例程序員 web/php 學院第21程序員 web/php 學院find()的具體實例：第22程序員 web/php 學院2.3 jQuery 遍歷- 同胞(siblings)同胞（同一級元素）

7、擁有相同的父元素。（1）siblings()：返回被選元素的所有同胞元素。實例 1：給所有的同胞元素應用樣式第23程序員 web/php 學院實例 2：給某一個同胞元素應用樣式第24程序員 web/php 學院（2）next()：返回被選元素的下一個同胞元素。這個函數只返回后面那個緊鄰的同輩元素，而不是后面所有的同輩元素（可以使用nextAll）。實例 1：第25程序員 web/php 學院第26程序員 web/php 學院（3）nextAll()：返回被選元素的所有跟隨的同胞元素。第27程序員 web/php 學院（4）nextUntil()：返回介于的兩個參數之間的所有跟隨的同胞元素。第2

8、8程序員 web/php 學院第29程序員 web/php 學院（5）prev()：返回被選元素的上一個同胞元素，同胞元素就是其他的元素。不一定是同一個。（6） prevAll()：返回被選元素的所有前面的同胞元素。（7） prevUntil()：返回介于的兩個參數之間的所有前面的同胞元素。第30程序員 web/php 學院2.4 jQuery 遍歷-過濾eq(index)：返回被選元素中帶有指定索引號的元素。first()：返回被選元素的首個元素。last()：返回被選元素的最后一個元素第31程序員 web/php 學院hasClass(class) 檢查當前的元素是否含有某個特定的類，如果

9、有，則返回 true。filter(expr) ：篩選出與指定選擇器匹配的元素集合第32程序員 web/php 學院not(expr):篩選出與指定選擇器不匹配的元素集合第33程序員 web/php 學院is(expr) ：用一個選擇器來檢查當前選擇的元素集合,返回值是 true 和 false.第34程序員 web/php 學院返回擁有匹配指定選擇器的一個或多個元素has(expr) has()在其內的所有元素。保留包含特定后代的元素，去掉那些不含有指定后代的元素。第35程序員 web/php 學院三個最基本的過濾是：first(), last() 和 eq()，它們您基于其在一組元素中的位

10、置來選擇一個特定的元素。eq(index):index 索引從 0 開始。其他過濾，比如 filter() 和 not()您選取匹配或不匹配某項指定標準的元素。2.5 jQuery 遍歷-其他addBack()：添加堆棧中元素集合到當前集合。第36程序員 web/php 學院實例 1：沒有添加 addBack()實例 2：添加 addBack()end()：將匹配的元素列表變為前一次的狀態。具體實例如下：第37程序員 web/php 學院淘寶的一個具體實例：第一步：html 代碼第二步：css 代碼第38程序員 web/php 學院第三步：jquery 代碼第39程序員 web/php 學院第

11、四步：運行結果三jQuery（重點）問：什么是？答：是在文檔中或者在瀏覽器窗口中通過某些動作觸發。比如，單擊，鼠標經過，鍵盤按下等。通常和函數結合使用。Javascript 中的簡化了 javascript在jquery 都是可以使用的，只是有一點區別，jQuery時，沒有on 關鍵字。的操作，綁定第40程序員 web/php 學院我們先看一個默認觸發一個單擊的案例3.1jQuery 常用第41程序員 web/php 學院（1）click語法格式：click(數據，回調函數);實例 1：實例 2：單擊函數中再調用函數第42程序員 web/php 學院（2）mouseover 和 mouseen

12、ter 的應用mouseover：發 。mouseenter：在鼠標移動到選取的元素及其子元素上時觸只在鼠標移動到選取的元素上時觸發。第43程序員 web/php 學院focus:當元素獲得焦點時（當通過鼠標點擊選中元素或通過鍵定位到元素時），發生 focustabblur:當元素失去焦點時發生。blur44第程序員 web/php 學院3.2 jQuery bind 和 unbind使用我們先看一個簡單的實例：第45程序員 web/php 學院bind 綁定：，多個之間用空格（1）添加多個鏈式寫法 mouseover 和 mouseout第46程序員 web/php 學院（2）添加（3）向函

13、數傳遞數據第47程序員 web/php 學院語法格式：$(selector).bind(event,data,function,map)selector:選擇器。參數：event:可以添加一個或者多個。data:規定傳遞到函數的參數數據。function :自定義函數。map:多個函數。取消綁定 unbind第48程序員 web/php 學院3.3 jQuery on 和 off,one使用語法：$(selector).on(event,childSelector,data,function,map)八哥總結說明：語法格式：$(selector).on(event,childselector,

14、data,function,map)selector:選擇器。參數：。多個有空格分割。event:可以添加一個或者多個childselector:子選擇器。規定只能到子元素的data:規定傳遞到函數的參數數據。function :自定義函數。處理。map:多個函數。第49程序員 web/php 學院3.4 jQuery delegate語法：$(selector).delegate(childSelector,event,data,function)selector:選擇器。參數：childselector:子選擇器。規定只能到子元素的處理。有空格分割。event:可以添加一個或者多個。多個d

15、ata:規定傳遞到函數的參數數據。function :自定義函數。第50程序員 web/php 學院3.5 jQuery hover規定當鼠標指針懸停在被選元素上時要運行的兩個函hover()數。語法：$(selector).hover(inFunction,outFunction) 調用:$( selector ).hover( handlerIn, handlerOut )等同以下方式：$( selector ).mouseover( handlerIn ).mouseout( han dlerOut );第51程序員 web/php 學院在鼠標移動到選取的元素及其子元素上時觸發只在鼠標移

16、動到選取的元素上時觸發。mouseovermouseenter3.6 jQuery 自定義語法$(selector).trigger(event,param1,param2,.)trigger()的默認行為觸發被選元素上指定的以及（比如表單提交）。第52程序員 web/php 學院3.7 jQuery change（僅適用于表單字段）。當元素的值改變時發生 change觸發 change，或規定當發生 change時運行change()的函數。第53程序員 web/php 學院3.8event 對象的屬性的類型type:第54程序員 web/php 學院target:哪個元素的(.nodeName)which:返回鼠標的按鍵或者是鍵盤的按鍵的值。第55程序員 web/php 學院data:當前執行的處理程序被綁定時傳遞到的可選數據。pageX:返回鼠標指針的位置，相對于文檔的左邊緣。pageY:返回鼠標指針的位置，相對于文檔的上邊緣。第56程序員 web/php 學院3.9