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

山西农业大学20241011

article 2024/10/11 19:50:24

03-JAVASCRIPT

- 一.数组
- 二.BOM
- - 1. window对象
  - 2. location对象
  - 3. history对象
  - 4. navigator对象
  - 5. screen对象
  - 6. cookie对象
- 三.DOM操作
- - 1. 概述
  - 2. 查找元素
  - - 2.1 id方式
    - 2.2 标签名方式
    - 2.3 class名方式
    - 2.4 css选择器方式

一.数组

<script>
    // 1. 创建数组, 通过数组字面量
    //           0     1   2    3   4
    var emps = ['zs','ls','ww',20,true];
    console.log(emps);
    // 2. 元素的访问   数组[下标]
    // 下标从0开始的整数, 如果下标不存在则返回undefined
    console.log(emps[1]);
    let laptop=[];
    laptop[0] = '小米';
    laptop[1] = '华为';
    laptop[2] = '外星人';
    console.log(laptop);
    laptop[1] = '苹果';
    console.log(laptop);

    // 3. 数组的长度
    // 数组.length 获取数组元素的个数
    console.log(laptop.length);  //3
    // 为laptop数组末尾添加元素  数组[laptop.length] = 值
    laptop[laptop.length] = '戴尔';

    // 4.内置构造函数
    var arr = new Array('a','b','c','d');
    console.log(arr);

    var arr1 = new Array(3); // 初始化数组的长度为3,可以添加更多个元素
    arr1[0] = 'mysql';
    arr1[1] = 'js';
    arr1[2] = 'java';
    arr1[3] = 'nodejs';
    arr1[4] = 'Vue';

    console.log(arr1);

    // 5.数组分类
    // 索引数组 : 以0及以上的整数作为下标
    // 关联数组 : 以字符串为下标, 需要单独添加元素
    var person = [];
    person['name'] = '张三';
    person['gender'] = '男';
    person.age = 35;
    console.log(person);

    // 6.数组的遍历
    // 索引数组 --- for循环
    for (let i=0;i<arr1.length;i++){
        console.log(arr1[i]);
    }
    // 关联数组? --- for in循环
    for (var k in person){
        // k代表数组的下标 : 数字 或 字符串
        console.log(k);
        console.log(person[k]);
    }
    // 7.API
    // toString() 将数组转为字符串
    console.log(arr.toString());
    // join(str) 将数组转为字符串,可以设置字符串之间的分隔符
    console.log(arr.join('/'));
    // reverse() 翻转数组中的元素
    arr1.reverse();  // 修改原数组的数据
    console.log(arr1);
    // sort() 对数组进行排序, 默认按照编码排序
    var arr2 = [23,9,78,6,35];
    arr2.sort((a,b) => a-b);  // 升序排序
    arr2.sort((a,b) => b-a);  // 降序排列
    console.log(arr2);

    // concat(arr2,arr3...) 拼接多个数组, arr2和arr3表示要拼接的数组,
    // 返回拼接后的数组
    arr.concat(arr1);
    console.log(arr.concat(arr1,arr2));
    let arrCon = arr.concat(arr1,arr2)
    // slice(start,end) 截取数组元素(含头不含尾)
    console.log(arrCon.slice(5,7));
    // splice(start,count,V1,V2...)
    // 删除数组中的元素;
    // start: 开始的下标, 下标为负数表示倒数
    // count: 删除的数量, count为空,删除到最后
    // V1,V2...: 表示删除后补充的元素,返回删除的元素, 原数组发生变化
    console.log("删除前:"+arrCon);
    console.log("删除的数据:"+arrCon.splice(5,2));
    console.log("删除后:"+arrCon);

    // indexOf() 查找数组中是否包含某个元素, 返回找到的第一个的下标, 如果找不到,返回-1
    console.log(arrCon.indexOf('java'));  // -1
    console.log(arrCon.indexOf('mysql'));  // 6

    // push():往数组的末尾添加元素, 返回数组长度
    // pop():删除数组末尾的一个元素, 返回删除的元素
    // unshift(): 往数组的开头添加一个元素, 返回数组长度
    // shift(): 删除数组开头的一个元素, 返回删除的元素


</script>

二.BOM

