第一部分 HTML基础

第一章常用网页标签

第一节双标签

1.1.1 `<h1></h1>`H标签

1.1.2`<div></div>`盒子标签

1.1.3 `<p></p>`段落标签

1.1.4 `<a href=""></a>`超连接标签

<a href="www.baidu.com"></a>

第二节单标签

1.2.1 `<br>` 换行

1.2.2 `<hr>` 水平线

1.2.3`<img src="" alt="">` 图片标签

<img src="//www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png" alt="baidu">

第二章关于资源路径

第一节相对路径

./ 去上一级目录找==(可以省略)==
../去上两级目录找

第二节绝对路径(90%找不到)

找不到的原因(不知道为什么不是100%找不到的kan)

第三章列表标签

第一节无序与有序列表

3.1`<ul>`+`<li>` 无序列表标签

<!-- 无序列表(unorder) -->
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

3.2`<ol>`+`<li>` 有序序列表标签

<!-- 有序列表(order) -->
<div>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

第四章表格标签

第一节声明表格与行

4.1.1`<table>`和`<tr>`

<table>:声明这是一个表格
<tr>: row表示其中的一行

第二节确定单元格类型

4.2.1`<th>`和`<td>`

<th>: 表示这一格的元素为 head(表头元素, 和<td>的区别就是只有加粗)
<td>: 表示这一格的元素为 date(表内元素)

<table>
    <tr> 
        <!-- 先声明一行 -->
        <th>序号</th> <!--再声明这一行中每一个元素的类型-->
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Tom</td>
        <td>boy</td>
    </tr>
</table>

第五章表单

第一节输入框与密码框

语法: ①文本输入框;<input type="text> ②密码框<input type="password>
类型: <input>为单标签

<!-- 第一节 输入框与密码框 -->
<p>用户名称: <input type="text" name="name"></p>
<p>用户密码: <input type="password" name="key"></p>

第二节单选

语法: <input type="radio" name="保持一致">
注意⚠️:type为radio的单选框,只有name属性想同,才能实现单选效果

<!-- 第二节 单选 -->
<p>
    <!-- 注意⚠️:type为radio的单选框,只有name属性想同,才能实现单选效果 -->
    性别
    <input type="radio" name="gender" value="boy">男
    <input type="radio" name="gender" value="girl">女
</p>

第三节多选

语法: <input type="checkbox" name="保持一致">
注意⚠️: 同单选需要注意的一样,否则后端接受到的数据不一致

<!-- 第三节 多选 -->
<p>
    <!--注意⚠️: 同单选需要注意的一样,否则后端接受到的数据不一致-->
    爱好
    <input type="checkbox" name="hobby" value="basketball"> 篮球
    <input type="checkbox" name="hobby" value="singing"> 唱歌
    <input type="checkbox" name="hobby" value="dancing"> 跳舞
</p>

第四节文本输入区域

语法: <textarea>
类型: 双标签

<!-- 第四节 文本输入区域 -->
<p>
    自我介绍
    <textarea>
        
    </textarea>
</p>

第五节提交与重置

语法: ①提交:<input type="submit"> ②重置<input type="submit">

<!-- 第五节 提交与重置 -->
<p><input type="submit"></p>
<p><input type="reset"></p>

第六章作业

实现如下效果

<!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>
    <h1>图灵之家</h1>
    <br>
    <br>
    <h3>我的汽车之家, 我的图灵网站</h3>
    <hr>
    <p>注册后, 你可以使用汽车之家相关服务</p>
    <br>
    <br>
    <form action="#">
        <p>手机<input type="text" name="phone"></p>
        <p>密码<input type="password" name="password"></p>
        <p>性别
            <input type="radio" name="sex" value="boy">男
            <input type="radio" name="sex" value="girl">女
        </p>
        <p>请输入你喜欢的车型
            <input type="checkbox" value="type"> 紧凑型
            <input type="checkbox" value="type"> 中型
            <input type="checkbox" value="type"> SUV
            <input type="checkbox" value="type"> 主打车
        </p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>

</body>

</html>

第二部分 CSS基础

第零章 CSS引入HTML页面的三种方式

第一节行内式

<!-- 行内式 -->
<h1 style="color: red">哈哈哈1!</h1>

第二节嵌入式

<!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>
        /*内嵌式*/
        .c1 {
            color: goldenrod;
        }
    </style>
</head>

<body>
    <!-- 内嵌式 -->
    <h1 class="c1">哈哈哈2!</h1>
</body>

第三节外链式

语法: <link rel="stylesheet" type="text/css" href="你想引入CSS样式的文件路径">==是<link>标签==

