当前位置：首页 > news >正文

【JavaEE进阶】 JavaScript

news 文章来源：https://blog.csdn.net/2401_83227065/article/details/143653318 2025/5/6 15:11:35

本节⽬标

了解什么是JavaScript, 学习JavaScript的常⻅操作, 以及使⽤JQuery完成简单的⻚⾯元素操作.

一. 初识 JavaScript

1.JavaScript 是什么

JavaScript (简称 JS), 是⼀个脚本语⾔, 解释型或即时编译型的编程语⾔. 虽然它是作为开发Web⻚⾯的脚本语⾔⽽出名，但是它也被⽤到了很多⾮浏览器环境中.

发展历史

JavaScript 之⽗布兰登 . 艾奇 (Brendan Eich)

JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果后来不⼩⼼就⽕了.

1994年，⽹景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第⼀个⽐较成熟的⽹络浏览器，轰动⼀时。但是，这个版本的浏览器只能⽤来浏览，不具备与访问者互动的能⼒. ⽹景公司急需⼀种⽹⻚脚本语⾔，使得浏览器可以与⽹⻚互动
1995年Sun公司将Oak语⾔改名为Java, 正式向市场推出, 并⼤肆宣传: ⼀次编写，到处运⾏. ⽹景公司⼼动了，决定与Sun公司结成联盟。它允许Java程序以applet（⼩程序）的形式，直接在浏览器中运⾏, 甚⾄考虑直接将Java作为脚本语⾔嵌⼊⽹⻚, 但是这样会让HTML⽹⻚太复杂了, 不得不放弃
1995年4⽉, Brendan Eich ⼊职了⽹景公司
1995年5⽉，⽹景公司做出决策，决定开发⼀⻔新的语⾔, 新的语⾔要"看上去与Java⾜够相似"，但是⽐Java简单. Brendan Eich被指定为该语⾔的设计师.
对Java⼀点兴趣都没有的Brendan Eich, 为了应付公司安排的任务, 只⽤10天时间就把Javascript设计出来了.(由于设计时间太短, 语⾔的⼀些细节考虑得不够严谨，导致后来很⻓⼀段时间Javascript 写出来的程序混乱不堪)

最初在⽹景公司, 该语⾔命名为 LiveScript, 当时⽹景公司认为, Java作为当时最流⾏的编程语⾔, 带有"Java" 的名字有助于这⻔新⽣语⾔的传播, 将 LiveScript 命名为 JavaScript.

其实 Java 和 JavaScript 之间的语法⻛格相去甚远.

JavaScript 发展历史可以参考阮⼀峰⼤神的博客

http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html

JavaScript 和 HTML 和 CSS 之间的关系

HTML: ⽹⻚的结构(⻣)
CSS: ⽹⻚的表现(⽪)
JavaScript: ⽹⻚的⾏为(魂)

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 引⼊⽅式

JS有3种引⼊⽅式，语法如下表格所⽰：

引⼊⽅式	语法描述	⽰例
⾏内样式	直接嵌⼊到 html 元素内部	<input type="button" value="点我⼀下" οnclick="alert('haha')">
内部样式	定义<script>标签，写到 script 标签中	<script> alert("haha"); </script>
外部样式	定义<script >标签，通过src属性引⼊外部js⽂件	<script src="hello.js"></script>

3种引⼊⽅式对⽐:

1. 内部样式会出现⼤量的代码冗余, 不⽅便后期的维护，所以不常⽤.

2. ⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的jS.

3. 外部样式，html和js实现了完全的分离, 企业开发常⽤⽅式.

二、基础语法

JavaScript 虽然⼀些设计理念和 Java 相去甚远, 但是在基础语法层⾯上还是有⼀些相似之处的.

有了 Java 的基础很容易理解 JavaScript 的⼀些基本语法.

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 表⽰换⾏

2.数据类型

虽然js是弱数据类型的语⾔，但是js中也存在数据类型，js中的数据类型分为：原始类型和引⽤类型，具体有如下类型