BOM: 是指浏览器对象模型, 浏览器对象模型是提供了独立于内容, 可以和浏览器窗口进行互动的对象结构; BOM操指与浏览器窗口进行互动的操作
常见的BOM对象:

window
location
history

1. window对象

window对象是一个全局对象, 可以提供一些全局的属性和方法,包括操作浏览器窗口的属性和方法

alert(): 显示一个警示框
confirm() : 显示一个确认框.返回用户选择的布尔值
prompt() : 显示一个输入框,返回用户输入的值

	window.alert("123");
    let name = window.prompt("请输入姓名");
    console.log(name);
    let bool = window.confirm("请确认");
    console.log(bool);  //点击确认:true; 点击取消: false

window常用属性

// 获取浏览器可视区域的宽度和高度
    console.log(window.innerHeight);
    console.log(window.innerWidth)
    // 获取浏览器窗口整体高度和宽度(包含窗口的装饰;工具栏,滚动条)
    console.log(window.outerHeight);
    console.log(window.outerWidth);

window.open() : 可以用来打开一个新的浏览器窗口或标签页
window.close() : 可以用来关闭当前窗口(一般只能关闭由window.open()打开的窗口)
setTimeout(); 在指定时间后执行一次函数
setInterval(): 每隔一段时间重复执行函数

2. location对象

location对象: 提供了对当前文档(网页)URL的访问和操作; 通过location对象, 开发者可以获取当前页面的URL信息, 重定向到新页面, 或者重新加载当前页面

<script>
    console.log(location);
    // 1.location.href 获取浏览器地址栏的信息
    console.log(location.href);
    // 2.location.href="url" 跳转到指定路径的网页
    // 定时器
    setTimeout(function () {
        location.href="https://www.baidu.com"
    },2000); //2s后跳转到百度页面
    // 3. 获取本地ip localhost
    console.log(location.hostname);
    // 4. 获取运行环境 localhost:63342
    console.log(location.host); 
</script>

3. history对象

History对象: 用于处理浏览器的历史记录, 它允许开发者不重新加载页面的情况下, 管理用户的导航历史

<h3>History对象</h3>
<a href="./12BOM操作_location.html">跳转到12</a>
<script>
    console.log(history);
</script>

4. navigator对象

5. screen对象

6. cookie对象

三.DOM操作

1. 概述

DOM: Document Object Model 文档对象模型
页面的HTML代码是如何运行在浏览器中的

2. 查找元素

2.1 id方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM_查找元素_id方式</title>
</head>
<body>
<div>
<!--    id:唯一标识, 要求不重复-->
    <span id="s1">Hello 山西</span>
    <span>Hello World</span>
</div>
<script>
    // 通过id查找指定元素
    console.log(document.getElementById("s1"));
    // 简化: id使用频率非常高,系统会自动完成查找
    console.log(s1);// 直接打印id名称. 不推荐

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

2.2 标签名方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM_查找元素_标签名</title>
</head>
<body>
<div>
    <div>
        <span>111</span>
    </div>
    <div>
        <span>222</span>
    </div>
</div>
<script>
    //通过标签名查找元素
    //注意:Elements 代表复数,因为同标签名的元素可以由多个
    console.log(document.getElementsByTagName('span'));
</script>
</body>
</html>

2.3 class名方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM_查找元素_class方式</title>
</head>
<body>
<div class="danger">111</div>
<div>222</div>
<div class="danger">333</div>
<script>
    // 通过class名查找
    console.log(document.getBElementsyClassName("danger"));
</script>
</body>
</html>

2.4 css选择器方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM_查找元素_CSS选择器</title>
</head>
<body>
<div id="left">left</div>
<div id="right">right</div>
<div class="jump">
    <a href="">百度</a>
</div>
<script>
    // 元素选择器
    // querySelector() 返回满足条件的第一个元素
    console.log(document.querySelector('div'));// left
    // querySelectorAll() 返回满足条件的所有元素 NodeList
    console.log(document.querySelectorAll('div'));
    // 后代选择器
    console.log(document.querySelector('.jump>a'));
    // 注意: querySelecto没有满足条件的元素,返回null
    // querySelectorAll没有满足条件的元素,返回空数组
</script>
</body>
</html>