jQuery元素遍历，创建，添加，删除操作

元素遍历
语法一：$('div').each(function(index,ele){ }) (主要用于遍历元素)

//html代码
		    <div>1</div>
		    <div>2</div>
		    <div>3</div>
//jQuery代码(记得引入jQuery文件)
            $('div').each(function(index,ele){
                $(ele).css('color','yellow');//把所有的div字体颜色改为yellow
            })

案例：将div每个字体的颜色改为数组arr = [‘red’, ‘green’, ‘blue’]里相应的颜色，并且计算div里数字之和

var arr=['red', 'green', 'blue'];
var sum=0;
$('div).each(function(index,ele){
	$(ele).css('color',arr[index]);
	sum+=parseInt($(ele).text());
})
console.log(sum);//6

语法二：$.each($('div'),function(index,domEle){ }) (主要用于遍历和处理数据(对象，数组))

			//遍历数组
			var arr=['red', 'green', 'blue'];
            $.each(arr, function(index, ele) {
                console.log('索引号是' + '：' + index + '    ' + '对应的值是：' + ele);
            })；
            //运行结果如下：
            /*索引号是：0    对应的值是：red
			索引号是：1    对应的值是：green
			索引号是：2    对应的值是：blue*/

			//遍历对象
			$.each({name: 'jisoo',age: 25},function(index,ele){
				console.log(index);//返回属性名name,age
				console.log(ele);//返回属性值jisoo,25
			})

元素创建

var newDiv=$('<div>我是新创建的div</div>');
var newUl=$('<ul>我是新创建的ul</ul>');
var newLi=$('<li>我是新创建的li</li>');

元素添加
上述添加的标签还不会被显示在页面中，因为它们并没有被添加到DOM树中

//内部添加，因为div,ul,li都是body的子元素(使用append方法)
$('body').append(newDiv);
$('body').append(newUl);
$('body').append(newLi);

将这些新创建的标签添加在<body>标签之后，就可以显示在页面之中了，运行结果如下：
在这里插入图片描述

//外部添加，使用after()和before()方法
//html代码
    <ul>
        <li>我是旧的</li>
    </ul>
    <div class="div">我是旧的div</div>
//jQuery代码(记得引入jQuery文件)
    var newDiv=$('<div>我是新的div</div>');//创建新的div标签
    $('.div').after(newDiv); //添加到目标元素的后面
    $('.div').before(newDiv); //添加到目标元素的前面

元素删除
ele.remove() 删除匹配的元素

$(newDiv).remove();//删除新创建的div元素

jQuery元素遍历，创建，添加，删除操作

jQuery元素遍历，创建，添加，删除操作

猜你喜欢