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


相关文章
|
8月前
|
JavaScript 前端开发 Java
【Java进阶】详解JavaScript事件
总的来说,JavaScript事件是JavaScript交互设计的核心,理解和掌握JavaScript事件对于编写高效、响应式的网页应用至关重要。
150 15
|
9月前
|
JSON JavaScript 数据格式
jqtimeline.js-简单又好用的jquery时间轴插件
jqtimeline.js-简单又好用的jquery时间轴插件
|
9月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
389 3
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
302 14
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
440 5
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
206 6
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
229 2
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
423 3