思途JavaScript学习0721

JavaScript学习要点解析

html：负责框架结构。
css：负责样式修饰。
js：负责行为交互，动态效果。逻辑语言。

JavaScript：动态，脚本语言，解释执行。单线程的语言

变量与数据类型

JavaScript中使用let定义变量，const定义常量。原始数据类型包括：

• Number（数字）
• String（字符串）
• Boolean（布尔值）
• Null（空值）
• Undefined（未定义）
• Symbol（唯一标识符）

let message = 'Hello, World!';
const a = 10;
console.log(null == undefined);  // true

控制台输出：console.log

运算符与类型比较

1. 算法运算符：/ %
2.比较运算符：=== !==。==表示值相等，但忽略类型。===表示值和类型都相等。
3.逻辑运算符：
4.赋值运算符：
5.位运算符：
6.条件运算符：

JavaScript提供严格相等（===）和宽松相等（==）两种比较方式：

let x = 50;
let y = "50";
console.log(x == y);   // true（值相等）
console.log(x === y);  // false（类型不同）

流程控制

JavaScript支持常见的流程控制语句，与java完全相同，如for循环：

for (let i = 1; i <= 9; i++) {
    let out = '';
    for (let j = i; j <= 9; j++) {
        out += `${i} * ${j} = ${i * j} \t`;
    }
    console.log(out);
}

数组操作

数组可以通过多种方式创建和操作：

let arr = [1, 2, 3, 4, 5];
arr.push(6);          // 末尾添加元素
arr.unshift(0);       // 开头添加元素
arr.pop();            // 删除末尾元素
arr.shift();          // 删除开头元素

函数定义

JavaScript函数是一等公民，可以作为参数传递或返回值：

function add(a, b) {
    return a + b;
}
let result = add(5, 10);

// 箭头函数
let fun = (x, y) => x + y;

快速排序实现

JavaScript中可以实现经典算法如快速排序：

function quicksort(arr, left, right) {
    if (left >= right) return;
    const randomIndex = Math.floor(Math.random() * (right - left + 1)) + left;
    [arr[left], arr[randomIndex]] = [arr[randomIndex], arr[left]];
    let pivot = arr[left];
    let pl = left;
    let pr = right;
    while (pl < pr) {
        while (pl < pr && arr[pr] >= pivot) pr--;
        while (pl < pr && arr[pl] <= pivot) pl++;
        if (pl < pr) [arr[pl], arr[pr]] = [arr[pr], arr[pl]];
    }
    [arr[left], arr[pl]] = [arr[pl], arr[left]];
    quicksort(arr, left, pl - 1);
    quicksort(arr, pl + 1, right);
}

对象与原型

JavaScript基于原型的面向对象编程：

let o = {
    name: '张三',
    age: 30,
    sayhello: function() {
        console.log(this.name + " sayhello");
    }
};
o.sayhello();

自执行函数

 // 自执行函数
    (function (name) {
        console.log("Hello, " + name);
    })("JavaScript");

 箭头函数

    //箭头函数
    let fun = (x, y) => x + y;
    console.log(fun(9, 10));

DOM操作  Document Object Model , 文档对象模型

1. DOM元素获取与基础操作

let dom1 = document.getElementById("d1"); // 通过ID获取元素
console.log(dom1.innerText); // 输出文本内容
console.log(dom1.innerHTML); // 输出HTML内容
dom1.innerText = "我被innerText给修改了"; // 修改文本
dom1.style.backgroundColor = "blue"; // 修改样式
dom1.remove(); // 移除元素

关键点：

• getElementById()：通过ID获取唯一元素
• innerText 与 innerHTML 区别：
  • innerText：返回可见文本
  • innerHTML：返回包含HTML标签的内容
• remove()：从DOM树中删除元素

2. 高级查询方法

//查询DOM
    //document.querySelector()  查到第一个满足css选择器的元素
    //document.querySelectorAll(x)  查询所有满足css选择器的元素
    let dom2 = document.querySelector("#d1");
    console.log(dom1 === dom2);


let dom2 = document.querySelector("#d1"); // CSS选择器获取首个匹配元素
console.log(dom1 === dom2); // true (相同元素)

let allItems = document.querySelectorAll("li"); // 获取所有匹配元素

查询 DOM 元素

• document.querySelector(selector)：返回文档中匹配指定 CSS 选择器的第一个元素。
• document.querySelectorAll(selector)：返回文档中匹配指定 CSS 选择器的所有元素（NodeList）。

选择器规则：

• #id：ID选择器
• .class：类选择器
• parent > child：子元素选择器
• :nth-child(n)：位置选择器

3. 元素创建与插入

// 创建新元素
let link = document.createElement("a");
link.innerText = "去百度";
link.setAttribute("href", "http://baidu.com");
link.setAttribute("target", "_blank");

