目录⭐️❤️❄️⛅️
写在前面：
此博客是对学校头哥作业的一点总结，如有错误欢迎指正
⭐️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>
2905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
