目录
3.JavaScript
3.1 初识 JavaScript
3.1.1 JavaScript 是什么
发展历史
3.1.2 JavaScript 快速上手
3.1.3 引入方式
3.2 基础语法
3.2.1 变量
3.2.2 数据类型
3.2.3 运算符
3.3 JavaScript 对象
3.3.1 数组
3.3.1.1 数组定义
3.3.1.2 数组操作
3.3.2 函数
3.3.2.1 语法格式
3.3.2.2 关于参数个数
3.3.2.3 函数表达式
3.3.3 对象
3.4 JQuery
3.4.1 引入依赖
3.4.2 JQuery 语法
3.4.3 JQuery 选择器
3.4.4 JQuery 事件
3.4.5 操作元素
3.4.5.1 获取/设置元素内容
获取元素内容
演示 $(this).text();
演示 $(this).html();
获取表单内容
3.4.5.2 获取/设置元素属性
获取元素属性
设置元素属性
3.4.5.3 获取/返回 css 属性
获取元素属性
设置元素属性
3.4.5.4 添加元素
3.4.5.5 删除元素
更多实操样例和更为详细的内容参考下面这些博客👇
前端基础——JavaScript（基础语法）（上篇）
前端基础——JavaScript（基础语法）（下篇）
前端基础——JavaScript（WebAPI）（上篇）
前端基础——JavaScript（WebAPI）（下篇）
前端基础——JavaScript（WebAPI）代码案例
注：上述博客中采用的是原生态的 JavaScript 代码，而这里我们会用 JQuery 代替，因为看起来更简洁~~
3.JavaScript
3.1 初识 JavaScript
3.1.1 JavaScript 是什么
JavaScript（简称 JS），是一个脚本语言，解释型或即时编译型的编程语言，虽然它是作为开发Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中
发展历史
JavaScript 之父 布兰登.艾奇（Brendan Eich）
JavaScript 最初只是为了完成简单的表单验证（验证数据合法性），结果后来不小心就火了
1.1994年，网景公司（Netscape）发布了 Navigator 浏览器0.9版，这是历史上第一个比较成熟的网络浏览器，轰动一时，但是这个版本的浏览器只能用来浏览，不具备与访问者互动的能力，网景公司急需一种网页脚本语言，使得浏览器可以与网页互动
2.1995年Sun 公司将 Oak 语言改名为 Java，正式向市场推出，并大肆宣传：一次编写，到处运行，网景公司心动了，决定与 Sun 公司结成联盟。它允许 Java 程序以 applet（小程序）的形式，直接在浏览器中运行，甚至考虑直接将 Java 作为脚本语言嵌入网页，但是这样会让 HTML 网页太复杂了，不得不放弃
3.1995年4月，Brendan Eich 入职了网景公司
4.1995年5月，网景公司做出决策，决定开发一门新的语言，新的语言要“看上去与 Java 足够相似”，但是比 Java 简单，Brendan Eich 被指定为该语言的设计师
5.对 Java 一点兴趣都没有的 Brendan Eich，为了应付公司安排的任务，只用 10天实践就把 JavaScript 设计出来了（由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，JavaScript 写出来的程序混乱不堪）
最初在网景公司，该语言命名为 LiveScript，当时网景公司认为，Java 作为当时最流行的编程语言，带有“Java”的名字有助于这门新生语言的传播，将 LiveScript 命名为 JavaScript
其实 Java 和 JavaScript 之间的语法风格相去甚远
JavaScript 发展历史可以参考阮一峰大神的博客
JavaScript 和 HTML 和 CSS 之间的关系
HTML：网页的结构（骨）
CSS：网页的表现（皮）
JavaScript：网页的行为（魂）
3.1.2 JavaScript 快速上手
1.在 HTML 文件中，写如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert("Hello JavaScript!")
</script>
</body>
</html>
2.运行浏览器
就简单弹了个框，能够和用户进行交互了
3.1.3 引入方式
JS 有 3 种引入方式，语法如下表格所示：
| 引入方式 | 语法描述 | 示例 |
| 行内样式 | 直接嵌入到 html 元素内部 | <input type="button" value="点我一下"οnclick="alert('haha')"> |
| 内部样式 | 定义<script>标签，写到 script 标签中 |
<script> alert("haha"); </script> |
| 外部样式 | 定义<script>标签，通过 src 属性引入外部 js 文件 | <script src="hello.js"></script> |
外部样式示例👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js.js"></script>
</head>
<body>
<script>
</script>
</body>
</html>
alert("弹了一个框");
效果如下👇
3 种引入方式对比：
1.内部样式会出现大量的代码冗余，不方便后期的维护，所以不常用（课堂上为了方便讲解，使用该方式）
2.行内样式，只适合于写简单样式，只针对某个标签生效，缺点是不能写太复杂的 JS
3.外部样式，html 和 JS 实现了完全的分离，企业开发常用方式
3.2 基础语法
JavaScript 虽然一些设计理念和 Java 相去甚远，但是在基础语法层面上还是有一些相似之处的。有了 Java 的基础很容易理解 JavaScript 的一些基本语法
3.2.1 变量
创建变量（变量定义/变量声明/变量初始化），JS 声明变量有 3 种方式
| 关键字 | 解释 | 示例 |
| var | 早期JS中声明变量的关键字，作用域在该语句的函数内 | var name='zhangsan'; |
| let | ES6 中新增的声明变量的关键字，作用域为该语句所在的代码块内 | let name='zhangsan'; |
| const | 声明常量的，声明后不能修改 | const name='zhangsan'; |
注意事项：
1.JavaScript 是一门动态弱类型语言，变量可以存放不同类型的值（动态），比如：
var name = 'zhangsan';
var age = 20;
随着程序的运行，变量的类型可能会发生改变（弱类型）
var a = 10; // 数字
a = "hehe"; // 字符串
Java 是静态强类型语言，在变量声明时，需要明确定义变量的类型，如果不强制转换，类型不会发生变化
2.变量名命名规则：
a.组成字符可以是任何字母、数字、下划线（_）或者美元符号（$）
b.数字不能开头
c.建议使用驼峰命名
3.+ 表示字符串拼接，也就是把两个字符串首尾相接变成一个字符串
4.\\n 表示换行
3.2.2 数据类型
虽然 JS 是弱类型的语言，但是 JS 中也存在数据类型，JS 中的数据类型分为：原始类型 和 引用类型，具体有如下类型
| 数据类型 | 描述 |
| number | 数据.不区分整数和小数 |
| string |
字符串类型 字符串字面值需要使用引号引起来，单引号双引号均可 |
| boolean | 布尔类型.true 真，false 假 |
| undefined | 表示变量未初始化，只有唯一的值 underfined |
使用 typeof 函数可以返回变量的数据类型
<script>
var a = 10;
console.log(typeof a);//number
var b = 'hello';
console.log(typeof b);//string
var c = true;
console.log(typeof c);//boolean
var d;
console.log(typeof d);//undefined
var e = null;
console.log(typeof e);//null
</script>
3.2.3 运算符
JavaScript 中的运算符和 Java 用法基本相同
|
算术运算符 |
+, -, *, /, % |
|
自增自减运算符 |
++, — |
|
赋值运算符 |
=, +=, -=, *=, /=, %= |
|
比较运算符 |
<, >, <=, >=, !=, !==``== 比较相等(会进行隐式类型转换) === 比较相等(不会进行隐式类型转换) |
|
逻辑运算符 |
&&，||，！ |
|
位运算符 |
& 按位与 | 按位或 ~ 按位取反 ^ 按位异或 |
|
移位运算符 |
<< 左移 >> 有符号右移(算术右移) >>> 无符号右移(逻辑右移) |
|
三元运算符 |
条件表达式 ? true_value : false_value |
代码示例：
<script>
var age = 20;
var age1 = "20";
var age2 = 20;
console.log(age == age1);//true，比较值
console.log(age === age1);//false，类型不一样
console.log(age == age2);//true，值和类型都一样
</script>
划重点：
JavaScript 中的 / ：5 / 2 = 2.5，而不是 2
==：比较值
===：比较值+类型
!=：比较值
!==：比较值+类型
3.3 JavaScript 对象
3.3.1 数组
3.3.1.1 数组定义
创建数组有两种方式
1.使用 new 关键字创建
// Array 的 A 要大写
var arr = new Array();
2.使用字面量方式创建[常用]
var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"
注意：JS 额数组不要求元素是相同类型
这一点和 C，C++，Java 等静态类型的语言差别很大，但是 Python，PHP 等动态类型语言也是如此
3.3.1.2 数组操作
1.读：使用下标的方式访问数组元素（从 0 开始）
2.增：通过下标新增，或者使用 push 进行追加元素
3.改：通过下标修改
4.删：使用 splice 方法删除元素
代码示例：
<script>
var arr = [1, 2, 'haha', false];
//读取数组
console.log(arr[0]); //1
//添加数组元素
arr[4] = "add"
console.log(arr[4]);//add
console.log(arr.length);//5，获取数组的长度
//修改数组元素
arr[4] = "update"
console.log(arr[4]);//update
//删除数组元素
arr.splice(4,1);// 第一个参数表示从下标为4的位置开始删除，第二个参数表示要删除的元素个数是 1 个
console.log(arr[4]);//undefined 元素已经删除，如果元素不存在，结果为undefined
console.log(arr.length);//4，获取数组的长度
</script>
注意：
1.如果下标超出范围读取元素，则结果为 undefined
2.不要给数组名直接赋值，此时数组中的所有元素都没了
相当于本来 arr 是一个数组，重新赋值后变成字符串了
var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
arr = '小猫凯迪';
补充：
通过上述分析，可以发现，数组可以当成哈希表用
array2["中文"]="dddd"不会报错，会显示 中文："dddd"，但长度不会改变👇
<script>
let array2 = [10,"a",true];
array2["中文"] = "dddd"
console.log(array2);
</script>
长度不足 200 时，删除 array[200] 没有任何效果👇
<script>
let array2 = [10,"a",true];
array2["中文"] = "dddd"
console.log(array2);
//删除下标为 200 的元素
array2.splice(200,1)
console.log(array2);
</script>
3.3.2 函数
3.3.2.1 语法格式
// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
函数体
return 返回值;
}
// 函数调用
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值
函数定义并不会执行函数体内容，必须要调用才会执行，调用几次就会执行几次
function hello() {
console.log("hello");
}
// 如果不调用函数，则没有执行打印语句
hello();
调用函数的时候进入函数内部执行，函数结束时回到调用位置继续执行，可以借助调试器来观察函数的定义和调用的先后顺序没有要求（这一点和变量不同，变量必须先定义再使用）
// 调用函数
hello();
// 定义函数
function hello() {
console.log("hello");
}
3.3.2.2 关于参数个数
实参和形参之间的个数可以不匹配，但是实际开发一般要求形参和实参个数要匹配，而且函数不用写参数类型
1.如果实参个数比形参个数多，则多出的参数不参与函数运算
sum(10, 20, 30); // 30
2.如果实参个数比形参个数少，则此时多出来的形参值为 undefined
sum(10); // NaN, 相当于 num2 为 undefined
JS 的函数传参比较灵活，这一点和其他语言差别较大，事实上这种灵活性往往不是好事
3.3.2.3 函数表达式
另外一种函数的定义方式
var add = function() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add); // function
此时形如 function(){ } 这样的写法定义了一个匿名函数，然后将这个匿名函数用一个变量来表示
后面就可以通过这个 add 变量来调用函数了
JS 中函数是一等公民，可以用变量保存，也可以作为其他函数的参数或者返回值
3.3.3 对象
在 JS 中，字符串，数值，数组，函数都是对象
每个对象中包含若干的属性和方法
属性：事物的特征
方法：事物的行为
JavaScript 的对象 和 Java 的对象概念上基本一致，只是具体的语法表项形式差别较大
1.使用 字面量 创建对象[常用]
使用 { } 创建对象
var a = {}; // 创建了一个空的对象
var student = {
name: '蔡徐坤',
height: 175,
weight: 170,
sayHello: function() {
console.log("hello");
}
};
使用 { } 创建对象
属性和方法使用键值对的形式来组织
键值对之间使用，分割，最后一个属性后面的，可有可无
键和值之间使用：分割
方法的值是一个匿名函数
使用对象的属性和方法：
// 1. 使用 . 成员访问运算符来访问属性，可以理解成“的”
console.log(student.name);
// 2. 使用 [ ] 访问属性，此时属性需要加上引号
console.log(student['height']);
// 3. 调用方法，别忘记加上 ()
student.sayHello();
2.使用 new Object 创建对象
var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();
注意，使用 { } 创建的对象也可以随时使用 student.name ="蔡徐坤"，这样的方式来新增属性
3.使用 构造函数 创建对象
function 构造函数名(形参) {
this.属性 = 值;
this.方法 = function…
}
var obj = new 构造函数名(实参);
注意：
在构造函数内部使用 this 关键字来表示当前正在构建的对象
构造函数的函数名首字母一般是大写的
构造函数的函数名可以是名词
构造函数不需要 return
创建对象的时候必须使用 new 关键字
this 相当于“我”
使用构造函数重新创建猫咪对象
function Cat(name, type, sound) {
this.name = name;
this.type = type;
this.miao = function () {
console.log(sound); // 别忘了作用域的链式访问规则
}
}
var mimi = new Cat('咪咪', '中华田园喵', '喵');
var xiaohei = new Cat('小黑', '波斯喵', '猫呜');
var ciqiu = new Cat('刺球', '金渐层', '咕噜噜');
console.log(mimi);
mimi.miao();
3.4 JQuery
W3C 标准给我们提供了一系列的函数，让我们可以操作：
网页内容
网页结构
网页样式
但是原生的 JavaScript 提供的 API 操作 DOM 元素时，代码比较繁琐，冗长，我们学习使用 JQuery 来操作页面对象
JQuery 是一个快速、简洁且功能丰富的 JavaScript 框架，于 2006年发布，它封装 JavaScript 常用的功能代码，提供了简洁而强大的选择器和 DOM 操作方法，使用 JQuery 可以轻松地选择和操作 HTML 元素，从而减少开发人员编写的代码量，提高了开发效率，它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。JQuery 对于事件的处理也进行了简化，提供了一个简单的 API 来绑定、触发和处理事件，使开发人员能够更方便地处理各种交互行为
3.4.1 引入依赖
使用 JQuery（第三方的） 需要先引入对应的库
在使用 JQuery CDN 时，只需要在 HTML 文档中加入如下代码
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
参数地址：jQuery CDN
其中，src 属性指明了 JQuery 库所在的 URL，这个 URL 是 CDN（内容分发网络）服务提供商为 JQuery 库提供的一个统一资源定位符
如果需要使用其他版本的 JQuery，可以在官网进行下载
JQuery 官方共提供了 4 种类型的 JQuery 库
uncompressed：非压缩版本（易读，但是文件较大，传输速度慢）
我们 Ctrl + 左键👇
minified：压缩版（不易读，文件小，性能高，开发中推荐）
我们 Ctrl + 左键👇
slim：精简瘦身版，没有 Ajax 和一些特效
slim minified：slim 的压缩版
开发时，建议把 JQuery库 下载到本地，放在当前项目中，引入外部地址，会有外部地址不能访问的风险
下载方式：
1.通过浏览器访问上述链接（Ctrl + 左键）
2.右键→另存为……保存到本地，放在项目中即可👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
</body>
</html>
也可以从其他 CDN 上下载引用 JQuery
比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
</body>
</html>
3.我们直接点击后复制到本地的 script 中也能用👇
但是这样就要访问外网获取，肯定是不如你直接下载到本地中快
另一方面，如果官方把链接改了，就引用失败了
4.当然，对于 JQuery 还有很多其他获取方式，比如：jquery (v4.0.0) – jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN – Bootstrap 中文网开源项目免费 CDN 加速服务 铂特优选
或者：主流JQuery CDN公共库选择及网站加速原理-开发者社区-阿里云
3.4.2 JQuery 语法
JQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作
基础语法
$(selector).action()
$() 是一个函数，它是 JQuery 提供的一个全局函数，用于选择和操作 HTML 元素
Selector 选择器，用来“查询”和“查找”HTML 元素
action 操作，执行对元素的操作
JQuery 的代码通常都写在 document ready 函数中
document：整个文档对象，一个页面就是一个文档对象，使用 document 表示
这是为了防止文档在完全加载（就绪）之间运行 JQuery 代码，即在 文档加载完成后才可以对 页面进行操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
alert('页面加载完成');
});
</script>
</body>
</html>
效果展示👇
如果在文档没有完全加载之前就运行函数，操作可能失败
$(document).ready(function(){
// jQuery functions go here
});
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<button>点我</button>
<script>
$("button").click(function(){
alert("点击弹框");
});
</script>
</body>
</html>
给按钮添加了 click 事件，点击后弹框👇
简洁写法：
$(function(){
// jQuery functions go here
});
3.4.3 JQuery 选择器
我们通过 JQuery 选择器来选择一些 HTML 元素，然后对元素进行操作
JQuery 选择器 基于已经存在的 CSS 选择器，除此之外，还有一些自定义的选择器
JQuery 中所有选择器都以 $ 开头：$()
|
$("*") |
选取所有元素 |
|
$(this) |
选取当前 HTML 元素 |
|
$("p") |
所有 <p> 元素 |
|
$("p:first") |
选取第一个 <p> 元素 |
|
$("p:last") |
最后一个 <p> 元素 |
|
$(".box") |
所有 class="box" 的元素 |
|
$("#box") |
id="box" 的元素 |
|
$(".intro.demo") |
所有 class="intro" 且 class="demo" 的元素 |
|
$("p.intro") |
选取 class 为 intro 的 <p> 元素 |
|
$("ul li:first") |
选取第一个 <ul> 元素的第一个 <li> 元素 |
|
$(":input") |
所有 <input> 元素 |
|
$(":text") |
所有 type="text" 的 <input> 元素 |
|
$(":checkbox") |
所有 type="checkbox" 的 <input> 元素 |
上述语法我们了解即可~~
3.4.4 JQuery 事件
JS 要构建动态页面，就需要感知到用户的行为
用户对于页面的一些操作（点击，选择，修改等）都会在浏览器中产生一个个事件，被 JS 获取到，从而进行更复杂的交互操作
浏览器就是一个哨兵，在侦察敌情（用户行为），一旦用户有反应（触发具体动作），哨兵就会点燃烽火台的狼烟（事件），后方就可以根据狼烟来决定下一步的对敌策略
事件由三部分组成：
1.事件源：哪个元素触发的
2.事件类型：是点击，选中，还是修改？
3.事件处理程序：进一步如何处理，往往是一个回调函数
例如：某个元素的点击事件：
$("p").click(function(){
// 动作发生后执行的代码
});
常见的事件有：
|
文档就绪事件(完成加载) |
$(document).ready(function) |
|
点击事件 |
$(selector).click(function) |
|
双击事件 |
$(selector).dblclick(function) |
|
元素的值发生改变 |
$(selector).change(function) |
|
鼠标悬停事件 |
$(selector).mouseover(function) |
3.4.5 操作元素
3.4.5.1 获取/设置元素内容
三个简单的获取元素内容的 JQuery 方法
|
text() |
设置或返回所选元素的文本内容 |
|
html() |
设置或返回所选元素的内容（包括 HTML 标签） |
|
val() |
设置或返回表单字段的值 |
这三个方法即可以获取元素额内容，又可以设置元素的内容
有参数时，就进行元素的值设置，没有参数时，就进行元素内容的获取
获取元素内容
代码示例：
获取元素内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content">
<span id="ele">页面元素</span>
</div>
<script>
//获取页面元素内容
$("#content").click(function(){
console.log($(this).text());
// 下面这种方式也行
console.log($(this).html());
});
</script>
</body>
</html>
点击后我们发现👇
说明 console.log($(this).text()); 只是打印元素内容，而 console.log($(this).html()); 则是打印标签
修改元素内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content">
<span id="ele">页面元素</span>
</div>
<script>
//获取页面元素内容
$("#content").click(function(){
console.log($(this).text());
// 下面这种方式也行
console.log($(this).html());
// 修改页面元素
$(this).text("我是点击后的内容");
// 下面这种写法效果也是一样的，就不展示了
//$(this).html("我是点击后的内容");
});
</script>
</body>
</html>
效果展示👇
同时，.text()不会解析 html 标签，.htm() 会解析 html 标签👇
演示 $(this).text();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content">
<span id="ele">页面元素</span>
</div>
<script>
//获取页面元素内容
$("#content").click(function(){
console.log($(this).text());
// 下面这种方式也行
console.log($(this).html());
// 修改页面元素
$(this).text("<h1>我是点击后的内容</h1>");//不能解析html元素
});
</script>
</body>
</html>
演示 $(this).html();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content">
<span id="ele">页面元素</span>
</div>
<script>
//获取页面元素内容
$("#content").click(function(){
console.log($(this).text());
// 下面这种方式也行
console.log($(this).html());
// 修改页面元素
$(this).html("<h1>我是点击后的内容</h1>");//会解析html标签
});
</script>
</body>
</html>
获取表单内容
还是用上述 .text() 和 .html() 尝试👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content">
<span id="ele">页面元素</span>
</div>
<input type="text" value="input" id="name">
<script>
//获取页面元素内容
$("#content").click(function(){
console.log($("#name").text());
});
</script>
</body>
</html>
我们发现用 .text() 时打印的是个空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content">
<span id="ele">页面元素</span>
</div>
<input type="text" value="input" id="name">
<script>
//获取页面元素内容
$("#content").click(function(){
console.log($("#name").html());
});
</script>
</body>
</html>
我们发现用 .html() 时打印的也是个空
所以获取 input 标签的元素需要用到 .val()👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content">
<span id="ele">页面元素</span>
</div>
<input type="text" value="input" id="name">
<script>
//获取页面元素内容
$("#content").click(function(){
console.log($("#name").val());
});
</script>
</body>
</html>
赋值的话还是使用 val()，val()里面有值就表示赋值，没值就表示取值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content">
<span id="ele">页面元素</span>
</div>
<input type="text" value="input" id="name">
<script>
//获取页面元素内容
$("#content").click(function(){
console.log($("#name").val());
$("#name").val("input22222222");
});
</script>
</body>
</html>
我们点击一下后发现 input 变成了 input22222222
3.4.5.2 获取/设置元素属性
JQuery attr() 方法用于获取属性值
代码示例：
获取元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content">
<span id="ele">页面元素</span>
</div>
<a href="http://www.baidu.com">百度</a>
<script>
//获取a标签的href属性
console.log($("a").attr("href"));//attr就是属性的简写
</script>
</body>
</html>
设置元素属性
对于 attr()，只有一个参数表示取值，再加一个参数就表示赋值了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content">
<span id="ele">页面元素</span>
</div>
<a href="http://www.baidu.com">百度</a>
<script>
//获取a标签的href属性
console.log($("a").attr("href","http:www.youdao.com"));//attr就是属性的简写
</script>
</body>
</html>
3.4.5.3 获取/返回 css 属性
css() 方法设置或返回被选元素的一个或多个样式属性
代码示例
获取元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div style="font-size:40px;">我是一个div</div>
<script>
// 操作css
console.log($("div").css("font-size"));
</script>
</body>
</html>
设置元素属性
将字体大小修改为 16px👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div style="font-size:40px;">我是一个div</div>
<script>
// 操作css
console.log($("div").css("font-size"));
//修改为16px
$("div").css("font-size","16px");
</script>
</body>
</html>
3.4.5.4 添加元素
添加 HTML 内容
1.append()：在被选元素的结尾插入内容
2.prepend()：在被选元素的开头插入内容
3.after()：在被选元素之后插入内容
4.before()：在被选元素之前插入内容
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<ol>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ol>
<script>
//添加元素
$("ol").append("append");
$("ol").prepend("prepend");
$("ol").after("after");
$("ol").before("before");
</script>
</body>
</html>
3.4.5.5 删除元素
删除元素和内容，一般使用以下两个 JQuery 方法：
1.remove()：删除被选元素（及其子元素）
2.empty()：删除被选元素的子元素
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<ol>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ol>
<script>
// //添加元素
// $("ol").append("append");
// $("ol").prepend("prepend");
// $("ol").after("after");
// $("ol").before("before");
//删除元素
$("ol").remove();
</script>
</body>
</html>
我们发现什么都没有了，连标签都被移除了👇
删除被选元素的子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<ol>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ol>
<script>
// //添加元素
// $("ol").append("append");
// $("ol").prepend("prepend");
// $("ol").after("after");
// $("ol").before("before");
//删除元素
// $("ol").remove();
$("ol").empty();
</script>
</body>
</html>
发现虽然全删除了，但至少 empty() 把标签留下来了👇