/*相对于html的路径: "./css/style_sheet1.css"*/
.c2{
    color:green
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外链式 
    * rel="stylesheet"告诉浏览器这个链接是一个样式表。
    * type="text/css"指定了链接文件的类型是CSS。
    * href="styles.css"提供了样式表文件的路径。
    -->
    <link rel="stylesheet" type="text/css" href="./css/style_sheet1.css">
</head>

<body>
    <!-- 外链式 -->
    <h1 class="c2">哈哈哈3!</h1>
</body>
</html>

第一章六种选择器

第一节标签选择器

语法: 任何HTML标签{}
作用: 设置后, 该标签所有都会受到样式影响

第二节类选择器

语法: .c1{}
调用处: <p class="c1"></p>
作用: 只对指定了该类的标签生效

第三节层级选择器

语法: 层级调用, 可以是标签标签{},可以是标签 .类{}可以是id可以自由组合
作用: 层级选择, 实现指定元素的样式改变

<style>
/* 以下三个都是"层级选择器" */
.con .pink{
    background-color: pink;
}
.con .gold{
    background-color: gold;
}

div span{
    background-color: green;
}

</style>

<body>
    <div class="con">
        <span>span标签-1</span>
        <a href="#" class="pink">谷歌</a>
        <a href="#" class="gold">百度</a>
    </div>
    <span>span标签-2</span>
</body>

第四节 id选择器

语法: #id1{}
调用处: <p id="id1"></p>
作用: 只对指定了该id选择器的标签生效

第五节组选择器

语法: 选择多个类/
作用: 选中多个(标签, id, 类自由组合)成为一组, 同时设置样式

<style>
/* 1.可以选中多个类 */
.c1,.c2,.c3,.c4{
    background-color: red;
}
/* 2.可以选中多个标签 */
div,a{
    background-color: aqua;
}
/*3.可以选中标签+类*/
h1,.c5{
    background-color: skyblue;
}
/*4....可以自由组合*/
</style>

<body>
    <div>
        <p class="c1">1</p>
        <p class="c2">2</p>
        <p class="c3">3</p>
        <p class="c4">4</p>
    </div>
    <a href="#">dfas</a>
    <h1>ok</h1>
    <h2 class = "c5">nice!</h2>
</body>

第六节伪类选择器

语法: 可以在标签, 类, id后面:伪类
常见伪类:
1. :nth:child(3)选中该标签下第3个儿子(索引从1开始)
2. :first-child选中该标签下的第一个儿子
3. :last-child选中该标签下的最后一个儿子

第二章常见CSS属性

第一节布局常用样式属性

width 设置元素(标签)的宽度，如： width:100px;
height 设置元素(标签)的高度，如： height:200px;
background设置元素背景色或者背景图片,如: background:gold;设置元素的背景色, background: url(images/logo.png);设置元素的背景图片。
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
以上也可以拆分成四个边的写法,分别设置四个边的:
border-top 设置顶边边框，如： border-top:10px solid red;
border-left 设置左边边框，如：border-left:10px solid blue;
border-right 设置右边边框，如： border-right:10px solid green;
border-bottom 设置底边边框，如：border-bottom:10px solid pink;
padding设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像
border一样拆分成分别设置四个边：padding-top、padding-left、padding-right、padding-bottom。
margin设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边：margin-top、margin-left、margin-right、margin-bottom。
float设置元素浮动,浮动可以让块元素排列在一行,浮动分为左浮动: float:left;右浮动: float:right;

第二节文本常用样式属性

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小,如: font-size:12px;
font-family 设置文字的字体，如： font-family:’微软雅黑’;为了避免中文字不兼容，一般写成: font family:’Microsoft Yahei’;
font-weight设置文字是否加粗,如: font-weight:bold;设置加粗font-weight:normal设置不加粗
line-height 设置文字的行高，如: line-height:24px;表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-align设置文字水平对齐方式,如text-align:center设置文字水平居中
text-indent 设置文字首行缩进，如：text-indent:24px；设置文字首行缩进24px

第三节 CSS样式溢出

定义: 当子元素的大小(width, height)>父元素时
处理方法: 在父元素中设置overflow: auto等

第三章行内元素与块元素

第一节行内元素和块元素详细解释

关于行内元素和块元素的转化
1. display:inline;转换为行内元素；
2. display:block;转换为块状元素；
3. display:inline-block;转换为行内块状元素。

第三部分 JavaScript基础

JavaScript基本准则

JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写; 和java一样

行末尾规范需要加分号, 但不加会报错(因为js默认每行末尾会自己添加, 如果没加的话, 除特殊情况外)

第零章 JS引入HTML页面的三种方式

第一节行内式

<!-- 行内式 
* 注意: 
    1. alert中需要用引号表示字符串
    2. 但行内式 一般外面都有引号, 所以里面得用单引号
-->
<input type="button" value="点击1" onclick="alert('行内式')">

第二节内嵌式

<!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>
        function my_click1() {
            alert("内嵌式"); 
        }
    </script>
</head>
<body>
    <!-- 内嵌式 -->
    <input type="button" value="点击2" onclick="my_click1()"> 
</body>
</html>

第三节外链式

语法: <srcipt src="你的js文件相对路径"> ==是<srcipt>标签==

//  相对于html的路径为: ./js/js_sheet.js
function my_cilck2() {
    alert("外链式")
}

<!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_sheet.js"></script>
</head>
<body>
    <!-- 外链式 -->
    <input type="button" value="点击3" onclick="my_cilck2()"> 
</body>
</html>

第一章数据类型

number
string
boolean
undifined
object

// 1.变量和常量的声明
var a = 10; //变量(let=var)
const b = 112; //常量(不可修改)

// 1.number类型
var int_number = 1;
var float_number = 3.14;
console.log(int_number + " " + typeof (int_number));
console.log(float_number + " " + typeof (float_number));

// 2.string类型
var str1 = "MTS";
console.log(str1 + " " + typeof (str1));

// 3.boolean类型
var bool1 = false;
console.log(bool1 + " " + typeof (bool1));

/* 4.undifined类型
        1.在js中,没有值的变量，其值是 undefined。typeof 也返回 undefined
        2.任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined
        */
var un;
console.log(un + " " + typeof (un));
var str1 = undefined; //清空值,变为undefined
console.log(str1 + " " + typeof (str1));

/* 5.objec类型 有哪些类型是object?
        1.数组
        2.字典(python中称为字典,在js中称为对象)
        3.Map
        4.Set
        5.null 
        ....还有很多
        */
// 5.1 数组是object类型
var names = ["Tom", "Jack", "Peter"]
console.log(names + " " + typeof (names));
// 5.2 字典是object类型
var dict = {
    name: "Tom",
    age: 12,
    sex: "boy",
    fun1: function sayHello() {
        alert("hello!");
    }
}
console.log(dict + " " + typeof (dict));
// 5.3 Map是object类型
var myMap = new Map();
myMap.set("key", 1);
console.log(myMap + " " + typeof (myMap));
// 5.4 Set是object类型
var mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(1);
console.log(mySet + " " + typeof (mySet));
// 5.5 null是object类型(因为null居然不是NULL类型,与Java不同,认为他是一个BUG好了)
var bug = null;
console.log(bug + " " + typeof (bug));

/*  == 会对两侧值进行类型转化 (用于判断值相等)
    null == undefined 会返回 true，因为 == 运算符会进行类型转换，null 和 undefined 在类型转换后都被视为“空值”。
*/
console.log(null==undefined); 
/*=== 不会对两侧值进行类型转化判读类型+值相等
  null === undefined 会返回 false，因为 === 运算符不会进行类型转换，null 和 undefined 是两个不同的基本数据类型。
*/
console.log(null===undefined);

第二章函数

语法: function(关键字) 函数名称 (参数列表) {}
关于调用时:
1. 无论调用是否有参数列表的方法; 都可以传参or不传参
2. 所有方法都有argument内置参数, ①所有传来的参数都会赋给argument ②如果有参数列表, 会对应赋值给参数列表, 如果超出原参数列表, 可以从argument对象中获得

// 1.基本语法 function(关键字) 函数名称 (参数列表) {}
function fun() { }

// 1.关于参数
// 1.1 无参(见上)
function withoutArg() { }

// 1.2 有参 但调用时可以不传
function withArg(a, b) {
console.log(a + b);
return a + b;
}
var res = withArg(2, 3);
console.log(res);

// 1.3 无参 但调用时可以传递
function withoutArg2() {
console.log(arguments); // js内置arguments对象
return arguments;
}
var res2 = withoutArg2("Tom", 23);

第三章全局变量与局部变量

第一节全局变量

语法: 全局变量(在函数外面定义的都是全局变量)
使用:
1. 在方法中, 可以直接更改(无需像python添加global关键字)
2. 在方法中,不可以定义名字相同的变量

第二节局部变量

语法: 在方法中定义的都是局部变量
使用:
1. 局部变量无法再全局区域(函数外)使用

var a = 10; // 全局变量(在函数外面定义的都是全局变量)

function func1() { 
    var b = 20; // 局部变量(在方法中定义的都是局部变量)
    console.log(a);
    a+=1;
    console.log(a);
    a=0;
    console.log(a);
}
console.log(a);
console.log(b); // 报错:局部变量无法再全局区域(函数外)使用

第四章条件判断

第一节 if/else if/else

语法: 同java

var a = 1;
if (a < 10) console.log("under");
else if (a > 10) console.log("upper");
else console.log("equal");

第二节三目运算符

语法: 同java

var b = a > 10 ? "woc" : 9;
console.log(b);

第五章逻辑判断

且: &&
或: ||
非: !

==第六章获取标签和操作元素==

<body>
    <input type="text" name="set_size" id="input-1" value="1">
    <a href="https://www.baidu.com" id="link-1" class="sty-1">这是一个链接</a>
</body>

第一节获取页面标签

语法: getElementById()这个方法是通过标签的id获取的, 如果想用class或标签得需要其他方法, 推荐用jquery

// 获取标签
my_input = document.getElementById("input-1");
my_a = document.getElementById("link-1");

// 获取属性
/*对input标签内的属性进行获取*/
console.log(my_input); // 打印整个元素(object类型) 
// 以下元素.属性都是string类型, 尽管value=1/"1"都是string类型
console.log(my_input.type); // 打印type属性
console.log(my_input.name); // 打印name属性
console.log(my_input.id);   // 打印id属性
console.log(my_input.value);// 打印value属性

/*对a标签内的属性进行获取*/
console.log(my_a)
console.log(my_a.id)
console.log(my_a.className) // 元素.className获取元素的类名字(因为class是js关键字)

第二节获取和修改页面元素

语法: 标签.style.属性 太麻烦了, 而且因为关键字的问题, js中不能与一些属性重名,导致非常难记, 推荐用jquery

// 操作元素中的属性
// 1.将input标签的字体大小改为30px
my_input.style.fontSize="30px";
// 2.将a标签的的背景改为skyblue
my_a.style.background="skyblue";

==第七章操作文本==

<body>
    <div id="div-1">这是一个div-1标签</div>
</body>

第一节获取标签中的文本

语法:标签.innerHTML

// 1.获取页面div标签的 文本内容
var my_div = document.getElementById("div-1");
console.log(my_div.innerHTML);

第二节修改标签中的文本

语法: 标签.innerHtML=修改的内容

// 2.修改其文本内容
var my_div = document.getElementById("div-1");
my_div.innerHTML="修改后的内容"
console.log(my_div.innerHTML);

第八章数组

初始化: ①通过new对象 ②通过字面量
操作: ①增.push() ②删末尾.pop() ③删改指定位置.splice() ④查随机访问

// 1.创建数组(对象的方式)  ①创建同时可以初始化数组中的变量 ②其中和python一样想放什么都可以
var arr1 = new Array(1, 2, 3, "abc", true, function func1() { alert("damn!") });
// 2.创建数组(字面量的方式)
var arr2 = [1, 2, "abc", true];
console.log("arr1的长度" + arr1.length + "\narr2的长度" + arr2.length);
console.log(arr2);

// 3.增
arr2.push("newElement"); // 从数组尾部进行插入
console.log(arr2);

// 4.删
// 4.1 删除末尾元素
arr2.pop(); //弹出最末尾的元素 /*衍生下,对一个数组只进行push和pop操作, 等同于一个栈*/
console.log(arr2);
// 4.2 删除指定位置元素
arr2.splice(0,1); // 删除索引为0的元素
arr2.splice(0,2); // 从索引为0的元素开始删除, 删2个(arr[0],arr[1]删掉)
console.log(arr2);

/* 5.改
    语法: Array.splice(start: number, deleteCount: number, ...items: (string | number | boolean)[])
        1.start:从第几个索引开始改
        2.deleteCount: 删除几个
        3.items: 可以是任意多个值来填充"删除位置的值", 如果长度大于deleteCount,将进行插入,小于同理
    注意
        1.支持负索引
        2.存在越界保护,越界会 让start=最后一个or第一个元素
    */
arr2.splice(0, 1, '修改'); // 从第0个索引开始,修改一个元素,相当于只对arr[0]进行修改,第三个是修改后的元素
console.log(arr2);

// 6.访问 数组=随机访问
arr1[5](); // 注意arr1[5]只是把方法取出来, 必须()才是调用

第九章循环

语法: 和java循环的语法完全一样
注意⚠️:
1. js中对全局变量的定义, 所以for循环里面的也是全局变量
2. 这个是会产生越界问题的, 和数组中的splice()方法不一样!!!

var arr = [1, 2, 3, 4];
// 1.for (注意⚠️:这里的i是全局变量)
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

// 2.while
var j = 0;
while (j < arr.length) {
    console.log(arr[j]);
    j++;
}

// 3.do...while (先执行do的内容, 和java一样)
var k= 3;
do{
    console.log(arr[k]);
    k++;
}while(k<arr.length);

第十章字符串

注意⚠️：number类型遇到 string类型的那一刻起, 就变为string了

// 1.字符串可以拼接(和java一样)
/*不赘述*/

// 2.number类型遇到 string类型的那一刻起, 就变为string了
var a = 1, b = 2;
console.log(a + b + "6"); // 是36 不是126, 也不是9, 就是36

第十一章对象

注意⚠️：这里学的是对象, 对象是类的实例化; 不是类

通过 {}(字面量) 创建对象

// 1.通过 {}(字面量) 创建对象
var dog = {
    name: "旺财",
    age: "3",
    bark: function () {
        console.log("旺旺~");
    }
}
// test
console.log(dog.name);
console.log(dog.age);
dog.bark();
// 后续可以(直接)修改对象中值
dog.age++;
console.log(dog.age);

通过 new Object() 创建对象

// 2.通过 new Object() 创建对象
var cat = new Object();
cat.strain = "蓝猫";
cat.name = "小曦";
cat.eat = function () {
    console.log("喵喵~好吃~");
}
// test
console.log(cat.strain);
console.log(cat.name);
cat.eat();
// 后续可以(直接)修改对象中的值
cat.eat = function() {
    console.log("喵喔!真好吃");
}
cat.eat();

通过 构造方法 创建对象
- 注意⚠️：其中this指代的是这个对象有属性/方法

// 3.通过 构造方法 创建对象
function Animal(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        /*注意⚠️:这里要用this关键字, this才表示是当前对象的属性or方法*/
        console.log(this.age + "岁的" + this.name + "正在跑步...");
    }
}
// test
var cat2 = new Animal("小曦", 12);
cat2.run();
// 后续可以(直接)修改对象中的值
cat2.age=13;
cat2.run();

