JavaScript 入门

1. HTML、CSS、JavaScript 之间的关系

HTML：网页的结构（骨）

CSS：网页的表现（皮）

JavaScript：网页的行为（魂）

2. 引入方式

3种引入方式，语法如下：

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

三种样式对比：

1. 内部样式会出现大量的代码冗余，不方便后期的维护，所以不常用

2. 行内样式，只适合写简单样式，针对某个标签生效，不能写太复杂的 js

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

3. 基础语法

3.1 变量

创建变量（变量定义/变量声明/变量初始化），3 种方式：

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

tip:

1) JavaScript 是一门动态弱类型语言，变量可以存放不容类型的值（动态），如：

javascript">var name = 'zhangsan';
var age = 20;

随着程序的运行，变量的类型可能会发生改变（弱类型）

javascript">var a = 10;  // 数字
a = "hello"; // 字符串

Java 是静态强类型语言，在变量声明时，需要明确定义变量的类型，如果不强制转换，类型不会发生改变

2) 变量命名规则

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

3) + 表示字符串拼接，就是把两个字符串首尾相接变成一个字符串

4) \n 表示换行

3.2 数据类型

虽然 JS 是弱数据类型的语言，但是 JS 中也存在数据类型，JS 中的数据类型分为：原始类型和引用类型，如下：

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

适用 typeof 函数可以返回变量的数据类型，如下：

3.3 运算符

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

其中比较运算符有所区别，如下：

javascript">    <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>

4. JavaScript 对象

4.1 数组

4.1.1 数组定义

创建数组有两种方式

1. 使用 new 关键字创建

javascript">// Array 的 A 要大写
var arr = new Array();

2. 使用字面量方式创建（常用）

javascript">var arr = [];
var arr2 = [1, 2, 'haha', fakse]; // 数组中保存的内容称为“元素”

tip：JS 的数组不要求元素是相同类型

4.1.2 数组操作

读：使用下标的方式访问数组元素（从 0 开始）

增：通过下标新增，或者使用 push 进行追加元素

改：通过下标修改

删：使用 splic 方法删除元素

javascript">    <script>var arr = [1, 2, 'haha', false];// 读取数组console.log(arr[0]); // 1// 添加元素arr[4] = "add";console.log(arr[4]); // addconsole.log(arr.length); // 获取数组长度，5// 修改数组元素arr[4] = "update";console.log(arr[4]); // update// 删除数组元素arr.splice(4, 1); //第一个参数表示从下标为 4 的位置开始删除，第二个参数表示要删除的元素个数是 1 个console.log(arr[4]); // undefined 元素已经删除，如果元素不存在，结果为 undefinedconsole.log(arr.length); // 4</script>

tip：

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

不要给数组名直接赋值，此时数组中的所有元素都没了（相当于本来 arr 是一个数组，重新赋值后变成字符串了）

javascript">var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
arr = '小猫凯迪';

4.2 函数

4.2.1 语法格式

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

函数定义并不会执行函数体内容，必须调用才会执行，调用几次就会执行几次

javascript">function hello() {console.log("hello");
}// 如果不调用函数，则没有执行打印语句
hello();

调用函数的时候进入函数内部执行，函数结束时回到调用位置继续执行

函数的定义和调用的先后顺序没有要求（变量必须先定义再使用）

4.2.2 关于参数个数

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

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

javascript">sum(10, 20, 30); // 30

2. 如果实参个数比形参个数少，则此时多出来的形成那只为 undefined

javascript">sum(10); // NaN，相当于 第二个形参为 undefined

4.2.3 函数表达式

另外一种函数的定义方式

javascript">    <script>var add = function() {var sum = 0;for (var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;}console.log(add(10, 20)); // 30console.log(add(1, 2, 3, 4)); // 10console.log(typeof add); // function</script>

4.3 对象

在 JS 中，字符串、数值、数组、函数都是对象

每个对象中包含若干的属性和方法（属性：事物的特征；方法：事物的行为）

1. 使用字面量创建对象（常用）

使用 { } 创建对象

javascript">var a = {}; // 创建了一个空的对象var student = {name: '张三',hright: 175,weight: 170,sayHello: function() {console.log("hello");}
};

