1. JavaScript 简介

有风63
53 阅读4分钟

JavaScript（简称 JS）是一种广泛应用于网页开发的脚本语言。需要特别说明的是，JavaScript 与 Java 在语法和用途上并无直接关联，取名相似主要是由于 Java 在当时具有较高的知名度。

在前端开发中，HTML、CSS 和 JavaScript 共同构成了网页开发的三大核心技术：

  • HTML：负责网页的结构和内容（相当于骨架）
  • CSS：负责网页的样式和外观（相当于皮肤）
  • JavaScript：负责网页的交互和动态功能（相当于灵魂）

2. 基础语法

2.1 变量声明

JavaScript 提供三种变量声明方式：

关键字作用域特性示例
var函数作用域存在变量提升var name = '张三'
let块级作用域推荐使用let name = '张三'
const块级作用域常量，不可重新赋值const PI = 3.14

JavaScript 是动态弱类型语言，变量可以存储任意类型的数据：

javascript

<script>
    let a = '张三';
    console.log(a);  // 输出：张三
    
    a = 20;
    console.log(a);  // 输出：20
    
    a = true;
    console.log(a);  // 输出：true
</script>

变量命名规范：

  • 可包含字母、数字、下划线、美元符号
  • 不能以数字开头
  • 推荐使用驼峰命名法
  • 使用 + 进行字符串拼接

2.2 数据类型

JavaScript 数据类型分为原始类型和引用类型：

数据类型描述示例
number数字类型（整数/小数）let age = 25
string字符串类型let name = "张三"
boolean布尔类型let isActive = true
undefined未定义的变量let value;
null空值let data = null

使用 typeof 操作符检测数据类型：

javascript

let a = 12;
console.log(typeof a);        // "number"

let b = '张三';
console.log(typeof b);        // "string"

let c = true;
console.log(typeof c);        // "boolean"

let d = undefined;
console.log(typeof d);        // "undefined"

let e = null;
console.log(typeof e);        // "object"（历史遗留问题）

2.3 运算符

常用运算符分类：

运算符类型运算符说明
算术运算符+ - * / %基本数学运算
自增自减++ --递增递减
赋值运算符= += -=赋值操作
比较运算符== === != !==== 值相等，=== 值和类型都相等
逻辑运算符`&&!`与或非
三元运算符? :条件表达式

比较运算符重点说明：

javascript

console.log(5 == "5");    // true（类型转换）
console.log(5 === "5");   // false（严格相等）

3. JavaScript 对象

3.1 数组（Array）

创建数组：

javascript

// 方式一：构造函数
let arr1 = new Array();

// 方式二：字面量（推荐）
let arr2 = [];
let arr3 = [1, '张三', true];  // 支持混合类型

数组操作：

javascript

let arr = [1, 2, 3];

// 读取元素
console.log(arr[1]);          // 2

// 添加元素
arr[3] = '李四';
arr.push('5');               // 末尾添加

// 遍历数组
for(let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

// 修改元素
arr[0] = '王五';

// 删除元素（从索引0开始删除2个元素）
arr.splice(0, 2);

// 注意事项：
let wrongExample = [1, 2, 3];
wrongExample = "字符串";     // 错误：数组被覆盖为字符串

3.2 函数（Function）

函数定义和调用：

javascript

// 函数声明
function add(a, b) {
    return a + b;
}

// 函数调用
let result = add(5, 3);
console.log(result);          // 8

// 参数处理特性
function example(a, b) {
    console.log(a, b);        // 实参不足时，b为undefined
}
example(10);                  // 输出：10 undefined

函数表达式：

javascript

let sum = function() {
    let total = 0;
    for(let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
};

console.log(sum(1, 2, 3));    // 6
console.log(sum(10, 20));     // 30

3.3 对象（Object）

创建对象的三种方式：

  1. 字面量方式：

javascript

let student = {
    name: '姚宇',
    age: 20,
    sayHello: function() {
        console.log('你好！');
    }
};
student.sayHello();
  1. new Object() 方式：

javascript

let student2 = new Object();
student2.name = '姚宇';
student2.weight = 70;
student2['height'] = 175;        // 另一种属性赋值方式
student2.sayHello = function() {
    console.log('Hello!');
};
  1. 构造函数方式：

javascript

function Student(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log('大家好！');
    };
}

let student3 = new Student('姚宇', 20);
student3.sayHello();

4. jQuery 基础

jQuery 是一个快速、简洁的 JavaScript 框架，简化了 HTML 文档遍历、事件处理、动画等操作。

4.1 引入 jQuery

通过 CDN 引入 jQuery：

html

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

4.2 基本语法

javascript

$(selector).action()
  • $()：jQuery 函数，用于选择元素
  • selector：选择器，用于查找 HTML 元素
  • action()：要执行的操作

4.3 常用选择器

选择器描述示例
$("*")选择所有元素$("*").hide()
$("p")选择所有 <p> 元素$("p").click()
$(".class")选择指定 class 的元素$(".menu").show()
$("#id")选择指定 id 的元素$("#submit").click()
$("p:first")选择第一个 <p> 元素$("p:first").text()

4.4 事件处理

事件三要素：

  1. 事件源：触发事件的元素
  2. 事件类型：点击、悬停、输入等
  3. 事件处理程序：触发事件后执行的函数

示例：点击事件

html

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <p>点击这个段落</p>
    <script>
        $("p").click(function() {
            alert("你点击了段落！");
        });
    </script>
</body>
</html>

常用事件类型：

  • click() - 点击事件
  • dblclick() - 双击事件
  • change() - 值改变事件
  • mouseover() - 鼠标悬停事件
  • ready() - 文档加载完成事件

4.5 元素操作

获取和设置内容：

javascript

// 获取内容
let htmlContent = $("#div1").html();    // 获取HTML内容
let textContent = $("#div1").text();    // 获取文本内容
let inputValue = $("#input1").val();    // 获取表单值

// 设置内容
$("#div2").html("<strong>加粗文本</strong>");
$("#div3").text("纯文本内容");
$("#input2").val("默认值");

属性操作：

javascript

// 获取属性
let href = $("a").attr("href");

// 设置属性
$("a").attr("href", "https://www.example.com");
$("a").attr("target", "_blank");

CSS 操作：

javascript

// 获取样式
let fontSize = $("#div1").css("font-size");

// 设置样式
$("#div1").css("color", "red");
$("#div1").css({
    "font-size": "16px",
    "background-color": "#f0f0f0"
});

元素添加：

javascript

// 在列表末尾添加
$("ul").append("<li>新项目</li>");

// 在列表开头添加
$("ul").prepend("<li>第一个项目</li>");

// 在元素前后添加
$("#div1").before("<div>前面的内容</div>");
$("#div1").after("<div>后面的内容</div>");

元素删除：

javascript

// 删除元素及其子元素
$("#div1").remove();

// 只删除子元素，保留父元素
$("#div1").empty();

总结

通过掌握 JavaScript 和 jQuery 的基础知识，我们已经能够为静态网页添加丰富的交互功能。JavaScript 提供了核心的编程能力，而 jQuery 则大大简化了 DOM 操作和事件处理的复杂度。

在实际开发中，建议：

  1. 优先使用 let 和 const 声明变量
  2. 理解 JavaScript 的异步特性
  3. 熟练运用 jQuery 选择器和常用方法
  4. 注意代码的可读性和可维护性

这些前端技术的学习为我们后续深入 Web 开发奠定了坚实基础。

avatar
文章
阅读
粉丝