1、jQuery操作的分類
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>Dom的分類</title> | |
| <!-- | |
| xml dom :針對於 xml文件的操作 | |
| html dom :處理html頁面 document.forms[0] | |
| css dom :操作css element.style.屬性名 | |
| dom core:核心！只要是支持dom編程語言都可以使用！ | |
| javaSc對ript（jQuery）對上面的dom操作都提供了支持！ | |
| jQueryjavaScript中的dom操作 進行了封裝！ | |
| --> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
2、節點的操作
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>節點的操作</title> | |
| </head> | |
| <body> | |
| <ul> | |
| <li>大家辛苦了</li> | |
| <li>不交作業了</li> | |
| <li>就是不交</li> | |
| <li>氣死你</li> | |
| <li>傷害了誰？</li> | |
| </ul> | |
| <button type="button" id="addLi">新增子節點</button> | |
| <button type="button" id="addUl">新增同輩節點</button> | |
| <button type="button" id="updateLi">替換下標為2節點</button> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| $("#addLi").click(function(){ | |
| //創建一個節點li | |
| var $newLi=$("<li>新增的作業</li>"); | |
| //把新增的節點放置到 ul的最后 $("ul").append($newLi); $newLi.appendTo($("ul")); | |
| //把新增的節點放置到 ul的最前面 | |
| $("ul").prepend($newLi); //等同於 $newLi.prependTo($("ul")); | |
| }) | |
| $("#addUl").click(function(){ | |
| //創建一個節點ul | |
| var $newUl=$("<ul><li>新增1</li><li>新增2</li></ul>") | |
| //把新增的ul放置在我們ul之后 $("ul").after($newUl); $newUl.insertAfter($("ul")); | |
| //把新增的ul放置在我們ul之前 $("ul").before($newUl); | |
| $newUl.insertBefore($("ul")); | |
| }) | |
| /** | |
| * 獲取li下標值是2的元素 替換 | |
| * $(節點1).replaceWith($(替換節點)) | |
| * 等同於 | |
| * $(替換節點).replaceAll($(節點1)) | |
| */ | |
| $("#updateLi").click(function(){ | |
| //創建替換的節點 | |
| var $updateLi=$("<li style='color: red'>我是替換節點</li>"); | |
| //獲取下標是2的元素$("li:eq(2)").replaceWith($updateLi); | |
| //替換所有元素 | |
| $("li:eq(0)").replaceAll($("li:eq(4)")); | |
| }) | |
| //驗證 clone | |
| $("li:eq(2)").mouseover(function(){ | |
| $(this).css({"background":"red"}); | |
| }) | |
| //向ul中clone 節點3 | |
| $("li:eq(2)").clone().appendTo("ul"); | |
| // $("li:eq(2)").clone(true).appendTo("ul"); 會綁定事件，樣式 | |
| }) | |
| </script> | |
| </body> | |
| </html> |
3、刪除節點
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>刪除節點</title> | |
| <!-- | |
| empty(), remove(), detach()三者的區別 | |
| empty():只能清空節點的內容和子元素！節點本身不會被刪除！ | |
| remove(): | |
| 01.刪除整個節點，包含自身和子元素！ | |
| 02.刪除了節點所對應的事件 | |
| detach(): | |
| 01.刪除整個節點，包含自身和子元素！ | |
| 02.不會刪除節點所對應的事件 | |
| --> | |
| </head> | |
| <body> | |
| <div id="main"> | |
| main | |
| <div id="first">first | |
| <div>里面的子元素</div> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| var $first=$("#first"); | |
| $first.click(function(){ | |
| alert("first"); | |
| }) | |
| // $first.empty(); | |
| // $first.remove(); | |
| $first.detach(); | |
| $first.prependTo("body"); | |
| }) | |
| </script> | |
| </body> | |
| </html> |
4、attr屬性
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>attr屬性</title> | |
| <!-- | |
| attr(): | |
| 01.如果只有一個參數 ，就是獲取對應屬性的值 | |
| 02.如果有兩個參數 ，就是設置對應屬性的值 | |
| --> | |
| </head> | |
| <body> | |
| <img src="../images/cat.jpg"> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| $("img").click(function(){ | |
| //獲取元素指定的屬性值 | |
| var $src= $(this).attr("src"); | |
| alert($src); | |
| //增加鼠標懸停時的提示文字 | |
| $(this).attr({"title":"這是一只可愛的小貓咪","width":"200px"}); | |
| //清除對應的屬性值 | |
| $(this).removeAttr("src"); | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
5、獲取同輩和父輩元素
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>獲取同輩和父輩元素</title> | |
| </head> | |
| <body> | |
| body | |
| <div id="main"> | |
| main | |
| <div id="first1"> | |
| first1 | |
| <div id="second1"> | |
| second1 | |
| <div id="third1"> | |
| third1 | |
| </div> | |
| </div> | |
| </div> | |
| <div id="first2"> | |
| first2 | |
| <div id="second2"> | |
| second2 | |
| </div> | |
| </div> | |
| <div id="first3"> | |
| first3 | |
| <div id="second3"> | |
| second3 | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| //獲取main的子元素個數 | |
| alert("main的子元素個數"+$("#main").children().length); | |
| //設置first1之后的兄弟節點的樣式 | |
| // $("#first1").next().css({"color":"red"}); | |
| //設置first2之前的兄弟節點的樣式 | |
| //$("#first2").prev().css({"color":"red"}); | |
| //所有同輩元素 之前和之后 | |
| //$("#first2").siblings().css({"color":"red"}); | |
| //設置first1的父級元素 | |
| // $("#first1").parent().parent().css({"color":"red"}); | |
| //設置third1的祖先元素 | |
| $("#third1").parents().css({"color":"pink"}); | |
| }) | |
| </script> | |
| </body> | |
| </html> |