属性和方法使用键值对的形式来组织
键值对之间使用 , 分隔，最后一个属性后面的 , 可有可无
键和值之间使用 : 分隔
方法的值是一个匿名函数

使用对象的属性和方法：

javascript">// 1. 使用 . 成员访问运算符来访问属性 "."可以理解成 "的"
console.log(student.name);
// 2. 使用 [] 访问属性，此时属性需要加上引号
console.log(student['hright']);
// 3. 调用方法需要加上 ()
student.sayHello();

2. 使用 new Objecct 创建对象

javascript">var student = new Object(); // 和创建数组类似
student.name = "张三"
student.height = 175;
studnet['weight'] = 170;
student.sayHello = function() {console.log("hello");
}console.log(student.name);
console.log(student['weight']);
student.sayHello();

tip：使用 { } 创建的对象也可以随时使用 student.name = "张三"; 这样的方式来新增属性

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

javascript">functong 构造函数名(形参) {this.属性 = 值;this.方法 = function...
}var obj = new 构造函数名(实参)

tip：

在构造函数内部使用 this 关键字来表示当前正在构建的对象
构造函数的函数名首字母一般是大写的
构造函数的函数名可以是名词
构造函数不需要 return
创建对象时必须使用 new 关键字

4. JQuery

4.1 引入依赖

使用 JQuery 需要先引入对应的库

在使用 JQuery CDN 时，只需要在 HTML 文档中加入如下代码

javascript"><script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

其中 src 属性指明了 JQuery 库所在的 URL，这个 URL 时 CDN（内容分发网络）服务提供商为 JQuery 库提供的一个统一资源定位符

如需其他版本，可在官网下载：JQuery

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

uncompressed:⾮压缩版本(易读,但是⽂件较⼤,传输速度慢)

minified: 压缩版(不易读,⽂件⼩,性能⾼,开发中推荐)

slim: 精简瘦⾝版,没有Ajax和⼀些特效

slim minified : slim 的压缩版

开发时，建议把 JQuery 库下载到本地，放在当前项目中，因为引入外部地址，可能会有外部地址不能访问的风险

下载方式：

通过浏览器访问上述链接
右键 -> 另存为 -> 保存到本地，放在项目中即可

4.2 JQuery 语法

JQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作

基础语法：

javascript">$(selector).action()

$() 是一个函数，它是 JQuery 提供的一个全局函数，用于选择和操作 HTML 元素

selector 选择器，用来“查询”和“查找” HTML 元素

action 操作，执行对元素的操作

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

document：整个文档对象，一个页面就是一个文档对象，使用 document 表示

这是为了防止文档在完全加载（就绪）之前运行 JQuery 代码，即在文档加载完成后才可以对页面进行操作

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

javascript">$(document).ready(dunction() {// JQuery functions go here
});

示例：

javascript">    <button type="button">点我消失</button><script src="D:\haha\idea_code\Maven\jquery-3.7.1.min.js"></script><script>$(document).ready(function(){$('button').click(function() {$(this).hide();    });});</script>

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

简洁写法：

javascript">$(function() {// JQuery functions go here
});

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> 元素

4.4 JQuery 事件

JS 要构建动态页面，就需要感知到用户的行为，用户对于页面的一些操作（点击、选择、修改等）都会在浏览器中产生一个事件，被 JS 获取到，从而进行更复杂的交互操作

事件由三部分组成：

1. 事件源：哪个元素触发的

2. 事件类型：是点击、选中，还是修改

3. 事件处理程序：进一步如何处理，往往是一个回调函数

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

javascript">$("p").click(function() {// 动作发生后执行的代码
});

常见的事件：

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

4.5 操作元素

4.5.1 获取/设置元素内容

三个方法：

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

有参数时，就进行元素的值设置；无参数时，就进行元素内容的获取

示例：

获取元素内容：

javascript">    <div id="test"><span>你好</span></div><input type="text" value="hello"><script src="D:\haha\idea_code\Maven\jquery-3.7.1.min.js"></script><script>$(document).ready(function() {var html = $("#test").html();console.log("html内容为：" + html);var text = $("#test").text();console.log("文本内容为：" + text);var inputVal = $("input").val();console.log(inputVal);});</script>