第十二章计时器

第一节创建计时器

语法:
- ①只调用一次方法的计时器: setTimeout(指定方法, 等待多少ms调用)
- ②调用无限次 方法的计时器 setInterval(指定方法, 等待多少ms调用)

function call() {
    console.log("哈哈哈!");
}
// 1. 创建计时器
//语法: setTimeout(指定方法, 等待多少ms调用)
t1= setTimeout(call,1000);

//语法: setInterval(指定方法, 调用多少次)
t2 = setInterval(call, 100);

/*⚠️: 像上面t1,t2所显示的效果就是 等待1s钟执行call方法100次*/

第二节清除计时器

语法: ①clearTimeout() ②clearInterval()

// 需求: 页面显示倒计时(1s切换一次), 当倒计时为0时, 关闭计时器
window.onload = function () {
    var h1 = document.getElementById("id1");
    var time=3;
    function displayTime() {
        if(time==0) {
            // 达到目标就停止
            clearInterval(t1);
        }
        h1.innerHTML = time;
        time--;
    }

    // 使用计时器无限调用
    t1 = setInterval(displayTime,1000);
}

第十三章作业

通过js计算100以内所有偶数之和,以及计算所有奇数之和,在把两个数据进行相减

// 通过js计算100以内所有偶数之和,以及计算所有奇数之和,在把两个数据进行相减
var odd_sum = 0, even_sum = 0
for (var i = 0; i <= 100; i++)
    i % 2 ? odd_sum += i : even_sum += i;
