JavaScript进阶2

已于 2024-06-26 09:59:59 修改
阅读量331 收藏 2
点赞数 4
文章标签： javascript 开发语言 ecmascript java 前端
于 2024-05-11 22:21:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luosuss/article/details/138728934
版权

自定义对象

let 自定义对象名{

        属性名:属性值,

        

        函数名称:function(形参列表){}

};

注意：在自定义对象中使用当前自定义对象的属性或者函数，需要使用this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //自定义对象
        let Person={
            //属性名:属性值
            name:"赫赫",
            age:18,

            //定义函数
            eat:function()
            {
                //注意：在自定义对象中使用当前自定义对象的属性或者函数，需要使用this
                console.log("eat"+this.age);//this代表当前对象，即Person
            }
        };
        console.log(Person.name);
        console.log(Person.age);
        Person.eat();//调用函数
    </script>
</body>
</html>

 

window对象

 

1.确认框

let result=window.confirm("提示信息");

        点击确认，返回true;

        点击取消，返回false；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let boo=window.confirm("确认删除吗");
        if(boo){
            console.log("把删除的物品的id传给后台");
        }
        else{
            console.log("不删除");
        }
    </script>
</body>
</html>

 2.定时器

        let 变量名 =window.setInterval(匿名函数，毫秒)

                说明：每隔多少毫秒执行一次匿名函数体内部的函数体

        取消定时器：

        window.clearInterval(定时器变量名);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //2s后打印一次hello，然后关闭
        let alarm=window.setInterval(function(){
            console.log("hello");
            //取消定时器
            window.clearInterval(alarm);
        },2000);

        //关闭定时器
        
    </script>
</body>
</html>

        let 变量名=window.setTimeout(匿名函数，毫秒);

                说明间隔多少毫秒执行匿名函数，且只执行一次

 

 地址栏对象（location）

属性：href:要跳转的地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //停2秒跳转到百度
        window.setTimeout(function(){
            window.location.href="http://www.baidu.com";
    },2000);
    </script>
</body>
</html>

 

DOM对象

Element:元素对象

获取元素对象：
        1.getElementById() 方法返回拥有指定 id 值的元素。如果元素不存在getElementById() 方法将返回 null。

        2.getElementsByClassName() 方法返回拥有指定类名（class属性值）的元素集合。

getElementsByClassName() 方法返回 HTMLCollection。

        3.getElementsByName() 方法返回拥有指定名称(name属性值)的元素集合。

getElementsByName() 方法返回实时的 NodeList。

        4.getElementsByTagName() 方法返回拥有指定标记名的所有元素的集合。

getElementsByTagName() 方法返回 HTMLCollection。

getElementsByTagName() 属性是只读的。

注释：getElementsByTagName("*") 返回文档中的所有元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="../img/小鱼.jpeg" width="50" height="50" id="fish"> <br>

    <div class="hhh">你好呀</div> <br>
    <div class="hhh">好好好</div> <br>

    <input type="checkbox" name="hoppy">踢球
    <input type="checkbox" name="hoppy">喝酒

    <script>
        //获取id为fish的元素对象
      let imgObj=  document.getElementById("fish");//获取的元素对象是Image类型
      console.log(imgObj);

      //获取类名为hhh的元素数组
     let hhhArr= document.getElementsByClassName("hhh");
     console.log(hhhArr.length);//2

     //获取标签名为div的元素数组
     let divArr=document.getElementsByTagName("div");
     console.log(divArr.length);//2

     //获取name属性值为hoppy的元素数组
     let hoppyArr=document.getElementsByName("hoppy");
     console.log(hoppyArr.length);//2
    </script>


</body>
</html>

 

 元素对象的使用，

通过document获取元素对象时，每个标签会被封装成对应的对象，这些对象都有Element对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="../img/小鱼.jpeg" width="50" height="50" id="fish"> <br>

    <div class="hhh">你好呀</div> <br>
    <div class="hhh">好好好</div> <br>

    <input type="checkbox" name="hoppy">踢球
    <input type="checkbox" name="hoppy">喝酒

    <script>
      //修改图片地址
      //1.先获取img标签的Image对象
      let fishId=document.getElementById("fish");
      //2.通过Image对象的src属性修改图片地址
      fishId.src="../img/小熊.jpg";

      //修改div标签的文本的颜色
      //1.获取元素对象
      let divArr=document.getElementsByClassName("hhh");
      for(let di of divArr)//遍历数组,获得Div对象
      {
        //修该元素对象颜色
        di.style.color="red";
        //修改元素对象内容
        di.innerHTML="美丽的"
      }

      //设置复选框都被选中
      let checkArr=document.getElementsByName("hoppy");
      for(let ch of checkArr)//Input Checkbox 对象
      {
        ch.checked=true;
      }
    </script>


