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>`

区别：

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

二、基础语法

2.1 变量

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

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

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

命名规则：

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

2.2 数据类型

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

2.3 运算符

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

2.4 对象

2.4.1 数组

创建数组两种方式：

使用 new 关键字创建：

let arr = new Array();

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

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

数组操作

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

注意事项：

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

2.4.2 函数

语法：

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

注意事项：

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

参数：

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

2.4.3 对象

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

创建对象：

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

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

注意事项：

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

使用 new Object 创建对象

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

使用构造函数创建对象

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 事件

事件组成：

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

常见事件：

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

3.5 操作元素

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

3.6 常用方法

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

一、简述 JS

1.1 引入方式

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

区别：

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

二、基础语法

2.1 变量

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

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

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

命名规则：

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

2.2 数据类型

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

2.3 运算符

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

2.4 对象

2.4.1 数组

创建数组两种方式：

使用 new 关键字创建：

let arr = new Array();

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

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

数组操作

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

注意事项：

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

2.4.2 函数

语法：

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

注意事项：

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

参数：

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

2.4.3 对象

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

创建对象：

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

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

注意事项：

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

使用 new Object 创建对象

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

使用构造函数创建对象

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 事件

事件组成：

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

常见事件：

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

3.5 操作元素

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

3.6 常用方法

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

JavaScript 基础语法与 jQuery 使用指南

一、简述 JS

1.1 引入方式

二、基础语法

2.1 变量

2.2 数据类型

2.3 运算符

2.4 对象

2.4.1 数组

2.4.2 函数

2.4.3 对象

三、jQuery

3.1 引入依赖

3.2 jQuery 语法

3.3 jQuery 选择器

3.4 jQuery 事件

3.5 操作元素

3.6 常用方法

JavaScript 基础语法与 jQuery 使用指南

一、简述 JS

1.1 引入方式

二、基础语法

2.1 变量

2.2 数据类型

2.3 运算符

2.4 对象

2.4.1 数组

2.4.2 函数

2.4.3 对象

三、jQuery

3.1 引入依赖

3.2 jQuery 语法

3.3 jQuery 选择器

3.4 jQuery 事件

3.5 操作元素

3.6 常用方法

更多推荐文章

相关免费在线工具

更多推荐文章

相关免费在线工具