/* 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()