程序媛的jQuery（三）

心情不好的时候连题目都不愿意写~~~~~~

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));