心情不好的时候连题目都不愿意写~~~~~~
1、显示迭代
隐式迭代:可以对多个元素应用相同的效果
显示迭代:对多个元素应用不同操作时使用
jQuery中提供了一个each方法用于进行显示迭代操作
$divs.each(function (index, ele) {
// index - 索引值, ele - DOM对象形式的元素
$(ele).css('width', (index + 1) * 100);
});
2、创建元素
① 使用html()
相当于innerHTML属性,可以进行纯文本和结构的操作,会对原始内容进行覆盖
$('#box').html('这是内容<p>这是p标签</p>');
② $()
内部传入结构字符串可以进行创建操作,功能类似document.createElement()创建的元素默认不在页面中显示,需要使用移动操作加到页面中
var $sp = $('<p><span>这是span</span></p>');
$('#box').append($sp);
3、移动元素
① append():可以将元素添加到某个元素内部的最后位置
var $div = $('<div>这是div</div>');
$('#box2').append($div);
append的参数可以直接传入结构字符串,会被生成
$('#box2').append('<div>这是div内容</div>');
由于jQuery会隐式迭代,所以一个被移动的元素可能被同时添加到多个位置,所以被移动的元素和内部结构均不要设置id,避免重复
② prepend():可以将元素添加到某个元素内部的最前面
③ after():向某个元素的同级后面移动元素
④ before():向某个元素的同级前面移动元素
下面四个移动元素的操作方式目的是为了完善链式编程操作
⑤ appendTo():将某个元素添加到指定元素内的最后位置
$('<h3>这是h3</h3>').css('backgroundColor', 'red').appendTo($('#box2'));
⑥ prependTo():将某个元素添加到指定元素内的最前面位置
⑦ insertAfter():将某个元素添加到指定元素同级的后面
⑧ insertBefore():将某个元素添加到指定元素同级的前面
4、移除元素
① html(’’):用于移除某个元素内部所有内容
$('#box').html('');
② empty():用于移除某个元素内部所有内容
$('#box').empty();
③ remove():用于移除元素自身,参数是选择器
$('div').remove('.box');
5、克隆元素
clone() - 用于对元素进行克隆操作
参数:false表示深拷贝,拷贝完整结构;true表示不仅拷贝结构还可以拷贝事件。
$('.box').click(function () {
console.log('这是box的点击事件');
});
$('body').append($('.box').clone(true));