// 插入元素
let container = document.querySelector("#output");
container.appendChild(link); // 追加到末尾

// 在指定位置插入
let newItem = document.createElement("li");
newItem.innerText = "2.5";
let targetItem = document.querySelector("ul>li:nth-child(3)");
let ul = document.querySelector("ul");
ul.insertBefore(newItem, targetItem); // 在第三个元素前插入

创建与插入 DOM 元素

• document.createElement(tagName)：创建一个指定标签名的 HTML 元素。
• setAttribute(name，value): 为元素添加或修改属性。
• document.querySelector(id)：找到目标元素位置，返回文档中匹配指定 CSS 选择器的第一个元素。
• parentElement.appendChild(chil。dElement)：将子元素追加到父元素的末尾。
• parentElement.insertBefore(newElement, targetElement)：在父元素的指定子元素前插入新元素。

4. 元素属性修改

let element = document.querySelector("#ddd");
element.id = "aaa"; // 修改ID
element.className = "mydiv"; // 设置类名
element.classList.add("blue"); // 添加新类
element.setAttribute("data-info", "C"); // 设置自定义属性

// 内容修改对比
element.innerText = "文本内容"; // 纯文本
element.innerHTML = "<b>HTML内容</b>"; // 解析HTML标签

类操作：

• classList.add() / classList.remove()：动态增删类名

删除 DOM 元素

• element.remove()：直接从 DOM 中移除该元素。
• parentElement.removeChild(childElement)：通过父元素移除指定的子元素。

5. DOM树遍历

let item = document.querySelector("ul>li:nth-child(2)>a");

// 四向遍历
console.log(item.parentElement); // 父元素
console.log(item.parentElement.children); // 所有子元素
console.log(item.parentElement.previousElementSibling); // 前一个兄弟元素
console.log(item.parentElement.nextElementSibling); // 后一个兄弟元素

层级关系遍历

• 父元素：element.parentElement
• 子元素：element.children（返回类数组的 HTMLCollection，可通过索引访问）
• 前一个兄弟元素：element.previousElementSibling
• 后一个兄弟元素：element.nextElementSibling

6.事件处理机制

绑定事件的三种方式

1. 行内事件：直接在 HTML 标记中使用 onxxx（如 onclick），但会覆盖同类型事件。
2. JS 属性绑定：通过 element.onxxx = function 动态绑定，同样会覆盖同类型事件。
3. addEventListener：支持多次添加同一类型事件（语法：element.addEventListener(eventType, callback)）。

基础事件绑定：

// HTML内联事件
<button onclick="change()">点击</button>

// JS绑定事件
element.ondblclick = function() {
  this.style.backgroundColor = "green";
};

高级事件监听（推荐）：

// 键盘控制示例
let move = document.querySelector(".move")
    document.addEventListener("keydown", function (e){
        //console.log(e)
        let left = move.offsetLeft;
        let top = move.offsetTop

        switch(e.key){
            case "w" :{
                top -= 10
                move.style.top = top + "px"
                break
            }
            case "s":{
                top += 10
                move.style.top = top + "px"
                break
            }
            case "a": {
                left -=10
                move.style.left = left + "px"
                break
            }
            case "d" :{
                left +=10
                move.style.left = left + "px"
                break
            }
            default :{
                console.log("不执行任何操作")
            }
        }
    });

// 元素拖拽实现
let mousemove = document.querySelector(".mousemove")
    let dragging = false
    let rl,rt; //鼠标落点距离块元素的距离
    document.addEventListener("mousedown", function(e){
        dragging = true;
        rt = e.pageY - mousemove.offsetTop;
        rl = e.pageX - mousemove.offsetLeft;
    });
    
    mousemove.addEventListener("mousemove", function (e){
        if(dragging){
            let top = e.pageY - rt;
            let left = e.pageX - rl;
            mousemove.style.top = top + "px";
            mousemove.style.left = left + "px";
        }
    });

    document.addEventListener("mouseup", function(){
        dragging = false
    })

事件处理要点：

1. 使用 addEventListener 优于 onclick 属性
2. 事件对象 e 包含关键信息：
   • e.key：键盘按键
   • e.clientX/Y：鼠标坐标
   • e.target：事件触发元素
3. 拖拽实现三要素：
   • mousedown 启动拖拽
   • mousemove 更新位置
   • mouseup 结束拖拽

总结流程图

graph TD
A[获取DOM] --> B(查询)
A --> C(创建)
B --> D[getElementById]
B --> E[querySelector]
C --> F[createElement]
D --> G[修改属性]
E --> G
F --> G
G --> H[样式操作]
G --> I[内容操作]
G --> J[属性操作]
H --> K[事件绑定]
I --> K
J --> K
K --> L[用户交互]
L --> M[更新DOM]