JavaScript 基础语法与 jQuery 使用指南

一、简述 JS

JavaScript（简称 JS），是一个脚本语言，解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。

1.1 引入方式

引入方式	语法描述	示例
行内样式	直接嵌入到 html 元素内部	<input type="button" value="点我一下" onclick="alert('haha')">
内部样式	定义 <script> 标签，写到 script 标签中	<script> alert("haha"); </script>
外部样式	定义 <script> 标签，通过 src 属性引入外部 js 文件	<script src="hello.js"> </script>

区别：

1. 内部样式会出现大量的代码冗余，不方便后期的维护，所以不常用。
2. 行内样式，只适合于写简单样式。只针对某个标签生效。缺点是不能写太复杂的 JS。
3. 外部样式，html 和 js 实现了完全的分离，企业开发常用方式。

二、基础语法

2.1 变量

创建变量 (变量定义/变量声明/变量初始化), JS 声明变量有 3 种方式。

关键字	解释	示例
var	ES5 中声明变量的关键字，作用域在该语句的函数内	var name = 'zhangsan';
let	ES6 中新增的声明变量的关键字，作用域为该语句所在的代码块内	let name = 'zhangsan';
const	声明常量的，声明后不能修改	const name = 'zhangsan';

JavaScript 是一门动态弱类型语言，变量可以存放不同类型的值 (动态)。

命名规则：

1. 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
2. 数字不能开头
3. 建议使用驼峰命名

2.2 数据类型

数据类型	描述
number	数字。不区分整数和小数。
string	字符串类型。字符串字面值需要使用引号引起来，单引号双引号均可。
boolean	布尔类型。true 真，false 假
undefined	表示变量未初始化。只有唯一的值 undefined。

2.3 运算符

运算符类型	运算符
算术运算符	+ - * / %
自增自减运算符	++ --
赋值运算符	= += -= *= /= %=
比较运算符	< > <= >= ==比较相等 (会进行隐式类型转换) ===比较相等 (不会进行隐式类型转换)
逻辑运算符	`&&
位运算符	`& 按位与
移位运算符	<< 左移 >> 有符号右移 (算术右移) >>> 无符号右移 (逻辑右移)
三目运算符	条件表达式 ? true_value: false_value

2.4 对象

2.4.1 数组

创建数组两种方式：

1. 使用 new 关键字创建：

let arr = new Array();

2. 使用字面量方式创建 [常用]

let arr = [];
let arr2 = [1, 2, 'haha', false];

数组操作

1. 读：使用下标的方式访问数组元素 (从 0 开始)
2. 增：通过下标新增，或者使用 push 进行追加元素
3. 改：通过下标修改
4. 删：使用 splice 方法删除元素

注意事项：

1. 如果下标超出范围读取元素，则结果为 undefined
2. 不要给数组名直接赋值，此时数组中的所有元素都没了。相当于本来 arr 是一个数组，重新赋值后变成字符串了。

2.4.2 函数

语法：

// 创建函数/函数声明/函数定义
function 函数名 (形参列表) {
    函数体
    return 返回值;
}
// 函数调用 函数名 (实参列表)
// 不考虑返回值  返回值 = 函数名 (实参列表)
// 考虑返回值 

注意事项：

1. 函数定义并不会执行函数体内容，必须要调用才会执行。调用几次就会执行几次。
2. 调用函数的时候进入函数内部执行，函数结束时回到调用位置继续执行。可以借助调试器来观察。
3. 函数的定义和调用的先后顺序没有要求。(这一点和变量不同，变量必须先定义再使用)

参数：

1. 实参和形参之间的个数可以不匹配。但是实际开发一般要求形参和实参个数要匹配
2. 如果实参个数比形参个数多，则多出的参数不参与函数运算
3. 如果实参个数比形参个数少，则此时多出来的形参值为 undefined

2.4.3 对象

对象：在 JS 中，字符串，数值，数组，函数都是对象。每个对象中包含若干的属性和方法。 属性：事物的特征。 方法：事物的行为。

创建对象：

