当前位置：首页 > article >正文

javaweb学习——Day2

article 2024/11/26 23:15:44

JS对象

1、array

定义：

var name=new Array(元素列表);

var name=[元素列表]

访问：

name[索引]=值

array的属性和方法

length属性，获取数组长度

foreach():遍历数组元素

x.forEach(element => {

console.log(element);

});

push():向数组里添加元素

x.push(7,true,false);

splice：从数组中删除元素

x.splice(2,2);从第3个元素开始删除2个元素，即删除第4，5个元素

字符串的四个方法

//charAt

获取指定位置的字符

//indexOf

检索字符串的位置

//trim

去除字符串左右两侧的空格

//substring(start,end)

获取子字符串的

json-介绍

由于其语法简单，层次结构鲜明，先多用于作为数据载体，在网络中进行数据传输

前端服务器向后端服务器发送的请求数据格式就是json格式

后端服务器向前端服务器发送的响应数据格式也是json格式

标准json格式

{

"name":"tom",

"value":"1",

"addr":["dji","hfida"]

}

json涉及到的两个方法

JS对象转换成json

JSON.stringify()

json转换成JS对象

JSON.parse()

代码如下

<script>
        var user={
        name:"tom",
        age:10,
        gender:"male",
        eat:function(){
            alert("用膳");
        }
    };
    user.eat();
    var jsonStr=JSON.stringify(user);
    alert(jsonStr);
    var jsObject=JSON.parse(jsonStr);
    alert(jsObject.name);
    </script>

BOM模型：浏览器对象模型，允许javascript与浏览器对话，javascript把浏览的各个部分封装成了对象，用于调用

浏览器窗口对象window:

window对象属性：history,location,navigator,方法：alert(),confirm(),sentinterval(),setTimeout()

alert:警告框

confirm:提示框（取消，确定）

sentinterval:按照指定周期调用函数（循环）

setTimeout:指定时间后调用一次函数

window.alert("欢迎来到DOM学习");
        window.confirm("你确定要删除该对象吗？");
        var i=0;
        setInterval(() => {
            i++;
            console.log("定时器执行了"+i+"次");
        }, 2000);
        setTimeout(() => {
            alert("JS");
        }, 2000);


        alert(location.href);
        location.href="https://www.baidu.com";//当你设置href属性值的时候，浏览器就会自动跳转到该网址

HTML-DOM：

将标记语言的各个组成部分封装成对应的对象：

Document:整个文档对象

Element:元素对象

Attribute:属性对象

Text：文本对象

Comment：注释对象

DOM的作用就是利用JS代码动态的修改网页的结构，可以制作出有趣的动画提高网页的的趣味性和交互性

DOM是万维网定义网页结构的一个标准，在JS语言中，可以用于对网页结构修改。

以下是利用网页元素结构对网页结构获取修改的代码，主要运用document对象实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #h1{
            width:300px;
        }
        .cls{
            color: aqua;
        }
    </style>
</head>
<body>
    <img id="h1" src="../img/1.jpg"><br><br>
    <div class="cls">传智教育</div><br>
    <div class="cls">黑马程序员</div><br>
    
    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏



    <script>
        //1、获取Element元素——id属性
        // var dom1=document.getElementById("h1");
        // alert(dom1);

        //2、获取Element元素——标签
        // var dom1=document.getElementsByTagName("div");
        // for(let i=0;i<dom1.length;i++){
        //     alert(dom1[i]);
        // }

        //1、获取Element元素——name属性
        // var dom1=document.getElementsByName("hobby");
        // for(let i=0;i<dom1.length;i++){
        //     alert(dom1[i]);
        // }

        //1、获取Element元素——class属性
        var dom1=document.getElementsByClassName("cls");
        // for(let i=0;i<dom1.length;i++){
        //     alert(dom1[i]);
        // }


        dom1[0].innerHTML="传智教育666";
    </script>
</body>
</html>

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>
    <style>
        #h1{
            width:300px;
        }
        .cls{
            color: aqua;
        }
    </style>
</head>
<body>
    <img id="h1" src="../img/电灯 (1).png"><br><br>
    <div class="cls">传智教育</div><br>
    <div class="cls">黑马程序员</div><br>
    
    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏



    <script>
        //1、获取Element元素——id属性
        // var dom1=document.getElementById("h1");
        // alert(dom1);

        //2、获取Element元素——标签
        // var dom1=document.getElementsByTagName("div");
        // for(let i=0;i<dom1.length;i++){
        //     alert(dom1[i]);
        // }

        //1、获取Element元素——name属性
        // var dom1=document.getElementsByName("hobby");
        // for(let i=0;i<dom1.length;i++){
        //     alert(dom1[i]);
        // }

        //1、获取Element元素——class属性
        // var dom1=document.getElementsByClassName("cls");
        // for(let i=0;i<dom1.length;i++){
        //     alert(dom1[i]);
        // }


        // dom1[0].innerHTML="传智教育666";


        //1、点亮电灯：src属性
        var img1=document.getElementById("h1");
        img1.src="../img/电灯 (2).png"
        //

        //是所有复选框呈现选中状况
        var ins=document.getElementsByName("hobby");
        for(let i=0;i<ins.length;i++){
            check=ins[i];
            check.checked=true;
        }

        //在每一个div标签元素后加上红色字体的very good
        var div = document.getElementsByTagName("div");
        for (let i = 0; i<div.length; i++) {
            tem=div[i];
            tem.innerHTML+="<font color='red'>verry good</font>"
           
        }
    </script>
</body>
</html>

JS事件监听

JS事件监听的案例