本节⽬标
- 了解什么是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); // 302. 如果实参个数⽐形参个数少, 则此时多出来的形参值为 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. 前端开发对于后端开发⼈员⽽⾔不是很重要, 不必花费过多时间在这个上⾯. 达到借助⽹络能阅读代码的⽔平即可.