jQuery元素操作

主要是遍歷.創建.添加.刪除元素操作

遍歷元素

之前學過遍歷元素可以用for循環,但是這裏介紹的遍歷方法更加強大

語法1:

$("div").each(function(index, domEle) {xxx,;})

each( )方法遍歷匹配的每一個元素
裏面的回調函數有兩個參數;index是每一個元素的索引號, domEle是每一個DOM元素對象,不是jQuery對象
所以要想使用jquery方法,就需要給這個dom元素轉換爲jquery對象$(domEle);

  <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            $('div').each(function(index, domEle) {
                console.log(index);  //0 1 2
                console.log(domEle); //<div>1</div> <div>2</div> <div>3</div>
            })
        })
    </script>

如果我需要把這三個div的內容變色,我就直接添加一個數組

   $(function() {
            var arr = ['red', 'green', 'yellow']
            $('div').each(function(index, domEle) {
                console.log(index); //0 1 2
                console.log(domEle); //<div>1</div> <div>2</div> <div>3</div>
                $(domEle).css("color", arr[index])
            })
        })

這樣輸出,div的內容就變成不同顏色了.當然,index是索引號,你也可以換成不同的,比如 i ,或者其他的字母都行,

語法2

$.each(Object,function (index,element) {xxx;})

$.each( )方法可用於遍歷任何對象,主要用於數據處理.比如,數組,對象.
裏面的兩個參數; index是每個元素的索引號,element 遍歷內容.

  	<div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            $.each($('div'), function(index, element) {
                console.log(index); //0 1 2
                console.log(element); //<div>1</div> <div>2</div> <div>3</div>
            })
        })
    </script>

如果我要遍歷一個數組

 <script>
        $(function() {
            var arr = ['red', 'white', 'green', 'black'];
            $.each(arr, function(index, element) {
                console.log(index); //0 1 2 3
                console.log(element); //red white green black
            })
        })
    </script>

就這樣就可以直接遍歷出來了,很方便

創建元素

$('<li></li>');

這樣就動態創建一個li了

添加元素

內部添加
兩個方法 append( ) 和 prepend( )

 var li = $('<li>這是新的</li>')
 $('ul').append(li); 內部添加,在ul裏面添加一個li 放到內容的最後面
 $('ul').prepend(li); 內部添加,在ul裏面添加一個li 放到內容的最前面

外部添加
兩個方法 element.after(‘內容’) 和 element.before(‘內容’);

 var div = $('<div>這是新的</div>')
 $('div').after(div); 外部添加, 把內容放到目標元素的後面
 $('div').before(div); 外部添加, 把內容放到目標元素的前面

注意:

內部添加元素,生成的是父子關係,

外部添加元素,生成的是兄弟關係,

刪除元素

element.remove( ) 刪除匹配的元素 簡單的說就是 自己幹掉自己
element.empty( ) 刪除匹配的元素集合中所有的子節點
element.html( ) 清空匹配的元素內容 跟第二個差不多

$('ul').remove()   這樣表示,我把ul給幹掉了
$('ul').empty()		這樣表示,我把ul裏面的子節點幹掉了

好了先介紹這麼多了,後面會出個購物車案例,把學的東西鞏固一下