设置元素内容：

javascript">    <div id="test"></div><div id="test2"></div><input type="text" value=""><script src="D:\haha\idea_code\Maven\jquery-3.7.1.min.js"></script><script>$(document).ready(function () {$("#test").html('<h1>设置html</h1 > ');$("#test2").text('<h1>设置text</h1 > ');$("input").val("设置内容");});</script>

4.5.2 获取/设置元素属性

JQuery attr() 方法用于获取属性值，示例：

获取元素属性：

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

设置元素属性：

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

tip：

attr 只有属性名的话，返回属性的内容；既有属性名，又有值，则给该属性赋值

4.5.3 获取/返回 CSS 属性

css() 方法设置或返回被选元素的一个或多个样式属性，示例：

获取元素属性：

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

设置元素属性：

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

tip：

css 参数只有 css hey，则返回样式的值；若既有 key，又有 value，则设置样式的值

4.5.4 添加元素

添加 HTML 内容

append()：在被选元素的结尾插入内容

prepend()：在被选元素的开头插入内容

after()：在被选元素之后插入内容

before()：在被选元素之前插入内容

示例：

javascript">    <ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol><img src="D:\haha\FrontEndCodeTest\HTML\rose.jpg" height="100px"><script>$(function() {$("ol").append("<li>append<li>")$("ol").prepend("<li>prepend<li>")$("img").before("图片前插入")$("img").after("图片后插入")})</script>

4.5.5 删除元素

删除元素和内容，一般使用以下两个 JQuery 方法：

remove()：删除被选元素（及其子元素）

empty()：删除被选元素的子元素

示例：

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

删除被选元素的子元素

javascript">    <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>

5. 综合案例

5.1 猜数字

预期效果：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猜数字游戏</title>
</head>
<body><button id="reset">重新开始一局游戏</button><br>请输入要猜的数字: <input type="text" id="guessNumer"><input type="button" value="猜" id="guess"><br>已经猜的次数: <span id="count">0</span> <br>结果: <span id="result"></span>// 这里是我电脑上的 JQuery 本地目录，需要改成自己的<script src="D:\haha\idea_code\Maven\jquery-3.7.1.min.js"></script><script>//生成随机数 1-100let rightNumer = Math.floor(Math.random() *100) +1;console.log(rightNumer);let count = 0;$("#guess").click(function(){//猜的次数count++;$("#count").text(count);//猜的结果let guessNumer = $("#guessNumer").val();if(guessNumer>rightNumer){$("#result").text("猜大了");$("#result").css("color", "red");}else if(guessNumer<rightNumer){$("#result").text("猜小了");$("#result").css("color", "red");}else{$("#result").text("猜对了");$("#result").css("color", "green");}});$("#reset").click(function(){rightNumer = Math.floor(Math.random() *100) +1;console.log(rightNumer);count = 0;$("#guessNumer").val("");$("#result").text("");$("#count").text(count);});</script>
</body>
</html>

5.2 留言板

预期效果：

代码实现：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.container {width: 350px;height: 300px;margin: 0 auto;  /*水平方向居中*//* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head><body><div class="container"><h1>留言板</h1><p class="grey">输入后点击提交, 会将信息显示下方空白处</p><div class="row"><span>谁:</span> <input type="text" name="" id="from"></div><div class="row"><span>对谁:</span> <input type="text" name="" id="to"></div><div class="row"><span>说什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"><!-- <div>A 对 B 说: hello</div> --></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>// 给点击按钮注册点击事件function submit(){// 1. 获取到编辑框内容let from = $("#from").val();let to = $("#to").val();let say = $("#say").val();if(from=="" || to == "" || say == ""){alert("请检查输入内容");return;}// 2. 构造 html 元素let html = "<div>"+ from +" 对 "+ to +" 说: "+say+"</div>";// 3. 把构造好的元素添加进去$(".container").append(html);// 4. 同时清理之前输入框的内容$(":text").val("");}</script>
</body></html>