alert(even_sum-odd_sum)

第十四章常用方法

第一节 filter和some

14.1.1 实际需求

需求: 如果你想检查node.id是否不在deleteNodes数组中的任何一个对象的id属性中;
如何用: 你可以使用Array.prototype.some方法来检查是否存在于deleteNodes数组中。如果没有找到匹配的id，那么some方法会返回false。下面是如何实现这个逻辑的代码：

// 假设res.data.deleteNodes是一个包含多个对象的数组，每个对象都有一个id属性
let deleteNodes = res.data.deleteNodes;

// 使用filter方法来过滤testGraph.nodes中的节点
let remainingNodes = this.testGraph.nodes.filter(node => {
  // 使用some方法检查当前节点的id是否在deleteNodes数组中
  return !deleteNodes.some(deleteNode => deleteNode.id === node.id);
});

解释: 这段代码会创建一个新的remainingNodes数组，其中只包含那些id不在deleteNodes数组中的节点。some方法会遍历deleteNodes数组，如果找到任何一个对象的id与当前节点的id相等，它就会返回true，那么filter方法就会排除这个节点。如果没有找到匹配的id，some方法会返回false，那么filter方法就会保留这个节点。

this.testGraph.nodes.filter(node => {
// 如果存在 数组deleteNodes中某个元素的id属性和testGraph.nodes这个数组中元素的id相同
// 这个方法deleteNodes.some(dn => dn.id === node.id)返回true,
return !deleteNodes.some(dn => dn.id === node.id)
// filter中如果返回true表示要这个元素, 如果some方法成立返回true=>存在=>不要node这个元素他是属于被删除集合当中的
})

