目录
一. JavaScript 基本概念
二. JavaScript 基本语法
1. 三种引入方式
(1) 行内样式
(2) 内部样式
(3) 外部样式
2. 基础语法
(1) 变量
(2) 数据类型
(3) 运算符
3. JS 对象
(1) 数组
<1> 创建数组
<2> 数组操作
(2) 函数
<1> 普通函数
<2> 匿名函数
三. JQuery
1. 引入依赖
2. 基础语法
3. JQuery选择器
4. JQuery事件
5. JQuery常用方法
一. JavaScript 基本概念
JavaScript是一种轻量级的编程语言, 是一种用于网页开发的脚本语言, 可以在网页上实现复杂的交互功能, 包括创建动态内容, 控制页面行为, 响应用户操作等.
JavaScript和Java名字很像, 但是这两种编程语言实际上没有任何关系. 就好比雷锋和雷峰塔的关系一样, 除了名字相似外就没什么关系了.
[注]: HTML, CSS, JavaScript 三者的关系可以这样理解: HTML(网页的结构 "骨") --> CSS(网页的表现 "皮") --> JavaScript(网页的行为 "魂").
二. JavaScript 基本语法
1. 三种引入方式
与CSS类似, JavaScript的引入方式同样是三种: 行内样式, 内部样式, 外部样式.
(1) 行内样式
(2) 内部样式
将JavaScript语句写到Script标签内. 整体放到html文件的<head>标签内.
(3) 外部样式
2. 基础语法
(1) 变量
JS中, var 和 let 用来声明变量; const 用来声明常量.
[注]: JS是一种动态弱类型语言, 变量可以存放不同类型的值.
(2) 数据类型
<1> number : 数字 (不区分整数和小数)
<2> string : 字符串 (单引号和双引号均可)
<3> boolean : 布尔类型 (取值为true或false)
<4> undefined : 变量未初始化(或未定义)
(3) 运算符
基本和其他编程语言一致.
只有一个特殊的地方: "==" 表示比较内容相等(会进行隐式类型转换). "===" 表示比较相等(不会进行隐式类型转换). 比如: 22 和 "22" , 用"=="比较是相等的(因为会自动转换成同一数据类型), 但是用"==="来比较的话就不相等了.
3. JS 对象
(1) 数组
<1> 创建数组
<2> 数组操作
[注]: 如果下标超出范围读取元素, 不会报数组越界异常, 而是得到结果undefined.
(2) 函数
<1> 普通函数
<2> 匿名函数
(3) 对象
JS中的对象和Java中的对象基本一样. 里面有属性和方法
如上图, 创建了一个student对象. 包含name, age, weight 属性, 还有sayHello方法.
除了上述的创建方式, 我们还可以通过 new Object() 的方法来创建一个对象.
三. JQuery
JQuery是一个简洁, 功能丰富的JavaScript框架. 它封装了JS常用的功能代码, 并且提供了简洁强大的选择器和DOM操作方法. 提高了开发效率.
1. 引入依赖
在使用JQuery之前, 需要先引入对应的库.
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>2. 基础语法
JQuery的基础语法是 选择某些HTML元素, 并对选中的元素进行某些操作.
$(selector).action();$() 是一个函数, 用于选择和操作HTML元素.
selector 是选择器, 表示被选中的元素.
action() 是将要对元素执行的操作.
3. JQuery选择器
下面是常用的JQuery选择器.
4. JQuery事件
我们先看个例子:
选中元素后, 后面写要判断的事件, 如果事件发生, 执行后面写的代码. 上面代码中的是点击事件, 还有很多其他事件:
5. JQuery常用方法
(1) text() : 设置或返回所选元素的文本内容.
(2) html() : 设置或返回所选元素的内容(包括html标签).
(3) var() : 设置或返回表单字段的值.
(4) attr() : 设置或返回属性值.
(5) css() : 设置或返回被选元素的一个或多个样式属性.
(6) append() : 在被选元素的结尾插入内容 (加到元素内部的末尾).
(7) prepend() : 在被选元素的开头插入内容 (加到元素内部的开头).
(8) after() : 在被选元素之后插入内容 (加到元素之外(标签外面)).
(9) before() : 在被选元素之前插入内容 (加到元素之外(标签外面)).
(10) remove() : 删除被选元素及其子元素.
(11) empty() : 删除被选元素的子元素.