</body>
</html>

 

常见的事件

事件名说明
onclick鼠标单机事件
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onkeydown某个键盘的键被按下
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开

事件绑定

        方式一：通过HTML标签中的事件属性进行绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 方式一 -->
    <!-- 给下面的标签绑定单击事件 -->
    <input type="button" value="点我" onclick="on();"/>
    <script>
        //书写on()函数
        function on()
        {
            alert("我被点击");
        }
    </script>

    
</body>
</html>

 

        方式二：通过DOM元素属性进行绑定 : 标签对象.事件名=function(){};

注意：只有是标签对象才可以绑定事件，如果是数组需要遍历数组获取出每个标签对象进行绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 方式一 -->
    <!-- 给下面的标签绑定单击事件 -->
    <input type="button" value="点我" id="btn"/>
    <script>
        //标签对象.事件名=function(){};
        //先获取element元素对象
        //注意：只有是标签对象才可以绑定事件，如果是数组需要遍历数组获取出每个标签对象进行绑定
        document.getElementById("btn").onclick=function()
        {
            alert("我又被点击");
        };
    </script>


</body>
</html>

 

 onsubmit事件介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#" id="register" >
        <input type="text" name="username" id="username">
        <input type="submit" value="提交"> 
    </form>

    <script>
        //获得表单元素对象,并给表单元素邦迪提交事件
        document.getElementById("register").onsubmit=function()
        {
            //获取输入框输入的值
            let usernameValue=document.getElementById("username").value;
            if(usernameValue==""||usernameValue=='')
            {
                //不能提交表单，对于onsubmit事件，如果匿名函数返回false,则此表单数据不提交
                return false;
            }else{
                return true;
                alert(usernameValue);
            }

        }
    </script>
</body>
</html>

 

 onload事件

window的属性，如果将form标签的js代码放到form标签上，那么就会报错，所以使用onload事件，让引擎先加载js代码外的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <script>
        //获得表单元素对象,并给表单元素邦迪提交事件
        document.getElementById("register").onsubmit=function()
        {
            //获取输入框输入的值
            let usernameValue=document.getElementById("username").value;
            if(usernameValue==""||usernameValue=='')
            {
                //不能提交表单，对于onsubmit事件，如果匿名函数返回false,则此表单数据不提交
                return false;
            }else{
                return true;
                alert(usernameValue);
            }

        }
    </script>
    <form action="#" id="register" >
        <input type="text" name="username" id="username">
        <input type="submit" value="提交"> 
    </form>
</body>
</html>

e84290cec0204eaf88eb1d1442581374.png

解决方法：使用onload事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <script>
        //当整个页面的html图片，html,css执行完后才执行以下代码
        window.onload=function(){
        
    
        //获得表单元素对象,并给表单元素邦迪提交事件
        document.getElementById("register").onsubmit=function(){
            //获取输入框输入的值
            let usernameValue=document.getElementById("username").value;
            if(usernameValue==""||usernameValue==''){
                //不能提交表单，对于onsubmit事件，如果匿名函数返回false,则此表单数据不提交
                return false;
            }else{
                return true;
                alert(usernameValue);
            }

        }

        }
    </script>
    
    
    <form action="#" id="register" >
        <input type="text" name="username" id="username">
        <input type="submit" value="提交"> 
    </form>
</body>
</html>

 

 

