來來來，先看一個例子：

html部分，定義幾個按鈕

<div class="carousel-btn">
    <button class="btn"></button>
    <button class="btn"></button>
    <button class="btn"></button>
    <button class="btn"></button>
    <button class="btn"></button>
</div>

js部分，實現點擊按鈕彈出是第幾個按鈕：

1、原生js實現

for(var i=0;i<_btn.length;i++){
  _btn[i].onclick=function () {
    alert(i)
  }
}

這個會出現啥問題呢？——————————你會發現點擊按鈕都會彈出 4。因為函數體內的i與for循環內的i是同一個i，for循環執行完i為4，所以在執行點擊事件的時候就會都彈出4。

那該咋解決呢？——————那就把函數體的i和for循環的i分來嘛，那怎樣分開呢？那就把i賦加到按鈕的一個屬性上嘛

index 屬性——可返回索引位置

那麽：

for(var i=0;i<_btn.length;i++){
  _btn[i].index = i;
  _btn[i].onclick=function () {
    alert(this.index)
  }
}
這下結果就正確了吧~~~~
雖然這樣解決了，但想想還有其他什麽簡便辦法嗎？
 
1、用es6中的let解決變量作用域問題：

for(let i=0;i<_btn.length;i++){
  _btn[i].onclick = function () {
    alert(i)
  }
}

2、jquery中的click方法是幹啥的呢？要不用它試試唄

_btn.click (function () { alert($(this).index())})

果然好使！
那麽我們來看看代碼是怎麽實現的...........
對比第二種方式，發現竟然不用循環，不用i，那個this和這個$(this)是啥區別，那個index與這個index（）又是什麽關系？為什麽onclick要用=連接函數，而click卻用()？
 
來我們一條一條理解：
1、為什麽不用循環？如果你在第二條中不用循環，直接_btn.onclick()你會發現報錯；原因就是，_btn是數組形式，而onclick只能針對一個dom元素進行操作；而click卻能針對數組操作；
2、this和$(this)區別？首先，this是html中的元素，它相當於一個指針；而$()=jquery()，$(this)是jquery中的對象，所以$(this)能調用jquery中的方法；
this，表示當前的上下文對象是一個html DOM對象，可以調用html對象所擁有的屬性，方法。
$(this),代表的上下文對象是一個jquery的上下文對象，可以調用jquery的方法和屬性值。
3、index與index()區別？上面也說了，index是HTML DOM的一個屬性，返回索引位置；index()是jquery DOM元素中的一個方法。index()方法用於返回指定元素相對其他指定元素的index位置；

$(this）就是指當前點擊的那個元素，可以調用jquery中的index()方法；而this是html的對象，可以直接使用html中的屬性index;

4、onclick與click區別？

首先，兩者本質區別：onclick是js原始的事件，click是jquery中新增的方法，click方法是執行會觸發onclick事件，原生的js中沒有click方法。

click是動作，點擊事件，onclick是監聽點擊事件的發生並調用相應的監聽處理函數。、

onclick是綁上事件，告訴瀏覽器在鼠標點擊的時候應該做什麽；

click是觸發事件，模擬鼠標的點擊操作；

onclick後面加函數，onclick是點擊事件，後面的函數是要點擊的操作（函數）；onclick=funtion(){}是函數表示式的形式；

click()是方法，括號內再加一個函數的話click(function)這個函數就是回調函數，就是將一個函數作為參數傳遞給click方法，click就會執行或者調用所傳遞給它的函數；function是規定當發生click事件時運行的函數；而onclick是事件不是方法，所以不能將一個函數作為參數傳遞給事件，只能傳遞給函數；所以onclick事件與click()方法的寫法不一樣。

有不正確的地方歡迎批評指正~~~~~

javaScript中的onclick與jquery中的click區別