JavaWeb开发4

时间：2024-10-20 08:42:43

JS对象 Array

Array对象用于定义数组

  • var 变量名=new Array(元素列表)；

  • var 变量名=[元素列表]

访问

  • arr[索引]=值；

注意：JS中数组相对于Java中集合，数组的长度是可变的，JS是弱类型，所以可以存储任意类型的数据

属性

length 设置或返回数组中元素的数量

方法

forEach() 遍历数组中每个有值的元素，并调用一次传入的函数

push() 将新元素添加到数组的末尾，并返回新的长度

splice() 从数组中删除元素

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈</title>
​
</head>
<body>
​
</body>
​
<script>
    // var arr=new Array(1,2,3,4);
    // var arr =[1,2,3,4];
    // console.log(arr[0]);
​
    // // 长度可变，类型可变
    // var arr=new Array(1,2,3,4);
    // arr[10]=10;
    // arr[9]='a';
    // arr[8]=true;
    // console.log(arr);
​
    // var arr=[1,2,3,4];
    // for (let index=0;index<arr.length;index++){
    //     console.log(arr[index]);
    // }
​
    var arr=[1,2,3,4];
    // arr.forEach(function (e) {
    //     console.log(e);
    //
    // })
​
    // // 箭头函数
    // arr.forEach((e)=>{
    //     console.log(e);
    // })
    // arr.push(1);
    // console.log(arr);
    arr.splice(2,2);
    console.log(arr);
​
</script>
​
​
</html>

JS对象 String

创建方式

  • var 变量名=new String("XX");

  • var 变量名="XX";

属性

length 字符串长度

方法

charAt() 返回在指定位置的字符

indexOf() 检索字符串

trim() 去除字符串两边的空格

substring() 提取字符串中两个指定的索引号之间的字符

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈</title>
​
</head>
<body>
​
</body>
​
<script>
    // var str=new String("SS");
    var str="  aa hjjg";
    console.log(str);
​
    console.log(str.length);
​
    console.log(str.charAt(1));
​
    console.log(str.indexOf("j"));
​
    var str1=str.trim();
    console.log(str1);
​
    // 含头不含尾
    console.log(str.substring(0,5));
​
</script>
​
​
</html>

JS对象 JSON

var 对象名={

属性名1：属性值1，

属性名2：属性值2，

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

}；

调用格式

对象名.属性名；

对象名.函数名；

概念：通过JavaScript对象标记法书写的文本

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

定义

var 变量名={"key":value1,"key":"value2"};

value数据类型为：

  • 数字，整型或浮点数

  • 字符串，在双引号中

  • 逻辑值，true/false

  • 数组，方括号中

  • 对象，花括号中

  • null

JSON字符串转为JS对象

var jsObject=JSON.parse(userStr);

JS对象转为JSON字符串

var jsonStr=JSON.stringify(jsObject);

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈</title>
​
</head>
<body>
​
</body>
​
<script>
    // // 自定义对象
    // var user={
    //     name:"asd",
    //     age:10,
    //     sex:"male",
    //     // eat:function () {
    //     //     alert("eat");
    //     // }
    //     eat(){
    //         alert("eat");
    //     }
    // }
    // alert(user.name);
    // user.eat();
​
    // 定义JSON
    var jsonstr='{"name":"jerry","age":18}';
    var obj=JSON.parse(jsonstr);
    alert(obj.name);
    alert(JSON.stringify(obj));
</script>
​
​
</html>

BOM

浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象

组成

  • Window：浏览器窗口对象

  • Navigator：浏览器对象

  • Screen：屏幕对象

  • History：历史记录对象

  • Location：地址栏对象

Window

浏览器窗口对象

直接使用window,其中window可以省略

属性

  • history：对History对象的只读引用

  • location：用于窗口或框架的Location对象

  • navigator：对Navigator对象的只读引用

方法

  • alert()：显示带有一段消息和一个确认按钮的警告框

  • confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框

  • setInterval()：按照指定的周期(毫秒计)来调用函数或计算表达式

  • setTimeout()：在指定的毫秒数后调用函数或计算表达式

Location

地址栏对象

获取

location.属性；

属性

href：设置或返回完整的url

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈</title>
​
</head>
<body>
​
</body>
​
<script>
    // window.alert("hello");
    // alert("123");
​
    // var flag=confirm("are you ok?");
    // alert(flag);
​
    // var i=0;
    // setInterval(
    //     function () {
    //         i++;
    //         console.log(i);
    //     },2000
    // );
​
    // setTimeout(function () {
    //     alert("js");
    // },3000);
​
    alert(location.href);
    location.href="https://www.itcast.cn";
</script>
​
​
</html>

DOM

文档对象模型

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

  • Document：整个文档对象

  • Element：元素对象

  • Attribute：属性对象

  • Text：文本对象

  • Comment：注释对象

JavaScript通过DOM，就能对HTML进行操作

  • 改变HTML元素的内容

  • 改变HTML元素的样式CSS

  • 对HTML DOM事件作出反应

  • 添加和删除HTML元素

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的

  • 根据id属性值获取，返回单个对象

    var h1=document.getElementById('h1');

  • 根据标签名称获取，返回对象数组

    var divs=document.getElementByTagName('div');

  • 根据name属性值获取，返回对象数组

    var divs=document.getElementByName('hobby');

  • 根据class属性值获取，返回对象数组

    var divs=document.getElementByClassName('cls');

    <!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈</title>
​
</head>
<body>
    <div class="cls">船只教育</div>
    <div class="cls">黑马程序员</div>
​
    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏
</body>
​
<script>
    // var divs=document.getElementsByTagName("div");
    // for(let i=0;i<divs.length;i++){
    //     alert(divs[i]);
    // }
​
    // var ins=document.getElementsByName("hobby");
    // for(let i=0;i<ins.length;i++){
    //     alert(ins[i]);
    // }
​
    // var ins=document.getElementsByClassName("cls");
    // for(let i=0;i<ins.length;i++){
    //     alert(ins[i]);
    // }
​
    var ins=document.getElementsByClassName("cls");
    var div1=ins[0];
    div1.innerHTML="666";
</script>
​
​
</html>

相关文章