jquery 执行div click jquery中的click

来来来，先看一个例子：

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())})

this
html DOM
html
$(this)
jquery
jquery

$(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()方法的写法不一样。

有不正确的地方欢迎批评指正~~~~~