1. 使用 字面量 创建对象 [常用]

var a = {};// 创建了一个空的对象
var student = { 
    name: '示例用户', 
    height: 25, 
    weight: 2.5,
    sayHello: function(){ 
        console.log("你干嘛");
    }
};

注意事项：

• 使用 { } 创建对象
• 属性和方法使用键值对的形式来组织。
• 键值对之间使用 , 分割。最后一个属性后面的 , 可有可无
• 键和值之间使用 : 分割。
• 方法的值是一个匿名函数。

2. 使用 new Object 创建对象

var student = new Object(); 
student.name = "示例用户"; 
student.height = 25; 
student['weight'] = 2.5; 
student.sayHello = function(){ 
    console.log("你干嘛");
}

3. 使用 构造函数 创建对象

function 构造函数名 (形参){
    this.属性 = 值;
    this.方法 = function
}
let obj = new 构造函数名 (实参);

注意事项：

• 在构造函数内部使用 this 关键字来表示当前正在构建的对象。
• 构造函数的函数名首字母一般是大小写的。
• 构造函数的函数名可以是名词。
• 构造函数不需要 return
• 创建对象的时候必须使用 new 关键字。

三、jQuery

jQuery 是一个快速、简洁且功能丰富的 JavaScript 框架，于 2006 年发布。它封装 JavaScript 常用功能代码，提供了简洁而强大的选择器和 DOM 操作方法。使用 jQuery 可以轻松地选择和操作 HTML 元素，从而减少了开发人员编写的代码量，提高了开发效率，它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。jQuery 对于事件的处理也进行了简化，提供了一个简单的 API 来绑定、触发和处理事件，使开发人员能够更方便地处理各种交互行为。

3.1 引入依赖

<script src="JQuery 的 URL"></script>

3.2 jQuery 语法

基础语法：

$(selector).action()

解释：

• $() 是一个函数，它是 jQuery 提供的一个全局函数，用于选择和操作 HTML 元素。
• Selector 选择器，用来'查询'和'查找'HTML 元素
• action 操作，执行对元素的操作

3.3 jQuery 选择器

我们通过 jQuery 选择器来选择一些 HTML 元素。然后对元素进行操作。jQuery 选择器 基于已经存在的 CSS 选择器，除此之外，还有一些自定义的选择器。jQuery 中所有选择器都以 $ 开头：$().

语法	描述
$("*")	选取所有元素
$(this)	选取当前元素
$("p")	所有 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("p:last")	最后一个 <p> 元素
$(".box")	所有 class='box' 的元素
$("#box")	id='box' 的元素
$(".intro.demo")	选取 class 为 intro 且 demo 的元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$(":input")	所有 <input> 元素
$(":text")	所有 type='text' 的 <input> 元素
$(":checkbox")	所有 type='checkbox' 的 <input> 元素

3.4 jQuery 事件

事件组成：

1. 事件源：哪个元素触发的
2. 事件类型：是点击，选中，还是修改？
3. 事件处理程序：进一步如何处理。往往是一个回调函数。

常见事件：

事件	代码
文档就绪事件 (完成加载)	$(document).ready(function)
点击事件	$(selector).click(function)
双击事件	$(selector).dblclick(function)
元素的值发生改变	$(selector).change(function)
鼠标悬停事件	$(selector).mouseover(function)

3.5 操作元素

jQuery 方法	说明
text()	设置或返回所选元素的文本内容
html()	设置或返回所选元素的内容（包括 HTML 标签）
val()	设置或返回表单字段的值

3.6 常用方法

1. jQuery 的 attr() 方法用于获取属性值。
2. css() 方法设置或返回被选元素的一个或多个样式属性
3. 添加 HTML 内容
   3.1. append() : 在被选元素的结尾插入内容
   3.2. prepend(): 在被选元素的开头插入内容
   3.3. after(): 在被选元素之后插入内容
   3.4. before(): 在被选元素之前插入内容
4. 删除元素和内容
   4.1. remove() : 删除被选元素（及其子元素）
   4.2. empty(): 删除被选元素的子元素。