目录⭐️❤️❄️⛅️

写在前面：
此博客是对学校头哥作业的一点总结，如有错误欢迎指正
⭐️value class id type name style属性异同
- ❤️class属性
- - 定义一个类并使用
- ❤️label标签
- ❤️id属性
- - ❄️Class 与 ID 的差异
  - ❄️通过 ID 和链接实现 HTML 书签
- ❤️name属性
- - ❄️定义和用法
- ❤️value属性
- ❤️type属性
- ❤️style 属性
⭐️CSS
- ❤️概述
- ❤️字体样式
- - ❄️浏览器定义字体
  - ❄️设置字体大小
  - - ⛅️可以用em（相对单位）来替代单位px
  - ❄️调整字体粗细和风格
- ❤️文本布局风格
- ❤️CSS选择器
- - ❄️元素选择器
  - ❄️类选择器
  - ❄️id选择器
  - ❄️类选择器与id选择器的区别
- ❤️div标签
⭐️使用flex布局实现顶部导航栏容器
⭐️javascript
- ❤️js数据类型
- - ❄️java数据类型的转换
  - - ⛅️字符串转整数
    - ⛅️字符串转小数
    - ⛅️数字转字符串
    - ⛅️bool和其他类型的互相转换
- ❤️javascript数组
- - ❄️数组创建的方法
  - ❄️长度，读取，写入
  - ❄️数组的增减
  - - ⛅️增
    - ⛅️减
  - ❄️数组的遍历和多维数组
  - - ⛅️二维数组的创建
- ❤️数组之间的常用方法
- - ❄️数组元素查找
  - ❄️数组的合并
  - ❄️数组的倒置
  - ❄️元素合并
  - ❄️sort排序
  - ❄️提取子数组
- ❤️函数
- - ❄️匿名函数
  - ❄️三种形式的函数如何调用
  - - ⛅️1.普通函数
    - ⛅️2.匿名函数
    - ⛅️3.类中定义的函数
  - ❄️函数参数的传递
  - - ⛅️有形参但是实参的数量和形参不匹配
    - ⛅️没有形参时
  - ❄️对象作为参数时
- ❤️JSON对象
- - ❄️JSON对象是什么
  - ❄️JSON对象和js对象的区别和联系
  - ❄️js中使用JSON对象
  - ❄️例题
- ❤️JSON数组
- - ❄️遍历
  - ❄️例题
- ❤️字符串
- - ❄️JSON字符串转换为JSON对象
  - ❄️JSON对象转换为JSON字符串
  - - ⛅️参数b为函数时
    - ⛅️参数b是数组
  - ❄️例题
- ❤️文档元素的操作
- - ❄️通过id获取文档元素
  - ❄️通过类名来获取文档元素
  - - ⛅️例题
  - ❄️通过标签名来获取文档元素
  - ❄️基于css类选择器querySelector方法
  - - ⛅️当传入的参数不是css类选择器，而直接是元素类型时
    - ⛅️eg：
  - ❄️querySelectAll（）获取元素的方法
  - ❄️节点树上的操作
  - ❄️属性值的获取
  - - ⛅️例题：
  - ❄️属性值设置
  - - ⛅️eg
  - ❄️创建节点
  - ❄️插入节点
  - - ⛅️eg：
  - ❄️删除节点
  - ❄️替换节点
  - - ⛅️例题
- ❤️事件处理
- - ❄️注册事件处理程序
  - - ⛅️为JavaScript对象设置一个函数
    - 调用addEventListener
    - 例题

写在前面：

此博客是对学校头哥作业的一点总结，如有错误欢迎指正

⭐️value class id type name style属性异同

❤️class属性

定义一个类并使用

语法：

.类名{可以定义颜色；背景等属性
}

如何使用：

<p class = 类名>.....</p>

eg：

<!DOCTYPE html>
<html>
<head>
<style>
.cities {background-color:black;color:white;margin:20px;padding:20px;
}
</style>
</head><body><div class="cities">
<h2>London</h2>
<p>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
</div> </body>
</html>

❤️label标签

如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
“for” 属性可把 label 绑定到另外一个元素。所以应该把 “for” 属性的值设置为相关元素的 id 属性的值。所以label标签的 for 属性应当与相关元素的 id 属性相同。

<form><label for="male">Male</label><input type="radio" name="sex" id="male" /><br /><label for="female">Female</label><input type="radio" name="sex" id="female" />
</form>

❤️id属性

id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的
id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。
下面的例子中我们有一个 h1元素，它指向 id 名称 “myHeader”。这个 h1元素将根据 head 部分中的 #myHeader 样式定义进行样式设置：

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {background-color: lightblue;color: black;padding: 40px;text-align: center;
}
</style>
</head>
<body><h1 id="myHeader">My Header</h1></body>
</html>

❄️Class 与 ID 的差异

同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：

❄️通过 ID 和链接实现 HTML 书签

HTML 书签用于让读者跳转至网页的特定部分。

❤️name属性

❄️定义和用法

name 属性规定 input 元素的名称。

name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

注：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

❤️value属性

带有初始（默认）值的 HTML 表单：

❤️type属性

type 属性规定 input 元素的类型

❤️style 属性

style 属性用于改变 HTML 元素的样式
比如：背景颜色，字体样式，文本对齐等

