Javascript知识【jQuery：数组遍历和事件】

最新推荐文章于 2023-07-15 15:35:40 发布

吃这么好

最新推荐文章于 2023-07-15 15:35:40 发布

阅读量512

点赞数 3

分类专栏： Javascript和前端框架文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/m0_64550837/article/details/126309491

版权

Javascript和前端框架专栏收录该内容

33 篇文章 3 订阅

订阅专栏

💂 个人主页: 爱吃豆的土豆
🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

🏆人必有所执，方能有所成！

🌈欢迎加入社区，福利多多哦！土豆社区

🐋希望大家多多支持😘一起进步呀！

jQuery：数组遍历【阶段重点】

jQuery：事件

jQuery：数组遍历【阶段重点】

<script>
    $(function(){
        var arr = ['a','b','c','d'];
        //js普通FOR循环遍历
        for(var i=0;i<arr.length;i++){
            console.log("索引："+i+" 元素："+arr[i]);
        }
        console.log("-----");
        //Jquery循环遍历1
        $(arr).each(function (index) {
            console.log("索引："+index+" 元素："+this);
        });
        console.log("-----");
        //Jquery循环遍历2
        $.each($(arr),function (index) {
            console.log("索引："+index+" 元素："+this);
        });
    });
</script>

建议使用第一种。

格式2：

function(index,n){

//index 为当前遍历的索引，从0开始

//n 就是this，为当前遍历出来的元素，这个元素是JS对象

}

jQuery：事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            background-color: #87CEFA;
            width:300px;
            height:300px;
        }
        #d2{
            background-color:bisque;
            width:300px;
            height:300px;
        }
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            //页面加载完成时，
            //为d1加入鼠标移入和点击事件
            $("#d1").mouseover(function () {
                //修改内容体为红色字体
                $(this).html("<font color='red'>我是div1</font>");
            }).click(function () {
                alert(this.innerHTML);
            });
            //为d2加入鼠标移出事件
            $("#d2").mouseout(function () {
                alert(this.innerHTML);
            });
        });
    </script>
</head>
<body>
    <div id="d1">我是div1</div>
    <div id="d2">我是div2</div>
</body>
</html>