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元素