14.1.2`filter`

解释: filter 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。这个方法不会修改原数组。
语法：

array.filter(callback(element[, index[, array]])[, thisArg])

callback：一个函数，它会被数组中的每个元素调用，并为每个元素产生一个布尔值（true 或 false）。
element：当前正在处理的数组元素。
index（可选）：当前正在处理的数组元素的索引。
array（可选）：调用 filter 方法的数组。
thisArg（可选）：执行回调时使用的 this 值。

返回值：
返回一个新数组，包含通过 callback 函数测试的所有元素。

示例：

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

14.1.3`some`

解释: some 方法测试数组中是不是至少有一个元素通过了被提供的函数测试。它返回的是一个布尔值。
语法：

array.some(callback(element[, index[, array]])[, thisArg])

callback：一个函数，它会被数组中的每个元素调用。
element：当前正在处理的数组元素。
index（可选）：当前正在处理的数组元素的索引。
array（可选）：调用 some 方法的数组。
thisArg（可选）：执行回调时使用的 this 值。

返回值：
如果数组中至少有一个元素使提供的测试函数返回 true，则返回 true；否则返回 false。
示例：

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(number => number % 2 === 0);
console.log(hasEvenNumber); // 输出: true

第四部分 Jquery 基础

介绍

jquery可以理解为js的增强(或js的框架)

需要通过<script src="./js/jquery-3.7.1.slim.min.js"></script>进行引入

jquery-3.7.1.slim.min.js这个文件去JQuery官网复制

第一节 jquery 对比原生js

任务
1.js原生方式=>加载页面+获取元素
2.jqurey的加载方式
3.jquery精简的方式

语法:
1. jquery一般方式: $(document).ready( function(){} )
2. jquery精简方式: $( fucntion(){} )
==易错==:$符号后面是() 不是{}

/*对比window.onload和jquery的方式*/

// 1.js原生方式=>加载页面+获取元素
window.onload = function () {
    var my_div = document.getElementById("div-1");
    console.log("js原生方式", my_div);
}

// 2.jqurey的加载方式
$(document).ready(function () {
    var my_div = document.getElementById("div-1");
    console.log("jquery的方式", my_div);
})

// 3.jquery精简的方式
$(
    function () {
        var my_div = document.getElementById("div-1");
        console.log("jquery精简的方式", my_div);
    }
)

==第二节 jquery获取标签==

选择器的作用: 获取页面标签

