138-jquery事件委托和Dom操作

jquery事件委托和Dom操作


事件委托就是利用冒泡的原理,把事件加到父级上,
通过判断事件来源的子集,执行相应的操作,
事件委托首先可以极大减少事件绑定次数,提高性能,
其次可以让新加入的子元素也能拥有相同的操作.


$function(){
	//一般的事件绑定
	var $li=$('#list li');
	$li.click(function(){
	$(this).css({background:'red'});
	})

	//事件委托
	var $list=$('#list');
	$list.delegate('li','click',function(){
	$(this).css({background:'red'});
	})	
}





Dom操作
Dom操作也叫做元素节点操作,指的是改变html的标签结构
1.移动现有标签的位置
2.将新创建的标签插入到现有的标签中

创建新标签
var $div=$('<div>');
var $div=$('<div>My name is Alice.</div>');

来准备一些标签
<div>
	<p>aaa</p>
	<p>bbb</p>
	<p>ccc</p>
</div>

移入或者插入标签
append()

$(function(){
	var $div=$('#div');
	var $h1=$('h1');
	var $h2=$('h2');
	var $h3=$('h3');
	var $h4=$('h4');
	
	//append
	$div.append($h1);

	//appendTo
	$h1.appendTo($div);

	//prepend
	$div.prepend($h4);

	//prependTo
	$h4.prependTo($div);

	//after
	$div.after($p2);

	//insertAfter
	$p2.insertAfter($div);
	
})




操作列表
$(function(){
var $text=$('#text');
var $btn=$('#btn');
var $list=$('#list');

$btn.click(function(){
	var text=$text.val();
	
	//清空text
	$text.val('');
	
	var $li=$('<li>'+
	'<span> +text+ '</span>' +
	'</li>')

	$list.prepend($li);
	var $del=$li.find('.del');
	$del.click(function(){
		$(this).parent().remove();
	})
	
	})

	//删除操作
	var $del=$('.del');
	//删除点击事件绑定
	$del.click(function(){
		$(this).parent().remove();
	})

	//设置事件委托
	$list.delegate('a','click',function(){
	var str=$(this).prop('class');

	if(str==='del'){
	$(this).parent().remove();
	}

	if(str==='up'){
		if($(this).parent().prev().length===0){
		return
		}
	$(this).parent()
	.insertBefore($(this).parent().prev());
	}
	
	})
})





$('div').css('width');
$('div').css('width','30px');
$('div').addClass('divClass');
$('div').removeClass('divClass');

$('#btn').click(function(){
	$(this)
})

$('ul li').click(function(){

})

$(this).css({background:'red'});

alert($(this).index());




选项卡
$btn.click(function(){
	$(this).addClass('active').siblings()
	.removeClass('active');
	$div.eq($(this).index())
	.addClass('current')
	.siblings()
	.removeClass('current');
})