jquery事件的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //绑定button点击事件
            var $btn = $('#btn');
            $btn.click(function(){
                //点击button会弹出警示框
                alert("关于事件的绑定");
            })

            //绑定li标签事件
            var $lis = $('.list li');
            $lis.click(function(){
                //this指的是当前对象,也就是当前所点击的li标签
                $(this).css({"color":"red"});
                
                //获取当前点击的li标签的索引值
                var iIndex  =$(this).index();
                //弹出索引值
                alert(iIndex);
                //其实在这里我们还可以用console.log(iIndex)查看
                console.log(iIndex);

            })

        })
    </script>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <button id="btn">普通按钮</button>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/owc1874/article/details/80747277