jQuery操做dom

參考：jQuery權威指南
jQuery初步
jQuery選擇器
jQuery操做dom
jQuery操做dom事件
jQuery插件
jQuery操做Ajax
jQuery動畫與特效
jQuery實現導航欄
jQuery實現點擊式選項卡
jQuery實現select三級聯動

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131

$( function (){             //1.操做元素屬性      //1.1 設置或返回被選元素的屬性值    attr：attr(name)獲取值，attr(name,value)設置name的值爲value      $( "img" ).attr( "src" ); //獲取img的src屬性的值      $( "img" ).attr( "src" , "b.jpg" ); //將img的src屬性設置爲b.jpg      $( "img" ).attr({          src: "b.jpg" ,          title: "test"      }); //同時將img的src屬性設置爲b.jpg，title設置爲test      $( "img" ).attr( "title" , function (){          return "test2" ;      }); //將匿名函數返回的值設置到title中      //1.2 刪除屬性 removeAttr(name)      $( "img" ).removeAttr( "title" ); //刪除img的title屬性             //2.操做元素內容      //2.1 獲取元素內容      var strHtml = $( "#div1" ).html(); //獲取div1的html元素      var strText = $( "#div1" ).text(); //獲取div1的text文本內容      //2.2 設置元素內容      var strHtml = $( "#div1" ).html( "<span>span</span>" ); //設置div1的html元素爲<span>span</span>      var strText = $( "#div1" ).text( "demo" ); //設置div1的文本內容爲demo             //3.獲取元素的值val,val()獲取元素的值    val(value);//設置元素的值      $( "#select1" ).val(); //獲取select選中的option的值      $( "#input1" ).val( "" ); //清空input1的值             //4.操做元素樣式      $( "p" ).css( "color" ); //獲取p的color值      $( "p" ).css( "color" , "red" ); //設置p的color值爲red      $( "p" ).css({color: "red" ,background: "green" }); //設置p的color值爲red,background的值爲green             //5.操做class      //添加class      $( "img" ).addClass( "p2 p3" ); //這是追加，不是覆蓋。好比原來的<p class="p1">,執行完addClass後爲<p class="p1 p2 p3">      //切換class      $( "img" ).toggleClass( "i" ); //toggleClass也是追加，例如：      //好比原來是<img class="p2 p3" src="a.jpg" alt="aa">，執行完toggleClass後爲<img class="p2 p3 i" src="a.jpg" alt="aa">      //刪除class      $( "img" ).removeClass( "i" ); //移除class，這裏表示在class="p2 p3 i"的基礎上移除了i，結果爲class="p2 p3"      $( "img" ).removeClass(); //不傳參數則會刪除全部class。結果就是class=""                    //6.內部插入節點      //在當前元素追加內容      $( "p" ).append( "<b>Hello</b>" ); //向p段落追加<b></b>      //把全部匹配的元素追加到另外一個指定的元素元素集合中。      $( "p" ).appendTo($( "#div1" )); //把全部p段落，追加到#div1中      //向匹配的元素前置內容：放在匹配元素的最前面      $( "p" ).prepend( "<b>Hello</b>" ); //在p元素內容的最前面添加<b>Hello</b>      //把所選元素追加到另外一個元素中的最前面      $( "p" ).prependTo( "#foo" ); //把全部p追加到#foo元素的最前面                        //7.外部插入節點      //在匹配的元素以後插入同級html內容      $( "p" ).after( "<b>Hello</b>" ); //源：<p>I</p> 插入後<p>I</p><b>Hello</b>      //在匹配的元素以後插入dom元素      $( "p" ).after( $( "#foo" )[0] ); //源：<b id="foo">Hello</b><p>I</p> 插入後的p爲：<p>I</p><b id="foo">Hello</b>      //在每一個匹配的元素以前插入html內容。      $( "p" ).before( "<b>Hello</b>" ); //源：<p>I</p> 插入後<b>Hello</b><p>I</p>      //在匹配的元素以前插入dom元素      $( "p" ).before( $( "#foo" )[0] ); //源：<b id="foo">Hello</b><p>I</p> 插入後的p爲：<b id="foo">Hello</b><p>I</p>      //把全部匹配的元素插入到另外一個、指定的元素元素集合的後面。      $( "p" ).insertAfter( '#foo' ); //源：<p>I</p><div id="foo">Hello</div> 插入後的p爲：<div id="foo">Hello</div><p>I</p>      //把全部匹配的元素插入到另外一個、指定的元素元素集合的前面。      $( "p" ).insertBefore( "#foo" ); //源：<div id="foo">Hello</div><p>I</p> 插入後的p爲：<p>I</p><div id="foo">Hello</div>         //8.複製節點：clone()克隆而且選中該元素      //只複製元素，不復制元素的事件。      //源內容：<b>Hello</b><p>, how are you?</p>      $( "b" ).clone().prependTo( "p" ); //結果爲：<b>Hello</b><p><b>Hello</b>, how are you?</p>   第二個b標籤是沒有事件的      //複製元素和元素的事件。        $( "button" ).click( function (){ //源內容：<button>Clone Me!</button>        $( this ).clone( true ).insertAfter( this );      }); //複製了按鈕，而且具備一樣的事件                //9.替換節點      //替換單個元素爲html元素      //案例：將全部的p替換成b      $( "p" ).replaceWith( "<b>b</b>" ); //源：<p>p1</p><p>p2</p><p>p3</p> 替換後：<b>b</b><b>b</b><b>b</b>      //替換單個元素爲html元素，值爲函數返回值      //案例：將全部的p替換成b      $( "p" ).replaceWith( function (){ return "<a>a</a>" }); //源：<p>p1</p><p>p2</p><p>p3</p> 替換後：<a>a</a>      //替換全部元素      //把全部的p替換成<b>替換後</b>      $( "<b>替換後</b>" ).replaceAll( "p" ); //源：<p>p1</p><h1>h1</h1> 替換後：<b>替換後</b><h1>h1</h1>         //10.包裹節點      //使用html代碼包裹整個元素      //用<div class='wrap'></div>將全部的p包裹起來      $( "p" ).wrap( "<div class='wrap'></div>" );      //使用指定元素包裹整個元素      $( "p" ).wrap(document.getElementById( 'content' ));      //使用回調函數包裹整個元素      $( '.inner' ).wrap( function () {        return '<div class="' + $( this ).text() + '" />' ;      });      //使用html包裹匹配元素的內容      //將p裏的元素內容，用<b></b>包裹起來      $( "p" ).wrapInner( "<b></b>" ); //源：<p>helloWord</p> 包裹後<p><b>helloWord</b></p>      //使用指定元素包裹匹配內容      $( "p" ).wrapInner(document.createElement( "b" ));      //使用回調函數包裹匹配內容      $( 'p' ).wrapInner( function () {        return '<b></b>' ;      });         //11.遍歷元素      //html內容爲<img/><img/>      //遍歷src屬性爲a.jpg      $( function (){          $( "img" ).each( function (index, el) { //index爲每一個元素的索引，el爲當前元素(也能夠直接用this)              console.info(index,el, this ); //el和this是相等的              this .src = "a.jpg" ; //設兩個圖片的src屬性          });                  });      //遍歷後結果爲<img src="a.jpg"/><img src="a.jpg"/>             //12.刪除元素      //remove()：從DOM中刪除全部匹配的元素。      //刪除p元素      $( "p" ).remove(); //源：<p>Hello</p> how are <p>you?</p>   刪除後：how are      $( "p" ).remove( ".p1" ); //源：<p>Hello</p> how are <p class="p1">you?</p>   刪除後：<p>Hello</p> how are      //empty()：刪除匹配的元素集合中全部的子節點。      //源內容：<p>Hello, <span>Person</span> <a href="#">and person</a></p>      $( "p" ).empty(); //刪除後：<p></p>    });

來自爲知筆記(Wiz)