2022-8-24 js

JavaScript脚本语言，解释性

主要给HTML网页增加动态功能

通常的JS是运行在浏览器环境下的，是由浏览器解释执行的，可以控制页面

JS分两种模型：

DOM：文档对象模型，document

BOM：浏览器对象模型，window

nodejs:运行在计算机环境下,不能操作BOM、DOM，但是它可以操作文件，能操作数据库，实际上是一种后端技术.

JS的解释器：不同浏览器有不同的JS解释器，但解释结果一样

Chrome解释器叫V8

node解释器也叫V8

苹果解释器：JavaScriptCore

拓展知识点：ES

EcmaScript （ES）：实际上是一种规范、语法

JavaScript （JS）：是具体的实现，能干活的

ES5 ES6（2022正在流行） ES7 ......语法

JS基本上是Web前端核心！！！

了解前端一定学好JS

JS使用

JS底层

JS解析过程

JS优化

JS的位置

JS只要放在html文件中就好使，在浏览器中写都行，只要有浏览器就能运行

但一般写在body标签的最后部分

因为页面的加载顺序是从上到下的

JS是用来控制页面的显示方式的，需要等待页面加载完成，再执行JS

推荐外部引入的方式：

document.write("我是外面引入的js")

JS常用的变量

自动类型推断弱类型

1.数字类型 number

2.字符串类型 string

3.布尔类型 boolean

4.null 空。定义了，为空

5.undefined 没有定义

6.NaN 非数字

7.数组

8.对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      <script>
        var v1 = 10;
        var v2 = 1.5;
        var v3 = "你好";
        var v4 = '我好';
        var v5 = true;
        var v6 = null;
        // v7未定义
        // document.write(v7)
        // 数组
        var v7 = [1,2,3,4,5];
        // 对象
        var v8 = {
            "username" : "admin",
            "password" : "123456",
            "id" : 1001
        };
        document.write(v8.username);
      </script>
</body>
</html>

Array()

Array()是一个函数，返回值就是一个空数组

JS里没有“方法”这个概念，叫做函数

JS里的方法不是java里的方法，JS里的函数相当于java里的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <script>
        // let arr = new Array();
        // Array(),在JS中函数可以当类用
 
        // 可以理解为JS里的数组就是java中的集合
        let arr = [1,2,3,4,5]
 
        // JS中数组没有下标越界，中间跳过的值为undefined
        arr[100] = 10;
 
        // 数组中可以写标签：例：换行
        document.write(arr + "<br>");
        document.write(arr.length);
     </script>
</body>
</html>

函数（Java中的方法）

可有参数列表，参数可以有多个

Document

常用类型的方法
String：

charAt

indexOf

lastIndexOf

replace

concat

match

substring

substr

toUpperCase

toLowerCase

Math：

random

ceil

floor

round

Date：

getDate(日)

getDay（星期）

getMonth

getYear

getHours

getMinutes

JS真正自己的东西
DOM编程：Document Object Model

文档本身就是一个文档对象document

所有的HTML元素都是元素节点

所有的HTML属性都是属性节点

元素的文本就数文本节点

注释节点（一般不用）

Document

// 根据ID属性获取元素节点
// 通过ID获取到的节点是唯一一个节点
let div = document.getElementById("div1");

// 根据标签名获取节点
// 通过标签获取到的节点是一堆节点
document.getElementsByTagName("div");
console.log(div[0]);

// 根据class样式样式获取元素节点
// 通过class样式获取到的节点是一堆节点
let div1 = document.getElementsByClassName("div1");
console.log(div[0]);

// 新方式
// querySelector找到和传入的选择器匹配的第一个元素节点
// 返回值是一个元素节点
let div2 = document.querySelector("div");
console.log(div);

// querySelectorAll找到和传入的选择器匹配的所有元素节点
// 返回值是一堆元素节点
let divs = document.querySelectorAll("div");
console.log(divs[0]);

let div = document.querySelector("div")

// innerHTML可以获取HTML标签
console.log(div.innerHTML);

// innerText可以获取到文本
console.log(div.innerText);

//改变元素的内容
let div2 = document.querySelector(".div2");
div2.innerHTML = "

我是div2里面的h1

"
div2.innerText = "

我是div2里面的h1

事件

事件就是我们和HTML标签元素发生交互时产生的行为

onclick：单击事件

ondblclicl:双击事件

onblur:失去焦点

onfocus:得到焦点

onchange:改变事件

onload:加载事件（加载的时候干什么）

onmousemove:鼠标跟随事件(跟随鼠标的特效)

当设置了对应的事件之后会执行目标函数

事件

用js代码加标签

将一个按钮的点击事件设置成添加一个标签。

Document

删除一个列表中的元素

Document

posted @ 2022-08-25 21:29 阿萨德菩提子阅读(33) 评论(0) 收藏举报

刷新页面返回顶部

ychptz

2022-8-24 js

我是div2里面的h1

我是div2里面的h1

公告