任务
1. 通过id选择器 获取div_1
2. 通过标签选择器 获取a
3. 通过类选择器 获取div_1
4. 通过层级选择器 获取 span标签
5. 通过属性选择器 获取input标签
```html文件
<div id="my_id" class="my_class">div - 1</div>
<a href="#">这是一个超链接</a>
<ul id="my_ul">
<li><span>span-1</span></li>
<li><span>span-2</span></li>
<li><span>span-3</span></li>
</ul>
<input type="text" name="first" value="这是一个输入框"><br>
<input type="password" name="key" value="132">
```

语法: $() 括号里面可以是#id/.class/标签/属性选择器; 比原生js不同方法要简洁的多

$(
    function () {
        // 1. 通过id选择器 获取div_1
        var my_div_1 = $("#my_id");
        console.log("通过id选择器", my_div_1);

        // 2. 通过标签选择器 获取a
        var my_link = $("a");
        console.log("通过标签选择器", my_link);

        // 3. 通过类选择器 获取div_1
        var my_div_2 = $(".my_class");
        console.log("通过类选择器", my_div_2);

        // 4. 通过层级选择器 获取 span标签
        var my_span = $("#my_ul li span")
        console.log("通过层级选择器", my_span);

        // 5. 通过属性选择器 获取input标签
        var my_input = $("input[name=first]"); //获取一个input标签, 具体是哪一个input标签?name=first的标签
        console.log("通过属性选择器",my_input);
        //?????
        var my_password = $("inupt[type=text]"); // 这个是获取不到的 不能通过input标签的type属性获取
        console.log(my_password);             
    }
)

第三节 jquery选择集过滤

任务:
1. 将id为"mytext"的div背景改为红色
2. 将第1个li背景改为绿色

<div>
    这是第一个div
    <input type="text" id="mytext">
</div>
<div>
    这是第二个div
    <input type="text">
    <input type="button" value="点击">
</div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

语法:
1. has("id/class/标签..."): 获取具有指定特征的标签
2. css({}):改变标签的css样式
3. eq(index): 选择集中的第几个元素(索引从0开始)

$(
    function () {
        // 1. 将id为"mytext"的div背景改为红色
        // ==>获取具有指定特征的标签: 语法:`has()`
        // $("div")就是一个选择集, 其中我需要在这个集合中过滤id为mytext的标签
        var my_div = $("div").has("#mytext");
        // ==>改变标签的css样式: 语法:`css({})`
        my_div.css({"background":"red"});

        // 2. 将第1个li背景改为绿色
        // $("li")就是一个选择集,而我过滤的目标是:只要第一个li
        // ==>语法: eq(index); 选择集中的第几个元素(索引从0开始)
        var my_li = $("li").eq(1); 
        my_li.css({"background":"green"})
    }
)

==第四节 jquery操作文本==

任务:
1. 获取盒子中p标签的的 文字内容
2. 修改文字内容为 "双双"
3. 追加文字内容 "今天天气不错"

<div id="my-div">
	<p>hello</p>
</div>

语法:
1. .html(): 获取标签内的元素
2. .html("modify_text"): 设置标签内的元素为”modify_text”
3. .append("append_content"): 往标签内的元素追加”append_content”的内容

$(
    function () {
        // 1. 获取盒子中 p标签的的 文字内容
        var p =$("#my-div p")
        console.log(p.html());

        // 2. 修改文字内容为 "双双"
        p.html("双双")
        console.log(p.html());

        // 3. 追加文字内容 "今天天气不错"
        p.append(",今天天气真好!")
        console.log(p.html());
    }
)

==第五节 jquery操作元素==

任务
1. 获取a标签的 id元素
2. 设置a标签 的href跳转到百度 , title为"跳转到百度 class为"my_link_class"
3. 获取input标签的value属性值
4. 修改input标签的value属性值(两种方式)

<a href="#" id="link-1">这是一个链接</a>
<input type="text" id="input-1" value="这是一个输入框">

第一节获取元素

语法:标签.prop("属性名称") 获取标签中的属性

// 获取标签
var my_link = $("#link-1");
var my_input = $("#input-1");
// 1. 获取a标签的 id元素
// ==>  获取标签中的某个元素: 标签.prop("id")
var link_id = my_link.prop("id");

第二节修改元素

语法:
1. prop({}): 这里传的对象(字典)多对属性和值
2. prop("属性", "新值"): 第二个参数用于传需要修改的值
3. val(): 这个只能获取value这个属性, 其他的获取不了
4. val("新值"): 如果传入字符串相当于, 修改值

// 2. 设置a标签 的href跳转到百度,class为"my_link_class"
// ==> 设置标签中元素的值: 标签.prop({}) 对象(字典)中的值为属性和值的键值对
my_link.prop({
    "href": "https://www.baidu.com",
    "class": "my_link_class"
})
my_link.html("点击跳转百度"); // 顺便改下标签内的文字

// 3. 获取input标签的value属性值(两种方式)
var value = my_input.prop("value"); // 方式一: prop()
var value2 = my_input.val(); // 方式二: val()

// 4. 修改input标签的value属性值(两种方式)
my_input.val("真棒") // 方式一
my_input.prop("value", "真棒2") //方式二

第六节 jquery事件

任务
1. 鼠标点击 哪个li, li就变背景颜色为红色
2. 鼠标点击 按钮, 控制台打印输入框的内容
3. 输入框得到焦点, 背景变为黄色
4. 输入框失去焦点, 背景变为绿色
5. 鼠标进入div, 背景变为粉色
6. 鼠标离开div, 背景变为白色