数据类型	描述
number	数字. 不区分整数和⼩数.
string	字符串类型.字符串字⾯值需要使⽤引号引起来, 单引号双引号均可.
boolean	布尔类型. true 真, false 假
undefined	表⽰变量未初始化. 只有唯⼀的值 undefined.

使⽤typeof函数可以返回变量的数据类型

<script>let aa=10;console.log(typeof aa);aa="aaa"console.log(typeof aa);aa=true;console.log(typeof aa);let bb;console.log(typeof bb);</script>

3. 运算符

JavaScript 中的运算符和 Java ⽤法基本相同

运算符类型	运算符
算术运算符	+ , - , * , / , %
⾃增⾃减运算符	++ , --
赋值运算符	= , += , -= , *= , /= , %=
⽐较运算符	• < , > , <= , >= , != , !== • == ⽐较相等(会进⾏隐式类型转换) • === ⽐较相等(不会进⾏隐式类型转换)
逻辑运算符	&& , \|\| , !
位运算符	• & 按位与 • \| 按位或 • ~ 按位取反 • ^ 按位异或
移位运算符	• << 左移 • >> 有符号右移(算术右移) • >>> ⽆符号右移(逻辑右移)
三元运算符	条件表达式 ? true_value : false_value

代码⽰例:

  <script>let aa=10;let bb="10";console.log("aa==bb",aa==bb);console.log("aa===bb",aa===bb);</script>

三、 JavaScript对象

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 等动态类型语⾔也是如此.

