jQuery的on()方法的两种用法（委托给父元素进行事件监听代理）

 

/* 6. 增加删除元素*jQuery:
* */
    var li=$('<li class="item">content</li>');//创建子节点
    $('ul').append(li);//在父节点后面添加子节点
    $(li).appendTo('ul');    //将子节点追加到父节点
    //直接将创建的子元素添加到父元素
    $('ul').append('<li class="item">content</li>');//这样不方便进行事件绑定
//7.删除已有元素
//DOM:ul.removeChild(li);//由父元素删除子元素
//jquery:
$(li).remove();//删除当前选定元素


//8.替换已有的元素
//核心DOM:
parent.replaceChild(oldChild,newChild);
//jQuery:
$('oldChild').replaceWith(newChild);//已有节点被新节点替换，返回被删除的旧节点（用的多）
$('newChild').replaceAll(oldChild);//新节点替换所有旧节点，返回新节点


//9克隆节点.
// core DOM:
var copy=element.cloneNode();
//jQuery:
var copy=$(this).clone();//返回选定元素的副本
var copy=$(this).clone(copyListenter);//默认值是false,不复制元素的监听函数


//10.jQuery函数的第二部分：事件处理函数
//jQuery api查看已经废弃的API
//(5)on()/off()
//(6)click(),mouseover(),mouseout(),keyup()
//$(...).click(fn) <==> $(...).on('click',fn)


/****一：on的第一种用法：直接绑定在源事件上****/
$('event').on('eventName',function(){
    "use strict";


});
$('event').off('eventName');
//这种用法有两个限制：
/*(1)若是选中元素很多，每个都会有一个监听函数
*（2）无法为后添加的元素进行绑定
* */


/****二：on的第二种用法：委托给父元素进行事件监听代理****/
//自己被单击后把事件冒泡给父元素处理
$('parent').on('eventName','child selector',function(){
    "use strict";


});




/*DOM 中为元素绑定监听函数：
* btn.onclick(function(){});
* btn.addEventListener('click',function(){});
* jQuery 中的on()函数底层是addEventListener
* */




/*复习*/


//var $=20;//把$变成了一个全局变量。
/*****$函数在其他框架中也有用到，为避免冲突，****/
//(1)用jQuery('selector')
//(2)让jQuery放弃$：
jQuery.noConflict();//放弃$函数的使用权，用jQuery代替$




$('').toggleClass('.btn')//有btn calss 则删除，否则添加btn class


$(this).parent()//z找当前元素的parent element
$(':parent')//找到有parent的所有元素
$('').children()//只找到直接子代
$('').find()//找到所有的子代元素，包括后代子元素


$('').empty()