jQuery的元素操作

jQuery元素操作

主要是遍历，创建，添加，删除元素操作

遍历元素

注意：jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历

语法1：

$("div").each(function(index,doEle){})

1. each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
2. 里面的回调函数有两个参数：index是每个元素的索引号，domEle是每个DOM元素对象，不是jQuery对象
3. 所以要想使用jQuery方法，需要给这个dom元素转换成jquery对象 $(domEle)

语法2：

$.each(object,function(index,element){})

4. .each() 方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
5. 里面的函数有2个参数，index是每个元素的索引，element遍历内容

案例

		// 1. each()方法遍历元素
        // 回调函数第一个参数一定是索引号，第二个参数一定是dom元素对象
        // 索引号可以自己指定，dom对象没有jQuery方法
        var arr = ["red","blue","yellow"];
        var sum = 0;
        $(function(){
            $("div").each(function(index,domEle){
                console.log(index);
                console.log(domEle);
                $(domEle).css("color",arr[index]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum)
            // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
            $.each($("div"),function(i,ele){
                console.log(i);
                console.log(ele);
            });
            $.each(arr,function(i,ele){
                console.log(i);
                console.log(ele);
            });
            var obj1 = {
                name:'beibei',
                age:20,
                sex:'男'
            };
            $.each(obj1,function(i,ele){
                console.log(i);  // 输出属性名
                console.log(ele);  // 输出属性值
            })
        });

创建添加删除元素

	<Ul>
        <li>我是原先的li</li>
    </Ul>
    <div class="test">我是原先的div</div>

创建元素

var li = $("<li>我是后来创建的</li>")

添加元素

内部添加

	$("ul").append(li); // 放到内容的最后面
    $("ul").prepend(li);  // 放到内容的最前面

外部添加

	var div = $("<div>我是后来创建的</div>");
    $("div").after(div);
     $("div").before(div);

删除元素

// $("ul").remove();  // 可以删除匹配的元素 自杀
// $("ul").empty(); //可以删除匹配的元素里面的子节点,本身不删除
$("ul").html("") // 修改匹配的元素子元素为空