首页 > 其他分享 >JS基础(三)

JS基础(三)

时间:2023-10-01 21:31:50浏览次数:27  
标签:name 基础 JSON JS write window let document

1、JS对象 - JSON

1.1、JS对象如下所示:

//定义对象
let Student = {
    name:"张三",
    age: 21,
    show:function(){
        document.write(this.name + this.age);
    }
};

//调用对象
Student.show();

1.2、JSON是通过JavaScript对象标记法书写的文本。由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输。

JSON的基础语法:

image.png

如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试一</title>
    <script>
        //定义一个JSON对象
        let Student = '{"name":"酋长","age":21,"adress":["成都","宜宾","泸州"]}';
        //将JSON字符串转换为JSON对象
        let student = JSON.parse(Student);
        //然后调用里面的属性
        document.write(student.name);

    </script>
</head>
<body>

</body>
</html>
2、BOM对象

image.png

2.1、window对象

image.png

常用方法如下所示:

//在浏览器弹出对话框,如果点击确定,那么就会返回true,否则返回false
        let flag = window.confirm("您确认取消吗?");
        document.write(flag);

        //定义函数
        let show = function (){
            document.write("哈哈,我是酋长呀");
        }

        //周期性的执行某个函数
        window.setInterval(show,2000);

        //指定延迟时间然后执行一次
        window.setTimeout(show,1000);

2.2、Location

image.png

 		//获取地址栏的URL
        let name = window.location.href;
        document.write(name);

        //设置地址栏的URL
        window.location.href = "https://www.baidu.com";
        document.write("<\br>")
        document.write(window.location.href);
4、DOM对象

image.png

4.1、DOM标准

image.png

4.2、获取标签对象

image.png

测试代码如下所示:

    //通过ID获取
    let elementById = document.getElementById('cl');
    window.alert(elementById);

    //通过标签获取,返回的是一个数组
    let elementsByTagName = document.getElementsByTagName('div');

    //通过name属性获取,返回的也是一个数组
    let elementsByName = document.getElementsByName('hobby');

    //通过Class属性获取
    let elementsByClassName = document.getElementsByClassName('cls');

通过DOM操作修改数据,如下所示:

    //通过class来获取对象
    let elementsByClassName = document.getElementsByClassName('cls');
    //获取第一个元素对象
    let element = elementsByClassName[0];
    //通过对象调用方法来修改HTML中的内容,是可以识别HTML标签的
    element.innerHTML = "酋长大人,你好呀!";
3、事件监听

image.png

3.1、事件绑定

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试三</title>
</head>
<body>
<input type="button" onclick="show1()" id="btn1" value="事件绑定一">
<input type="button" id="btn2" value="事件绑定二">

</body>
<script>
    //使用第一种事件绑定的方式
    let show1 = function () {
        alert("事件绑定一!")
    }

    function show2() {
        alert("事件绑定二!");
    }

    //使用第二种事件绑定的方式
    document.getElementById('btn2').onclick = function () {
        alert("事件绑定二!");
    }
    
</script>

</html>

3.2、常见事件

image.png

标签:name,基础,JSON,JS,write,window,let,document
From: https://blog.51cto.com/u_15433911/7675483

相关文章

  • Webpack5 基础使用笔记
    [webpack中文文档](概念|webpack中文文档|webpack中文文档|webpack中文网(webpackjs.com)):本质上,webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图(dependencygraph),然后将你......
  • 2023-2024-1 20231404《计算机基础与程序设计》第一周学习总结
    作业信息这个作业属于哪个课程2023-2024-1《计算机基础与程序设计》 这个作业要求在哪里 https://www.cnblogs.com/rocedu/p/9577842.html#WEEK01 这个作业的目标 浏览教材《计算机基础与程序设计》,每章提出问题并在期末解答 作业正文 https://www.cnblogs......
  • 学期:2023-2024-1 学号:20231426 《计算机基础与程序设计》第一周学习总结
    作业信息这个作业属于哪个课程2022-2023-1-计算机基础与程序设计这个作业要求在哪里2022-2023-1计算机基础与程序设计第一周作业这个作业的目标初步熟悉课本以及对所学内容有所思考作业正文教材学习内容总结大体认识了《计算机科学概论》这本书,了解其中......
  • ITIL各版本的一些细节-基础篇
    ITIL并不是标准,而是一套规范和框架,真正的标准是ISO20000,可以说ITIL是“事实上的标准”。信息安全管理不是ITIL的强项,是ITILV2的第十一个流程(并不在十大核心流程里面)。ISO27000是信息安全的标准。ITILV3/2011包含五个模块,其中服务战略、服务设计、服务转换、服务运营是生命周期......
  • 小程序笔记基础篇
    介绍结构组成结构app.jsonapp.json是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等Demo项目里边的app.json配置内容如下:事件属性bingtap的语法格式在小程序中,不存在HTML中的onclick鼠标点击事件,而是通过tap事件来......
  • JS使用a标签下载文件
    Dowload(url,fileName){letxmlResquest=newXMLHttpRequest();xmlResquest.open('GET',url,true);xmlResquest.setRequestHeader('Content-type','application/json');xmlResquest.setRequestHeader(......
  • salesforce零基础学习(一百三十二)Flow新功能: Custom Error
    本篇参考:https://help.salesforce.com/s/articleView?id=sf.flow_ref_elements_custom_error.htm&type=5https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_triggers_order_of_execution.htm我们针对这些次salesforce的releasenote可以看出来,sa......
  • 基础算法:区间合并
    1、区间合并以AcWing.803为例,题目要求如下:给定n个区间[li,ri],要求合并所有有交集的区间。注意如果在端点处相交,也算有交集。输出合并完成后的区间个数。例如:[1,3]和[2,6]可以合并为一个区间[1,6]。输入格式第一行包含整数n。接下来n行,每行包含两个整数l和r。输......
  • SQL语法基础随记
    参考资料:[廖雪峰的官方网站][菜鸟教程]写这个教程还是为了方便自己今后查阅,如果读者希望能够系统地学习SQL语言,还是找一个好的Tutorial看一下比较好。SQL语言的基础就是四个字:增查删改。我直接使用了一个开源的SQL客户端DBeaver作为自己客户端。进去之后它会自......
  • 2023-2024-1 20231414《计算机基础与程序设计》第一周学习总结
    学期(2023-2024-1)学号(20231414)《计算机基础与程序设计》第一周学习总结作业信息这个作业属于哪个课程(2023-2024-1-计算机基础与程序设计)这个作业要求在哪里(2023-2024-1计算机基础与程序设计第一周作业)这个作业的目标<计算机基础与程序设计中的问题提问>作业......