(2）数组操作

1. 读: 使⽤下标的⽅式访问数组元素(从 0 开始)

2. 增: 通过下标新增, 或者使⽤ push 进⾏追加元素

3. 改: 通过下标修改

4. 删: 使⽤ splice ⽅法删除元素

代码⽰例：

<script>let arr = [1, 2, 'haha', false];//读取数组元素console.log(arr[0]);//添加数组元素arr[4]="sd";console.log(arr);arr[100]="cccc";console.log(arr.length);//修改数组元素arr[0]=10;console.log(arr);//删除数组元素arr.splice(1,1);console.log(arr);//第一个下标为开始删除的下标，第二个参数为删除的个数</script>

注意:

1. 如果下标超出范围读取元素, 则结果为 undefined

2. 不要给数组名直接赋值, 此时数组中的所有元素都没了.

相当于本来 arr 是⼀个数组, 重新赋值后变成字符串了.

2.函数

(1）语法格式

// 创建函数/函数声明/函数定义

function 函数名(形参列表) {

函数体

return 返回值;

}

// 函数调⽤

函数名(实参列表) // 不考虑返回值

返回值 = 函数名(实参列表) // 考虑返回值

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

(2）关于参数个数

实参和形参之间的个数可以不匹配. 但是实际开发⼀般要求形参和实参个数要匹配

1. 如果实参个数⽐形参个数多, 则多出的参数不参与函数运算

sum(10, 20, 30); // 30

2. 如果实参个数⽐形参个数少, 则此时多出来的形参值为 undefined

 sum(10); // NaN, 相当于 num2 为 undefined.

JS 的函数传参⽐较灵活, 这⼀点和其他语⾔差别较⼤. 事实上这种灵活性往往不是好事.

(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.对象

在 JS 中, 字符串, 数值, 数组, 函数都是对象，每个对象中包含若⼲的属性和⽅法.

属性: 事物的特征.
⽅法: 事物的⾏为.

JavaScript 的对象和 Java 的对象概念上基本⼀致. 只是具体的语法表项形式差别较⼤.

1. 使⽤字⾯量创建对象 [常⽤]

使⽤ { } 创建对象

 let student={name:"chenjie",height:180,age:18,sayHello: function() {console.log("hello");}}console.log(student);

使⽤ { } 创建对象
属性和⽅法使⽤键值对的形式来组织.
键值对之间使⽤ , 分割. 最后⼀个属性后⾯的 , 可有可⽆
键和值之间使⽤ : 分割.
⽅法的值是⼀个匿名函数.

使⽤对象的属性和⽅法:

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();

四、JQuery

W3C 标准给我们提供了⼀系列的函数, 让我们可以操作:

⽹⻚内容
⽹⻚结构
⽹⻚样式

但是原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们学习使⽤JQuery来操作⻚⾯对象.

jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 于2006年发布. 它封装JavaScript常⽤的功能代码, 提供了简洁⽽强⼤的选择器和DOM操作⽅法. 使⽤JQuery可以轻松地选择和操作HTML元素，从⽽减少了开发⼈员编写的代码量，提⾼了开发效率, 它提供的 API 易于使⽤且兼容众多浏览器，这让诸如 HTML ⽂档遍历和操作、事件处理、动画和 Ajax 操作更加简单.

JQuery对于事件的处理也进⾏了简化, 提供了⼀个简单的API来绑定、触发和处理事件，使开发⼈员能够更⽅便地处理各种交互⾏为.

1 引⼊依赖

使⽤JQuery需要先引⼊对应的库

在使⽤jQuery CDN时，只需要在HTML⽂档中加⼊如下代码

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

参考地址: https://releases.jquery.com/

其中， src 属性指明了JQuery库所在的URL. 这个URL是CDN(内容分发⽹络)服务提供商为jQuery库提供的⼀个统⼀资源定位符.

如果需要使⽤其他版本的JQuery, 可以在官⽹进⾏下载

Jquery官⽅共提供了4种类型的JQuery库

uncompressed : ⾮压缩版本(易读, 但是⽂件较⼤, 传输速度慢)
minified: 压缩版(不易读, ⽂件⼩, 性能⾼, 开发中推荐)
slim: 精简瘦⾝版, 没有Ajax和⼀些特效
slim minified : slim 的压缩版

开发时, 建议把JQuery库下载到本地, 放在当前项⽬中. 引⼊外部地址, 会有外部地址不能访问的⻛险.

下载⽅式:

通过浏览器访问上述连接
右键 -> 另存为.... 保存到本地, 放在项⽬中即可.

也可以从其他CDN上下载引⽤JQuery

⽐如:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

2 JQuery 语法

jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作

基础语法

 $(selector).action()

$() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素.
Selector 选择器, ⽤来"查询"和"查找" HTML 元素
action 操作, 执⾏对元素的操作

JQuery 的代码通常都写在 document ready 函数中.

document：整个⽂档对象, ⼀个⻚⾯就是⼀个⽂档对象, 使⽤document表⽰.

这是为了防⽌⽂档在完全加载（就绪）之前运⾏ jQuery 代码，即在⽂档加载完成后才可以对⻚⾯进⾏操作。

如果在⽂档没有完全加载之前就运⾏函数，操作可能失败

 $(document).ready(function(){alert("页面加载完成");});

⽰例:

<body><button type="button">点我消失</button><script>$(document).ready(function(){$("button").click(function(){$(this).hide();})});</script> </body>

给按钮添加了click事件, 点击后元素消失.

简洁写法:

$(function(){// jQuery functions go here});

3 JQuery 选择器

我们通过JQuery选择器来选择⼀些HTML元素. 然后对元素进⾏操作.

JQuery选择器基于已经存在的CSS选择器, 除此之外, 还有⼀些⾃定义的选择器.

jQuery 中所有选择器都以 $ 开头：$().

语法	描述
$("*”)	选取所有元素
$(this)	选取当前 HTML 元素
S("p")	所有<p> 元素
$("p:first")	选取第一个<p>元素
$("p:last")	最后一个<p>元素
$(".box")	所有 class="box"的元素
S("#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> 元素

4 JQuery事件

JS 要构建动态⻚⾯, 就需要感知到⽤⼾的⾏为.

⽤⼾对于⻚⾯的⼀些操作(点击, 选择, 修改等) 都会在浏览器中产⽣⼀个个事件, 被 JS 获取到, 从⽽进⾏更复杂的交互操作.

浏览器就是⼀个哨兵, 在侦查敌情(⽤⼾⾏为). ⼀旦⽤⼾有反应(触发具体动作), 哨兵就会点燃烽⽕台的狼烟(事件), 后⽅就可以根据狼烟来决定下⼀步的对敌策略.

事件由三部分组成:

事件源: 哪个元素触发的
事件类型: 是点击, 选中, 还是修改?
事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数.

例如: 某个元素的点击事件:

$("p").click(function(){//动作发⽣后执⾏的代码});

常⻅的事件有:

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

5 操作元素

(1)获取/设置元素内容

三个简单的获取元素内容的JQuery⽅法

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

这三个⽅法即可以获取元素的内容, ⼜可以设置元素的内容.

有参数时, 就进⾏元素的值设置, 没有参数时, 就进⾏元素内容的获取.

代码⽰例:

获取元素内容:

<div id="test"><span>你好</span></div><input type="text" value="hello"><script>$(document).ready(function () {let html = $("#test").html();console.log("html内容为:"+html);let text = $("#test").text();console.log("⽂本内容为:"+text);let inputVal = $("input").val();console.log(inputVal);});</script>

设置元素内容

 <div id="test"></div><div id="test2"></div><input type="text" value=""><script>$(document).ready(function () {$("#test").html('<h1>设置html</h1>');$("#test2").text('<h1>设置text</h1>');$("input").val("设置内容");});</script>

(2)获取/设置元素属性

JQuery attr() ⽅法⽤于获取属性值.

代码⽰例

获取元素属性

<p><a href="https://www.baidu.com" id="baidu">百度</a></p><script>$(function(){let href = $("p a").attr("href")console.log(href);});</script>

设置元素属性

  <p><a href="https://www.baidu.com" id="baidu">百度</a></p><script>$(function(){$("p a").attr("href","https://www.jingdong.com")console.log($("p a").attr("href"));});

(3）获取/返回css属性

css() ⽅法设置或返回被选元素的⼀个或多个样式属性

代码⽰例

获取元素属性

<div style="font-size: 36px;">我是⼀个⽂本</div><script>$(function(){let fontSize = $("div").css("font-size");console.log(fontSize);});</script>

设置元素属性

<div style="font-size: 36px;">我是⼀个⽂本</div><script>$(function(){$("div").css("font-size","24px");});</script>

(4) 添加元素

添加 HTML 内容

append() : 在被选元素的结尾插⼊内容
prepend() : 在被选元素的开头插⼊内容
after() : 在被选元素之后插⼊内容
before() : 在被选元素之前插⼊内容

代码⽰例:

  <ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol><img src="DH.jpg" ><script>$(function () {$("ol").append("<li>append</li>");$("ol").prepend("<li>prepend</li>");$("img").before("图⽚前插⼊");$("img").after("图⽚后插⼊");});</script>

(5) 删除元素

删除元素和内容，⼀般使⽤以下两个 jQuery ⽅法：

remove() : 删除被选元素（及其⼦元素）
empty() : 删除被选元素的⼦元素。

代码⽰例:

    <div id="div1">我是⼀个div</div><button>删除 div 元素</button><script>$(function () {$('button').click(function(){$('#div1').remove();});});

删除被选元素的⼦元素

<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol><button>删除列表元素</button><script>$(function () {$('button').click(function(){$('ol').empty();});});</script>

五、综合案例

1 猜数字

预期效果

代码实现

<!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 type="button" id="reset">重新开始⼀局游戏</button><br>请输⼊要猜的数字：<input type="text" id="number"><button type="button" id="button">猜</button><br>已经猜的次数：<span id="count">0</span><br>结果：<span id="result"></span><script>$(function () {// 随机⽣成⼀个 1-100 的数字var guessNumber = Math.floor(Math.random() * 100) + 1// 0 - 1 之间的数var count = 0;// click: 点击// 事件驱动（Event-Drive）：只要真正发⽣了点击事件时，才执⾏该函数$("#button").click(function () {count++;$("#count").text(count);var userGuess = parseInt($("#number").val());if (userGuess == guessNumber) {$("#result").text("猜对了");$("#result").css("color","gray");} else if (userGuess < guessNumber) {$("#result").text("猜⼩了");$("#result").css("color","blue");} else {$("#result").text("猜⼤了");$("#result").css("color","red");}});$("#reset").click(function(){guessNumber = Math.floor(Math.random() * 100) + 1count = 0;$("#count").text(count);$("#result").text("");$("#number").val("");});});</script>
</body>
</html>

2 表⽩墙

预期效果

需求: 按要求在⽂本框中输⼊内容, 点击提交按钮, 输⼊内容显⽰在⻚⾯下⽅.

代码实现

1. 提前准备如下HTML和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><style>* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;padding: 20px 0;}p {color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;}</style></head><body><div class="container"><h1>表⽩墙</h1><p>输⼊后点击提交, 会将信息显⽰在表格中</p><div class="row"><span>谁: </span><input class="edit" type="text"></div><div class="row"><span>对谁: </span><input class="edit" type="text"></div><div class="row"><span>说什么: </span><input class="edit" type="text"></div><div class="row"><input type="button" value="提交" class="submit"></div></div></body></html>

2. 实现提交

$(function () {// 给点击按钮注册点击事件$(".submit").click(function () {// 1. 获取到编辑框内容var from = $('.edit:eq(0)').val();var to = $('.edit:eq(1)').val();var message = $('.edit:eq(2)').val();console.log(from + "," + to + "," + message);if (from == '' || to == '' || message == '') {return;}
// 2. 构造 html 元素 var html = '<div class="row">' + from + '对' + to + '说: ' + message +'</div>';// 3. 把构造好的元素添加进去$('.container').append(html);// 4. 同时清理之前输⼊框的内容$(":text").val("");});});

六. 总结

1. HTML是⼀种超⽂本标记语⾔, 主要⽤于⻚⾯内容的显⽰和排版.如果需要更漂亮的样式展⽰和⻚⾯效果, 需要搭配CSS和JavaScript来使⽤

2. 学习HTML主要是学习标签, HTML的标签特别多, 了解基本语法即可

3. CSS重点是学习CSS的选择器使⽤

4. JavaScript是⼀个脚本语⾔, 和Java没有关系. JQuery是⼀个JavaScript框架, 使⽤JQuery可以轻松地选择和操作HTML元素, 提⾼我们的开发效率.

5. 前端开发对于后端开发⼈员⽽⾔不是很重要, 不必花费过多时间在这个上⾯. 达到借助⽹络能阅读代码的⽔平即可.

一. 初识 JavaScript

1.JavaScript 是什么

2.JavaScript快速上⼿

3 引⼊⽅式

二、基础语法

1 变量

2.数据类型

3. 运算符

三、 JavaScript对象

1.数组

(1） 数组定义

(2） 数组操作

2.函数

(1） 语法格式

(2） 关于参数个数

(3) 函数表达式

3.对象

1. 使⽤ 字⾯量 创建对象 [常⽤]

2. 使⽤ new Object 创建对象

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

四、JQuery

1 引⼊依赖

2 JQuery 语法

3 JQuery 选择器

4 JQuery事件

5 操作元素

(1)获取/设置元素内容

(2)获取/设置元素属性

获取元素属性

设置元素属性

(3） 获取/返回css属性

获取元素属性

设置元素属性

(4) 添加元素

(5) 删除元素

五、综合案例

1 猜数字

2 表⽩墙

六. 总结

相关文章：

(1）数组定义

(2）数组操作

(1）语法格式

(2）关于参数个数

1. 使⽤字⾯量创建对象 [常⽤]

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

(3）获取/返回css属性