<div id="div-1">
<ul class="list">
<li>列表文字-1</li>
<li>列表文字-2</li>
<li>列表文字-3</li>
</ul>
<input type="text" id="text-1">
</div>
<input type="button" id="button-1" value="点我一下">

所有事件: 了解下, 用到再说

如何理解this???

// 1. 鼠标点击 哪个li, li就变背景颜色为红色
var my_li = $(".list li"); // my_li这个选择集中有三个li标签
my_li.click(function () { // STEP1:这里相当于对(选择集)中所有li进行了监控,当点击(选择集中的标签)时,就会执行这个函数
    console.log($(this));
    $(this).css({ "background": "red" });  // STEP2:$(this)就表示了当前选中的具体哪一个li
    console.log($(this).index());
});

$(
    function () {

        // 1. 鼠标点击 哪个li, li就变背景颜色为红色
        var my_li = $(".list li");
        my_li.click(function () { // STEP1:这里相当于对所有li(选择集)进行了监控,当点击(选择集)时,就会执行这个函数
            console.log($(this));
            $(this).css({ "background": "red" });  // STEP2:$(this) 就表示了当前选中的具体哪一个li
            console.log($(this).index());
        });

        // 2. 鼠标点击 按钮, 控制台打印输入框的内容
        var my_button = $("#button-1");
        my_button.click(function () {
            var my_input = $("#text-1");
            console.log(my_input.prop("value"));
        });

        // 3. 输入框得到焦点, 背景变为黄色
        var my_input = $("#text-1");
        my_input.focus(function(){
            my_input.css({"background":"yellow"})
        }); 

        // 4. 输入框失去焦点, 背景变为绿色
        my_input.blur(function() {
            my_input.css({"background":"green"})
        });

        // 5. 鼠标进入div, 背景变为粉色
        var my_div = $("#div-1");
        my_div.mouseover(function() {
            my_div.css({"background":"pink"});
        });

        // 6. 鼠标离开div, 背景变为白色
        my_div.mouseout(function() {
            my_div.css({"background":"white"})
        });
    }
)

第七节 jquery处理json数据

json数据类型∈object类型(两个很像),所以不要问,为什么不是json类型了,js没有json类型

为什么?

因为后端传来的数据有时候是字符串类型的, 或你从数据库中取数据, 最后都是封装为字符串传给网页的, 所以会有string转object这种方式

什么才叫成功处理了json数据?

只有通过.能点出来, 才算

创建json数据的两种方式
1. JSON.parse(字符串类型的json数据) 这个的返回值就是object类型的数据(其实就是json类型的)
2. 字面量构建object

// json数据类型∈object类型,所以不要问,为什么不是json类型了,js没有json类型

// 1.方式一:通过string=>object 从而构造json
// 注意⚠️：json的键一定都是双引号的(值可以没有引号), 单引号不可以
var json1 = '{"name":"Tom","age":23}';// (所以字符串用单引号,json才能用双引号)
var j1 = JSON.parse(json1);
console.log(json1 + " " + typeof json1);
console.log(j1 + " " + typeof j1);
console.log(j1.name+" "+j1.age);


// 2.方式二:直接构造object,就是json
// 其实就是对象(字典), json的数据格式本来就和对象一模一样(除了不能放function)
var j2 = { "name": "Tom", "age": 23 };
console.log(j2.name + " " + j2.age);

==第八章 ajax==

第一节 ajax是干什么的

属于: 是JavaScript的一部分, JQuery只是对ajax进行了封装(更好用了)
作用: AJAX用于在不刷新整个页面的情况下，**异步地**与服务器交换数据并更新网页的部分内容。
- 同步和异步
主要用途: ①向指定(后端)URL发送请求

第二节用途一: ajax向后端发送请求

后端
前端(ajax的运用看注释)
- GET/POST/PUT/DELET: 一定要大写

/*$可以理解为就是jquery的别名*/
$(  // 这个jquery的$代表的是js的window.onload()
    function () {
        var my_button = $("#button-1"); // 前端有个按钮,实现点一下, 就发一个请求
        my_button.click(function () {
            $.ajax({ //这个jquery的$就是调用js的ajax
                url: "http://127.0.0.1:8080/data",  // 1.向哪个url发送
                type: "GET",                        // 2.什么请求方式,这里只需要后端把数据传过来,GET就够了
                dataType: "json",                   // 3.返回的数据时什么类型的(josn)
                success: function (response) {      // 4.成功在控制台返回后端传递来的json数据
                    console.log(response);
                },

                error: function () {                // 5.失败在控制打印失败
                    console.log("请求失败...");
                },
                async: true                         // 6.是否采用异步请求
            })
        })
    }

)

第九章作业

网站对当前网址发送ajax请求，提取出数据里面的图片地址，将图片展示在浏览器页面上,thumbURL是图片地址(是json里面的字段)

ps: 需要在Chrome插件市场安装 “Cross Domain - CORS”插件(绿色的十字)

