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里面的子节点干掉了

好了先介绍这么多了,后面会出个购物车案例,把学的东西巩固一下