JavaScript基础用法

1. 变量的定义与使用

定义变量

使用 var 关键字声明变量，可以在代码中使用这些变量进行存储和操作。以下是一些变量的示例：

// 声明一个整型变量

var a = 10;  // 整数类型

// 声明一个浮点型变量

var b = 20.1;  // 浮点数类型

// 声明字符串变量，可以使用单引号或双引号

var c = "aaa";  // 字符串类型

var d = 'aaad'; // 字符串类型

// 声明布尔类型变量

var e = true;  // 布尔类型，表示真

var f = false; // 布尔类型，表示假

// 声明一个未赋值的变量，默认值为undefined

var g;  // 变量g已声明但未赋值

变量类型

在 JavaScript 中，变量的类型可以分为基本类型和复合类型。

1. 基本类型
   1. 字符串：由一对引号包围的文本，可以是单引号或双引号。
   2. 数字：包括整数和浮点数。
   3. 布尔类型：只有两个值 true 和 false。
   4. undefined：声明了一个变量但未赋值。
   5. null：表示一个存在的量，但该量没有值。
2. 复合类型
   1. 数组：使用方括号 [] 创建的集合，可以通过索引访问。

// 声明一个数组，包含多种类型的数据

var arr = [

    10,                // 数字

    10.6,             // 浮点数

    "aaa",            // 字符串

    'sdd',            // 字符串

    true,             // 布尔值

    undefined,        // undefined

    null,             // null

    [20, 'ddd'],      // 嵌套数组

    {                 // 对象

        name: "张三",

        age: 20,

        marry: false

    },

    function() {      // 函数

        alert(1);

    },

    function f() {    // 命名函数

        alert(2);

    }

];

控制台打印

使用 console.log() 方法可以将变量的值打印到控制台，便于调试。

// 打印数组到控制台

console.log(arr);

// 打印数组中不存在的索引（undefined）

console.log(arr[10]);  // undefined，因为没有索引10的元素

// 调用数组中存储的函数

arr[10]();  // 调用未定义的函数会报错

console.log(arr[9]);   // 打印对象

arr[9]();              // 调用对象中的方法

console.log(arr[2]);   // 打印字符串 "aaa"

console.log(arr[7]);   // 打印数组 [20, 'ddd']

console.log(arr[7][0]); // 打印数组中的第一个元素 20

console.log(arr[8].name); // 打印对象的 name 属性 "张三"

2. 对象的定义与使用

定义对象

对象是无序的属性集合，属性由 key: value 对组成。对象的属性可以是任何数据类型，包括函数。

var obj = {

    name: "张三",             // 字符串

    age: 20,                 // 数字

    marry: false,            // 布尔值

    play: ["足球", "篮球", "乒乓球"],  // 数组

    friend: {               // 嵌套对象

        name: "李四",

        age: 21

    },

    eat: function f() {      // 方法

        alert(1);

    },

    run: function() {        // 方法

        alert(2);

    }

};

访问对象属性

可以通过点语法或方括号语法访问对象的属性。

console.log(obj);            // 打印整个对象

console.log(obj.eat);        // 打印 eat 方法

console.log(obj.run);        // 打印 run 方法

obj.eat();                   // 调用 eat 方法，弹出 alert

obj.run();                   // 调用 run 方法，弹出 alert

console.log(obj.name);       // 打印 "张三"

console.log(obj.age);        // 打印 20

console.log(obj.play);       // 打印 ["足球", "篮球", "乒乓球"]

console.log(obj.play[0]);    // 打印 "足球"

console.log(obj.friend.age);  // 打印 21

3. 函数的定义与调用

定义函数

函数是可以重复调用的代码块，可以使用 function 关键字声明。

// 命名函数

function f(a, b) {

    console.log(a);         // 打印参数 a

    console.log(b);         // 打印参数 b

    console.log("函数执行啦");

}

// 调用函数

f();                      // 没有参数，打印 undefined

f(10, "aaa");           // 传入参数 10 和 "aaa"

匿名函数

匿名函数没有名称，通常赋值给变量使用。

var cc = function f(a, b) {

    console.log(a);

    console.log(b);

    console.log("函数执行啦");

};

cc(5, "hello");         // 调用匿名函数，打印 5 和 "hello"

// 定义一个匿名函数

var aa = function(a, b) {

    console.log(a);

    console.log(b);

    console.log("匿名函数执行啦");

};

aa(5, 500);              // 调用匿名函数，打印 5 和 500

4. DOM 操作

DOM 介绍

DOM（Document Object Model）是文档对象模型，提供了一种结构化的方式来访问和操作 HTML 文档。

查找元素

使用多种方法查找元素：

1. 根据 ID 查找

var aa = document.getElementById("aa");  // 查找 ID 为 aa 的元素

console.log(aa);

aa.onclick = function() {                   // 添加点击事件

    alert(1);

};

1. 根据类名查找

var aa = document.getElementsByClassName("aa"); // 查找所有类为 aa 的元素

for (var i = 0; i < aa.length; i++) {

    aa[i].onclick = function() {

        this.style.display = "none";  // 点击后隐藏元素

    };

}

1. 根据标签名查找

var aa = document.getElementsByTagName("div"); // 查找所有 div 元素

1. 使用选择器查找

var aa = document.querySelector(".aa");        // 查找第一个类为 aa 的元素

var aaAll = document.querySelectorAll(".aa");  // 查找所有类为 aa 的元素

关系查找

通过父子关系查找元素。

1. 查找父元素

var aa = document.querySelector("#aa");

console.log(aa.parentNode);  // 打印父元素

1. 查找子元素

var children = aa.childNodes; // 获取所有子节点

console.log(children);

1. 获取第一个和最后一个孩子

console.log(aa.firstChild);       // 获取第一个子节点

console.log(aa.lastElementChild);  // 获取最后一个子元素

获取与修改内容和属性

可以使用 innerHTML 和 innerText 获取和修改元素的内容，style 属性用于修改样式。

var aa = document.getElementById("aa");

console.log(aa.innerHTML);        // 获取 HTML 内容

aa.innerHTML = "<h1>aaa</h1>";   // 修改 HTML 内容

aa.style.background = "red";     // 修改背景颜色

aa.style.color = "yellow";       // 修改文本颜色

aa.value = "fghjkl";              // 修改 input 的值

添加和删除元素

1. 创建元素

var newNode = document.createElement("h1"); // 创建新的 h1 元素

newNode.innerText = "新添加的元素";           // 设置文本内容

1. 添加元素

var oldNode = document.querySelector("ul");

oldNode.appendChild(newNode);                // 在 ul 末尾添加新元素

1. 删除元素

var p = document.querySelector("p");

p.parentElement.removeChild(p);              // 删除 p 元素

5. 事件处理

可以使用事件处理器响应用户的交互。

var button = document.getElementById("button");

button.onclick = function() {

    alert("按钮被点击");  // 当按钮被点击时弹出提示

};