2.JavaScript进阶1
08-03
JavaScript是一种广泛用于网页和...总之，JavaScript进阶学习涵盖了对象的概念、DOM操作和事件处理等方面，这些都是构建交互式Web应用的基础。通过熟练掌握这些知识，开发者可以创建出更加动态和用户体验丰富的网页。
javascript进阶版纯手写课件
04-09
### JavaScript进阶知识点详解 #### 1. 函数防抖与节流 在JavaScript中，函数防抖（debounce）和节流（throttle）是两种常见的性能优化手段，主要应用于处理高频触发的事件。 **防抖**技术是通过设置一个延时器，...
JavaScript进阶部分知识总结
guai_guai_guai的博客
04-22 1040
局部作用域分为函数作用域和块作用域。
javascript进阶
u012536120的博客
08-13 577
【背景】 工作是用VS，感觉太笨重，随便安装下就10G+，后来接触了JS，python这些只用几M的解释型语言，就很喜欢。 后来看过很多JS的教程，包括w3cschool的教程、JS权威指南、JS语言精粹...... 写得不好，感觉没有说到点子上（仅代表个人感受） 最近看了《JavaScript启示录》英文版的。跟我们平常看的语法书思考角度不同，有一些【进阶】意义，所以就想把里面的一些东西...
Javascript进阶内容
triggerV的博客
04-08 1021
JavaScript的一些进阶内容：作用域、函数进阶、解构赋值、深入对象、内置构造函数、深入面向对象、深浅拷贝、异常处理、处理this、防抖节流
前端之JavaScript进阶篇
Queen_is_king的博客
07-30 1351
随着我们深入的学习JavaScript，我们知道了使用JavaScript可以增加行为，为网页添加动态效果，使我们做出来的网页更加好看。让我们去进入JavaScript的新境界吧！JavaScript能做什么？JS进阶篇学习什么？在JavaScript入门篇中，我们学习了如何插入JS、输出内容及简单的DOM操作，JavaScript进阶篇让您进一步的了解JS的变量、数组、函数、语法、对象、事件、DOM操作，制作简单的网页动态效果。什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某
Javascript 进阶案例
小陈从不熬夜
08-12 419
JS进阶案例详解~
Javascript 面向对象的JavaScript进阶
08-13
### JavaScript面向对象进阶知识点详解 #### 8.1 面向对象编程的基本特性 在探讨面向对象的JavaScript之前，我们首先需要了解面向对象编程（Object-Oriented Programming, OOP）的基本特性：封装性、抽象性、继承...
JavaScript 进阶问题列表，包含完整答案
05-10
《JavaScript进阶问题列表》是一份全面覆盖JavaScript高级知识点的问题集合，旨在帮助开发者深入理解JavaScript语言的各个方面，并掌握进阶技巧。每个问题都提供了详细的答案和解析，涵盖了JavaScript的高级特性、...
JavaScript进阶面试题_30题.pdf_前端面试题
09-01
JavaScript进阶面试题_30题.pdf_前端面试题 从这份文件中，我们可以总结出以下的知识点： 1. ECMAScript6 中的类语法糖：ECMAScript6 中引入了类语法糖，这使得有 OOP 基础的人更容易上手 JavaScript。虽然对熟悉 ...
JavaScript进阶基础-3
12-20
【JavaScript进阶基础-3】 在JavaScript中，进阶基础涉及到很多重要的概念，尤其是面向对象、前后端交互、Cookie以及JSONP。以下是对这些概念的详细解析： **面向对象基础** 面向对象是一种编程范式，它关注的是...
JavaScript进阶练习及简单实例分析
10-22
本文介绍了一个JavaScript的进阶练习示例，该示例涉及的主要知识点包括对象的创建与属性操作、事件监听、...这样的练习有助于提高对JavaScript语言特性的理解和代码编写能力，是学习JavaScript进阶内容的重要实践方式。
JavaScript 生成二维码
qq_30049249的博客
11-02 251
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 585
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
上门理发系统的搭建
最新发布
app830的博客
11-07 319
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 203
vxe-grid新增空行，并且定位到空行位置。
JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
cx18333的博客
11-05 511
随着ECMAScript 11（ES11）引入了BigInt，JavaScript开发者现在可以轻松地处理超出传统Number类型限制的大整数。本文全面解析了BigInt的使用方法、核心特性和限制条件，为你提供了处理大型整数数据的强大工具。从BigInt的基础用法到算术运算和比较，再到类型检查和兼容性考量，一步步的深入了解这个新的数据类型。
Vue2+3
m0_73557953的博客
11-04 129
创建Vue实例 Vue指令
JavaScript-数组
weixin_64689713的博客
11-04 868
/ 定义一个长度为 4 的数组，但是这 4 项都是 undefined两种定义方法根据实际需求选择即可，两者的底层都是同样的实现逻辑。推荐：方括号定义法！
情怀系列国际版棋牌完整源码具备强大的多语言扩展功能，涵盖了900多款子游戏，专为全球市场的游戏开发和运营设计。
z926098的博客
11-05 384
客户端使用Cocos Creator进行跨平台开发，可以发布为App、H5网页和PC网页。这种跨平台的能力使运营商只需维护一套代码，就能同时管理多个终端。除此之外，系统还支持产品的热更新功能，大幅提升运营效率并降低成本，实现了产品层面的“降维打击”。情怀棋牌源代码的服务器端使用JAVA和Node.js开发，采用RocketMQ作为消息队列中间件，有效防止服务器堵塞、消峰。该源码包涵盖了完整的服务器端代码、服务端900款子游戏源码、客户端代码、客户端700款子游戏、管理后台代码、数据库以及热更新生成脚本等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

落落落sss

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值