jQuery的區別：$().click()和$(document).on('click','要選擇的元素',function(){})的不同
jQuery的出現，大大簡化了對dom的操作，但是如果不是仔細閱讀api和進行操作，就不知道其中最大的優點和使用方式。就拿$().click()和$(document).on('click','要選擇的元素',function(){})來說，都是點選事件的操作，但是也有不同的地方。
1. $(選擇器).click(fn)
當選中的選擇器被點選時觸發回撥函式fn。只針對與頁面已存在的選擇器。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="jquery.min.js"></script>
<script>
$(function(){
$('ul>li').click(function(){
console.log($(this).html());
});
$('ul').append('<li>5</li><li>6</li>');
})
</script>
</body>結果如下： 後面動態建立的5和6，沒法進行點選事件觸發。
2.$(document).on('click','要選擇的元素',function(){})
on方法包含很多事件，點選，雙擊等等事件。和$().click()的用法一樣，最大的區別即優點是如果動態建立的元素在該選擇器選中範圍內是能觸發回撥函式。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="jquery.min.js"></script>
<script>
$(function(){
$('body').on('click','ul>li',function(){
console.log($(this).html());
});
$('ul').append('<li>5</li><li>6</li>');
})
</script>
</body>結果如下： 動態新增的元素也能被點選觸發函式。
$().on()的知識點補充：
1.從jQuery 1.7開始，on()函式提供了繫結事件處理程式所需的所有功能，用於統一取代以前的bind()、 delegate()、 live()等事件函式。
$().bind()直接繫結在元素上，和click，blur，mouseon一樣的點選事件。
$().live()是通過冒泡的方式來繫結到元素上的。更適合列表型別的，繫結到document DOM節點上。
$().delegate()是更精確的小範圍的使用事件代理。
$().on()結合了這三個方法的優勢摒棄了劣勢。
2.該函式可以為同一元素、同一事件型別繫結多個事件處理函式。觸發事件時，jQuery會按照繫結的先後順序依次執行繫結的事件處理函式。
3. 阻止事件冒泡和事件委託的方法：
A：return false。
在事件的處理中，可以阻止預設事件和冒泡事件。
B：event.preventDefault()
在事件的處理中，可以阻止預設事件但是允許冒泡事件的發生。
C：event.stopPropagation().。
在事件的處理中，可以阻止冒泡但是允許預設事件的發生。