JavaScript与jQuery - 快速入门指南
文章目录
- 一、什么是 JavaScript
- 二、快速入门
- 三、数据类型
- 四、函数
- 五、内部对象
- 六、面向对象编程
- 七、操作 BOM 对象（重点）
- 八、操作 DOM 对象（重点）
- 九、操作表单（验证）
- 十、jQuery
笔记记录自狂神老师的B站教学视频，主要记录了 操作 BOM 之后的笔记（其余有空在扩充，，估计没空）
第三章记录自 FreeCodeCamp，特别棒的学习社区推荐一下~
一、什么是 JavaScript
概述
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。JavaScript 是世界上最流行的脚本语言。
历史
二、快速入门
引入 JavaScript
1、内部标签
<!--默认 type 为javascript-->
<script type="javascript">
alert('Hello World!');
</script>
2、外部引入
<!--外部引入-->
<script src="/js/js.js"></script>
test.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="/js/js.js">script>
head>
<body>
body>
html>
基本语法入门
三、数据类型
这部分来自 freecodecamp，很棒的学习社区
JavaScript 提供七种不同的数据类型，它们是 undefined（未定义）、null（空）、boolean（布尔型）、string（字符串）、symbol、number（数字）、bigint（可以表示任意大的整数）和 object（对象）。
通过在变量前面使用关键字 var或 let ，声明一个变量
了解字符串的不变性
在 JavaScript 中，字符串（String）的值是不可变的（immutable），这意味着一旦字符串被创建就不能被改变。
例如，下面的代码：
var myStr = "Bob";
myStr[0] = "J";
是不会把变量 myStr 的值改变成 Job 的，因为变量 myStr 是不可变的。 注意，这并不意味着 myStr 永远不能被改变，只是字符串字面量 string literal 的各个字符不能被改变。 改变 myStr 的唯一方法是重新给它赋一个值，例如：
var myStr = "Bob";
myStr = "Job";
通过索引修改数组中的数据
与字符串的数据不可变不同，数组的数据是可变的（ mutable），可以自由地改变。
push()、pop()、shift()、unshift() 操作数组
函数中的全局作用域和局部作用域
一个程序中有可能具有相同名称的局部变量 和全局变量。 在这种情况下，局部变量将会优先于全局变量。
创建 JavaScript 对象
object对象和 arrays 类似，区别在于数组使用索引来访问和修改数据，而对象中的数据是通过 properties 访问的。
对象非常适合用来存储结构化数据，可以表示真实世界中的物体，比如一只猫。
这里是一个猫对象的样本：
var cat = {
"name": "Whiskers",
"legs": 4,
"tails": 1,
"enemies": ["Water", "Dogs"]
};
在这个示例中，所有的属性都被纯属为字符串，比如 name、legs 和 tails。 也可以使用数字作为属性。 甚至可以省略单字字符串属性中的引号，如下所示：
var anotherObject = {
make: "Ford",
5: "five",
"model": "focus"
};
然而，如果对象有非字符串属性的话，JavaScript 会自动将它们转为字符串。
通过点号表示法访问对象属性
和访问数组类似，访问对象属性有两种方式：点号表示法（.）和方括号表示法（[]）。
如果已经提前知道要访问的属性名，使用点号表示法是最方便的。
使用方括号表示法访问对象属性
访问对象属性的第二种方式是方括号表示法（[]）。 如果你想访问的属性名中包含空格，就必须使用方括号表示法来获取它的属性值。
当然，如果属性名不包含空格，也可以使用方括号表示法。
通过变量访问对象属性
对对象上使用方括号表示法，还可以访问对象上作为变量值存储的属性。 当你需要遍历对象的所有属性，或者根据一个变量的值查找对应的属性值时，这种写法尤其适用。使用这一概念的另一种情况是：属性的名字是在程序运行期间动态收集得到的。
更新对象属性
在你创建了 JavaScript 对象后，你可以随时更新它的属性，就像更新任何其他变量那样。 你可以使用点或中括号操作符来更新。
给 JavaScript 对象添加新属性
你也可以像更改属性一样给 JavaScript 对象添加属性，直接添加即可。
删除对象的属性
同样可以删除对象的属性，例如：
delete ourDog.bark;
使用对象进行查找
对象和字典一样，可以用来存储键/值对。 如果数据是扁平的，你可以用对象来查找你想要的值，而不是链式使用 switch 或 if/else 语句。 当你知道你的输入数据在某个范围时，这种查找方式极为有效。
测试对象的属性
有时检查一个对象属性是否存在是非常有用的。 我们可以用对象的 .hasOwnProperty(propname) 方法来检查对象是否有指定的属性。 .hasOwnProperty() 找到该属性时返回 true，找不到该属性时返回 false。
操作复杂对象
有时你可能希望将数据存储在一个灵活的数据结构（Data Structure）中。 JavaScript 对象是一种灵活的数据结构。 它可以储存字符串（strings）、数字（numbers）、布尔值（booleans）、数组（arrays）、函数（functions）和对象（objects）以及这些值的任意组合。
访问嵌套对象
我们可以通过连续使用点号表示法和方括号表示法来访问对象的嵌套属性。
访问嵌套数组
在之前的挑战中，我们学习了在对象中嵌套对象和数组。 与访问嵌套对象类似，数组的方括号可以用来对嵌套数组进行链式访问。
记录集合
给定一个对象，用来表示部分音乐专辑收藏。 每张专辑都有几个属性和一个唯一的 id 号作为键值。 并非所有专辑都有完整的信息。
以 updateRecords 函数开始，这个函数需要一个对象 records，包含一个音乐专辑集合，一个 id，一个 prop（如 artist 或 tracks），和一个 value。 使用下面的规则完成函数来修改传递给函数的对象。
- 函数必须始终返回整个音乐专辑集合对象。
- 如果
prop不是tracks并且value不是一个空字符串， 将相册的prop更新或设置为value。 - 如果
prop是tracks但专辑没有tracks属性，则应创建空数组并为其添加value。 - 如果
prop是tracks并且value不是一个空字符串，将value添加到相册现有tracks数组的末尾。 - 如果
value是空字符串，从专辑里删除指定的prop。
注意： 用 recordCollection 对象做为测试参数对象。
四、函数
五、内部对象
Date
Json
Json 是 JavaScript Object Notation 的简称，是一种轻量的数据表示方法。
-
Json 格式采用 key:value 的方式记录数据，非常直观，比 XML 简洁，因而大受欢迎。
-
简洁和清晰的层次结构使得 Json 成为理想的数据交换语言。
-
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在 JavaScript 中一切皆为对象、任何 js 支持的类型都可以用 Json 来表示；
Json 格式：
-
对象都用 {}
-
数组都用 []
-
键值对都用 key:value
Ajax
- 原生的 js 写法，xhr 异步请求
- jQuery 封装好的方法 $(“#name”).ajax(“”)
- axios 请求
六、面向对象编程
什么是面向对象
面向对象：JavaScript 有些区别！
-
类：模板
-
对象：具体的实例
在 JavaScript 中，这个需要转换一下思维方式！
原型继承
Class 继承
七、操作 BOM 对象（重点）
浏览器介绍
JavaScript 和 浏览器的关系？
JavaScript 的诞生就是为了能够在浏览器中运行
BOM：浏览器对象类型
-
IE 6~11
-
Chrome
-
Firefox
-
Safari
window 对象
window 代表浏览器窗口
window.innerHeight
306
window.innerWidth
1536
window.outerHeight
824
window.outerWidth
1536
window.alert('hello!')
undefined
navigator 对象
navigator 封装了浏览器的信息
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36 Edg/96.0.1054.29'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36 Edg/96.0.1054.29'
navigator.platform
'Win32'
大多数情况下，我们不会使用navigator对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码！
screen 对象
代表屏幕尺寸
screen.height
864
screen.width
1536
location 对象（重要）
location 代表当前页面的 URL 信息
host: "www.bilibili.com"
href: "https://www.bilibili.com/video/BV1JJ41177di?p=19"
protocol: "https:"
reload: ƒ reload() // 刷新网页
// 设置新的地址
location.assign('http://fengluo.ink')
document 对象
document 代表当前的页面，HTML，DOM文档树
document.title
'百度一下，你就知道'
document.title='fengluo'
'fengluo'
通过document 对象 可以获取具体的文档树节点
<dl id="app">
<dt>Javadt>
<dd>JavaSEdd>
<dd>JavaEEdd>
dl>
<script>
var dl = document.getElementById('app');
script>
获取 cookie，劫持 cookie 原理
document.cookie
服务器端可以设置 cookie：httpOnly
history
history 对象代表浏览器的历史记录
history.back() // 后退
history.forward() // 前进
八、操作 DOM 对象（重点）
核心
浏览器网页就是一个 DOM 树形结构！
-
获取：遍历 DOM 节点
-
更新：更新 DOM 节点
-
删除：删除一个 DOM 节点
-
添加：添加一个新的节点
要操作一个 DOM 节点，就必须要先获得这个 DOM 节点
获取 DOM 节点
// 对应 css 选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
// 获取 父节点 下的所有子节点
var children = father.children;
// father.firstChild;
// father.lastChild;
原生代码，之后会使用 jQuery
更新节点
<div id="id1">
div>
<script>
var id1 = document.getElementById('id1');
script>
操作文本
id1.innerText='456'修改文本的值id1.innerHTML='123'可以解析HTML文本标签
操作 CSS
id1.style.color = 'yellow'; // 属性使用 字符串 包裹 ''
id1.style.fontSize = '20px';
id1.style.padding = '2em';
删除节点
删除节点的步骤：先获取父节点，通过父节点删除
标题
p1
p2
删除节点的时候 children 的下标是在时刻变化的，需要注意！
插入节点
我们获得了某个 DOM 节点，假设这个 DOM 节点是空的，我们通过 innerHTML 就可以增加一个元素了。但如果这个 DOM 节点已经存在元素了，就不能采用这种方式，否则会产生覆盖！
追加
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js); // 追加到后面，控制台执行
</script>
创建一个新的标签，实现插入
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
// 通过 js 创建一个新的节点
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = 'Heelo, newP';
list.appendChild(newP);
// 创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
// 可以创建一个 Style 标签
var myStyle = document.createElement('style');
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML = 'body{background-color: chartreuse;}';
</script>
insetBefore
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点，insertBefore(newNode, targetNode)
list.insertBefore(js, ee);
</script>
九、操作表单（验证）
十、jQuery
jQuery 库，里面存在大量的 JavaScript 函数。
推荐学习网站：
jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)
获取 jQuery
- 官网下载：jQuery
- CDN引入
简单示例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="/jquery-3.6.0.js">script>
head>
<body>
<a href="" id="test-jQery">点我a>
<script>
document.getElementById('id');
// 选择器就是 css 的选择器
$('#test-jQery').click(function (){
alert('hello jquery');
})
script>
body>
html>
选择器
// 原生 js，选择器少，麻烦不好记
// 标签
document.getElementsByTagName();
// id
document.getElementById();
// 类
document.getElementsByClassName();
// jQuery
$('p').click(); // 标签
$('#id1').click(); // id
$('.class1').click(); // 类
事件
鼠标事件，键盘事件，其他事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="/jquery-3.6.0.js">script>
<style>
#divMove {
width: 500px;
height: 500px;
border: 5px solid red;
}
style>
head>
<body>
<a href="" id="test-jQery">点我a>
mouse: <span id="mouseMove">span>
<div id="divMove">
在这里移动鼠标试试
div>
<script>
// 当网页元素加载完毕之后，响应事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:' + e.pageX + " y:" + e.pageY);
});
});
script>
body>
html>
操作 DOM
节点文本操作
$('#test-ul li[name=python]').text(); // 获得值
$('#test-ul li[name=python]').text('123'); // 设置值
$('#test-ul').HTML(); // 获得值
$('#test-ul').HTML('123'); // 设置值
CSS 操作
$('#test-ul li[name=python]').css("color", "red");
元素的显示和隐藏：本质 display: none;
$('#test-ul li[name=python]').hide();
$('#test-ul li[name=python]').show();