<html>
<body style="background-color:PowderBlue;"><h1>Look! Styles and colors</h1><p style="font-family:verdana;color:red">
This text is in Verdana and red</p><p style="font-family:times;color:green">
This text is in Times and green</p><p style="font-size:30px">This text is 30 pixels high</p></body>
</html>

⭐️CSS

❤️概述

一般而言，用于文本的CSS属性可以分为如下两类：

字体样式：用于字体的属性，包含字体类型、大小、粗细等；

文本布局风格：用于设置文本的间距以及其他布局功能的属性，包含设置字与字之间的空间，文本如何对齐等等。

❤️字体样式

❄️浏览器定义字体

p{font-family:"Times New Roman",Georgia,Serif;}

“Times New Roman”,Georgia,Serif都是字体名，通常情况下无法保证你想在你的网页上使用的字体都是可用的。所以，我们使用字体栈 (font stack)给浏览器提供多种选择
浏览器会从第一个字体开始选择，如果找到可以用的字体就可以使用该字体

❄️设置字体大小

使用font-size进行设置，px意思是像素，是一个绝对单位，在不同大小的页面上计算出的像素值都是一样，所以在页面中按ctrl+滚轮，字体以px为单位的网站没有反应。
eg：

```cpp
HTML:
<body>  <h1>一级标题通常最大</h1>  <h2>二级标题次之</h2>  <p>段落文字大小适中</p>
</body>  CSS:
h1 {  font-size: 40px;
}
h2 {  font-size: 30px;
}
p {  font-size: 18px;
}

⛅️可以用em（相对单位）来替代单位px

em的方式可以解决在部分Internet Explorer 中无法调整文本。
浏览器中默认的文字大小是16 px，1 em代表与当前字体大小相等。
字体单位使用em能支持IE6下的字体缩放
eg：

h1 {  font-size:2.5em;  /* 40px/16=2.5em */
}
h2 {  font-size:1.875em; /* 30px/16=1.875em */
}
p {  font-size:1.125em; /* 18px/16=1.125em */
}

❄️调整字体粗细和风格

没啥好写的
font - weight : ;从100到900逐渐变粗
风格：
normal：正常
italic：斜体
oblique：倾斜的字
italic和oblique的区别：有些子没有斜体这种字体，那么就要用oblique来将其强制倾斜输出

❤️文本布局风格

使用text-decoration设置字体上的文本装饰。
其值有：

none: 取消已经存在的任何文本装饰；underline: 文本下划线；overline: 文本上划线；line-through: 贯穿文本的线；blink：闪烁文本。

❤️CSS选择器

选择器概念：选择html中的指定元素进行样式的改变

❄️元素选择器

最常见和易理解的CSS选择器是元素选择器，又称为类型选择器。也就是将HTML文档中的元素，直接作为选择器使用。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>元素选择器</title><style type="text/css">/* ********** BEGIN ********** *//* 元素选择器 */html {background-color:#F0F0F0;}header{padding:40px;background-color:white; }footer {margin-top: 20px;color:grey;font-size:0.6em;}/* ********** END ********** */</style>
</head>

❄️类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式，而不考虑具体的元素时，会使用类选择器
例如，对于HTML页面:

<body>
<div class="main">  <article class="news">  <h1>地震自救指南</h1>  <p>大的晃动时间约为1分钟左右。</p>  </article>
</div>
</body>

之后，添加页面样式:

  <style type="text/css">  .main {  background-color: ivory;  margin: 10px;  }.news {  padding: 10px;  color: black;  font-weight: bold;  }p {  color: grey;  }  </style>

与元素选择器不同，对同一类的元素应用样式，需要在类名前加上一个点号（.），然后书写相应的样式声明。

❄️id选择器

<body>  <h1 id="important">温馨提示</h1>  <p>少一串脚印，多一份绿意。</p>
</body>

在样式表中，指定对应id名元素的样式，使用#符号

#important {  color: red;  font-weight: bold;
}

❄️类选择器与id选择器的区别

它们最大的区别在于，在一个 HTML 文档中，可以为任意多个元素指定类，但id选择器只能使用一次，一个id只能运用于一个元素。

一般情况下，都推荐使用类选择器。而在一些特定情况下，我们才会建议使用id选择器。例如，通过id选择器在页面中定义锚，在编写 JavaScript 为指定的页面元素应用特殊行为时。

❤️div标签

< d i v> “是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 < d i v> 固有的唯一格式表现。可以通过 < d i v> 的 class 或 id 应用额外的样式。

<body><h1>NEWS WEBSITE</h1><p>some text. some text. some text...</p>...<div class="news"><h2>News headline 1</h2><p>some text. some text. some text...</p>...</div><div class="news"><h2>News headline 2</h2><p>some text. some text. some text...</p>...</div>...
</body>

⭐️使用flex布局实现顶部导航栏容器

还做不来QWQ

⭐️javascript

❤️js数据类型

1.数字类型number
包括整数和浮点数
2.字符串string
js中没有字符的说法，取而代之的是长度为1的字符串
字符串可以包含在单引号或者是双引号中，如果字符串中有单引号或者双引号的话就需要用转义字符

如 I'm studying a language，需要用\把中间的单引号转义：var tran = 'I\'m studying language';

3.布尔型bool
true和 false
4.数组array
JavaScript 数组中的元素可以是不同的数据类型

var myArray = [1,2,true,"string",3.2];

上面就定义了一个含有整数、布尔型、字符串、浮点数的数组
4.null 和 undefined
undefined 表示某个变量没有被赋值，比如，变量在申明的时候没有赋值，那么它的值就是 undefined。null 是对象，是一个空的对象引用

var myVar;
console.log(myVar);
console.log(a);

如上面所示，尝试输出变量 myVar，结果会输出 undefined，因为这个变量只申明，没有赋值。而尝试输出变量a会产生错误，因为这个变量没有定义，是一个空的对象引用
5.对象类型object（类似于C语言结构体）

对象的创建：
var student = {  name:"Peter",  age:23,  gender:male};              申明并初始化对象  对象的使用，比如获取对象里的某个属性的值：
console.log(student.name);     输出"Peter"  还可以更改这个属性的值：
student.name = "Bob";
console.log(student.name);     输出"Bob"

❄️java数据类型的转换

⛅️字符串转整数

parseint（“string”,“int”）后面的int表示的是int进制
如果第一个字符是数字的话，就一直转化到第一个不是数字的字符为止
如果第一个字符不是数字的话就停止转换

parseInt("12");
parseInt("12.2");
parseInt("C",16);
parseInt("12a2");
parseInt("0XC");     以上均返回数字12
parseInt("a12");     失败

Number（“string”）
使用 Number() 转换一个字符串，这个字符串必须是数字的字符串形式，否则就会报错，比parseint使用更加严格

Number("12");     返回12
Number("12a2");   返回NaN
Number("");       返回0

⛅️字符串转小数

与整数相同，字符串转小数也有两种方式：parseFloat() 和 Number()。

parseFloat() 方法只转换到字符串中第一个不是数字的字符为止，当然这个字符不包括第一个小数点

parseFloat("12");      //返回12
parseFloat("12.2a");   //返回12.2
parseFloat("12.2.2");  //返回12.2，第二个小数点会让转换停止
parseFloat(null);      //返回0

⛅️数字转字符串

toString() 实现一般的数字转字符串，String() 则是强制类型转换
补充：tostring可以选择使用多少进制输出，如数字12调用 toString(16) 得到的结果就是 C

var myNum = 15;
console.log(myNum.toString());       输出"15"
console.log(myNum.toString(16));     输出"F"
console.log(String(myNum));          输出"15"

⛅️bool和其他类型的互相转换

1.布尔型转为字符串直接就是字符串 true 或者 false；
2.布尔型中的 true 转换为数字 1，布尔型中的 false 转换为数字 0;
3.数字 0、null、undefined、空字符串转换为布尔型的 false，其他所有都是转换为 true

var myBool = ture;
myBool.toString();     返回"true"
Number(true);          返回1
Boolean("js");         返回true
Boolean("");           返回false

注意：上面讲的空字符串是""，而不是空格字符串" "，这两个不同，后者双引号之间有一个英文字符的大小的空位，他们转为布尔型的结果不同：

Boolean("");      返回false
Boolean(" ");     返回true

❤️javascript数组

❄️数组创建的方法

1.直接创建

var numberArray = [1,2,3,4,5];
数字数组
var stringArray = ["java","script","edu","coder"];
字符串数组
var mixArray = [1,2,"java",true,6.6];
混合数组

2.创建数组对象

var myArray = new Array();创建一个初始为空的数组
var lengthMixArray = new Array(6);创建一个长为6的数组

❄️长度，读取，写入

读取写入和C语言差不多
长度可以用数组名.length来输出

❄️数组的增减

⛅️增

数组名.push()：向数组的尾部添加一个元素，返回值为数组的新的长度

var numberArray = [12,23,34,45];
var newLength = numberArray.push(56);
console.log(newLength);输出5
console.log(numberArray);输出[12,23,34,45,56]

数组名.unshift（）向数组头部添加元素，返回值为数组的新长度

var sArray = ["ja","va","script"];
var newLength = sArray.unshift("he","llo");
console.log(newLength)输出5
console.log(sArray);输出["he","llo","ja","va","script"]

⛅️减

1.在尾部删除元素
直接修改数组的长度可以直接删除索引最大的值

var array = [1,2,true,"hello"];
array.length = 3;索引最大的元素被删除
console.log(array);输出[1,2,true]

delete 数组名[索引]
但是删除后，会有一个空占位符，所以数据的长度保持不变

var dArray = [11,22,33,44,55];
delete dArray[4];删除索引最大的元素
console.log(dArray);输出[11,22,33,44]
console.log(dArray.length);长度为5

pop()，一次删除一个，并返回被删除的元素

var numberArray = [3,4,5,6,7];
var deletedNumber = numberArray.pop();
console.log(deletedNumber);输出被删除的元素7
console.log(numberArray);删除后的数组为[3,4,5,6]

2.在头部删除元素
shift（），和unshift对应，返回值是删除的元素
shift单词的意思是：删除，去掉。

var dArray = [11,22,33,44,55];
console.log(dArray.shift());输出11，11被从数组中删除
console.log(dArray);输出[22,33,44,55]

❄️数组的遍历和多维数组

遍历和C语言差不多用for循环

⛅️二维数组的创建

JavaScript中二维数组的列的长度不唯一，第一列可以有4个元素，第二列可以有5个元素，等等

1.创建已知的二维数组：

var multiArr = [[1,2,3,4],[5,6,7],[8,9]];

2.创建一个4行6列的二维数组

var muArr = new Array(4);
for(var i = 0;i <4;i++) {  muArr[i] = new Array(6);
}

eg:

本关的编程任务是补全右侧代码片段中begin至end中间的代码
具体要求如下：将一维数组arr转为a行b列的二维数组，行优先；返回该二维数组；具体请参见后续测试样例。

var arr = [1,2,3,4,5,6,7,8,9,0,10,11,12,13,14,15,16,17,18,
19,20,21,23,22];
function mainJs(a,b) {a = parseInt(a);b = parseInt(b);//请在此处编写代码/*********begin*********/var arr1=new Array(a);for(var i=0;i<a;i++){arr1[i]=new Array(b);}var count=0;for(var i=0;i<a;i++){for(var j=0;j<b;j++){arr1[i][j]=arr[count++];}}return arr1;
}

❤️数组之间的常用方法

❄️数组元素查找

根据值查找元素的位置，有两个方法：indexOf()和lastIndexOf()，前者从索引小处往大搜索，后者相反。都返回第一次遇到该元素时的索引。

两者都有两个参数，第一个参数为要查找的元素，第二个参数可选，为搜索的起点索引。如：

var search = ["a","b","a","b","c","d","a","a","b","a"];
console.log(search.indexOf("a"));//输出0
console.log(search.lastIndexOf("a"));输出9
console.log(search.indexOf("a",2));输出2，从索引为2处开始搜索

❄️数组的合并

concat()实现数组合并，其形式是数组a.concat(数组b)，合并之后返回新数组，新数组为数组a后面连接数组b，但是数组a和b不变

var a = [1,2,3];
var b = [4,5,6];
var c = a.concat(b);合并后返回新数组
console.log(c);输出[1,2,3,4,5,6]

❄️数组的倒置

reverse()实现数组倒置，无参数，返回倒置后的数组，同时调用该方法的数组也会被倒置

var a = [1,2,3,4];
var b = a.reverse();
console.log(a);输出[4,3,2,1]
console.log(b);输出[4,3,2,1]

❄️元素合并

join()将数组的所有元素连接起来组成字符串，参数为元素之间的分隔符，默认逗号。

var sArray = ["June","July","August"];
console.log(sArray.join());输出June,July,August
console.log(sArray.join("+"));输出June+July+August

❄️sort排序

1.对字符进行排序
默认对asc码大小进行从小到大的排序
2.对数字的排序
无参情况

var arr = [1,2,10,5,12];
arr.sort();
console.log(arr);输出[1,10,12,2,5];

带参情况

带参数的格式如下：
arr.sort(function(a,b){  return a-b;  升序排列
})
或者：
arr.sort(function(a,b){  return b-a;  降序排列
})

❄️提取子数组

var arr = ["a","b","c","d","e"];
console.log(arr.slice(0,3));["a","b","c"]
console.log(arr.slice(0,-2));["a","b","c"]
console.log(arr.slice(4));["e"]
console.log(arr.slice(-4));["b","c","d","e"]

❤️函数

function 函数名（参数（不需要＋类型名））{return 。。。
}

❄️匿名函数

用表达式的方式定义函数，就是用赋值表达式把函数赋值给一个变量，这其实就是把函数看成一个变量。这个时候函数可以有名字，也可以没有名字，没有名字的函数叫做匿名函数

带名字的；
var funct = function getMax(a,b) {  return a>b?a:b;
};注意这后面的分号不能少，因为我们定义的是一个变量!

调用时，只能在函数定义语句之后调用该函数，且调用的时候只能用变量名funct，不能用函数名getMax，如：

var funct = function getMax(a,b) {  return a>b?a:b;
};
console.log(funct(1,2));

例题

定义一个匿名函数，将它赋值给变量myFunc；该函数实现求一个三位数的各个位上的数字之和，
比如123各个位上的数字分别为1、2和3，和是6；

答案：因为js中的/不是整除的意思，所以需要用parseint来将其转换成整数的形式

function mainJs(a) {a = parseInt(a);//请在此处编写代码/********** Begin **********/var b=parseInt(a/100);var c=parseInt((a%100)/10);var d=parseInt(a%10);return d+b+c;/********** End **********/return myFunc(a);
}

❄️三种形式的函数如何调用

⛅️1.普通函数

//求最大值的函数
function getMax(b,c) {return b>c?b:c;
}调用：return getMax(b,c);

⛅️2.匿名函数

var getMin = function(b,c) {return b>c?c:b;
}调用：return getMin(b,c)函数名是定义的变量名

⛅️3.类中定义的函数

var myObject = {id:1,name:"function",myFunc:function(b,c) {return b+c;}
}return myObject.myFunc(b,c);

❄️函数参数的传递

⛅️有形参但是实参的数量和形参不匹配

在大部分的编程语言里面，都会对调用函数时传入的实参个数和类型进行检查，而JavaScript既不检查实参的类型，也不检查实参的个数。
JavaScript中的实参会按照顺序从左到右依次匹配上形参：

当实参个数少于形参时，靠右的形参会被传入值undefined。如：

function myFunction(a,b,c) {  console.log(a);  console.log(b);  console.log(c);
}
myFunction(1,2);

实参1传入形参a，实参2传入形参b，undefined传入形参c。
如果只想给右侧的参数传入数据，可以给前几个实参传入undefined。如：

function myFunction(a,b,c){
console.log(a);
console.log(b);
console.log(c);
}
myFunction(undefined,1,2);

上面这两种做法不够严谨，最佳实践是给可能被传入undefined值的形参设定一个默认值。如：

function getSum(a,b,c) {  if(c === undefined)   c = 0;  console.log(a+b+c);
}
myFunction(1,2);

⛅️没有形参时

JavaScript一切都是对象，实参也是一个对象，有一个专门的名字arguments，这个对象可以看成一个数组（类数组，不是真的数组），实参从左到右分别是arguments[0]、arguments[1]…，arguments.length表示实参的个数。

实参对象一个最重要的应用是可变长参数列表，想象一下求一组数的和，如果这组数不在一个数组里面，使用函数来求则无法定义函数体，因为不知道形参的个数。这个时候就可以用arguments来解决问题。如:

function getSum() {  var aLength = arguments.length;  var sum = 0;  for(var i = 0;i < aLength;i++) {  sum += arguments[i];  }  return sum;
}
console.log(getSum(1,2,3,4,5))输出15

eg：

编程要求
本关的编程任务是补全右侧代码片段中Begin至End中间的代码，具体要求如下：

定义函数getMax()；

该函数计算并返回一组整数的最大值；

整数的个数不确定；

如果整数个数为0，直接返回0；

请在此处编写代码
/********** Begin **********/
function getMax(){var alength=arguments.length;var max=0;for(var i=0;i<alength;i++){if(max<arguments[i]){max=arguments[i];}}return max;
}
/********** End **********/function mainJs(a) {a = parseInt(a);switch(a) {case 1:return getMax(23,21,56,34,89,34,32,11,66,3,9,55,123);case 2:return getMax(23,21,56,34,89,34,32);case 3:return getMax(23,21,56,34);case 4:return getMax(23,21,56,34,89,34,32,11,66,3,9,55,123,8888);case 5:return getMax();default:break;}
}

❄️对象作为参数时

对象作为参数
复杂的函数通常多达十几个参数，尽管JavaScript不做参数个数和类型的检查，但是调用时实参的顺序不能乱。开发人员需要检查每一个实参和形参的对应关系，这样效率很低。一种很好的解决方案是使用对象作为参数，函数会根据对象的属性名操作参数。

function myFunction(obj) {  console.log(obj.name);  obj.number++;  return obj.number;
}
myObj = {name:"myObj",number:34};
myFunction(myObj);//输出myObj
console.log(myObj.number);//输出35

这种情况下开发人员不需要记住或查阅形式参数的顺序。

❤️JSON对象

❄️JSON对象是什么

是一种文本存储和数据传递的格式，示例：

{"name":"Jerry","age":15
}

❄️JSON对象和js对象的区别和联系

定义一个JavaScript对象：var myObject = {  id:1,  name:"Peter Bruce",  "first name":"Bruce",  display:function() {  console.log(this.name);  }
}  定义一个JSON对象：{"id":1,"name":"Peter Bruce","first name":"Bruce"
}

三点区别：

1.JSON对象的属性名（key）必须被包含在双引号之中，而JavaScript对象除了有空格的属性名、中间有连字符-的属性名必须在双引号之中外，其它随意；

2.不能在JSON对象中定义方法，而在JavaScript对象中可以；

3.JSON对象可以被很多语言操作，而JavaScript对象只有JS自己可以识别。

❄️js中使用JSON对象

在JavaScript中定义一个JSON对象：

var jsonObject = {"name":"js","number":2};

使用时还是和js对象差不多

❄️例题

定义一个JSON对象JSONObject，它有三个属性：key1、key2和key3，它们的值分别是参数a、b和c；

删除其中名字为key3的属性；

删除完成后，遍历其余的所有属性，返回各属性的值连接成的字符串，中间用,隔开；

具体请参见后续测试样例。
答案：

function mainJs(a,b,c) {//请在此处编写代码/********** Begin **********/var JSONObject = {"key1":a,"key2":b,"key3":c};delete JSONObject.key3;return a+","+b;/********** End **********/
}

❤️JSON数组

JSON属性对应的值(value)是一个数组，比如：

{
"country":"China",
"population":"1.3billion",
"bigCity":["Peking","Shanghai","ShenZhen","HongKong"]
}

数组的每一个元素还可以是另外一个json对象。比如：

{  "class":"高三一班",  "studentNumber":70,  "score":[  {"name":"LiMing","score":128},  {"name":"ZhangHua","score":134},  {"name":"ShenLu","score":112}  ]
}

❄️遍历

var myJson = {
"country":"China",
"population":"1.3billion",
"bigCity":["Peking","Shanghai","ShenZhen","HongKong"]
}
for(var i = 0;i < myJson.bigCity.length;i++) {  console.log(myJson.bigCity[i]);依次输出Peking,Shanghai,ShenZhen,HongKong
}

❄️例题

已知myJson的第三个属性的值是一个数组，参数a是一个数字，要求将数组中前a个元素（这些元素都是字符串类型）拼接起来，元素之间用,隔开，返回拼接后的字符串；

比如a为2的时候，你需要返回js,java。

答案：只能枚举

var myJson = {"category":"computer","detail":"programming","language":["js","java","php","python","c"]
}
function mainJs(a) {a = parseInt(a);//请在此处编写代码/********** Begin **********/if(a==1){return myJson.language[0];}if(a==2){return myJson.language[0]+","+myJson.language[1];}if(a==3){return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2];}if(a==4){return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2]+","+myJson.language[3];}if(a==5){return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2]+","+myJson.language[3]+","+myJson.language[4];}/********** End **********/
}

为什么不能这样呢

var myJson = {"category":"computer","detail":"programming","language":["js","java","php","python","c"]
}
function mainJs(a) {a = parseInt(a);//请在此处编写代码/********** Begin **********/var sum="";for(var i=0;i<myJson.language.length;i++){sum=myJson.language[i]+",";}sum=sum-",";console.log(sum);/********** End **********/
}

❤️字符串

在前端和后台之间传递数据可以使用JSON，但是实际上传递的是JSON字符串，而JSON对象是不可以直接进行传递的

JSON字符串就是在JSON对象两边套上’形成的字符串，如：

var JSONObject  = {"k1":"v1","k2":"v2"};JSON对象
var JSONString1 = '{"k1":"v1","k2":"v2"}';JSON字符串

❄️JSON字符串转换为JSON对象

当JavaScript收到从后台传来的JSON字符串后，怎么把它变成JSON对象方便处理呢？

JSON.parse(a,b)，b是一个可选的函数参数。

对象的每一个属性的值加1
var text = '{ "key1":1, "key2":2, "key3":2.2}';
var obj = JSON.parse(text, function (key, value) {  if(key === '')当遇到对象本身时，不进行加1操作  return value;  return value+1;对属性值加1
});
console.log(obj);输出Object {key1: 2, key2: 3, key3: 3.2}

❄️JSON对象转换为JSON字符串

JSON.stringify(a,b,c)，a是待转换的JSON对象，b和c为可选参数。

var JSONObject = {"k1":"v1","k2":"v2"};
JSON.stringify(JSONObject);JSON对象转换为JSON字符串

⛅️参数b为函数时

对象的所有属性值加1，再转为字符串
var JSONObject = {"k1":1,"k2":2.2};
var JSONString = JSON.stringify(JSONObject,function(k,v){  if(k === '')处理到了JSON对象本身  return v;  return v+1;所有的属性的值加1
});
console.log(JSONString);输出{"k1":2,"k2":3.2}

⛅️参数b是数组

数组存储的是属性的名字，用来指定只转换哪些属性：

转换对象中特定的属性
var JSONObject = {"k1":1,"k2":2.2,"k3":3};
var JSONString = JSON.stringify(JSONObject,["k1","k2"]);
console.log(JSONString);输出{"k1":1,"k2":2.2}

❄️例题

先将JSON字符串JSONString转换为JavaScript对象JSONObject；

然后将JSONObject的key1属性的值设置为mainJs()函数的参数a；

最后将JSONObject转换为JSON字符串，并返回该字符串；

答案：


var JSONString = '{"key1":"value1","key2":"value2"}';
function mainJs(a) {//请在此处编写代码/********** Begin **********/var JSONObject = JSON.parse(JSONString);JSONObject.key1 = a;return JSON.stringify(JSONObject);/********** End **********/
}

❤️文档元素的操作

❄️通过id获取文档元素

文档元素：指的就是、等等这样一个个的标签和里面的内容。
比如文档元素就是这样：

<title>这里是标题</title>

在JavaScript中，元素< title >对应一个对象，这个对象有一个属性的值是“这里是标题”。

所以，用JS操作这些文档元素，操作的就是它们对应的JS对象

当Js要操作这些元素时，第一步自然是获得这些元素对应的JavaScript对象，即可以通过id来获取

文档元素一般都有一个id属性，它的值在本文档中唯一，如下：

<p id="myId">这是我学习JavaScript的网址：</ p>

用这个id获取< p>元素的方法如下：
== document.getElementById(“myId”); ==

var pElement = document.getElementById("myId");

❄️通过类名来获取文档元素

通过类名获取文档元素
文档元素的类名不唯一（存在多个文档元素的类名相同的情况），如下：

<p class="myName">段落</p>
<a class="myName" href="https://www.educoder.net">
这是一个链接</a>

document的getElementsByClassName（）方法用来获取指定类名的文档元素数组（NodeList，一般叫节点列表），如下：

var myNodeList = document.getElementsByClassName("myName");

这样，myNodeList[0]就是< p >元素，而myNodeList[1]就是< a>元素，通过这个方法的名字我们也可以知道获取的标签不唯一。

⛅️例题

通过getElementsByClassName()方法获取文档中唯一的

元素；

<body><img src="" class="myName"/><form class="myName" id="myForm"></form><div class="myName">This is quote</div><p class="myName">This is what you should get</p><script><!-- 请在此处编写代码 --><!---------Begin--------->var myElement=document.getElementsByClassName("myName")[3];<!---------End--------->myElement.innerText="I changed the text";</script>
</body>

❄️通过标签名来获取文档元素

eg:
getElementsByTagName(“a”)[1];
getElementsByTagName(“a”)[1];

❄️基于css类选择器querySelector方法

用css选择器的完整名字作为querySelector的参数，就可以获取该选择器控制的所有元素

以上面的html代码作为例子，比如我们想要获得class="css1"的元素：

css1是一个类选择器，在css代码里面的完整表示为.css1，那么这个.css1直接作为querySelector的参数，即可获得class="css1"的元素：

var myElement =  document.querySelector(".css1");
console.log(myElement.innerText);输出“CSS选择器”

querySelector只返回一个元素，如果指定的选择器控制的元素有多个，返回第一个

⛅️当传入的参数不是css类选择器，而直接是元素类型时

⛅️eg：

获取html代码里面的第一个文本元素，并赋值给变量pElement，要求使用querySelector方法。

<body><p>你需要获得的元素是我</p><p>是楼上</p><p>是楼上的楼上</p><script><!-- 请在此处编写代码 --><!---------Begin--------->var pElement=document.querySelector("p");<!---------End--------->console.log(pElement);</script>
</body>
</html>

❄️querySelectAll（）获取元素的方法

如果一个选择器控制的元素有多个，而且我们需要取到这些元素，就需要用querySelectorAll方法，该方法返回指定的选择器对应的多个元素

<p class="pClass">我是第一个元素</p>
<p class="pClass">我是第二个元素</p>
<p class="pClass">我是第三个元素</p>

var p1 = document.querySelector(".pClass");
var allP = document.querySelectorAll(".pClass");
console.log(p1);
console.log("=====我是巨大的分割线=====");
console.log(allP);

❄️节点树上的操作

类似于树状结构
eg：

<body>
<div id="div1">  <div class="cl1">  <p>文本</p>  <a>超链接</a>  </div>  <div class="cl2">  <select id="se">  <option>红</option>  <option>黄</option>  <option>蓝</option>  </select>  </div>
</div>
</body>

若想求得a节点的内容并输出

首先，我们获取最外层的div节点：var div1 = document.getElementById("div1");
然后获取它的第一个子节点（class值为cl1的节点）：firstElementChild表示第一个子节点
var cl1 = div1.firstElementChild;再获取cl1的最后一个子节点，即a节点：
var aElement = cl1.children[1]

连起来：

var aElement =
document.getElementById("div1")
.firstElementChild
.children.[1]

❄️属性值的获取

怎么获取属性值呢？先看一段html代码：

<a href="https://www.educoder.net"
target="_blank">EduCoder</a>

先获取文档元素：

var aElement = document.getElementsByTagName("a")[0];

再用getAttribute() 方法

console.log(aElement.getAttribute("href"));
输出https:www.educoder.net

或者是直接

aELEment.href

class等文档元素的属性，不能直接用文档元素对象.class来获取，因为class是JavaScript中的关键字，需要用className来代替

⛅️例题：

获取html代码里面的class属性的值；
结果赋值给变量srcValue；

<body><p id="p"></p><img class="imgClass"/><a id="a"></a><script><!-- 请在此处编写代码 --><!---------Begin--------->var myElement=document.getElementsByClassName("imgClass")[0];var srcValue=myElement.className;<!---------End--------->console.log(srcValue);</script>
</body>

❄️属性值设置

⛅️eg

通过id来获取form1元素（只有一个），赋值给变量myElement；

通过操作myElement将form1的method属性改为post；

<body><p id="p"></p><form id="form1" method="get" target="https://abc.xyz/def/ghi">This is form</form><a id="a"></a><script><!-- 请在此处编写代码 --><!---------Begin--------->var myElement=document.getElementById("form1");myElement.method="post";    <!---------End--------->console.log(document.getElementById("form1").method);</script>
</body>

❄️创建节点

document.createElement(“tagName”)，其中tagName是标签的名字，比如a,p,img等
eg:

var newA = document.createElement("a");//创建超链接节点
newA.src = "https://www.educoder.net";//设置超链接的目的地址

❄️插入节点

最常用的就是在标签中插入一个新的标签
1.x.appendChild(node)：将node插入到x的最后一个子
2.insertBrfore(node1,node2)，将node插入到node2之前

⛅️eg：

使用createElement方法创建一个li类型的新节点newNode；

通过innerText方法设置该节点内部文本的内容为Canada；

通过getElementById和appendChild方法将newNode节点添加到ul标签下面，作为它的最后一个子节点；

在这里插入代码片

❄️删除节点

removeChild()：调用者是父节点，参数是子节点，作用是删除这个子节点
eg：
获取id为browser的节点，赋值给变量parent;

获取id为opera的节点，赋值给变量child；

通过removeChild方法删除child节点；

获取节点使用getElementById方法；

字符串类型参数用""包含在内。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><ol id="browser"><li id="chrome">Chrome</li><li id="firefox">Firefox</li><li id="opera">Opera</li><li id="safari">Safari</li></ol><script><!-- 请在此处编写代码 --><!---------Begin---------><!---------End---------></script>
</body>
</html>

❄️替换节点

replaceChild(a,b)，调用者是要被替换的父节点，a是新的节点，b是被替换的节点

第一步，获取父节点：

var parNode = document.getElementById("parent");

第二步，获取要被替换的子节点：

var oldNode = document.getElementById("child3");

第三步，创建新节点：

var newChild = document.createElement("li");
newChild.innerText = "武夷山";

第四步，替换：

parNode.replaceChild(newChild,oldNode);

⛅️例题

获取id为parent的节点（父节点），赋给变量parent；

获取id为old的节点（子节点），赋给变量old；

newChild已知，用newChild替换子节点old；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><ol id="parent"><a id="old" href="https://www.google.com">Google</a></ol><script>var newChild = document.createElement("a");newChild.innerText = "eduCoder";newChild.href = "https://www.educoder.net";<!-- 请在此处编写代码 --><!---------Begin--------->var parent = document.getElementById("parent");var old = document.getElementById("old");parent.replaceChild(newChild,old);<!---------End---------></script>
</body>
</html>

❤️事件处理

❄️注册事件处理程序

什么是事件：比如表单元素，可能会发生提交事件，我们需要为每一个事件绑定一个事件处理程序，也叫为时注册事件处理程序，以下是三种事件处理方法

⛅️为JavaScript对象设置一个函数

页面上的元素对应一个js对象，元素的每一个事件对应对象的一个属性，比如

<form id="myForm"></form>  var myForm = document.getElementById("myForm");

myForm对应页面中id值为myForm的表单，myForm.onsubmit对应表单提交事件，myForm.onreset对应表单重置事件。通过为这些属性设置一个函数类型的值，实现事件处理程序的注册：

/为表单提交事件注册处理程序
myForm.onsubmit = function() {  console.log("表单提交的事件处理程序");
}
/为表单重置事件注册处理程序
myForm.onreset = function() {  console.log("表单重置的事件处理程序");
}

调用addEventListener

addEventListener() 函数也可以注册事件处理程序，函数的第一个参数是事件的类型，第二个参数是事件处理程序：

<form id="myForm"></form>
var myForm = document.getElementById("myForm");
myForm.addEventListener("submit",function() {  console.log("表单提交中");
});

例题

通过getElementById()获取id为button2的按钮，赋值给变量button2，然后使用
button2.onclick()方法为该按钮绑定事件处理程序listenButton2()；

通过getElementById()获取id为button3的按钮，赋值给变量button3，然后使用
button3.addEventListener()方法为该按钮绑定click事件的事件处理程序listenButton3()。

<body><button id="button1" onclick="listenButton1()">按钮1</button><button id="button2">按钮2</button><button id="button3">按钮3</button><script>function listenButton1() {console.log("监听button1");}function listenButton2() {console.log("监听button2");}function listenButton3() {console.log("监听button3");}//请在此处编写代码/********** Begin **********/var button2 =document.getElementById("button2");button2.onclick=listenButton2;var button3 =document.getElementById("button3");button3.addEventListener("click",listenButton3);/********** End **********/</script>
</body>
</html>

重生之我是web开发程序员相关推荐

101个帮助你成为更好Web开发程序员的技巧
对于像你我这样的开发人员来说,进入IT行业会带来很多挑战和机遇.有很多东西要学习和掌握.我们有React,Vue,Angular和Svelte之类的JavaScript框架.我们有静态站点生成器,即J ...
web开发程序员有几种_每个程序员都应该知道的10种流行的Web开发工具
web开发程序员有几种 Are you planning to get into web development? Take a tool with you, it's scary out there ...
前端开发需要掌握什么技术，成为一个高薪的web前端程序员很难吗？
一位优秀的前端开发工程师,技术是非常重要的.每年前端技术不断更替,学前端要掌握最新的知识才能赢在起跑线上.前端开发本身是一个高薪职业,但你的技术决定你的发展方向.那么,前端开发需要掌握什么技术,如何才 ...
10年后端开发程序员详解数据库缓存方案到底有多少名堂。丨Linux服务器开发丨后端开发丨中间件丨web服务器丨数据库缓存
数据库缓存方案到底有多少花样,一节课带你缕清 1. 读写分离方案 2. 若干个缓存解决方案 3. 缓存故障如何解决视频讲解如下,点击观看: 10年后端开发程序员详解数据库缓存方案到底有多少名堂.丨L ...
成为测试/开发程序员，小张：现实就来了个下马威......
目录:导读前言一.Python编程入门到精通二.接口自动化项目实战三.Web自动化项目实战四.App自动化项目实战五.一线大厂简历六.测试开发DevOps体系七.常用自动化测试工具八 ...
测试/开发程序员日常的，内心暗流涌动......
目录:导读前言一.Python编程入门到精通二.接口自动化项目实战三.Web自动化项目实战四.App自动化项目实战五.一线大厂简历六.测试开发DevOps体系七.常用自动化测试工具八 ...
测试/开发程序员小张相亲记......
目录:导读前言一.Python编程入门到精通二.接口自动化项目实战三.Web自动化项目实战四.App自动化项目实战五.一线大厂简历六.测试开发DevOps体系七.常用自动化测试工具八 ...
一个合格的web前端程序员要学会哪些技能？
想要成为一名合格的web前端程序猿,要学习的东西有很多,那么web前端要学会哪些技能呢?来看看下面的详细介绍就知道了. 一个合格的web前端程序员要学会哪些技能?想从事web前端开发,只会HTML.C ...
重庆找Java开发工作_重庆【Java开发程序员】
重庆[Java开发程序员],提倡一切为了学员就业的办学思想,教学过程中坚持以练习企业项目为主,让学员真正能学到技术,毕业就能适应工作岗位. 重庆[Java开发程序员], Java 编程开发.而且很多软 ...