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

简介: Javascript知识【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>

99c201402732478889b558c045baea9f.png

建议使用第一种。

c89277d5d3ca4f5ca9493e8fadd68a5d.png


格式2:


function(index,n){


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


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


}


jQuery:事件

1dba0aa899b04cc980087c17064728e5.png

<!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>

b0ace5c6f66f415a8dda0dde16017245.png

链式:jq对象.事件1().事件2();


相关文章
|
2月前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
74 14
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
66 5
|
3月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
68 6
|
3月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
55 2
|
3月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
53 3
|
3月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
81 3
|
3月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
59 4
|
3月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
63 1
|
3月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
201 0
|
3月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
44 0