$(
    function () {
        $.ajax({
            url: "https://image.baidu.com/search/acjson?tn=resultjson_com&logid=7217367652009448130&ipn=rj&ct=201326592&is=&fp=result&fr=ala&word=%E5%9B%BE%E7%89%87&queryWord=%E5%9B%BE%E7%89%87&cl=2&Im=-1&ie=utf-8&oe=utf-8&adpicid=&st=&z=&ic=&hd=&latest=&copyright=&s=&se=&tab=&width=&height=&face=&istype=&qc=&nc=&expermode=&nojc=&isAsync=&pn=210&rn=30&gsm=d2&1685454799580=",
            type: "GET",
            dataType: "json",
            success: function (response) {
                alert("请求成功")
                // 获取图片数据 response就是返回的object对象(json)
                arr = response['data']
                myDiv = $("#div1") // 获取页面div标签
                for (let i = 0; i < arr.length; i++) {
                    image_url = arr[i]['thumbURL'] // 每个图片的地址
                    myDiv.append('<img src="' + image_url + '">') // 拼接到div中
                }
            },
            error: function () {
                alert("请求失败")
            },
        })
    }
)

居然能找到这来, 真是厉害~

1.前端基础

第一部分 HTML基础

第一章 常用网页标签

第一节 双标签

1.1.1 <h1></h1>H标签

1.1.2<div></div>盒子标签

1.1.3 <p></p>段落标签

1.1.4 <a href=""></a>超连接标签

第二节 单标签

1.2.1 <br> 换行

1.2.2 <hr> 水平线

1.2.3<img src="" alt=""> 图片标签

第二章 关于资源路径

第一节 相对路径

第二节 绝对路径(90%找不到)

第三章 列表标签

第一节 无序与有序列表

3.1<ul>+<li> 无序列表标签

3.2<ol>+<li> 有序序列表标签

第四章 表格标签

第一节 声明表格与行

4.1.1<table>和<tr>

第二节 确定单元格类型

4.2.1<th>和<td>

第五章 表单

第一节 输入框与密码框

第二节 单选

第三节 多选

第四节 文本输入区域

第五节 提交与重置

第六章 作业

第二部分 CSS基础

第零章 CSS引入HTML页面的三种方式

第一节 行内式

第二节 嵌入式

第三节 外链式

第一章 六种选择器

第一节 标签选择器

第二节 类选择器

第三节 层级选择器

第四节 id选择器

第五节 组选择器

第六节 伪类选择器

第二章 常见CSS属性

第一节 布局常用样式属性

第二节 文本常用样式属性

第三节 CSS样式溢出

第三章 行内元素与块元素

第一节 行内元素和块元素详细解释

第三部分 JavaScript基础

JavaScript基本准则

第零章 JS引入HTML页面的三种方式

第一节 行内式

第二节 内嵌式

第三节 外链式

第一章 数据类型

第二章 函数

第三章 全局变量与局部变量

第一节 全局变量

第二节 局部变量

第四章 条件判断

第一节 if/else if/else

第二节 三目运算符

第五章 逻辑判断

==第六章 获取标签和操作元素==

第一节 获取页面标签

第二节 获取和修改页面元素

==第七章 操作文本==

第一节 获取标签中的 文本

第二节 修改标签中的 文本

第八章 数组

第九章 循环

第十章 字符串

第十一章 对象

第十二章 计时器

第一节 创建计时器

第二节 清除计时器

第十三章 作业

第十四章 常用方法

第一章常用网页标签

第一节双标签

1.1.1 `<h1></h1>`H标签

1.1.2`<div></div>`盒子标签

1.1.3 `<p></p>`段落标签

1.1.4 `<a href=""></a>`超连接标签

第二节单标签

1.2.1 `<br>` 换行

1.2.2 `<hr>` 水平线

1.2.3`<img src="" alt="">` 图片标签

第二章关于资源路径

第一节相对路径

第二节绝对路径(90%找不到)

第三章列表标签

第一节无序与有序列表

3.1`<ul>`+`<li>` 无序列表标签

3.2`<ol>`+`<li>` 有序序列表标签

第四章表格标签

第一节声明表格与行

4.1.1`<table>`和`<tr>`

第二节确定单元格类型

4.2.1`<th>`和`<td>`

第五章表单

第一节输入框与密码框

第二节单选

第三节多选

第四节文本输入区域

第五节提交与重置

第六章作业

第一节行内式

第二节嵌入式

第三节外链式

第一章六种选择器

第一节标签选择器

第二节类选择器

第三节层级选择器

第五节组选择器

第六节伪类选择器

第二章常见CSS属性

第一节布局常用样式属性

第二节文本常用样式属性

第三章行内元素与块元素

第一节行内元素和块元素详细解释

第一节行内式

第二节内嵌式

第三节外链式

第一章数据类型

第二章函数

第三章全局变量与局部变量

第一节全局变量

第二节局部变量

第四章条件判断

第二节三目运算符

第五章逻辑判断

==第六章获取标签和操作元素==

第一节获取页面标签

第二节获取和修改页面元素

==第七章操作文本==

第一节获取标签中的文本

第二节修改标签中的文本

第八章数组

第九章循环

第十章字符串

第十一章对象

第十二章计时器

第一节创建计时器

第二节清除计时器

第十三章作业

第十四章常用方法

14.1.2`filter`

14.1.3`some`

第一节 jquery 对比原生js

第一节获取元素

第二节修改元素

第二节用途一: ajax向后端发送请求

第九章作业