暴风背后藏未来

JavaScript(2021.9.26)

一、引入

1.计算机语言

2.编程语言和标记语言的区别

3.数据存储单位

二.JavaScript简介

1.JS参考文献

菜鸟教程：AngularJS 参考手册 | 菜鸟教程

W3school：JavaScript 参考手册

MDN：JavaScript 参考 - JavaScript | MDN

2.JS是什么？

JS的标准命名为ECMAScript，但实际上JavaScript的含义更大一些。JavaScript包括ECMAScript、DOM（文档对象模型，通过JS操作网页）、BOM（浏览器文档对象模型，通过JS操作浏览器）

3.JS的作用

JS的出现主要用于处理网页中的前端验证（在浏览器中检查用户输入的内容是否符合一定的规则，如：用户名的长度，密码的长度，邮箱的格式）

4.浏览器执行JS的过程

5.JS的组成（jsapi）

ECMA 欧洲计算机联盟

Web APIs 包括 DOM(控制标签，对页面元素进行移动、大小、添加、删除等操作)，BOM(操作浏览器，比如页面弹窗、检测窗口宽度、存储数据到浏览器)

6.JS三种书写位置

（1）行内(内联)样式，写在标签的属性中

点击按钮或超链接时，js代码才会执行


点击超链接

script可以写到标签内部

（2）内部(内嵌)样式，写在head的标签script中

（3）外部(外链)样式，head中连接，一个html文件可以连接多个js文件

注意：不要在标签中写代码，会不生效

7. Unicode编码

可查询Unicode编码对照表

三、注释

1.// 单行注释(ctrl+/)

2./* */ 多行注释(ctrl+shift+/ 或 shift+alt+A)

四、调试

断点调试

把变量、表达式、条件判断添加至监视表达式，然后刷新，一步一步执行（注意：点两次执行该语句或到下一句才执行）

第1个图标：跳过下一个函数调用，不进入函数内部；

第2个图标：进入下一个函数调用，会一步一步执行；

五、输入输出语句

1.输入语句

prompt(); 输入框

prompt("请输入你的年龄");

2.输出语句

（1）alert(); 弹出警告框

（2）document.write(); 向body中添加一个内容，可在页面中输出

//不仅可以输出文字，还可以解析输出标签
document.wwrite('名字
')

（3）console.log(); 向控制台输出一个内容，返回值是标签字符串

（4）console.dir(); 返回的是键值对(对象)

（5）confirm()；确认框

注意：

结束符为英文分号，可写可不写 ;
document.write、console.log 输出多个变量用英文逗号隔开，alert 不能一次输出多个变量；

六.变量

1.变量的概念

变量就是一个容器，是内存里的一块空间，用于存储数据（为什么需要变量?）。方便以后使用里面的数据。

2.声明变量

let / var / const 都可以声明变量

let 不能多次声明同一个变量；var 可以重复声明，第二次声明会覆盖第一次声明的值；

let name = '比方'
let name = '粉笔'
此写法错误

let / var / const 三者的区别：

var属于window；let不属于window；
var可重复定义赋值；let不可重复定义赋值;
var定义的变量不具有块级作用域(即，在块级外也可使用)；let定义的变量具有块级作用域；
const定义的变量必须有初始化的值；const定义的变量不允许改值(重新赋值)；把固定不变的值设置为常量；const定义的变量具有块级作用域

var a; let b; const c=123;

3.变量的初始化

声明变量变量名=变量值；例：var age=18;

声明的同时赋值称为变量的初始化

4.变量语法扩展

（1）更新变量

一个变量被重新赋值后，它原来的值就会被覆盖，变量值将以最后一次赋的值为准。

（2）同时声明多个变量

只需写一个var，多个变量名之间用英文逗号隔开

var name="旗木卡卡西",sex='女',age="30";

5.变量命名规范

JS中可以由自己命名的称为标识符。如，变量名，函数名，属性名

（1）由字母、数字、下划线(-)、美元符号($)组成（注:命名的单词间不能有空格）;

（2）不能以数字开头;

（3）不能是关键字、保留字，（注:在有些浏览器中name是有含义的，所以尽量不用name，可以用myName）;

（4）严格区分大小写。var age和var Age是两个变量;

（5）遵守驼峰命名法。首字母小写，后面单词的首字母大写(小驼峰)，如，myFirstName

6.交换变量案例

1.交换变量
var a=1,b=3;
var t=a;   //t为临时变量
var a=b;
var b=t;
console.log(a,b);    //a=3,b=1

2.输入并弹出用户名
var a=prompt("请输入你的名字");
alert("欢迎"+a);

七、数据类型

根据数据所占空间不同，分成了不同的数据类型。（充分利用存储空间）

JS是一种弱类型语言，变量的数据类型是可以变化的。

简单类型和复杂类型：

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型；
简单类型：string ，number，boolean，undefined，null ；
复杂类型：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date
简单类型在存储时变量中存储的是值本身；引用类型在存储时变量中存储的仅仅是地址；
简单类型的数据直接存放在栈中；引用类型在栈里存放的是地址，真正的对象实例存放在堆中

1.number

（1）进制

JS进行浮点运算可能不精确，因为计算机是二进制

（2）特殊值

Number.MAX_VALUE 表示最大数值；

Number.MIN_VALUE 表示大于0的最小值；

Infinity 表示正无穷；

-Infinity 表示负无穷；

NaN 是一个特殊的数字，表示not a number；

（3）isNaN() 用来判断一个变量是否为非数字的类型

2.string

使用表单、prompt 获取过来的数据默认是字符串类型的

（1）引号的使用（内双外单，外单内双）

1）用 '' (单引号) / ""(双引号) / ``(反引号) 包裹的都是字符串

2）在JS中字符串需要使用引号（双引号或单引号都可以，但不要混着用）引起来，不加引号会被认为成变量；

3）引号不能嵌套。双引号里不能放双引号，单引号里不能放单引号（就近原则），但双引号里能放单引号，单引号里能放双引号；

（2）转义符（都是以\开头的）

\” 表示双引号“

\’ 表示单引号 ’

\n 表示换行注：要放在引号里使用 '\n' 反引号内不用加引号 \n只能console.log中起作用

\t 表示 Tab键

\b 表示空格

\\ 表示一个斜杠 \

\\\\ 表示两个斜杠 \\

（3）检测获取字符串长度（length ）

var s="来庄里吧！";
console.log(s.length); /*length=5*/

（4）字符串的拼接

方法一：加号（+）

只要有字符串和其他类型相拼接，最终的结果是字符串类型（拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串）

console.log("河北"+"石家庄");  /* 河北石家庄 */
console.log("SHY"+24);      /* SHY24 */
console.log("12"+12);       /* 1212 */
console.log("河北"+true);    /* 河北true */

字符串和变量的拼接（因为变量可以很方便地修改里面的值）

var name="旗木卡卡西",age="25";
console.log('你好，我叫'+name+'，今年'+age+'岁了！')

用户输入并反馈给用户
var age=prompt('请输入您的年龄：');
alert('您今年'+age+'岁啦！');

方法二：模板字符串（反引号与${}）

模板字符串使拼接字符串更简便；
用反引号包含数据，用 ${变量名} 来使用变量；

let name="旗木卡卡西",age="25";
document.write(`我是${name}，今年${age}了！`)

3.boolean

布尔型有两个值：true(真)和false(假)；

布尔型与数字型相加时，true的值为1，false的值为0；

console.log(true+3);   //1+3=4
console.log(false+3);  //0+3=3

4.null(空值)和undefined(未定义)

（1）null表示一个为空的对象;

使用typeof检查一个null值时，会返回object；

（2）当声明一个变量，但不赋值时，它的值就是undefined；

使用typeof检查一个undefined时，会返回undefined；

console.log(null+2);       //0+2=2
console.log(undefined+3);  //NaN
console.log(null+'SHY');       //null+SHY
console.log(undefined+'SHY');  //undefinedSHY

5.获取变量数据类型(typeof)

形式：typeof+变量名

注：null值返回的是object；prompt返回的是字符型(string).

var name="旗木卡卡西";  //string
var a=null;          //object
var b;               //unundefined 
document.write(typeof name,a,b);
var age=prompt('请输入您的年龄：');
document.write(typeof age);  //string

6.数据类型转换

（1）转换成字符串类型

1）方式一 tostring()方法不会影响到原变量，它会将转换的结果返回，但null和undefined这两个值没有tostring()方法，如果调用他们的方法会报错。

num.toString()

// 数字17转成string类型

let A = (17).toString()

// 结果为 17，类型为 string

num.toString(进制数)

// 17转16进制

let A = (17).toString(16)

// 结果为 11，类型为 string

2）方式二调用 string(数据) 函数，并将被转换的数据作为参数传递给函数;使用string（）函数做强制类型转换时，对null和undefined及其它所有类型都起作用（将null转换为”null” 将undefined转换为” undefined”）。

3）方式三隐式转换的形式：变量+' ' 如，alert(unm+' ');

（2）转换成数值型

1）parseInt()可以将一个以数字开头的字符串中的有效的整数（遇到出数字以外的内容就结束）内容取出来

如：123.45px经ParseInt()转换成123

12a3.45px经ParseInt()转换成12

123px456经ParseInt()转换成123

abc12.35经ParseInt()转换成NaN

true 经ParseInt()转换成 NaN

false 经ParseInt()转换成 NaN

'null' 经ParseInt()转换成 NaN

null 经ParseInt()转换成 0

2）parseFloat()可以获得以数字开头的非纯数字字符串中有效的小数

如：123.456px经ParseInt()转换成123.456

123.456.789px经ParseInt()转换成123.456

3）number()函数

4）隐式转换（- * /）

+数据 +作为正号，其他数据类型可以转为数字类型（input和prompt输入的都是字符串类型）
let A = +prompt('输入工资')    // A为数字类型

+的作用：连接符、运算符、正号

将字符型12转换成数值型12，再进行运算

console.log('12'-0)  //12
console.log('123'-'120')   //3
console.log('12'*1)  //12
console.log('12'/1)  //12

5）三个案例

1.计算年龄案例
var year=prompt('请输入您的出生年份：');
var nowyear=2021;
var age=nowyear-year; //year为字符串型，这里用的减法，有隐式转换
alert('今年您'+age+'岁啦！');

2.简单加法器案例
var num1=prompt('请输入第一个值：');
var num2=prompt('请输入第二个值：');
var sum=Number(num1)+Number(num2);
var minus=num1-num2;
var mul=num1*num2;
var into=num1/num2;
alert('两个值之和为：'+sum);
alert('两个值相减为：'+minus);
alert('两个值相乘为：'+mul);
alert('两个值相除为：'+into);

3.依次询问并获取用户的姓名、年龄、性别，并打印用户信息（\n要放在引号里）
var myname=prompt('姓名'),age=prompt('年龄'),sex=prompt('性别');
alert('姓名:'+myname+'\n'+'年龄:'+age+'\n'+'性别:'+sex);

（3）转换成布尔型（boolean()函数）

代表空、否定的值（ ' '、0、NaN、null、undefined）会被转换为false

!!'23' 转成布尔值

八、运算符

1.算数运算符(+ - * / %)

注：

(1)浮点数值得最高精度是17位小数，但在进行算数计算时其精确度远远不如整数。所以，不要直接判断两个浮点数是否相等（~~var a=0.1+0.2；console.log(a==0.3);~~）

(2)如果对两个字符串进行加法运算，则会做拼串(连接符)。即，任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串

1+2+”3”=33
“1”+2+3=123
100-“2”=98
2*“8“=16
2*null=0
// 小数与大数的余数为小数本身
2 % 7 = 2
(10-2) % 12 =8
2 % 7 - 9 / 3 = -1

任何值n取余，值为 0，1，2，... n-1
例：0，1，2，3，4，5，6   与3的余数
    0  1  2  0  1  2  0    0-2

2.自增(++)和自减(--)运算符

注：

一元运算符包括正负号、自增自减号；
自增和自减运算符必须和变量配合使用，常用于计数。

++a —> a=a+1 a++ —> a=a+1

（1）前置自增(++a) 先自加后返回值

（2）后置自增(a++) 先返回原值后加1

++a,--a (在使用a之前，先使a的值加/减1)

a++,a-- (在使用a之后，使a的值加/减1)

var num1=10;  console.log(++num1 +10);   /*21*/
var num2=10;  console.log(num2++ +10);   /*20*/
// 后置自增(减)到了运算符的另一边完成自增(减)
var d=20;   var result=d++ + ++d + d ;   /*20+22+22=64*/
let a=3;    let result=++a + a++ + a++ + ++a   /* 4+4+5+7=20 */

3.比较运算符

1.==判等号(判断两边的值是否相等)
  console.log(18=='18');    /* true */
  console.log(1 == 'pink')  /* false 值根本不相等 */
2.===全等(两侧的值和数据类型完全一致才可以)
  console.log(18==='18')    /*false*/
  console.log(1 == 'pink')  /*false*/
3.！== 不全等(两边数据类型和值，只要有一个不等，就是true)
  console.log(18!==18)    /*false*/
  console.log(18!=='18')  /*true,类型不等*/
  console.log(25!==18)    /*true，值不等*/
4. > < <= >=   不同类型的比较会默认转换成number类型再比较(把字符串型的数据转换成数字型)

(1)比较运算符的返回值为true、false

(2)任何值和NaN做任何比较都是false

10<="hello" //false true>false //true NaN===NaN //false

(3)不要做小数运算，会有精度问题

0.1+0.2！=0.3
(0.1*10+0.2*10)/10=0.3      因为整数没有精度问题

(4)两个字符串比较：（比较字符对应的ASCII码）

4.逻辑运算符(&& || !)

（1）真假判断

与(&&) 两个都为真，返回值为真(true)；其中一个为假，返回值就为假(false)；

或(||) 其中一个为真，返回值就为真(true)；两个都为假，返回值才为假(false)；

非(!) 取反，真为假，假为真；

（2）短路运算(逻辑中断)

短路运算原理：当有多个表达式(非布尔进行与或运算)时，左边的表达式可以确定结果时(与&&遇假确定结果，或||遇真确定结果)，就不再继续运算右边的表达式的值。

总结：与(&&)返回第一个为false的值；或(||)返回第一个为真的值。

1）逻辑与

语法：表达式1 && 表达式2

如果第一个表达式的值为true，则返回表达式2；如果两个值都为true，则返回后边的；

如果第一个表达式的值为false，则返回表达式1；如果两个值都为false，则返回前边的；

注意：返回的值不是true/false，因为与、或、非没有能力将两侧的值转为true、false，只是判断值为真还是假

console.log(123 && 456);         /*456*/
console.log(123 && 456 && 1+2);  /*3*/

//左边如果是 0 '' undefin null NaN 则返回自身
console.log(0 && 456);           /*0*/
console.log(null && 456);        /*null*/
console.log(0 && 456 && 1+2);    /*0*/

2）逻辑或

语法：表达式1 || 表达式2

如果第一个表达式的值为真，则返回表达式1；

如果第一个表达式的值为假，则返回表达式2.

console.log(123 || 456);         /*123*/
console.log(0 || 456 || 1+2);    /*456*/
例：
var num=0;
console.log(123 || num++);  /*中断运算*/
console.log(num);           /*0*/

5.赋值运算符

例：num += 3 —> num=num+3

6.运算符优先级

九、流程控制(顺序结构、分支结构、循环结构)

1.顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，程序会按照代码的先后顺序，依次执行。

2.分支流程控制

根据不同的条件，执行不同的路径代码(多选一)，从而得到不同的结果。
如果条件不是布尔类型，会隐式转换为布尔类型，如，if (a) {alert('监督局')}

（1）if 语句

1.if-else 双分支
  if (条件) 
     {语句1;} 
  else
     {语句2;}

2.if-else if 多分支(检查多重条件，可以处理范围)
  if (条件1) 
     {语句1;} 
  else if (条件2)
     {语句2;}
  else if (条件3)
     {语句3;}
  else
     {语句4;}

判断是否能进入网吧
var age=+prompt("请输入您的年龄：");
if (age>=18) {
	alert('允许进入网吧!');
} else{
	alert('抱歉,您还未成年!');
}

判断闰平年（能被4整除且不能整除100的年份为闰年或者能够被400整除的就是闰年）
var year=+prompt("请输入年份：");
if (year%4==0&&year%100!=0||year%400==0) {
	alert(`${year}为闰年`);
} else{
	alert(`${year}为平年`);
}

（2）三元表达式

条件表达式？表达式1 ：表达式2；

如果条件表达式为真，则返回表达式1；如果条件表达式为假，则返回表达式2。(简化版的if-else，一般用于赋值，比如最大值比较，将最大值赋给变量)

补0操作，可用于倒计时（小于10的数补零，大于10的数不补零）
方法一：
var num=prompt("请输入一个数字：");
num<10 ? alert('0'+num+' 补零') : alert(num+' 不补零');
方法二
var num=prompt("请输入一个数字：");
var result= num<10 ? '0'+num+' 补零' : num+' 不补零';
alert (result);

（3）switch-case

一般用于等值判断，不适合于区间判断

switch (表达式/变量){
	case 值1:语句1;
		break;       //break 跳出
	case 值2:语句2;
		break;
	...
	default:
		break;
}

注：

1）case后面必须是一个整数，或是结果为整数的表达式，但不能包含任何变量

2）若某一条case后没有紧跟的语句，则不用带分号和break

3）表达式/变量的值和case里的值匹配时，得是全等关系(值和数据类型都得相同)

4）如果当前的case里没有break，则不会退出，会继续执行下一个case

5）若没有default，并且和任何case值不匹配时，则跳出switch，什么都不执行

1. 查询水果价格
var fruit=prompt("请输入一种水果：");
switch (fruit){
	case '苹果':alert("苹果 0.8/斤");    //水果名称要加引号，因为要全等匹配
		break;
	case '香蕉':alert("香蕉 1.5/斤");
		break;
	case '草莓':alert("草莓 2/斤");
		break;
	default:alert("无此种水果");
		break;
}

2. 用户输入2个数字

3.循环流程控制

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句。

循环的目的：重复的执行某些代码。

（1）for循环及双重for循环

for (初始化变量 ; 条件表达式 ; 操作表达式) {循环体}

for (var i=1,j=0 ; i<=10 ; i=i+2) {循环体}
(1)注意是var，不是int
(2)当有多个初始化变量时，要用“,”隔开
(3)for循环的变量(int i)是个局部变量，只在for循环体里有效

for循环可以嵌套if语句
  for (var i=1;i<=20;i++) {
	  if (i==1){
		  console.log('1岁了，出生年！');
	  }
	  else if (i==18) {
	  	console.log('18岁，成年了！');
	  }
	  else {console.log('今年'+i+'岁了');}
  }

1-100的总和、平均值、奇数、偶数、能被3整除的数字的和
  var sum=0,odd=0,even=0,result=0;
  for (var i=1;i<=100;i++) {
	  sum+=i;     //总和

	  if (i%2!=0) {  //奇数
		  odd+=i;
	  }
	  else {even+=i;}  //偶数

	  if (i%3==0){    //能被3整除的
	 	  result+=i;
	  }
  }
  document.write('和为：'+sum,'平均数为：'+sum/100,'奇数'+odd,'偶数'+even,'能被3整除的数字的和'+result);

输入班级人数并计算出总成绩和平均成绩
  var num=prompt ('请输入班级人数：');
  var sum=0;
  for (var i=1;i<=num;i++) {
	  var sorce=prompt ('请输入第'+i+'个人的成绩：')
	  sum+=parseFloat(sorce);   //prompt取过来的是字符型，需要转换成数字型
  }
  alert('班级总成绩为：'+sum);
  alert('班级平均成绩为：'+sum/num)

for循环双层嵌套
for(外边循环变量的起始值；循环条件；变化值){
    for(里边循环变量的起始值；循环条件；变化值){
    }
}

图一：一行打印5颗♥   重点:转换为字符串就可以在一行上打印出
  var str='';
  for(i=1;i<=5;i++){
    str=str+'♥';
  }
  console.log(str);

图二：五行五列
  var str='';
  for(i=1;i<=5;i++){       //外面for是列，控制里层for要循环多少次
	  for(j=1;j<=5;j++){   //里面for是行，控制每一行的个数
	    str=str+'♥';
	  }
	  str=str+'\n';
  }
  document.write(str);

图三：倒三角
  var str='';
  for(i=1;i<=10;i++){
    for(j=i;j<=10;j++){    //(j=10;j>=1;j--)错误,因为这样每次循环j=10，所以最后结果的每行都是10个
      str=str+'♥';
    }
  str=str+'\n';
  }
  console.log(str);

正三角
  var str='';
  for(i=1;i<=10;i++){
    for(j=1;j<=i;j++){
      str+='♥';
    }
  str+='\n';
  }
  console.log(str);

九九乘法表
  var str='';
  for(i=1;i<=9;i++){
    for(j=1;j<=i;j++){   //每一行公式的个数正好和行数一致，所以 j<=i
      str+=j+'*'+i+'='+j*i+'\t';   //j*i=行*列
    }
    str+='\n';
  }
  console.log(str);
打印在网页中（\n只是输出一个空格；
在JS里也是换行）
for(i=1;i<=9;i++){
  for(j=1;j<=i;j++){
    document.write(j+'*'+i+'='+j*i+'\t');
  }
  document.write('
');
}

（2）while循环及do-while循环

1.while (先判断 再执行)
  var 声明变量并初始化;
  while(循环条件) 
    {循环体;}

2.do-while (先执行 再判断)
  do {循环体;}
  while (循环条件);

循环案例
1.打印人的一生，从1岁到100岁
(1)while
  var age=1;
  while(age<=100) 
    {document.write('今年'+age+'岁了！'+'
');
    age++;}
(2)do-while
  var age=1;
  do{
     document.write('今年'+age+'岁了！'+'
');
     age++;
  }while(age<=100);

2.计算1-100之间所有整数和
(1)while
  var num=1,sum=0;
  while(num<=100){
	  sum+=num;
	  num++;
  }
  document.write(sum);
(2)do-while
	var num=1,sum=0;
	do{
		sum+=num;
		num++;
	}while(num<=100);
	document.write(sum);

3.弹出一个提示框'love?'，如果输入'yes'就结束，否则就一直询问
(1)while
  var answer=prompt('love?');
  while(answer!='yes'){
	  answer=prompt('love?');  //不能只写prompt('love?'); 要给它一个变量保留它的值，才能返回判断，否则会陷入死循环
  }
(2)do-while
	var answer=prompt('love?');
	do{
		answer=prompt('love?');
	}while(answer!='yes');
(3)开关法(不确定循环的次数)

（3）for循环与while循环在什么情况下使用

循环次数已知的，用for循环；循环次数未知的用while循环；

用来计数，跟数字有关，常用for；

while和do-while可以做更复杂的判断条件，比for循环更灵活。

（4）跳转循环语句(continue / break / goto)

break	跳出当前整个循环，只能跳出一层循环
continue	结束本次循环，判断循环条件，如果成立，则进入下一次循环，否则退出整个循环
goto	跳出多层循环

1. 求1-100之间，除了能被7整除之外的整数和
	var sum=0;
	for(var i=1;i<=100;i++){
		if(i%7==0){
			continue;
		}
		sum+=i; 
	}
	document.write(sum);

2. 打印1-10的奇数
// 思路：跳过偶数，打印奇数
        for(let i=1;i<=10;i++){
            if(i%2===0){
                continue
            }
            console.log(i)
        }

3. 求1-100前3个能被7整除的数的和
        let sum = 0
        let count = 0   //计数器
        for (let num = 1; num <= 100; num++) {
            if (num % 7 === 0) {
                count++
                
                // 当次数为4时就跳出循环
                if (count === 4) {
                    break
                }
                sum += num

                // 当计数器写在和的下面时，到3次时就要跳出循环
                /* if (count === 3) {
                    break
                } */
            }
        }
        console.log(sum)

4.综合案例—简易ATM

方法一：
// 开关法循环，在循环外边定义一个变量为true，进入循环体里边去，想要结束循环，变量在循环里=false
        let flag = true,
            money = 0
        while (flag) {
            let num = +prompt(`请选择您的操作:
            1. 存款
            2. 取款
            3. 查看余额
            4. 退出`)
            switch (num) {
                case 1:
                    let add = +prompt('请输入存款金额：')
                    money += add
                    break
                case 2:
                    let get = +prompt('请输入存款金额：')
                    money -= get
                    break
                case 3:
                    alert(`余额为${money}`)
                    break
                case 4:
                    flag = false
                    break
                default: alert('请输入正确序号')
            }
        }


方法二：
alert('欢迎登入！');
var money=0;
for (var i=1;i>=1;i++){
	var num=prompt('请输入您要的操作：'+'\n'+'1.存钱'+'\n'+'2.取钱'+'\n'+'3.查询余额'+'\n'+'4.退出')
  //一开始的输入框要写在for循环内，才能每次返回到开始的界面
	if (num=='1') {
		money1=prompt('请输入存的钱数：');
        money+=parseFloat(money1);
		alert('现在余额为：'+parseFloat(money));
	}
	else if (num=='2') {
		cut=prompt('请输入取的钱数：');
		cut=parseFloat(cut);
		if (cut<=money){
			money=parseFloat(money-cut);
		    alert('现在余额为：'+money);
		}
		else {alert('余额不足！');}
	}
	else if (num=='3') {
		alert('现在余额为：'+parseFloat(money));
	}
	else if (num=='4') {
		alert('现在正在退出！');
		break;
	}
	else {alert('请按要求输入！');}
}

5.计数器

// 计算数组[2,6,18,15,40] 中能被3整除的偶数的个数
        let arr = [2, 6, 18, 15, 40]
        let count = 0
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] % 3 === 0 && arr[i] % 2 === 0) {
                count++
            }
        }
        console.log(count)

十、数组

1.数组的概念

数组是指一组数据的集合，其中的每个数据被称作数组元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的方式。

2.创建数组

数组中可以放任意类型的数据；数组元素之间要用','逗号隔开。

1）利用数组字面量创建数组

var 数组名=[ ];
var a=[20,'城南'，true]；

2）利用new创建数组

var 数组名=new Array( );   注意A要大写
var a = new Array(1,'短信'，true);

3.获取数组元素

数组名[元素的索引号]
a[2]  获取a数组中索引号为2的元素。如果没有这个数组元素，输出的结果会是 undefined

索引(下标)：用来访问数组元素的序号（数组索引号从0开始）

4.遍历数组(利用for循环)

遍历：把数组中的每个元素从头到尾都访问一次。

？结果有问题不能用name作为数组名，因为name是关键词

？结果无引号 alert无引号，console.log控制~台有引号

var forename=['刘备','关羽','张飞','马超'];
for(var i=0;i<4;i++){    //i从0开始；i<=元素个数(forename.length)
	console.log(forename[i]);
}

5.数组的长度

数组名.length
a.length   //数组a中元素的个数，length为变量属性名

6.数组的增删改查

（1）修改数组索引，添加/更改数组元素

查	数组名[索引号]	用来判断数组中是否包含某个对象或值 indexOf或findIndex()
改	数组名[索引号]=要改成的值
增	数组名.push(数据1，数据2，...数据n)	新增加的数组元素在数组的末尾
	console.log(数组名.push(数据1，数据2，...数据n))	打印此语句，返回新数组的长度
	数组名.unshift(数据1，数据2，...数据n)	新增加的数组元素在数组的前边
	console.log(数组名.unshift(数据1，数据2，...数据n))	打印此语句，返回新数组的长度
删	数组名.pop( )	删除数组的最后一个元素
	数组名.shift( )	删除数组的第一个元素
	console.log(数组名.pop( ))	返回被删除的元素
	console.log(数组名.shift( ))	返回被删除的元素
	数组名.splice(开始删除元素的索引值，删除的数量，新增数据1，新增数据2)	批量删除（抽奖、购物车）返回被删除的元素
	数组名.filter( ) // 过滤

var str=['红','绿','蓝','白'];
str[0]='黄';         //更改  结果：黄,绿,蓝,白

str[5]='黑';         //添加  结果：红,绿,蓝,白,黑
str.push=[1,2]       //添加  结果：红,绿,蓝,白,1,2
console.log(str.push=[1,2])  // 结果：6(长度)
str.unshift=[A,B,C]  //添加  结果：A,B,C,红,绿,蓝,白
console.log(str.unshift=[A,B,C])   // 结果：7(长度)

str.pop()                // 删除  结果：'红','绿','蓝'
console.log(str.pop())   // 结果：'白'
str.shift()              // 删除  结果：'绿','蓝','白'
console.log(str.shift()) // 结果：'红'
str.splice(1,2)          // 批量删除  结果：'红','白'
str.splice(1)            // 批量删除  结果：'红'  (将起使元素后面的元素都删除)
str.splice(1,1)          // 批量删除  结果：'红','蓝','白'  (只删除起使元素)

str='赋值没加索引'；  //结果：赋值没加索引
  注意：不能直接给数组名赋值，否则会覆盖掉以前的数据

（2）修改length，实现数组扩容

数组名.length=想要扩到的长度;
a.length=7;

7.数组的方法

数组的方法	作用	举例
reverse	翻转数组顺序	数组名.reverse()
indexOf	在数组中查找某项首次出现的索引位置，找到返回索引值，找不到返回 -1 可用来判断数组中是否包含某个对象或值	数组名.indexOf('数组中的某一项元素')
lastIndexOf	在数组中查找某项最后出现的索引位置，找到返回索引值，找不到返回 -1	数组名.lastIndexOf('数组中的某一项元素')
join	拼接数组的每个元素成为字符串	数组名.join('拼接的符号或为空')
concat	拼接数组成为新数组	a.concat(b, c, 'aa', 'bb', 'cc') 把数组b/c及'aa'等拼接到数组a后面

数组的静态方法	作用	举例
Array.isArray(数组名)	判断是否是数组类型，返回布尔值	let arr=[1,2,3] Array.isArray(arr)
Array.from(伪数组名)	把伪数组转换为真数组注意：转真数组时，伪数组必须有length属性，length可以比伪数组元素的数量多(undefined)或少(有几个就显示几个)	let as = { 0: 'a', 1: 'b', 2: 'c', 3: 'd', 4: 'e', length: 6 } Array.from(as)

数组的静态方法

作用

举例

Array.isArray(数组名)

判断是否是数组类型，返回布尔值

let arr=[1,2,3]

Array.isArray(arr)

Array.from(伪数组名)

把伪数组转换为真数组

注意：转真数组时，伪数组必须有length属性，length可以比伪数组元素的数量多(undefined)或少(有几个就显示几个)

let as = {

0: 'a',

1: 'b',

2: 'c',

3: 'd',

4: 'e',

length: 6

}

Array.from(as)

遍历数组的方法：7种
    每个方法都有3个形参：
    item     第一个参数，代表当前项（arr[i]）
    index    第二个参数，代表当前项的索引值（i）
    o        第三个参数，代表当前数组（arr）

        let arr = [3, 2, 6, 7, 9, 4]   // 全局数组变量

1. forEach：遍历数组
		arr.forEach(function (item, index, o) { console.log(item) })
		arr.forEach(item => console.log(item))   // 箭头函数

2. filter：过滤  筛选出满足条件的值放到数组中返回，可用于删除
		let re = arr.filter(function (item) {
			return item % 2 === 0    // 返回偶数
		})
		console.log(re)    // 结果：[2,6,4]

3. map：依次让每个元素执行一遍回调,把结果全部放到数组中返回
		let re = arr.map(function (item) {
			return item * item
		})
		console.log(re)    // 结果：[9,4,36,49,81,16]

 4. find：遍历查找满足条件的首个元素,并返回这个元素
		let re = arr.find(function (item) {
			return item >5
		})
		console.log(re)    // 结果：6

 5. findIndex：遍历查找满足条件的首个元素,并返回这个元素的索引值
    可用来判断数组中是否包含某个对象或值
		let re = arr.findIndex(function (item) {
			return item > 5  或  item.name=='张三'
                   大于5的值     数组中name为张三的对象
		})
		console.log(re)    // 结果：2

6.  some：遍历查找是否有满足条件的值,有一个就立刻返回true,没有则返回false
		let re = arr.some(function (item, index) {
			console.log(index)    // 输出：0 1 2  说明有一个满足条件就立刻返回
			return item > 5
		})
		console.log(re)    // 结果：true

7. every：遍历查找满足条件的值,都满足返回true,有一个不满足就返回false
		let re = arr.every(function (item, index) {
			console.log(index)    // 输出：0 1   说明有一个不满足条件就立刻返回false
			return item > 2
		})
		console.log(re)    // 结果：false

7.筛选数组

将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组
  方法一：
    var num=[2,0,6,1,77,0,52,0,25,7];
    var num1=[];
    var j=0;
    for(var i=0;i=10){
    		num1[j]=num[i];
    		j++;
    	}
    }
    alert(num1);
  方法二：（不用申请新变量j）
    var num=[2,0,6,1,77,0,52,0,25,7];
    var num1=[];  //空数组length为0
    for(var i=0;i<10;i++){
    	if(num[i]>=10){
    		num1[num1.length]=num[i];  //length自动检测数组的长度
    	}
    }
    alert(num1);
方法三：
        let arr=[2,0,6,1,77,0,52,0,25,7]
        // 思路：遍历数组，筛选出>=10的元素，用if追加到新数组
        let newArr=[]
        for(let i=0;i<=arr.length;i++){
            if(arr[i]>=10){
                newArr.push(arr[i])
            }
        }
        console.log(newArr)

8.删除指定数组元素(去重)

1. 将[2,0,6,1,77,0,52,0,25,7]中的0去掉后，形成一个不包含0的新数组
	var num=[2,0,6,1,77,0,52,0,25,7];
	var num1=[];
	for(i=0;i


2. 需求：将不重复的元素放入新数组
   思路：依次获取数组arr的值,去newArr里查看是否有这个元素,如果没有这个值就添加

		let arr = ['a', 1, 2, 'b', 'a', 'c', 'd', 1, 'a', 3, 2]
		let newArr = []
		for (let i = 0; i < arr.length; i++) {
			if (newArr.indexOf(arr[i]) === -1) {
				newArr.push(arr[i])
			}
		}
		console.log(newArr)
9.翻转数组
将数组[1,2,3,4,5]的内容反过来存放，输出：[5,4,3,2,1]
  方法一：
	var num=[1,2,3,4,5];
	var num1=[];
	for(var i=num.length-1;i>=0;i--){           *不同处
		num1[num1.length]=num[i];               *
	}
	alert(num1);
  方法二：
	var num=[1,2,3,4,5];
	var num1=[];
	for(var i=0;i

10.数组排序(冒泡排序)
冒泡排序：把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小)。
冒泡排序一次比较两个元素，如果它们的顺序错误就把它们交换过来，否则不交换。

	var num=[1,2,3,4,5];                      //可以是任意数组
	for(var i=0;i<=num.length-1;i++){         //外层循环总共的趟数(元素个数-1)
		for(var j=0;j<=num.length-1-i;j++){   //内层循环每趟比较的次数(元素个数-1-趟数)
			if(num[j]

案例
1.返回数组的和、平均值及最大值
    var num=[2,6,1,7,4];
    var sum=0;
    var max=num[0];
    for(i=0;i

十一、函数
函数与循环的区别：循环是一次把所有次数执行完，不方便控制执行的位置；函数时需要的时候就调用一次。
函数就是封装了一段可以被重复执行调用的代码块(封装了一定功能)，可进行复用。
封装：把一个或多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。
1.函数的声明与调用





 书写格式 
例子




声明函数
function
 function 函数名() {
         函数体代码；
 }
 函数名();
 
 function getsum(num1
  ) {
         for(i=0;i         sum+=num1[i];
         }
 }
 getsum(20);
 //求1~20的和
 


调用函数
函数名();


注：声明函数本身并不会执行函数，只有调用函数时才会执行函数体代码（即，两者相互配合使用）



函数名的命名和变量相同，一般以动词为前缀

2.函数的参数




所在位置
说明
关系




形参
 function 函数名(形参1，形参2) {
         函数体代码；
 } 
 函数名(实参1，实参2);
 
 在声明函数的小括号里面是形参
 函数定义的时候传递的参数（形式上的参数）
 
 1.实参把值传递给形参；形参是接受实参的
 
 2.函数的参数可以有多个（多个参数用逗号隔开），也可以没有
 
 3.开发中尽量保持形参和实参个数一致 
 
 4.实参可以是任意的数据类型，数组/变量
 


实参
 在调用函数的小括号里面是实参
 函数调用的时候传递的参数（实际的参数）
 



逻辑中断的巧用

形参如果不被赋值，就是undefined
利用逻辑中断，将输入的非法值转化合法的

//形参如果不被赋值，就是undefined
        function getSum(num1, num2) {
            // 利用逻辑中断，将输入的非法值转化成0,使之能顺利进行计算
            //或运算找true
            num1 = num1 || 0
            num2 = num2 || 0
            console.log(num1 + num2)
        }
        //多余的实参(3,5)不会传入函数
        getSum(2, NaN, 3, 5)    //结果：2
3.函数返回值(return)
作用：把处理结果返回给调用的函数，可在函数外使用

关键词：return
语法：return   数据
            return [num1, num2]       (返回多个值时，保存到数组里，再返回给函数调用)

function getSum(num1, num2) {
      // 将值返回给调用的函数
      return num1 + num2
      //此语句不会执行，因为return会立即结束当前函数
      document.write('123')
}
console.log(getSum(2, 5)+10)
或
let sum=getSum(2, 5)
console.log(sum);
注意：

在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
函数没有 return 时，函数默认返回值为 undefined
函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写
return会立即结束当前函数

4.作用域

作用域定义：代码(变量)的可用性范围
作用：作用域提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突

（1）作用域



作用域分类
说明
注意




全局作用域
函数外部或者整个script 有效
如果函数内部或者块级作用域内部，不声明直接赋值使用的变量，是全局变量


局部作用域
函数内部有效，也称为函数作用域
 函数的形参可以当做局部变量；
 
 为什么在函数内部声明的变量只能在函数内部被访问，外部无法直接访问 ：
 执行函数时会开拓出一块区域存放局部变量，执行完就销毁了，所以外部无法直接访问
 


块级作用域
{ } 内有效，包括,if语 句和for语句里面的{ }等







变量分类
说明





全局变量
函数外部let 的变量
全局变量在任何区域都可以访问和修改


局部变量
函数内部let的变量
局部变量只能在当前函数内部访问和修改


块级变量
{} 内部的let变量
let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问



let a = 1         // 全局变量
function fn() {
    let b = 2     // 局部变量
    if (true) {
       let c = 3  // 块级变量
    }
}
fn()
（2）作用域链
作用域链，由作用域串联起来的链状结构（就近查找，如果没有，去上一级）
怎么看一个区域是否有变量：是否有var / let / cost 关键词，否则是使用变量。
作用：提供查找变量的机制。
（3）闭包
定义：闭包是一个作用域有权访问另外一个(上级)作用域的变量；
判断是否产生闭包：断点调试出现closure；
作用：可以把一个变量使用范围延伸(局部变量在外边也能用)

 闭包本质仍是函数，只不是从函数内部返回的；
 
 闭包能够创建外部可访问的隔离作用域，避免全局变量污染；
 
 过度使用闭包可能造成内存泄漏；
 

注：回调函数也能访问函数内部的局部变量。
let num = 123;
function f1 () {
	let n = 666;
	return function () {console.log(n);}  // 这个函数是闭包函数
}
let re = f1();  // 返回的是一个函数  结果：function () {console.log(n);}
re();  //　调用返回的这个函数 结果：666
闭包的作用：避免变量污染
let uname='阿飞'
function fn(){
    let uname='小狸'
    return function(){
        console.log(uname)
    }
}
fn()()    // 实现闭包，局部变量在外面也能用

（4）预解析 (变量提升)



名次
说明




预解析
代码在执行之前先要解析一边，预解析分为 变量提升 和 函数提升。


变量提升
带有声明的变量，把声明变量的语法提升到当前作用域最前边（注意：只声明不赋值）


函数提升
带有声明的函数，把声明函数的语法提升到当前作用域最前边（注意：只声明不调用）



注意点：

变量在未声明即被访问时会报语法错误；变量在声明之前即被访问，变量的值为 undefined
函数优先：
 console.log(a)   // 函数a
function a() {
	console.log('aa')  
}
var a = 1
console.log(a)   // 1
 
let 声明的变量不存在变量提升(报的错应该是：变量未定义)，推荐使用 let【也有人认为具有提升但是不赋值不能使用(因为报的错是：初始化之前不能使用)】

var a=b=c=9
等于
var a=9
b=9    b / c 没有关键词，为全局变量
c=9
5.匿名函数
（1）函数表达式
将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式
let 变量名 = function () {
    匿名函数内的代码
}
变量名()    // 调用函数

例：
let fn = function () {
    console.log(111)
}
fn()
函数也是一种数据
（2）立即执行函数

定义：只执行1次的自调用函数
作用：避免全局变量之间的污染
注意： 多个立即执行函数前要用 ; 隔开，要不然会报错，避免和前面的语句连起来

写法一：
    ;(function () {
         console.log(111)
         })()

写法二：
    ;(function () {
         console.log(111)
     }())

 6. 箭头函数(=>)
语法：

箭头函数是一种声明函数的简洁语法，不存在预解析 ；
箭头函数只有一个参数时可以省略圆括号 ()
箭头函数函数体只有一行代码时可以省略花括号 {}，并自动做为返回值被返回
 举例： 
// 具名函数
    function fn() { }

// 箭头函数：相当于具名函数
    let fn = () => { 代码块 }
    fn()

// 1. 1个形参省略()
// 2. 1句代码块省略{ }
    let fn = n => n * n
	fn(3)  // 9

// 3. 定时器中的箭头函数
    setInterval(() => { }, 1000)
    setInterval(function () { }, 1000)
 

注意：

箭头函数属于表达式函数，因此不存在预解析，所以必须先定义再使用
箭头函数中没有 arguments，只能使用 ... 动态获取实参
涉及到this(指向调用者) 的使用，不建议用箭头函数（所用this指向上级作用域的this）
 let obj = {
	uname: 'SHY',
	age: 18,
	school: function () {
			console.log(this)     // this指的是obj
			window.setInterval(() => {console.log(this)}, 1000)}   // this指的是obj,不是window
}
 

7. 参数
（1）默认值

声明函数时为形参赋值即为参数的默认值；
如果参数未自定义默认值时，参数的默认值为 undefined；
调用函数时没有传入对应实参时，参数的默认值被当做实参传入；

 // 设置参数默认值
function sayHi(name="小明", age=18) { }
sayHi( undefined, 20);   // undefined是用来给name占位的
        name      age
（2）动态参数(arguments)
函数的返回值arguments的使用函数的两种声明方式

arguments是函数里边的内置的伪数组变量(对象)；
arguments是伪数组，没有push/pop 这些方法，存的是实参，可以批量处理实参；
作用：用于接收传入的所有实参；
使用情况：参数个数不固定时使用argument接受实参；

//取实参中的最大值
    //方法一：用arguments函数返回值
        function getMax() {
            let max = arguments[0]
            for (let i = 0; i < arguments.length; i++) {
                if (max < arguments[i]) {
                    max = arguments[i]
                }
            }
            return max
        }
        let num = getMax(5, 30, 12, 50, 25)
        console.log(`实参中的最大值是${num}`)

    //方法二：老方法，将实参装入数组中
        function getMax(a,b,c,d,e) {
            let arr = [a,b,c,d,e]
            let max=arr[0]
            for (let i = 1; i < arr.length; i++) {
                if (max < arr[i]) {
                    max = arr[i]
                }
            }
            return max
        }
        let num = getMax(5, 30, 12, 50, 25)
        console.log(`实参中的最大值是${num}`)
（3）剩余函数(...)

... 是语法符号，置于最末函数形参之前，用于获取多余的实参；
借助 ... 获取的剩余实参；
可替换 arguments；

// ...将实参以数组形式存入num中
		function log(...num) {
			let sum = 0
			for (let i = 0; i < num.length; i++) {
				sum += num[i]
			}
			console.log(sum);
		}
		log(1, 2, 3, 4, 5, 6, 7, 8, 9)
8.高阶函数、回调函数
当一个函数A给另外一个函数B当做参数的时候，A函数就是回调函数，B函数就是高阶函数。
函数也是一种数据类型。
1. fun函数是高阶函数，给fun当参数的匿名函数是回调函数
    function fun ( n ) {n();}
    fun( function () {console.log('aa');} );

2. 事件：
    document.addEventLisntener('click', function () { });
                                         回调函数
3. 定时器
    setInterval( function () { }, 1000 );
      高阶函数     回调函数
9.利用递归求n的阶乘

利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n
        let num = +prompt('请输入一个数字,计算1到这个数的阶乘：')
        function getN() {
            if (num === 1) {
                return 1
            }
            else if (num > 0) {
                return num * getN(num - 1)
            }
        }
        alert(`阶乘为${getN()}`)
        getN()
10.环境对象(this) 
环境对象指的是函数内部特殊的变量 this
this指向调用者



函数案例
1.利用函数计算1-100之间的累加值
function getsum(num) {
	var sum=0;
	for (i=0;i<=num;i++) {
		sum+=i;
	}
	alert("累加和为："+sum);
}
getsum(100);
2.用函数求任意两个数之间的和
function getsum(start,end) {
	var sum=0;
	for (i=start;i<=end;i++) {
		sum+=i;
	}
	alert(start+"与"+end"之间的累加和为："+sum);
}
/*getsum(start,end); */
getsum(2,10);      /*求的是2~10之间的累计和*/
3.求2个数的和 
// 方法一：将实参传入函数
        function getSum(num1, num2) {
            alert(num1 + num2)
        }
        getSum(2, 3)
        getSum(24, 56)

// 方法二：之前的写法，然后封装
        function getSum1() {
            let num1 = +prompt('输入第一个数')
            let num2 = +prompt('输入第二个数')
            alert(num1+num2)
        }
        getSum1()
4.求学生总分
// 求学生总分
        function getSum(arr) {
            let sum = 0
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i]
            }
            console.log(sum)
        }
        // 实参可以是任意的数据类型
        getSum([10, 20, 30])
        let shy = [20, 30, 40, 100, 50]
        getSum(shy)
4-1.求一个数组最大值和最小值
// 求一个数组最大值和最小值
        function getNum(arr) {
            // 假设第一项为最大值/最小值
            let max =  min = arr[0]
            // 因max = arr[0]，所以 i = 1 可减少一次循环
            for (let i = 1; i < arr.length; i++) {
                if (max < arr[i]) {
                    max = arr[i]
                }
                if (min > arr[i]) {
                    min = arr[i]
                }
            }
            // 返回多个值时，保存到数组里，再返回给函数调用
            return [max, min]
        }
        let res= getNum([20, 50, 30, 10, 40, 100])
        console.log(`该数组的最大值为${res[0]}，最小值为${res[1]}`)
4-2.求一个数组最大值和最小值的变种
// 求一个数组最大值和最小值
// 函数调用的时候，如果第二个参数为true，返回最大值；如果没有第二个参数，返回最小值
        function getNum(arr,flag) {
            let max =  min = arr[0]
            for (let i = 1; i < arr.length; i++) {
                if (max < arr[i]) {
                    max = arr[i]
                }
                if (min > arr[i]) {
                    min = arr[i]
                }
            }

            if(flag){
                return max
            }
            else{return min}
        }
        let res= getNum([20, 50, 30, 10, 40, 100],true)
        let res1= getNum([20, 50, 30, 10, 40, 100])
        console.log(res)
        console.log(res1)
5.求两个数的最大值
// 求两个数的最大值
// 用户输入两个值，比较大小，封装函数，将大的值返回到函数外边，在页面中打印出来
        function getNum(num1, num2) {
            num1 = +prompt('请输入第一个数值：')
            num2 = +prompt('请输入第二个数值：')

            return num1 > num2 ? num1 : num2
            三元表达式 或 if表达式
            if (num1 > num2) {
                return `最大值为${num1}`
            }
            else if (num1 < num2) {
                return `最大值为${num2}`
            }
            else {
                return `两值相等`
            }
        }
        alert(getNum())
6.时间转换 (用户输入秒数，可以自动转换为天时分秒)
// 用户输入秒数，可以自动转换为天时分秒
        let num = +prompt('请输入要转换的秒数：')

        function getTime(time) {
            // 天时分秒的转换，只取整数
            // 任何值n取余，值为 0，1，2，... n-1
            let day = parseInt(num / 60 / 60 / 24)
            let hour = parseInt(num / 60 / 60 % 24)   // 1天 0-23小时
            let min = parseInt(num / 60 % 60)         // 1小时 0-59分钟
            let sec = parseInt(num % 60)              // 1分钟 0-59秒

            // 三元表达式补0操作
            day = day <= 9 ? '0' + day : day
            hour = hour <= 9 ? '0' + hour : hour
            min = min <= 9 ? '0' + min : min
            sec = sec <= 9 ? '0' + sec : sec

            // 函数返回值，一次返回多个数据，用数组
            return [day, hour, min, sec]
        }
        let time = getTime(num)      // 调用函数，实参也可以是变量
        document.write(`${num}秒被转换成${time[0]}天${time[1]}时${time[2]}分${time[3]}秒`)
十二、对象
1.定义

对象（object）：JavaScript里的一种数据类型；
对象是无序的数据的集合；
可以详细的描述描述某个事物(对象保存多个关联性比较大的属性)；

2.对象的使用
（1）声明对象
let 对象名 = {        //对象声明
    属性名: 属性值,
    方法名: 匿名函数
}

let Person = {
    uname:'大黄',
    sayHi:function() { console.log('sayHi方法') },   // 方法的函数内可以传参数
    'play ball': function () { }                    //方法名也可加引号，方法之间也用逗号隔开
}
（2）访问对象的属性/方法
属性访问的2种方法    获取对象里的属性值
    （1）对象名.属性名    访问固定属性
        console.log(person.my - name)  // 不生效
        console.log(person.age)
    （2）对象名['属性名']    访问动态属性
        console.log(person['my-name'])
        console.log(person['sex'])


方法访问的2种方法    调用对象里的方法
    （1）对象名.方法名()
        person.sing(123)           // 可以传参
        person.'play ball'()       // 错误,多个单词的方法名必须用[]
    （2）对象名['方法名']()
        person['sing']()
        person['play ball']()

注意:
    [] 里面的属性名一定加引号;
    当属性为动态时用 []
3.操作对象(增删改查)
增删改都是基于查的语法之上的。
1. 改(重新赋值)    在对象外操作
    （1）对象名.属性名=属性值
        person.age = 99
        console.log(person.age)
    （2）对象名['属性名']=属性值
        person['my-name'] = '明明'
        console.log(person['my-name'])

    （3）对象名.方法名 = 匿名函数     定义时带引号的方法名用此不生效
        person.sing = function () {
            console.log('sing改1')
        }
        person.sing()
    （4）对象名['方法名']=匿名函数
        person['sing'] = function () {
            console.log('sing改2')
        }
        person.sing()

        person['play ball'] = function () {
            console.log('play ball改2')
        }
        person['play ball']()


2. 增
    （1）对象名.新属性名 = 新属性值
         对象名.新方法名 = 新匿名函数
        person.school = 'sjzxy'
        person.drink = function () {
            console.log('喝mink')
        }
    （2）对象名['新属性名'] = 新属性值
         对象名['新方法名'] = 新匿名函数


3. 删
    （1）delete 对象名.属性名
         delete 对象名.方法名
            delete person.age
            delete person.sing

    （2）delete 对象名[属性名]
         delete 对象名[方法名]
            delete person['sex']
            delete person['my-name']
            delete person['play ball']
4.遍历对象(for-in)
遍历对象   for in循环（k 是获得对象的属性名，对象名[k] 是获得属性值）
        for (let k in obj) {
            console.log(k)         // 打印属性名
            console.log(obj[k])    // 打印属性值   注意：k不能加引号，因为k是动态的
            console.log(obj['k'])  // 加引号找的是对象obj里属性名为k的值，结果为undefined
        }
for-in也可遍历数组（k代表索引值）

数组 里面可以放任何的数据类型；
数组名[索引值 i ]                    获取数组里的第i个元素；
数组名[索引值 i ].属性名        获取数组里的第i个对象元素里的属性；

let arr = [{uname: '三剑客',age: 18,sex: '男'}, 
           {uname: '傅斯年',age: 20,sex: '女'},
           {uname: '妲己',age: 34,sex: '男'}]
for (let i = 0; i < arr.length; i++) {
    console.log(arr[0])          获取数组里的第一个元素
    console.log(arr[0].uname)    获取数组里的第一个对象元素里的属性
    console.log(arr[i])
    console.log(arr[i].uname)
}
5.内置对象(Math)



Math对象的方法
作用
举例




random
生成0-1之间的随机数 (包含0不包括1)
 取 [n-m] 之间随机整数
 Math.random() * (max - min + 1)) + min
 


ceil
向上取整（不会四舍五入）
 Math.ceil(1.1) → 2
 Math.ceil(1.5) → 2
 


floor
向下取整（不会四舍五入）
 Math.floor(1.1) → 1
 Math.floor(1.5) → 1
 


round
就近取整，四舍五入(.5往大取整)
 Math.round(1.1) → 1
 Math.round(1.5) → 2
 Math.round(1.9) → 2
 
 Math.round(-1.1) → -1
 Math.round(-1.5) → -1
 Math.round(-1.9) → -2
 


max
找最大数
传入的是多个数字，不是数组(利用剩余函数)
 let arr = [1, 5, 9, 45]
 console.log( Math.max(...arr) )
 


min
找最小数
Math.min(1, 5, 9, 45)


pow
幂运算
 Math.pow(2,3) → 8 (2的3次方)
 


abs
绝对值



PI
 圆周率   π
 




随机点名
// 封装随机数函数
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min
}
// 声明一个数组
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操', 'pink老师']
// 生成1个随机数 作为数组的索引号
let random = getRandom(0, arr.length - 1)
document.write(arr[random])
随机颜色
（1）随机RGB颜色
// 封装随机RGB颜色函数
function getColor() {
    let r = Math.floor(Math.random() * 256)
    let g = Math.floor(Math.random() * 256)
    let b = Math.floor(Math.random() * 256)
    // 返回值的2种形式
    // 1. 直接返回rgb内的格式,若返回数组会比较麻烦    rgb(12,12,12)
    return `${r},${g},${b}`
    // 2. 返回数组
    // return [r,g,b]
}
//　调用函数
let color = getColor()
document.write(``)
// document.write(`
`)
（2）随机16进制颜色
// 封装随机16进制颜色函数
function getColor() {
    // 将 0-9,a-f (可数、有索引号方便操作)放入到数组中    注意：a-f要用引号
    let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
    let str = '#'
    // 循环6次(因为#后是6位数)，筛选出6个随机数    #ffffff
    for (let i = 0; i < 6; i++) {
        // index表为索引值,索引值0-15   取[0,15]随机整数
        let index = Math.floor(Math.random() * (arr.length))  // 15+1 = 16 = arr.length
        // #与[0,15]随机整数拼接
        str += arr[index]
    }
    // 返回拼接后的字符串
    return str
}
// 调用并输出函数
let color = getColor()
console.log(color)
（3）传参返回随机RGB颜色，不传参则返回随机16进制颜色
function getColor(flag) {
    if (flag) {
        // 返回rgb颜色
    }else {
        // 返回16进制颜色
    }
}
let flag=prompt('传实参或不传实参')
getColor(flag)
/* getColor(true)
   getColor() */
（4）RGB颜色和16进制颜色之间的相互转换
猜数字游戏
// 获取随机数
let target = Math.floor(Math.random() * 10) + 1
// 确定循环次数用for循环，不确定次数用while循环
while (true) {
    let num = +prompt('请猜1~10之间的数字：')
    if (num > target) {
        alert('猜大了')
    } else if (num < target) {
        alert('猜小了')
    } else {
        alert('正确！')
        break
    }
}


WEB APIs
一、Web API 基本认知

JavaScript包括ECMAScript(规定语法，规范，数据类型)、webAPIs
Web APIs 的作用：使用 JS 去操作 html 和浏览器。Web APIs是操作 html 和浏览器的接口（方法）
Web APIs 包括：DOM (Document Object Model—文档对象模型，即把文档当作对象来处理，对象里有属性和方法)、BOM（浏览器对象模型）
DOM是开发网页内容特效和实现用户交互；BOM是操纵浏览器的
DOM 树(文档树)：可将 HTML 文档以树状结构直观的表现出来；直观的体现了标签与标签之间的关系
document 是 DOM 里提供的一个对象，所以它提供的属性和方法都是用来访问和操作网页内容的(所以主要学document的方法)。网页所有内容都在document里面
节点(dom对象)：元素节点(对应HTML中的标签元素)、属性节点(对应HTML中的属性)、文本节点(对应HTML的标签中的内容)、注释节点

二、获取、操作DOM对象
1、获取DOM对象




语法
作用
注意




获取DOM对象
document.querySelector('选择器') 
选中匹配的第一个元素，获取单个元素
 选择器要加引号，不加为变量；
 
 如果获取不到会返回null
 


document.querySelectorAll('选择器')
 选中匹配的多个元素，获取伪数组
 (要经过遍历给伪元素的项进行修改)
 


其它获取DOM对象的方法





 document.getElementById('ID名')
 




 document.getElementsByTagName('标签名')
 
伪数组



 document.getElementsByClassName('类名')
 
伪数组



 document.documentElement
 
获取html标签



document.body
获取body标签



id名可放在前面
id名.document.querySelector('选择器')
选中id名中符合选择器要求的第一个元素



id名.document.querySelectorAll('选择器')
选中id名中符合选择器要求的多个元素



选择器 不支持伪元素选择器，支持部分伪类选择器




querySelector() 方法能直接操作修改（a.style.color = 'red'）；querySelectorAll() 方法不能直接修改（a[2].style.color = 'red'）
伪数组：有长度有索引号，但是没有 pop() push() 等数组方法的数组；

2、操作元素
（1）设置/修改DOM元素内容



语法
区别
注意




对象.innerText = '修改的内容'
 只识别文本,所有内容原样输出
 
 不加=则为获取修改的内容,加=则为赋值(修改内容),不能修改表单标签
 


对象.innerHTML = '修改的内容'
 可以解析标签
 



document.write()
 只能将文本内容追加到 前面的位置；
 文本中包含的标签会被解析
 




随机点名抽奖

	抽中的是：名字

	

（2）设置/修改DOM元素属性




样式
优缺点
用于




修改元素固有属性
元素.属性名 = '新属性值'

 href、title、src
 pic.src='路径'
 


修改元素样式属性
元素.style.属性名 = '新属性值'
复合属性名用小驼峰(去掉-横线，第二个单词首字母大写)
 a.style.color = 'red'
 


 用类名修改元素
 (用于修改很多元素样式时)
 
元素.className='类名'
 因为class在JS中是关键字
 弊端：会覆盖原来的类名，适用于1个类名的操作
 



 元素.classList.add='类名' 
 元素.classList.remove='类名' 
 元素.classList.toggle='类名' 
 元素.classList.contains='类名' 
 
 添加类名/
 删除类名/
 切换类名(有就删除,没有就添加)/
 是否包含类名
 
 (适用于多个类名，不影响以前类名)
 



修改表单元素属性 
 元素.属性名 = '新属性值'
 （和固有元素修改相同）
 
 disabled   
 禁用(只用于表单)
                               checkbox   
 单、多选默认选中
                               selected     
 下拉列表默认选中
                               readonly     只读
 
 input.type = 'text'
 inp.value = 'abc'
 
 // disabled 禁用
    inp.disabled = true          //禁用
    inp.disabled = false        //解除禁用
    console.log(inp.disabled)    //判断是否禁用
 
 // checked  默认选项
         inp.checked = true
         inp.checked = false
         inp.checked
 



随机刷图片
当我们刷新页面，页面中的图片随机显示不同的图片


	

	

3、定时器
两种定时器对比：

setInterval 的特征是重复执行，首次执行会延时；setTimeout 的特征是延时执行，只执行1次；
setTimeout 结合递归函数，能模拟 setInterval 重复执行；
可以不配套使用；

（1）间歇函数
定时器(间歇函数、间歇定时器、重复性定时器)可实现 每隔一段时间需要自动执行一段代码(即，每隔一段时间调用一次函数)
1. 开启定时器     注意：函数名后不能加括号，时间是以毫秒为单位   1s=1000ms
   setInterval(函数名,时间)  	  
2. 关闭定时器     注意：必须要有定时器名字才可以清除定时器(在开启定时器时,默认返回定时器标识)
   clearInterval(定时器标识)
倒计时间案例 


	用户注册协议
    欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
    【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
	

	


	

轮播图案例

  
    
    
      第1张图的描述信息
    
  

  

 （2）延时函数
延时函数只执行一次。
1.开启延时函数   使用规范与间歇函数相同
    setTimeout(函数,延迟的时间)
2.关闭延时函数
    clearTimeout(定时器标识)
延迟函数配合递归可模拟实现间歇定时器
递归函数：函数内部调用其自身

	时间
	

三、事件
事件：用户的行为、动作（点击，双击）
1.事件
（1）事件监听
事件监听：一旦事件源被事件触发，就立即调用一个函数做出响应。
事件源.addEventListener('事件类型',函数)
事件监听的三要素：

事件在哪个物体上发生(被事件触发的物体)，这个物体就是事件源；
事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等；
事件调用的函数： 事件源被触发后要做什么事；
 举例：

    

    
 

（2）事件类型



事件分类
书写
触发条件




 鼠标事件
 (鼠标触发)
 
click
单击


dblclick
双击


mouseenter
鼠标经过


mouseleave
鼠标离开


mousemove
鼠标移动


mouseup/down



 焦点事件
 (表单获得/失去光标)
 
focus
获得光标
用于表单元素


blur
失去光标


 文本事件
 (表单输入时触发)
 
input
 用户输入时触发
 如，textarea
 


change
当用户更改、 元素的值并提交这个更改时，change事件在这些元素上触发。和 input 事件不一样，change事件并不是每次元素的value改变时都会触发。</td> 
    </tr> 
    <tr> 
     <th colspan="1" rowspan="3" style="width:149px;"> <p style="text-align:center;">键盘事件</p> <p style="text-align:center;">(按键触发)</p> </th> 
     <td style="width:123px;">keydown</td> 
     <td colspan="2" style="width:287px;"> <p>键盘按下</p> <p>(所有按键都会触发)</p> </td> 
    </tr> 
    <tr> 
     <td style="width:123px;">keyup</td> 
     <td colspan="2" style="width:287px;">键盘抬起</td> 
    </tr> 
    <tr> 
     <td style="width:123px;">keypress</td> 
     <td colspan="2" style="width:287px;"> <p>键盘按下</p> <p>输出按键(除了ctrl/shift/alt 操作按键)会触发 </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <blockquote> 
   <p>自动触发事件      事件源.事件类型()</p> 
  </blockquote> 
  <h3>（3）事件绑定的2种写法</h3> 
  <ul> 
   <li> <p>事件源.on事件 = function() { }          （有的浏览器可能不支持）</p> </li> 
   <li> <p>DOM L2 事件源.addEventListener(事件类型， 事件处理函数)</p> </li> 
  </ul> 
  <p><strong>区别：</strong></p> 
  <p><strong>(1) L0</strong></p> 
  <p>同类型的事件，后面注册的事件会覆盖前面的；</p> 
  <p>无法开启事件捕获；</p> 
  <p>移除事件        事件源.on事件类型=null</p> 
  <p><strong>(2) L2</strong></p> 
  <p>同类型的事件，后面注册的事件不会覆盖前面的；</p> 
  <p>可开启事件捕获，语法：事件源.addEventListener(事件类型, 事件处理函数, 是否使用捕获)；</p> 
  <p>移除事件        事件源.removeEventListener(事件类型, 事件处理函数名称)</p> 
  <h2>2、事件对象(e)</h2> 
  <p>定义：事件对象是事件触发时产生的对象，事件对象中存了事件触发时的相关信息.</p> 
  <h3>（1）获取事件对象</h3> 
  <ul> 
   <li>事件处理函数的第一个形参接受的就是事件对象；</li> 
   <li>一般命名为event、ev、e；</li> 
   <li> <pre><code class="language-javascript">元素.addEventListener('click',function (e) { })</code></pre> </li> 
  </ul> 
  <h3>（1）事件对象的属性</h3> 
  <table align="center" border="1"> 
   <thead> 
    <tr> 
     <th style="text-align:center;">作用</th> 
     <th style="text-align:center;">事件对象的属性名</th> 
     <th style="text-align:center;">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <th style="text-align:center;">获取当前的事件类型</th> 
     <td>type</td> 
     <td></td> 
    </tr> 
    <tr> 
     <th colspan="1" rowspan="3" style="text-align:center;">获取鼠标位置</th> 
     <td>clientX/clientY </td> 
     <td>获取光标相对于浏览器可见窗口左上角的位置</td> 
    </tr> 
    <tr> 
     <td>pageX/pageY</td> 
     <td>获取光标相对于文档(document)左上角的位置</td> 
    </tr> 
    <tr> 
     <td>offsetX/offsetY</td> 
     <td>获取光标相对于当前DOM元素(事件源)左上角的位置</td> 
    </tr> 
    <tr> 
     <th colspan="1" rowspan="3" style="text-align:center;">键盘</th> 
     <td>key</td> 
     <td>获取按下的是哪个键，如：A</td> 
    </tr> 
    <tr> 
     <td>keyCode</td> 
     <td>键码值，转换成二进制的数字</td> 
    </tr> 
    <tr> 
     <td> <p>ctrlKey</p> <p>shiftKey</p> <p>altKey</p> </td> 
     <td>判断按下是否是ctrl/shift/alt</td> 
    </tr> 
    <tr> 
     <th colspan="1"> <p style="text-align:center;">获取目标元素</p> <p style="text-align:center;">(即触发事件的元素)</p> </th> 
     <td>target</td> 
     <td>获得真正触发事件的元素</td> 
    </tr> 
   </tbody> 
  </table> 
  <h3>图片跟随鼠标案例</h3> 
  <pre><code class="language-html">需求：一张图片一直跟着鼠标移动
<body>
	<img src="images/tianshi.gif">

	<script type="text/javascript">
		// 1. 获取元素
		let img = document.querySelector('img')
		// 2. 事件监听
		document.addEventListener('mousemove', function (e) {
			// 获取鼠标的位置
			let x = e.clientX
			let y = e.clientY
			// 设置图片的left/top值,减50(目前不会获取元素的宽高)使鼠标在图片的中心，注意要带单位
			img.style.left = x - 50 + 'px'
			img.style.top = y - 50 + 'px'
		})
	</script>
</body></code></pre> 
  <h2>3、事件流</h2> 
  <p>事件流：事件触发后的流程</p> 
  <p>事件流的两个阶段：捕获阶段、冒泡阶段</p> 
  <h3>（1）事件捕获和事件冒泡</h3> 
  <p>事件冒泡：</p> 
  <ul> 
   <li>当一个元素触发事件后，会依次向上调用所有父级元素(直到document)的同名事件；</li> 
   <li>事件冒泡是默认存在的；</li> 
   <li>判断某事件是否支持冒泡：console.log(e)的结果中 bubbles:false 则不支持冒泡。</li> 
  </ul> 
  <p>事件捕获：</p> 
  <ul> 
   <li>addEventListener第三个参数传入true代表触发捕获阶段，false代表关闭事件捕获；</li> 
   <li>是从document依次向下执行到目标元素；</li> 
   <li>捕获阶段是 从父到子 冒泡阶段是从子到父；</li> 
   <li>事件捕获和事件冒泡不能同时开启，但是都是存在的。</li> 
  </ul> 
  <pre><code class="language-html"><body>
	<div><p>段落</p></div>

	<script type="text/javascript">
		let p = document.querySelector('p');
		let div = document.querySelector('div')

		// 事件捕获，开启捕获——事件监听的第三个函数为true
		p.addEventListener('click', function () {
			console.log('p',e.target);
		}, true);
		div.addEventListener('click', function () {
			console.log('div',e.target);
		}, true);
		document.addEventListener('click', function () {
			console.log('document',e.target);
		}, true);
            点击p标签的结果：document    <p>段落</p>
                            div         <p>段落</p>
                            p           <p>段落</p>

		// 事件冒泡
		p.addEventListener('click', function () {
			console.log('p',e.target);
		});
		div.addEventListener('click', function () {
			console.log('div',e.target);
		});
		document.addEventListener('click', function () {
			console.log('document',e.target);
		});
            点击p标签的结果：p           <p>段落</p>
                            div         <p>段落</p>
                            document    <p>段落</p>
	</script>
</body></code></pre> 
  <h3>（2）阻止事件流动</h3> 
  <ul> 
   <li>给影响其它元素的元素添加；</li> 
   <li>此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效；</li> 
  </ul> 
  <pre><code class="language-javascript">事件对象.stopPropagation()</code></pre> 
  <pre><code class="language-javascript">鼠标经过事件的两种写法：

mouseenter 和 mouseleave 没有冒泡效果

mouseover 和 mouseout 会有冒泡效果</code></pre> 
  <h3>（3）阻止默认行为</h3> 
  <p>如，链接点击不跳转，表单域的不提交</p> 
  <pre><code class="language-javascript">事件对象.preventDefault()</code></pre> 
  <h2>4、事件委托</h2> 
  <ul> 
   <li>优点：简化代码，提高性能；并且新创建的节点也会有事件</li> 
   <li>原理：事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发(点击子元素，经过冒泡，父元素执行事件)</li> 
   <li>实现：事件对象.target 可以获得真正触发事件的元素</li> 
   <li> <pre><code class="language-javascript">事件对象.target        获取目标元素(即触发事件的元素)</code></pre> </li> 
  </ul> 
  <p><strong>步骤：</strong></p> 
  <ul> 
   <li>1. 把子孙元素的事件注册给上级元素；</li> 
   <li>2. 利用事件对象.target找到最先触发的元素；</li> 
   <li>3. 利用nodeName查看节点是否是需要的节点；</li> 
   <li> <pre><code class="language-html"><body>
	<ul>
		li*10{$}
	</ul>

	<script type="text/javascript">
	    // 事件委托：把子孙元素的事件注册给上级元素
		// 1、把事件给上级元素注册
		let ul = document.querySelector('ul');

		ul.addEventListener('click', function ( e ) {
			// 2、利用事件对象.target找到最先触发的元素
			// console.log( e.target.innerHTML );
			// 3、如果e.target是我们要找的元素，在执行
			if ( e.target.nodeName === 'LI' ) {
				console.log( e.target.innerHTML );
			}
		});
		
		// 动态创建的元素也会有事件的
		let li = document.createElement('li');
		li.innerHTML = '新的li';
		ul.appendChild(li);
	</script>
</body></code></pre> </li> 
  </ul> 
  <h2>5、案例</h2> 
  <h3>（1）输入文字，实时显示输入的字数</h3> 
  <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/0ec3ff146e3b4891ba16626de9bd26ac.jpg" target="_blank"><img alt="JavaScript(2021.9.26)_第26张图片" height="128" src="http://img.e-com-net.com/image/info8/0ec3ff146e3b4891ba16626de9bd26ac.jpg" width="650" style="border:1px solid black;"></a></p> 
  <pre><code class="language-javascript">1. 获取元素
    let area = document.getElementById('area')            // 文本框
    let useCount = document.querySelector('.useCount')    // 包含数字的span

2. 监听事件
    area.addEventListener('input',function(){
      // 将useCount的内容改为 用户输入的字符串的长度(字符串也可以遍历)
      useCount.innerHTML=area.value.length
    })</code></pre> 
  <h3>（2）全选</h3> 
  <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/ac983aba27e1413d8ed2a7372ba4be1c.jpg" target="_blank"><img alt="JavaScript(2021.9.26)_第27张图片" height="206" src="http://img.e-com-net.com/image/info8/ac983aba27e1413d8ed2a7372ba4be1c.jpg" width="650" style="border:1px solid black;"></a></p> 
  <pre><code class="language-javascript">用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化
</code></pre> 
  <h3>（3）购物车加减操作</h3> 
  <p> <a href="http://img.e-com-net.com/image/info8/bc2e31f69d38455987b87cc1ff41d32a.jpg" target="_blank"><img alt="JavaScript(2021.9.26)_第28张图片" height="127" src="http://img.e-com-net.com/image/info8/bc2e31f69d38455987b87cc1ff41d32a.jpg" width="206" style="border:1px solid black;"></a></p> 
  <pre><code class="language-html"><body>
  <div>
    <input type="text" id="total" value="1" readonly>
    <input type="button" value="+" id="add">
    <input type="button" value="-" id="reduce" disabled>
  </div>

  <script>
    // 获取元素
    let text = document.getElementById('total')
    let add = document.getElementById('add')
    let reduce = document.getElementById('reduce')
    let i = 1

    // 监听事件
    add.addEventListener('click', function () {
      i++
      text.value = i
      reduce.disabled = false
    })
    reduce.addEventListener('click', function () {
      i--
      text.value = i
      if (text.value <= 1) {
        reduce.disabled = true
      }
    })
  </script></code></pre> 
  <h1>四、节点</h1> 
  <h2>1、查找节点</h2> 
  <table align="center" border="1" style="width:650px;"> 
   <thead> 
    <tr> 
     <th style="text-align:center;width:76px;">查找...</th> 
     <th style="text-align:center;width:199px;">写法</th> 
     <th style="text-align:center;width:373px;">注意</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <th style="width:76px;">父节点</th> 
     <td style="width:199px;">子节点.parentNode</td> 
     <td style="width:373px;"> <p>返回最近一级的父节点 找不到返回为null</p> <p>注意：子节点.parentNode.parentNode     爷爷(可以连点)</p> </td> 
    </tr> 
    <tr> 
     <th colspan="1" rowspan="7" style="width:76px;">子节点</th> 
     <td style="width:199px;">父节点.childNodes</td> 
     <td style="width:373px;">获取所有的子节点(伪数组)，包括文本节点（空格、换行）、注释节点等</td> 
    </tr> 
    <tr> 
     <td style="width:199px;">父节点.children</td> 
     <td style="width:373px;">获取所有的元素子节点(伪数组)</td> 
    </tr> 
    <tr> 
     <td style="width:199px;">父节点.firstElementChild</td> 
     <td colspan="1" rowspan="2" style="width:373px;"> <p>第一个 / 最后一个 元素子节点</p> </td> 
    </tr> 
    <tr> 
     <td style="width:199px;">父节点.lastElementChild</td> 
    </tr> 
    <tr> 
     <td style="width:199px;">父节点.firstChild </td> 
     <td colspan="1" rowspan="2" style="width:373px;"> <p>第一个 / 最后一个 子节点（可能是 #text）</p> </td> 
    </tr> 
    <tr> 
     <td style="width:199px;">父节点.lastChild </td> 
    </tr> 
    <tr> 
     <td colspan="2" rowspan="1" style="width:572px;"> <p><strong>属性：</strong></p> <p>（1）nodeType     节点类型</p> <p> 如，div.childNodes[0].nodeType     是标签节点返回1，是属性节点返回2，是文本节点返回3</p> <p></p> <p>（2）nodeName     节点名称</p> <p> 如，div.childNodes[0].nodeName     是文本节点返回#text，是标签节点返回大写标签名</p> </td> 
    </tr> 
    <tr> 
     <th colspan="1" rowspan="4" style="width:76px;"><span style="color:#0d0016;">兄弟节点</span></th> 
     <td style="width:199px;"> <p>节点.nextElementSibling</p> </td> 
     <td colspan="1" rowspan="2" style="width:373px;"> <p>后 / 前 一个元素节点</p> </td> 
    </tr> 
    <tr> 
     <td style="width:199px;">节点.previousElementSibling </td> 
    </tr> 
    <tr> 
     <td style="width:199px;">节点.nextSibling</td> 
     <td colspan="1" rowspan="2" style="width:373px;">后 / 前 一个节点 （可能是 #text）</td> 
    </tr> 
    <tr> 
     <td style="width:199px;">节点.previousSibling</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="language-html">需求：关闭多个二维码
思路：获取×号并遍历,关闭父元素
<body>
  <div class="erweima">
    <span class="close"></span>
  </div>
  <div class="erweima">
    <span class="close"></span>
  </div>
  <div class="erweima">
    <span class="close"></span>
  </div>
  <div class="erweima">
    <span class="close"></span>
  </div>
  <div class="erweima">
    <span class="close"></span>
  </div>

  <script>
    let spans = document.querySelectorAll('.close')

// 在遍历里加监听事件,并且伪数组添加监听事件时要用[]
    for (let i = 0; i < spans.length; i++) {
      spans[i].addEventListener('click', function () {
        this.parentNode.style.display = 'none'
      })
    }
  </script>
</body></code></pre> 
  <h2>2、创建及追加/插入节点</h2> 
  <pre><code class="language-javascript">创建新节点
     let 变量 = document.createElement('新节点的标签名')

1. 追加节点—在父元素内部的最后创建节点
    父元素.appendChild(新节点)

2. 插入节点—在父元素内部的旧节点的前边创建节点
    父元素.insertBefore(新节点,旧节点)</code></pre> 
  <h3>（2）移动节点</h3> 
  <p>将<strong>已存在的节点</strong>追加/插入到别处，可实现该节点的移动。</p> 
  <pre><code class="language-html">需求：将img移到第2个div中
<body>
	<input type="button" value="点击">
	<div>
		<img src="07.jpg">
	</div>
	<div></div>

	<script type="text/javascript">
		// 1. 获取元素
		let btn = document.querySelector('input')
		let two = document.querySelector('div:nth-child(3)')
		let img = document.querySelector('img')
		console.log(two)

		// 2. 添加点击事件
		btn.addEventListener('click', function () {
			two.appendChild(img)
		})
	</script>
</body></code></pre> 
  <pre><code class="language-javascript">向ul里添加li
<script>
        // 要填入页面准备的数据
        let data=[{对象1},{对象2},{对象3},{对象4},{对象5}]
        // 获取变量
        let ul = document.getElementsByClassName('clearfix')
        // let ul = document.querySelector('.clearfix')

        // 遍历数组 (数组里有几个元素就创建几个li)
        for (let i = 0; i < data.length; i++) {
            // 创建新节点
            let newLi = document.createElement('li')
            // 追加节点
            // ul.appendChild(newLi)
            ul[0].appendChild(newLi)
            // 向新节点中添加内容
            newLi.innerHTML = `
                    <img src="${data[i].src}" alt="">
                    <h4>
                        ${data[i].title}
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>${data[i].num}</span>人在学习
                    </div>`
        }
</script></code></pre> 
  <h3>（3）克隆节点</h3> 
  <pre><code class="language-javascript">要克隆的节点.cloneNode(布尔值)</code></pre> 
  <ul> 
   <li> 若布尔值为true时，则代表克隆时会包含后代节点一起克隆(即，连里边的内容一起克隆)；</li> 
   <li>若布尔值为false，则代表克隆时不包含后代节点(即，只克隆该节点)；</li> 
   <li>默认为false</li> 
  </ul> 
  <h2>3、删除节点</h2> 
  <p>要删除元素必须<strong>通过父元素删除</strong></p> 
  <pre><code class="language-javascript">父元素.removeChild(子元素)

img.parentNode.removeChild(img)    // 删除img的父元素里的img,即删除它自身</code></pre> 
  <h2>回流(重排)和重绘</h2> 
  <ul> 
   <li>过程：布局—渲染—回流/重排—重绘；</li> 
   <li>边框/字符大小/边距/宽高/激活css伪类/添加或者删除可见的节点 等其它影响元素位置和布局的属性 都会造成回流；</li> 
   <li>重绘不一定引起回流，而回流一定会引起重绘；</li> 
  </ul> 
  <h1>五、时间对象(内置对象 Date)</h1> 
  <h2>1、创建时间日期对象</h2> 
  <pre><code class="language-javascript">创建时间日期对象（实例化对象）,是一种数据类型，可赋值给变量
    new Date();                     // 当前时间日期
	new Date('1999-9-9 6:6:6');     // 指定时间日期(字符串，用引号引起来)
	new Date(1999, 9, 9, 6, 6, 6);  // 指定时间日期(数字)
    new Date().toLocaleString();    // 将时间输出格式改为本地时间格式,小括号内不加东西</code></pre> 
  <h2>2、时间对象方法</h2> 
  <table align="center" border="1" style="width:500px;"> 
   <thead> 
    <tr> 
     <th style="text-align:center;">方法</th> 
     <th style="text-align:center;">作用</th> 
     <th style="text-align:center;">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <th>getFullYear()</th> 
     <td>获得年份</td> 
     <td>获取四位年份</td> 
    </tr> 
    <tr> 
     <th>getMonth()</th> 
     <td>获得月份</td> 
     <td>取值为 0(1月) ~ 11(12月)</td> 
    </tr> 
    <tr> 
     <th>getDate()</th> 
     <td>获取月份中的每一天</td> 
     <td>不同月份取值也不相同</td> 
    </tr> 
    <tr> 
     <th>getDay()</th> 
     <td>获取星期</td> 
     <td>取值为 0 ~ 6，0代表星期日</td> 
    </tr> 
    <tr> 
     <th>getHours()</th> 
     <td>获取小时</td> 
     <td>取值为 0 ~ 23</td> 
    </tr> 
    <tr> 
     <th>getMinutes()</th> 
     <td>获取分钟</td> 
     <td>取值为 0 ~ 59</td> 
    </tr> 
    <tr> 
     <th>getSeconds()</th> 
     <td>获取秒</td> 
     <td>取值为 0 ~ 59</td> 
    </tr> 
   </tbody> 
  </table> 
  <p>可以用set对象来设置具体日期，如，setMonth(6)    注意：set无返回值，不能直接赋值给变量；星期无set方法。</p> 
  <h3>实时钟表案例</h3> 
  <pre><code class="language-html"><body>
	<!-- 需求：将当前时间以:YYYY-MM-DD HH:mm 形式显示在页面 -->
	<!-- 思路：将时间对象获取的时间存到变量中,将变量带入带页面中,并使用定时器实现每秒一变的效果 -->

	<div>时间</div>

	<script type="text/javascript">
		// 1. 获取元素
		let div = document.querySelector('div')
		// 4. 因为定时器1秒后才执行,所以刷新页面时有1秒空白,所以此语句用来弥补那1秒的空白
		showTime()
		// 3. 定时器   每1秒自动调用showTime函数,使钟表每一秒能自动变化
		let timer = setInterval(showTime, 1000)
		// 2. 封装成函数
		function showTime() {
			// 获取时间
			let year = new Date().getFullYear()
			let month = new Date().getMonth() + 1
			let date = new Date().getDate()
			let hour = new Date().getHours()
			let minute = new Date().getMinutes()
			let second = new Date().getSeconds()
			// 补0
			month = month < 10 ? '0' + month : month
			date = date < 10 ? '0' + date : date
			hour = hour < 10 ? '0' + hour : hour
			minute = minute < 10 ? '0' + minute : minute
			second = second < 10 ? '0' + second : second
			// 修改页面标签内容
			div.innerHTML = `${year}-${month}-${date} ${hour}:${minute}:${second}`
		}
	</script>
</body></code></pre> 
  <h2>3、时间戳</h2> 
  <p>时间戳是指1970年01月01日00时00分00秒起至现在的<strong>毫秒数</strong>，它是一种特殊的精确的计量时间的方式。</p> 
  <pre><code class="language-javascript">获取1970年到当前时间或指定时间的毫秒数：
1. getTime()方法      可以返回指定时间的时间戳
       console.log(new Date().getTime());
		console.log(new Date('2000-10-10').getTime());    // 字符串要加引号

2. +new Date()        可以返回指定时间的时间戳
		console.log(+new Date());
		console.log(+new Date('2000-10-10'));

3. Date.now()
		console.log(Date.now());   // 只能获取当前时间</code></pre> 
  <h3>下班倒计时案例</h3> 
  <pre><code class="language-html"><body>
  <div class="countdown">
    <p class="next">今天是2021年8月28日</p>
    <p class="title">下班倒计时</p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">25</span>
      <i>:</i>
      <span id="scond">20</span>
    </p>
    <p class="tips">
      现在是18:30:00
    </p>
  </div>

  <script type="text/javascript">
     倒计时
     思路：结束时间戳 - 当前时间戳=差值, 然后将差值转换成时分秒, 放入页面的3个span中

    // 获取变量
    let hour = document.getElementById('hour')
    let minutes = document.getElementById('minutes')
    let scond = document.getElementById('scond')

    // 定时器
    let timer = setInterval(showTime, 1000)
    // 弥补前1秒的空白
    showTime()
    // 封装函数
    function showTime() {
      // 创建时间
      let t1 = new Date()
      let t2 = new Date('2022-2-15 20:22:00')
      // 计算现在时间和目标时间之间的毫秒数
      let t = t2.getTime() - t1.getTime()

      // 将毫秒数换算成时分秒
      let h = parseInt(t / 1000 / 60 / 60)
      let m = parseInt(t / 1000 / 60 % 60)
      let s = parseInt(t / 1000 % 60)
      // 补0
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s

      // 修改页面标签的倒计时
      hour.innerHTML = h
      minutes.innerHTML = m
      scond.innerHTML = s

      // 结束 判断（因为t可能会跳过0,所以设置为t <= 0）
      if (t <= 0) {
        clearInterval(timer)
        // 结束的同时将页面中设置成'00',否则会出现'0-'
        hour.innerHTML = '00'
        minutes.innerHTML = '00'
        scond.innerHTML = '00'
      }
    }
  </script></code></pre> 
  <h1>六、网页特效</h1> 
  <h2>1、滚动事件(scroll)</h2> 
  <pre><code class="language-javascript">监听整个页面滚动:
window.addEventListener('scroll', function () { })
注意： 给 window 或 document 添加 scroll 事件</code></pre> 
  <ul> 
   <li>滚动事件是当页面进行滚动时触发的事件；</li> 
   <li>谁有滚动条加给谁；</li> 
   <li>使用情景：很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部；</li> 
  </ul> 
  <h2>2、加载事件</h2> 
  <p>作用：当JS写在head中，添加加载事件，不会找不到DOM元素了。</p> 
  <p>DOM加载事件比资源加载事件速度快，但有兼容性问题。</p> 
  <h3>（1）资源加载事件(load)</h3> 
  <p>load加载事件：当所有资源（如图片、外联CSS和JavaScript等(涉及路径就要加载)）加载完毕时触发的事件.</p> 
  <pre><code class="language-javascript">页面加载事件：    给window添加load事件
window.addEventListener('load', function () { })

针对某个资源绑定load事件：
div.addEventListener('load', function () { })</code></pre> 
  <h3>（2）DOM 加载事件(DOMContentLoaded)</h3> 
  <p>当加载完DOM元素后(不用等待样式表 、图像等完全加载)，DOMContentLoaded 事件被触发。</p> 
  <pre><code class="language-javascript">页面加载事件：    给document添加DOMContentLoaded事件
document.addEventListener('DOMContentLoaded', function () { })</code></pre> 
  <h2> 3、尺寸改变事件(resize)</h2> 
  <p>当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件.</p> 
  <pre><code class="language-javascript">window.addEventListener('resize', function () {
    // 不同屏幕大小,字体大小不同
	if (document.documentElement.clientWidth>800) {
		document.documentElement.style.fontSize='20px'
	}
	else{
	document.documentElement.style.fontSize='10px'
	} 
})</code></pre> 
  <h2>4、元素大小和位置</h2> 
  <h3>三大家族的不同与相同点：</h3> 
  <ul> 
   <li>都返回的是数字类型的值；</li> 
   <li>scrllTop数值随滚轮的滚动而变化；offsetTop不随滚轮的滚动而变化，是固定的；</li> 
   <li>offsetWidth / offsetHeight 常用来获取元素的大小；clientWidth / clientHeight 用来获取页面的大小；</li> 
  </ul> 
  <h3>（1）scroll家族</h3> 
  <p>作用：回到顶部scrollTop=0</p> 
  <table align="center" border="1" style="width:650px;"> 
   <tbody> 
    <tr> 
     <th style="width:135px;"> <p style="text-align:center;">获取宽高</p> <p style="text-align:center;">(包含：内容宽高+padding+溢出)</p> </th> 
     <td style="width:103px;"> <p>scrollWidth</p> <p>scrollHeight</p> </td> 
     <td style="width:411px;">获取元素的内容总宽高（不包含滚动条）返回值不带单位（ <p>只读属性，不能设置）</p> <p>设置宽高的方式：div.style.width = '600px'</p> </td> 
    </tr> 
    <tr> 
     <th style="text-align:center;width:135px;">获取位置</th> 
     <td style="width:103px;"> <p>scrollLeft</p> <p>scrollTop</p> </td> 
     <td style="width:411px;">获取元素内容往左、往上<strong>滚出去看不到的距离</strong>（可设置， <p>div.scrollTop=1000）</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="language-javascript">当前页面被卷去的顶部距离
document.documentElement.scrollTop</code></pre> 
  <pre><code class="language-javascript">仿新浪 
需求：当页面滚动500像素，就显示返回顶部按钮，否则隐藏， 同时点击按钮，则返回顶部
        // 1. 滚动500px按钮显示
        let backtop = document.querySelector('.backtop')
        window.addEventListener('scroll', function () {
            if (document.documentElement.scrollTop >= 500) {
                backtop.style.display = 'block'
            }
            else { backtop.style.display = 'none' }
        })

        // 2. 点击按钮回到顶部
        backtop.addEventListener('click', function () {
            document.documentElement.scrollTop = 0
        })</code></pre> 
  <h3>（2）offset家族</h3> 
  <table align="center" border="1" style="width:650px;"> 
   <tbody> 
    <tr> 
     <th style="width:140px;"> <p style="text-align:center;">获取宽高</p> <p style="text-align:center;">(包含：内容宽度+padding+border)</p> </th> 
     <td style="width:136px;"> <p>offsetWidth</p> <p>offsetHeight</p> </td> 
     <td>只读属性，不可修改</td> 
    </tr> 
    <tr> 
     <th style="text-align:center;width:140px;">获取位置</th> 
     <td style="width:136px;"> <p>offsetLeft</p> <p>offsetTop</p> </td> 
     <td> <p>获取元素距离自己<strong>有定位的上级</strong>元素，如无定位上级时参照文档的左、上距离；</p> <p>只读属性，不可修改；</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="language-javascript">需求：当页面滚动到秒杀模块，导航栏自动滑入，否则滑出
思路：滚动条滚动的时候,判断scrollTop是否大于等于模块到文档顶部的距离
<body>
    <div class="header">我是顶部导航栏</div>
    <div class="content">
        <div class="sk">秒杀模块</div>
    </div>
    <div class="backtop">
        <img src="./images/close2.png" alt="">
        <a href="javascript:;"></a>
    </div>
    <script>
        // 获取元素：
        let header = document.querySelector('.header');
        let sk = document.querySelector('.sk');

        // 监听事件
        window.addEventListener('scroll', function () {
            // 如果卷除去的距离，大于或者等于，sk的offsetTop的距离
            if ( document.documentElement.scrollTop >= sk.offsetTop ) {
                header.style.top = 0;
            } else {
                header.style.top = '-80px';
            }
        });
    </script>
</body></code></pre> 
  <pre><code class="language-javascript">电梯导航案例
需求：点击可以页面调到指定模块效果
<body>
    <div class="aside">
        <div class="item active">男装/女装</div>
        <div class="item">儿童服装/游乐园</div>
        <div class="item">电子产品</div>
        <div class="item">电影/美食</div>
    </div>
    <div class="content">
        <div class="neirong content1">男装/女装</div>
        <div class="neirong content2">儿童服装/游乐园</div>
        <div class="neirong content3">电子产品</div>
        <div class="neirong content4">电影/美食</div>
    </div>

    <script>
        let items = document.querySelectorAll('.item')
        let neirongs = document.querySelectorAll('.neirong')

        // 伪数组遍历
        for (let i = 0; i < items.length; i++) {
            // 导航点击事件
            items[i].addEventListener('click', function () {
                // 类名操作：先找到带有active类名的元素，并将该元素的类名删除(排他思想：用for也可以,但麻烦)；然后将类名赋予给点击的元素
                document.querySelector('.active').classList.remove('active')
                /* for (let i = 0; i < items.length; i++) {
                    items[i].classList.remove('active')
                } */
                this.classList.add('active')
                // 文档的scrollTop = 元素到文档的上边距离
                document.documentElement.scrollTop = neirongs[i].offsetTop
            })
        }
    </script>
</body></code></pre> 
  <h3>（3）client家族</h3> 
  <table align="center" border="1" style="width:650px;"> 
   <tbody> 
    <tr> 
     <th style="width:165px;"> <p style="text-align:center;">获取宽高</p> <p style="text-align:center;">(包含：内容+padding)</p> </th> 
     <td style="width:122px;"> <p>clientWidth</p> <p>clientHeight</p> </td> 
     <td style="width:362px;">只读属性，不可修改</td> 
    </tr> 
    <tr> 
     <th style="text-align:center;width:165px;">获取位置</th> 
     <td style="width:122px;"> <p>clientLeft</p> <p>clientTop</p> </td> 
     <td style="width:362px;"> <p>获取元素的左边框和上边框宽度；</p> <p>只读属性，不可修改</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <h1>七、BOM(操作浏览器)</h1> 
  <h2>1、Window对象</h2> 
  <h3>（1）BOM(浏览器对象模型)</h3> 
  <p><a href="http://img.e-com-net.com/image/info8/47136a168d2e487e9109900fd7224d36.jpg" target="_blank"><img alt="JavaScript(2021.9.26)_第29张图片" src="http://img.e-com-net.com/image/info8/47136a168d2e487e9109900fd7224d36.jpg" width="650" height="169" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>window 是浏览器内置中的全局对象、顶级对象；</li> 
   <li>window的所有属性和方法都不用加window,因window是最大的，默认都是window的；</li> 
   <li>window 对象下包含了 navigator、location、document(是实现 DOM 的基础)、history、screen 5个属性；</li> 
  </ul> 
  <h3>（2）JS执行机制（API-06-1.3）</h3> 
  <p><strong>同步</strong>：前一个任务结束后再执行后一个任务(从上到下执行，如，for / while 循环；</p> 
  <p><strong>异步</strong>：（异步处理机制）异步任务没有一定顺序，谁先触发谁先处理；</p> 
  <p>一般异步任务都有回调函数，如：</p> 
  <ul> 
   <li>普通事件，如 click、resize 等</li> 
   <li>资源加载，如 load、error 等</li> 
   <li>定时器，包括 setInterval、setTimeout 等</li> 
  </ul> 
  <p>等同步(for循环while)执行完才执行异步任务</p> 
  <p>由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为<strong>事件循环</strong>;</p> 
  <p>过程叙述：同步任务被放到执行栈里先被执行，异步任务被放到异步处理机制中，当某一异步任务被触发时，将该异步任务推到任务队列中，然后被执行栈调取到执行栈中执行；</p> 
  <h3>（3）navigator对象</h3> 
  <table align="center" border="1" style="width:500px;"> 
   <tbody> 
    <tr> 
     <th> <p>navigator</p> </th> 
     <td>浏览器自身的相关信息</td> 
    </tr> 
    <tr> 
     <th> <p>navigator.userAgent</p> </th> 
     <td> <p>检测浏览器的版本及平台；</p> <p>userAgent是navigator的属性</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <h3>（4）location对象（15-22）</h3> 
  <blockquote> 
   <p>http://www.baidu.com/index.html?user=123&pwd=456#abc</p> 
  </blockquote> 
  <table align="center" border="1" style="width:600px;"> 
   <thead> 
    <tr> 
     <th style="text-align:center;width:153px;">location的属性/方法</th> 
     <th style="text-align:center;width:345px;">作用</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <th style="width:153px;">location</th> 
     <td style="width:345px;">保存了 URL 地址</td> 
    </tr> 
    <tr> 
     <th style="width:153px;"> <p>location.href</p> <p></p> <p></p> <p>location.href='网址'</p> </th> 
     <td style="width:345px;"> <p>获取完整的url地址</p> <p>（ 协议https: 或file本地协议 + 域名/主机IP地址 + 端口 + 路径名 + 参数数据 + hash数据 ）</p> <p></p> <p>设置url，实现网页跳转(有后退按钮)</p> </td> 
    </tr> 
    <tr> 
     <th style="width:153px;">location.search</th> 
     <td style="width:345px;">获取地址中携带的参数，符号 ？后面部分</td> 
    </tr> 
    <tr> 
     <th style="width:153px;">location.hash</th> 
     <td style="width:345px;">获取地址中的哈希值，符号 # 后面部分</td> 
    </tr> 
    <tr> 
     <th style="width:153px;">location.reload()</th> 
     <td style="width:345px;">reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新</td> 
    </tr> 
    <tr> 
     <th style="width:153px;"> <p>location.assign('网址')</p> </th> 
     <td style="width:345px;"> <p>加载指定的url，会产生历史记录(前进/后退箭头可用)</p> </td> 
    </tr> 
    <tr> 
     <th style="width:153px;"> <p>location.replace('网址')</p> </th> 
     <td style="width:345px;"> <p>替换指定的url，不会产生历史记录</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <h3>（5）histroy对象</h3> 
  <table align="center" border="1" style="width:500px;"> 
   <tbody> 
    <tr> 
     <th> <p>history.length</p> </th> 
     <td> <p>只读属性</p> <p>返回当前任务中的history个数，包含当前页面在内</p> </td> 
    </tr> 
    <tr> 
     <th> <p>history.back()</p> </th> 
     <td>回到前一个页面，等同于上一页按钮</td> 
    </tr> 
    <tr> 
     <th> <p>history.forward()</p> </th> 
     <td>转到下一个页面，等同于下一页按钮</td> 
    </tr> 
    <tr> 
     <th> <p>history.go(参数)</p> </th> 
     <td> <p>history.go(-1)</p> <p>回到前一个页面，等同于调用 back()</p> <p></p> <p>history.go(1)</p> <p>转到下一个页面，等同于调用了 forward()</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <h3>（6）screen对象</h3> 
  <table align="center" border="1" style="width:500px;"> 
   <tbody> 
    <tr> 
     <th style="width:149px;">screen.width</th> 
     <td style="width:349px;">屏幕的宽度（单位：像素）</td> 
    </tr> 
    <tr> 
     <th style="width:149px;">screen.height</th> 
     <td style="width:349px;">屏幕的高度（单位：像素）</td> 
    </tr> 
    <tr> 
     <th style="width:149px;"> <p>screen.availWidth</p> </th> 
     <td style="width:349px;">除去任务栏屏幕的宽度（单位：像素）</td> 
    </tr> 
    <tr> 
     <th style="width:149px;"> <p>screen.availHeight</p> </th> 
     <td style="width:349px;">除去任务栏屏幕的高度（单位：像素）</td> 
    </tr> 
   </tbody> 
  </table> 
  <h2>2、swiper 插件</h2> 
  <p><strong>（1）</strong>官网：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发</p> 
  <p>         swiper使用方法：Swiper使用方法 - Swiper中文网</p> 
  <p><strong>（2）使用方法</strong></p> 
  <p>下载Swiper(下载Swiper - Swiper中文网) 并放到根目录下 → 分别将package中的 swiper-bundle.min.css 和 swiper-bundle.min.js 移动到根目录下的css和js文件夹中 → 在html文件中引入这两个文件 → 找到要使用的案例，在新窗口打开，右击'查看网页源代码' → 将源代码中的css / html / js 复制到自己的代码中 → 进行修改（可以新添类名；需要什么效果在 API文档 中找即可）</p> 
  <p>注意：多个swiper同时使用的时候, 类名需要注意区分；</p> 
  <h2>3、本地存储(2种)</h2> 
  <h3>localStorage</h3> 
  <p><strong>特点：</strong></p> 
  <ul> 
   <li>生命周期永久生效，除非手动删除 否则关闭页面也会存在；</li> 
   <li>可以多窗口（页面）共享（同一浏览器可以共享）；</li> 
   <li>以键值对的形式存储使用；</li> 
   <li>在浏览器中怎么查看？      Application → Local Storage(本地存储) → file://</li> 
  </ul> 
  <h3>（1）存储数据</h3> 
  <pre><code class="language-javascript">localStorage.setItem('键名', '值')
注意：键名相同会覆盖,存起来变成字符串类型</code></pre> 
  <h3>（2）获取数据</h3> 
  <pre><code class="language-javascript">localStorage.getItem('键名');
注意：如果取不存在的数据就是null</code></pre> 
  <h3>（3）删除数据</h3> 
  <pre><code class="language-javascript">localStorage.removeItem('键名');</code></pre> 
  <h3>（4）JSON对象的本地存储</h3> 
  <pre><code class="language-javascript">1. 将复杂类型转成JSON字符串
    localStorage.setItem('键名', JSON.stringify(存储复杂类型的变量))

2. 将JSON字符串转成复杂类型(数组/对象)
    JSON.parse(字符串)</code></pre> 
  <h3>sessionStorage</h3> 
  <p><strong>特点：</strong></p> 
  <ul> 
   <li>生命周期为关闭浏览器窗口；</li> 
   <li>在同一个窗口(页面)下数据可以共享；</li> 
   <li>以键值对的形式存储使用；</li> 
  </ul> 
  <h2>4、自定义属性</h2> 
  <table align="center" border="1" style="width:650px;"> 
   <tbody> 
    <tr> 
     <th>对象.getAttribute('属性名')</th> 
     <td>获取自定义属性</td> 
    </tr> 
    <tr> 
     <th>对象.setAttribute('属性名', '属性值')</th> 
     <td> <p>设置 / 添加自定义属性值</p> <p>(有这个属性就是更改属性值；没有这个属性就是添加属性)</p> </td> 
    </tr> 
    <tr> 
     <th>对象.removeAttribute('属性名')</th> 
     <td>删除自定义属性，无返回值</td> 
    </tr> 
    <tr> 
     <th colspan="2" style="text-align:center;">能操作普通属性(index)，也能操作H5属性(data-×××)</th> 
    </tr> 
   </tbody> 
  </table> 
  <table align="center" border="1" style="width:650px;"> 
   <tbody> 
    <tr> 
     <th colspan="2" style="text-align:center;width:276px;">H5        只能操作data- 开头的自定义属性</th> 
    </tr> 
    <tr> 
     <th style="width:257px;">对象.dataset.×××</th> 
     <td style="width:391px;">获取 data-××× 的属性值</td> 
    </tr> 
    <tr> 
     <th style="width:257px;">对象.dataset.××× = 值</th> 
     <td style="width:391px;"> <p>设置 / 添加自定义属性值</p> <p>(有这个属性就是更改属性值；没有这个属性就是添加属性)</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <h1>八、正则表达式</h1> 
  <p>正则表达式是用于匹配、查找字符串中的字符组合的模式。</p> 
  <p>作用：表单验证（匹配）、过滤敏感词（替换）、字符串中提取关键词（提取）</p> 
  <table align="center" border="1" style="width:350px;"> 
   <thead> 
    <tr> 
     <th style="text-align:center;width:256px;">正则表达式查询工具</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td style="width:256px;">菜鸟工具：正则表达式在线测试 | 菜鸟工具</td> 
    </tr> 
    <tr> 
     <td style="width:256px;">jQuery正则表达式</td> 
    </tr> 
    <tr> 
     <td style="width:256px;"> <p> 正则测试工具：在线正则表达式测试</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <h2>1、正则语法</h2> 
  <h3>（1）创建正则</h3> 
  <pre><code class="language-javascript">方式1：
    let 变量名 = /内容/

方式2：
    let 变量名 = new RegExp(/内容/)</code></pre> 
  <h3>（2）判断是否有符合正则的字符串(test)</h3> 
  <p>test() 方法 判断是否包含符合正则的字符串</p> 
  <p>（布尔值）</p> 
  <pre><code class="language-javascript">正则变量名.test('被检测的字符串')
/正则内容/.test('被检测的字符串')</code></pre> 
  <h3>（3）查找符合规则的字符串(exec)</h3> 
  <p>exec() 方法 查找符合正则的字符串（数组、null）</p> 
  <pre><code class="language-javascript">正则变量名.exec('被检测的字符串')
/正则内容/.exec('被检测的字符串')</code></pre> 
  <h2>2、元字符(特殊字符)</h2> 
  <table align="center" border="1" style="width:670px;"> 
   <thead> 
    <tr> 
     <th colspan="2" rowspan="1" style="text-align:center;width:67px;"> <p style="text-align:center;">元字符分类</p> </th> 
     <th style="text-align:center;width:59px;">符号</th> 
     <th style="text-align:center;width:266px;">含义</th> 
     <th style="text-align:center;width:201px;">举例</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <th colspan="2" rowspan="3" style="text-align:center;width:67px;">边界符</th> 
     <td style="width:59px;">^</td> 
     <td style="width:266px;">以…为开头</td> 
     <td style="width:201px;"> <p>^abc</p> </td> 
    </tr> 
    <tr> 
     <td style="width:59px;">$</td> 
     <td style="width:266px;">以…为结尾</td> 
     <td style="width:201px;"> <p>abc$</p> </td> 
    </tr> 
    <tr> 
     <td style="width:59px;">^abc$</td> 
     <td style="width:266px;"> <p>^与$同时使用，具有精确匹配的含义</p> <p>指的就是 字符串abc</p> </td> 
     <td style="width:201px;"></td> 
    </tr> 
    <tr> 
     <th colspan="2" rowspan="6" style="text-align:center;width:67px;">量词符</th> 
     <td style="width:59px;">*</td> 
     <td style="width:266px;">出现零次或更多次（>=0）</td> 
     <td colspan="1" rowspan="6" style="width:201px;"> <p>与$相同，写在字符后面；</p> <p>/^[a-zA-Z0-9-_]{6,16}$/</p> <p></p> <p><strong>逗号左右两侧不要打空格</strong>；</p> </td> 
    </tr> 
    <tr> 
     <td style="width:59px;">+</td> 
     <td style="width:266px;">出现一次或更多次（>=1）</td> 
    </tr> 
    <tr> 
     <td style="width:59px;">？</td> 
     <td style="width:266px;">出现零次或一次（0||1）</td> 
    </tr> 
    <tr> 
     <td style="width:59px;">{n}</td> 
     <td style="width:266px;">出现n次</td> 
    </tr> 
    <tr> 
     <td style="width:59px;">{n,}</td> 
     <td style="width:266px;">出现n次或更多次（>=n）</td> 
    </tr> 
    <tr> 
     <td style="width:59px;">{n,m}</td> 
     <td style="width:266px;">出现n次到n次  [n,m]</td> 
    </tr> 
    <tr> 
     <th colspan="1" rowspan="11" style="text-align:center;width:67px;">字符类</th> 
     <th rowspan="3" style="text-align:center;width:76px;">字符集合</th> 
     <td rowspan="3" style="width:59px;">[ ]</td> 
     <td style="width:266px;"> <p>多选一</p> </td> 
     <td colspan="1" rowspan="3" style="width:201px;"> <p>[男|女]</p> <p>不表示男或女，表示'男''|''女'</p> <p></p> <p>[a-zA-Z] 表示大小写</p> <p></p> <p>[^a-z] 匹配除了小写字母以外的字符</p> <p></p> <p>[^a-zA-Z0-9_-]</p> </td> 
    </tr> 
    <tr> 
     <td style="width:266px;">[ ] 里面加上 - 连字符，表示范围</td> 
    </tr> 
    <tr> 
     <td style="width:266px;">[ ] 里的 ^ 为取反</td> 
    </tr> 
    <tr> 
     <th colspan="1" rowspan="2" style="text-align:center;width:76px;">其它字符</th> 
     <td style="width:59px;">.(点)</td> 
     <td style="width:266px;">除换行符(\n)之外的任何单个字符</td> 
     <td colspan="1" style="width:201px;"></td> 
    </tr> 
    <tr> 
     <td style="width:59px;">( )</td> 
     <td style="width:266px;">一组</td> 
     <td colspan="1" style="width:201px;"> <p>^（.|\n）$</p> <p>任意单字符,|表示或</p> </td> 
    </tr> 
    <tr> 
     <th colspan="1" rowspan="6" style="text-align:center;width:76px;">预定义类</th> 
     <td style="width:59px;">\d</td> 
     <td style="width:266px;">[0-9]</td> 
     <td colspan="1" style="width:201px;"> <p>日期格式：</p> <p>^\d{4}-\d{1,2}-\d{1,2}</p> </td> 
    </tr> 
    <tr> 
     <td style="width:59px;">\D</td> 
     <td style="width:266px;">[^0-9]</td> 
     <td colspan="1" style="width:201px;"></td> 
    </tr> 
    <tr> 
     <td style="width:59px;">\w</td> 
     <td style="width:266px;">[a-zA-Z0-9_]</td> 
     <td colspan="1" style="width:201px;"></td> 
    </tr> 
    <tr> 
     <td style="width:59px;">\W</td> 
     <td style="width:266px;">[^a-zA-Z0-9_]</td> 
     <td colspan="1" style="width:201px;"></td> 
    </tr> 
    <tr> 
     <td style="width:59px;">\s</td> 
     <td style="width:266px;">[\t\r\n\v\f]，空格(包括换行符、制表符、空格符等)</td> 
     <td colspan="1" style="width:201px;"></td> 
    </tr> 
    <tr> 
     <td style="width:59px;">\S</td> 
     <td style="width:266px;">[^\t\r\n\v\f]</td> 
     <td colspan="1" style="width:201px;"></td> 
    </tr> 
   </tbody> 
  </table> 
  <h2>3、修饰符(i/g)</h2> 
  <table align="center" border="1" style="width:300px;"> 
   <tbody> 
    <tr> 
     <th style="text-align:center;">i</th> 
     <td>忽略大小写，ignore</td> 
    </tr> 
    <tr> 
     <th style="text-align:center;">g</th> 
     <td>全局匹配，global</td> 
    </tr> 
    <tr> 
     <th style="text-align:center;">m</th> 
     <td>多行匹配</td> 
    </tr> 
    <tr> 
     <th colspan="2" style="text-align:center;">/表达式/修饰符          写在正则表达式的后面</th> 
    </tr> 
   </tbody> 
  </table> 
  <h3>替换(replace)</h3> 
  <pre><code class="language-javascript">字符串.replace('旧','新')     // 旧 可直接写需替换的文字，也可用正则表达式来表示
字符串.replace(/正则表达式/,'需替换的文本')
str.replace(/c/ig, '&&')     // 把字符串str里全部的c和C替换成&&</code></pre> 
  <h1>九、面向对象</h1> 
  <p>对象和对象之间的相互配合。</p> 
  <h2>1.字面量创建对象</h2> 
  <pre><code class="language-javascript">字面量创建对象(一眼就可看出是对象)
let obj = {
    属性名：属性值   键值对   成员
    uname : 'SHY',
    age : 22,
    eat : funtion () {console.log('eat')}
}</code></pre> 
  <p>访问属性：</p> 
  <p>        对象.属性：访问固定属性</p> 
  <p>        对象['属性']：动态属性</p> 
  <p>访问方法：</p> 
  <p>        对象.方法()</p> 
  <p>函数如果没有写return、或者函数写了return后面不写值，都是返回undefined</p> 
  <p>遍历对象</p> 
  <p>        for-in中为什么用[k]：k是变量，要用动态访问</p> 
  <p>        for-in也可以遍历数组</p> 
  <pre><code class="language-javascript">let arr = ['red', 'blue', 'yellow', 'pink'];
for ( let k in arr ) {
	console.log( arr[k] );
}</code></pre> 
  <h2>2.构造函数</h2> 
  <p>构造函数就是函数，要和new一起使用</p> 
  <p>（1）内置的构造函数</p> 
  <p>大写</p> 
  <p>new Object();   创建对象 ，对象中的成员是无序的</p> 
  <pre><code class="language-javascript">// 创建对象
let obj = new Object();

// 添加属性：
obj.uname = '阿飞';
obj.age = 22

// 添加方法：
obj.fei = function () {
	console.log('方法');
}
</code></pre> 
  <p>new Date();   创建日期</p> 
  <p>new Array();  创建数组</p> 
  <p>（2）自定义构造函数</p> 
  <pre><code class="language-javascript">function Person (uname, age, sex) {
	// 设置对象公共成员：
    // 设置对象的属性
	this.uname = uname;  // 在构造函数中，this指向当前实例化对象
	this.age = age;
	this.sex = sex;
    // 设置对象的方法
	this.eat = function () {
		console.log('eat');
	}
	this.say = function () {
		console.log('shuohua');
	}
}

// 实例化对象   new一次创建1个对象
let obj = new Person('阿飞', 22, '男');
console.log( obj );

let o = new Person('带土', 21, '女');
console.log(o);</code></pre> 
  <p>3.</p> 
  <p>instanceof：是否是某个构造函数的实例；</p> 
  <p>constructor：用于指回构造函数的</p> 
  <pre><code class="language-javascript">对象 instanceof 构造函数       返回值为 true、false
适用于数组，对象
对象 instanceof Object
对象 instanceof Array</code></pre> 
  <p>4.</p> 
  <p>实例成员：给实例对象添加的成员，只能由实例对象使用</p> 
  <p>静态成员：构造函数身上添加的成员，只能由构造函数使用</p> 
  <p></p> 
  <h1>九、解构赋值</h1> 
  <p>解构赋值是<strong>一种快速为变量赋值的简洁语法</strong> ，分为数组解构、对象解构两大类型。</p> 
  <h2>1、数组结构</h2> 
  <pre><code class="language-javascript">中心思想：一一对应; 变量用[]包起来

        let arr = ['张飞', '关羽', '赵云', '马超', '林冲', '吕布']
1. 正常模式(变量数=数组的长度)
        let [a, b, c, d, e, f] = arr          // 变量对应的值：张飞 关羽 赵云 马超 林冲 吕布
2. 变量数<数组的长度
        let [a, b, c, d] = arr                // 变量对应的值：张飞 关羽 赵云 马超
3. 变量数>数组的长度 (多余的变量被赋值为 undefined )
        let [a, b, c, d, e, f, g, h] = arr    // 变量对应的值：张飞 关羽 赵云 马超 林冲 吕布 undefined undefined
4. 剩余值 (剩余值只能置于最末位)
        let [a, b, ...c] = arr                // 变量对应的值：张飞 关羽 ['赵云', '马超', '林冲', '吕布']
5. 按需取值(不需要取的数组元素用 逗号占位 即可)
        let [, b, , , e] = arr                // 变量对应的值：关羽 林冲
6. 多维数组解构 
        let [, b, [c, , e,]] = ['张飞', '关羽', ['赵云', '马超', '林冲', '吕布']]    // 变量对应的值：关羽 赵云 林冲</code></pre> 
  <pre><code class="language-javascript">多维数组：
                                 arr[2][1]       arr[2][3]
let arr = ['张飞', '关羽', ['赵云', '马超', '林冲', '吕布']]
           arr[0] arr[1] arr[2][0]        arr[2][2]        // 对应的索引值</code></pre> 
  <h2>2、对象解构</h2> 
  <ul> 
   <li>中心思想：把<strong>属性名当作变量名</strong>直接取值即可；</li> 
   <li>变量用{ }包起来；</li> 
   <li>如果在外层已经有跟属性名相同的变量名，可使用：改名；</li> 
   <li>如果不存在这个属性，那这个变量就是undefined；</li> 
  </ul> 
  <pre><code class="language-javascript">let uname = 'SHY'
let { uname: myname, sex, index = 666, dog: { uname: dogname, sex: dogsex } } = {
    uname: '秀儿',
    age: 18,
    sex: '男',
    dog: {
        uname: '大黄',
        age: 2,
        sex: '公',
     }
}
console.log(myname, sex, index, dogname,dogsex)  
    // 变量对应的值为：秀儿 男 666 大黄 公</code></pre> 
  <h3>ES6 创建对象</h3> 
  <pre><code class="language-javascript">let uname = '小张';
let age = 18;
// 创建函数
let obj = {
            uname,      // uname:uname
            age,        // 属性名:变量名  可以直接简写
            index: 8,   // 不引用变量的照常写
            score: 100,
            eat() { console.log('123') },    // eat : function(){ }
            go() { console.log('gogogo') }   // 方法简写：方法名(){ }
}</code></pre> 
  <h1>九、排他思想</h1> 
  <h2>tab栏切换</h2> 
  <pre><code class="language-javascript">    // 1. 获取元素   tabs是tab导航条，mains是每个导航条对应的内容
    let tabs = document.querySelectorAll('.tab li')
    let mains = document.querySelectorAll('.products .main')

    // 2. 遍历伪元素
    for (let i = 0; i < tabs.length; i++) {
      // 3. 在遍历里添加监听事件
      tabs[i].addEventListener('click', function () {
        // 5. 排它思想   在步骤4之前,先把带有类名的清除(再遍历一遍)
        for (let i = 0; i < tabs.length; i++) {
          // 注意：伪元素进行修改/设置要加[]
          tabs[i].classList.remove('active')
          mains[i].classList.remove('active')
        }

        /* // 4-2. 排他思想   让之前带有类名的div隐藏
           // 因为i和j是一一对应的,所以可以写在步骤5中
        for (let j = 0; j < mains.length; j++) {
          mains[j].classList.remove('active')
        } */
        // 4-1. 点击tab选项时,给tabs/mains添加类名
        // tabs[i].classList.add('active')
        this.classList.add('active')
        mains[i].classList.add('active')
      })</code></pre> 
  <p></p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1503153761214857216"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端基础,javascript,前端,1024程序员节)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1833733075486470144.htm"
                           title="java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署" target="_blank">java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署</a>
                        <span class="text-muted">鸿源网络</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ</div>
                    </li>
                    <li><a href="/article/1833730429727895552.htm"
                           title="分享JavaScript中直接调用CSS中的类名" target="_blank">分享JavaScript中直接调用CSS中的类名</a>
                        <span class="text-muted">奔跑的呱呱牛</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>分享JavaScript中直接调用CSS中的类名在现代的JavaScript框架（如React、Vue）中，使用CSS模块（CSSModules）是一种非常流行的方式。.module.css文件扩展名代表的是CSS模块，它与普通的CSS文件不同，能够解决样式全局污染的问题，并且实现更好的样式隔离。为什么要使用.module.css作用域隔离：传统的CSS文件中的类名是全局的，这意味着如果多个组件或</div>
                    </li>
                    <li><a href="/article/1833722103464030208.htm"
                           title="基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署" target="_blank">基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署</a>
                        <span class="text-muted">源新网络</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码</div>
                    </li>
                    <li><a href="/article/1833710759843033088.htm"
                           title="css-loader/style-loader/less-loader/sass-loader/postcss-loader各有什么作用，一次性说明白" target="_blank">css-loader/style-loader/less-loader/sass-loader/postcss-loader各有什么作用，一次性说明白</a>
                        <span class="text-muted">iWangsd</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>大家都清楚在使用webpack构建前端项目时都会使用到sass-loader、less-loader、postcss-loader、css-loader、style-loader，但这些loader在其中起到什么作用呢？本篇主要阐述这些loader在打包中所扮演的角色。概述1、css-loader:加载.css文件的loader，会对@import和url()进行处理2、style-loader:</div>
                    </li>
                    <li><a href="/article/1833689832052846592.htm"
                           title="Selenium面试题（二）" target="_blank">Selenium面试题（二）</a>
                        <span class="text-muted">知识的宝藏</span>
<a class="tag" taget="_blank" href="/search/Selenium%EF%BC%88Java%EF%BC%89/1.htm">Selenium（Java）</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a>
                        <div>如何在不使用sendKeys()的情况下输入文本可以通过组合使用JavaScript和WebDriver扩展类来实现。以下是一个示例代码：publicstaticvoidsetAttribute(WebElementelement,StringattributeName,Stringvalue){WrapsDriverwrappedElement=(WrapsDriver)element;Java</div>
                    </li>
                    <li><a href="/article/1833679245918957568.htm"
                           title="前端文件预览，PDF，word，TXT" target="_blank">前端文件预览，PDF，word，TXT</a>
                        <span class="text-muted">LJ小番茄</span>
<a class="tag" taget="_blank" href="/search/%E9%9A%8F%E4%BE%BF%E5%86%99%E7%82%B9/1.htm">随便写点</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a>
                        <div>先说一下需求：这里要做的就是从后端返回的URL下载地址，然后前端去渲染出来刚开始看了其他的一些博主的文章，都是不怎么适用于我，我自己找了几个新的第三方库vue-office/pdf官网：vue-office简介|vue-office这里支持docx，xlsx，PDF文件格式mammoth.js文档：mammoth-npmPDF预览我用的是vue-office/pdf这个库//引入该库importV</div>
                    </li>
                    <li><a href="/article/1833678867869560832.htm"
                           title="前端基础知识点" target="_blank">前端基础知识点</a>
                        <span class="text-muted">der..</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>本人现在是一名准大二计算机系的学生，准备开始写博客，一方面是想在csdn留下自己的足迹，另一方面是想通过写博客来提高自己的能力。以后会分享一些学习心得，程序代码，以及我的一些学习计划，还有每天学习后的知识总结。如果你和我一样，不甘于平凡，那么，就请给我点一个关注，我们互相交流，共同进步。--------------------------------------------------------</div>
                    </li>
                    <li><a href="/article/1833677857843408896.htm"
                           title="linux多个sh 同时执行命令,sh, 批量执行Linux命令" target="_blank">linux多个sh 同时执行命令,sh, 批量执行Linux命令</a>
                        <span class="text-muted">一颗橙子君</span>
<a class="tag" taget="_blank" href="/search/linux%E5%A4%9A%E4%B8%AAsh/1.htm">linux多个sh</a><a class="tag" taget="_blank" href="/search/%E5%90%8C%E6%97%B6%E6%89%A7%E8%A1%8C%E5%91%BD%E4%BB%A4/1.htm">同时执行命令</a>
                        <div>step1:创建一个sh批处理命令文件#vim/etc/batch_ssh/install_redis.shstep2：给当前用户，能够执行sh脚本权限#chmodinstall_redis.sh777step3:编写要批量执行的命令，read表示等待前端用户输入，sleep表示等待时间单位为秒。echo'\nbegintoinstall01plugin\n';yuminstallcpp-y;ec</div>
                    </li>
                    <li><a href="/article/1833653398856101888.htm"
                           title="前端进阶：JavaScript实现优雅遮罩层下的表单验证技巧" target="_blank">前端进阶：JavaScript实现优雅遮罩层下的表单验证技巧</a>
                        <span class="text-muted">VaporGas</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>表单验证的高级特性本次介绍的重点如下：动态改变样式属性className属性的用法遮罩层特效的制作动态输入的提示特性实现当文本框获得焦点时改变背景颜色，失去焦点时恢复白色使用元素的style属性访问样式规则object.style.property;例如:访问字体的颜色color使用obj.style.color访问字体的大小属性使用obj.style.fontSizefont-size变换成fo</div>
                    </li>
                    <li><a href="/article/1833652769223962624.htm"
                           title="前端工程化——脚手架及自动化构建" target="_blank">前端工程化——脚手架及自动化构建</a>
                        <span class="text-muted">Jelly-JK</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/1.htm">前端工程化</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                        <div>定义一切以提高效率、降低成本、质量保证为目的的手段，都属于工程化前端工程化主要解决的问题传统语言或语法的弊端无法使用模块化/组件化重复性的机械工作代码风格统一、质量保证依赖后端服务接口的保证整体依赖后端项目工程化的表现体现在项目的整个流程：创建项目创建项目结构创建特定类型文件编码格式化校验校验代码风格编译/构建/打包预览/测试WebServer/MockLiveReloading/HMRSourc</div>
                    </li>
                    <li><a href="/article/1833645082776006656.htm"
                           title="Java架构师学习路线" target="_blank">Java架构师学习路线</a>
                        <span class="text-muted">网络全息测量</span>
<a class="tag" taget="_blank" href="/search/%E5%BF%83%E5%BE%97%E4%BD%93%E4%BC%9A/1.htm">心得体会</a>
                        <div>(1)第一步：研究spring,hibernate。通过研究jeecms开源框架。也同时学习css,html,javascript,jquery.以前都学习过，不过没有系统学习过，现在必须系统学习。同时看cms相关的论文。然后，改造jeecms能够改为自己的一个开源框架，以后开发cms系统都用我自己开发的框架，作为第一阶段的成果。(2)第二步：学习开源工作流引擎Activiti5，jbpm4.4以</div>
                    </li>
                    <li><a href="/article/1833643570259652608.htm"
                           title="使用Electron读取本地文件" target="_blank">使用Electron读取本地文件</a>
                        <span class="text-muted">ch_s_t</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Electron原来叫AtomShell,可以用Web技术搭建桌面端程序，以Electron为基础，可以用HTML，CSS和javascriptpt实现程序逻辑和用户桌面，Electron程序一般有主进程和渲染进程，主进程是启动程序的Node脚本，提供对原生的node模块访问。渲染进程是由chromium管理的Web界面。以下的内容介绍从零开始搭建一个读取本地文件的Electron项目。一运行简单</div>
                    </li>
                    <li><a href="/article/1833637260176748544.htm"
                           title="一篇文章让你搞懂Reflect和Reflect metadata(JavaScript)" target="_blank">一篇文章让你搞懂Reflect和Reflect metadata(JavaScript)</a>
                        <span class="text-muted">小小西爪</span>
<a class="tag" taget="_blank" href="/search/Typescript/1.htm">Typescript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>一篇文章让你搞懂Reflect和Reflectmetadata(JavaScript)引言Javascript里经常看到Reflect的使用,但一直搞不明白他和Object的区别,加上在工作中也没有经常用到,一直处于懵懵懂懂的状态。所以下定决心,用这篇文章彻彻底底把它搞明白本文主要涵盖以下4个板块:Reflect什么是ReflectAPIs(Reflect与Object的区别)简单的例子:Obje</div>
                    </li>
                    <li><a href="/article/1833636753823592448.htm"
                           title="[WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试" target="_blank">[WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试</a>
                        <span class="text-muted">lgc0208</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a>
                        <div>在使用Tensorboard的过程中，遇到报错[WinError10013]以一种访问权限不允许的方式做了一个访问套接字的尝试可能原因：当前端口被占用。解决方案：以6006端口为例，首先打开命令行，输入命令：netstat-aon|findstr"6006"查找当前正在占用6006端口的进程PID。查询到对应进程PID后，打开任务管理器，点击详细信息，找到PID对应的进程关闭即可。</div>
                    </li>
                    <li><a href="/article/1833633853063917568.htm"
                           title="mysql是后端还是前端_MySQL数据库之前端和后端的系统优化" target="_blank">mysql是后端还是前端_MySQL数据库之前端和后端的系统优化</a>
                        <span class="text-muted">草莓西瓜大桃子</span>
<a class="tag" taget="_blank" href="/search/mysql%E6%98%AF%E5%90%8E%E7%AB%AF%E8%BF%98%E6%98%AF%E5%89%8D%E7%AB%AF/1.htm">mysql是后端还是前端</a>
                        <div>本文中介绍的系统优化，主要针对前端和后台这两方面(后台方面主要对SQL语句和数据存储进行了优化)，下文中我们将介绍一些优化技巧和经验。技巧：1.如何查出效率低的语句？在MySQL下，在启动参数中设置--log-slow-queries=[文件名]，就可以在指定的日志文件中记录执行时间超过long_query_time(缺省为10秒)的SQL语句。你也可以在启动配置文件中修改longquery的时间</div>
                    </li>
                    <li><a href="/article/1833631078280163328.htm"
                           title="总结函数相关知识" target="_blank">总结函数相关知识</a>
                        <span class="text-muted">你会发光哎u</span>
<a class="tag" taget="_blank" href="/search/JavaScript%E9%AB%98%E7%BA%A7%E5%AD%A6%E4%B9%A0/1.htm">JavaScript高级学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>这里写目录标题1.函数的特性声明调用参数参数默认值返回值属性方法arguments剩余参数（`rest`）作用域原型`this`指向执行过程2.特殊的函数`with`函数`eval`函数apply/call/bind函数纯函数箭头函数立即执行函数`IIFE`高阶函数递归函数组合函数柯里化函数概念优势自动柯里化类和构造函数JavaScript是支持函数式编程的，在JavaScript中函数是一等公民</div>
                    </li>
                    <li><a href="/article/1833627924675260416.htm"
                           title="Vue解說" target="_blank">Vue解說</a>
                        <span class="text-muted">白总Server</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E6%9E%B6%E6%9E%84/1.htm">数据库架构</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/ssl/1.htm">ssl</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
                        <div>Vue.js（通常简称为Vue）是一个开源的JavaScript框架，用于构建用户界面和单页应用程序（SPA）。它由前谷歌工程师尤雨溪（EvanYou）创建，并首次发布于2014年。Vue被设计为易于上手、灵活且高效，它允许开发者通过组件化的方式构建复杂的前端应用。Vue.js的关键特点：渐进式框架：Vue可以从简单的界面元素开始，逐步扩展到复杂的单页应用。响应式数据绑定：Vue使用双向数据绑定，</div>
                    </li>
                    <li><a href="/article/1833627797185196032.htm"
                           title="程式语言区分" target="_blank">程式语言区分</a>
                        <span class="text-muted">白总Server</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>程序语言有很多种，每种都有其特定的用途和特点。以下是一些广泛使用的编程语言：1.Python：易于学习，广泛用于数据科学、机器学习、网络开发、自动化等领域。2.Java：广泛应用于企业级应用、安卓开发、大型系统开发等。3.C：一种基础语言，广泛用于系统编程、嵌入式开发、操作系统等领域。4.C++：C语言的扩展，支持面向对象编程，用于游戏开发、高性能应用等。5.JavaScript：主要用于网页前端</div>
                    </li>
                    <li><a href="/article/1833627670970200064.htm"
                           title="JS手写实现深拷贝" target="_blank">JS手写实现深拷贝</a>
                        <span class="text-muted">Mzp风可名喜欢</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>手写深拷贝一、通过JSON.stringify二、函数库lodash三、递归实现深拷贝基础递归升级版递归---解决环引用爆栈问题最终版递归---解决其余类型拷贝结果一、通过JSON.stringifyJSON.parse(JSON.stringify(obj))是比较常用的深拷贝方法之一原理：利用JSON.stringify将JavaScript对象序列化成为JSON字符串，并将对象里面的内容转换</div>
                    </li>
                    <li><a href="/article/1833610907951919104.htm"
                           title="前端架构师招聘" target="_blank">前端架构师招聘</a>
                        <span class="text-muted">qq_42801150</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%9E%B6%E6%9E%84/1.htm">前端架构</a><a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D/1.htm">金融</a>
                        <div>前端架构师（薪酬50-80W）所属部门：医美云事业部级别：T4岗位职责：1.负责事业部前端技术选型、关键技术决策；2.负责为技术VP前端相关技术决策提供建议和支持；3.负责组织实施内部UI库、内部基础研发工具和研发依赖的开发和实施；4.负责制订公司前端研发规范的制订和实施审查；5.负责组织定期内部前端业务培训，协助提升内部员工前端业务技能。任职要求：1.5年以上工作经验，大型互联网公司前端团队技术</div>
                    </li>
                    <li><a href="/article/1833610654443991040.htm"
                           title="大前端面试题集锦——HTML篇" target="_blank">大前端面试题集锦——HTML篇</a>
                        <span class="text-muted">Midshar.top</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                        <div>HTML篇1.什么是DOCTYPE,有何作用?DOCTYPE是用来声明HTML文档应当使用哪种版本来进行解析如果不使用DOCTYPE告知浏览器应当使用哪种版本解析文档,那么浏览器将会开启最大兼容模式来解析文档,一般称为怪异模式.在怪异模式下,可能会产生一些预想不到的bug2.说说对HTML语义化的理解?HTML的语义化指的是在合适的地方使用合适的标签,让人能够根据标签进而大致知晓标签内容语义化使得</div>
                    </li>
                    <li><a href="/article/1833609898324226048.htm"
                           title="高频面试题：ReactNative前端面试频率较高的面试题和答案（十六）" target="_blank">高频面试题：ReactNative前端面试频率较高的面试题和答案（十六）</a>
                        <span class="text-muted">夲奋亻Jay</span>
<a class="tag" taget="_blank" href="/search/%E9%AB%98%E9%A2%91%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">高频面试题</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/%E8%B7%A8%E7%AB%AF/1.htm">跨端</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>ReactNative是一个由Facebook开发的框架，它允许使用React来开发原生移动应用。以下是一些在前端面试中可能会问到的关于ReactNative的高频面试题及答案：ReactNative是什么？答案：ReactNative是一个基于React构建的框架，允许使用JavaScript和React的编程方式来开发原生移动应用。ReactNative与React有什么不同？答案：React</div>
                    </li>
                    <li><a href="/article/1833605865257660416.htm"
                           title="前端架构师的职责" target="_blank">前端架构师的职责</a>
                        <span class="text-muted">acigt0531</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a>
                        <div>前端架构师的职责没有文档的代码=放弃治疗作为前端架构师,首先要解决的问题就是让日益膨胀的代码可控,因此你需要梳理代码,建立架构,组织文档,管理架构的更新和维护,评审技术方案对架构的影响,核心模块的方案设计,重点项目的方案设计,CodeReview等.架构师和资深开发在工作职责上有着明确的界限,在一个没有架构师的团队,每一个资深开发或多或少都承担了一部分架构的工作,但都是破碎的,不成体系而且不统一,</div>
                    </li>
                    <li><a href="/article/1833605109578297344.htm"
                           title="前端技能树，面试复习第 54 天—— 手写代码：情景题" target="_blank">前端技能树，面试复习第 54 天—— 手写代码：情景题</a>
                        <span class="text-muted">编程轨迹_</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">前端面试复习笔记</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">面试题</a><a class="tag" taget="_blank" href="/search/%E6%89%8B%E5%86%99%E9%A2%98/1.htm">手写题</a><a class="tag" taget="_blank" href="/search/%E7%9C%9F%E9%A2%98/1.htm">真题</a><a class="tag" taget="_blank" href="/search/%E5%9C%BA%E6%99%AF%E9%A2%98/1.htm">场景题</a>
                        <div>⭐️本文首发自前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、区块链、Web3、答疑解惑、面试辅导以及职业发展。本文已收录至前端面试题库专栏：《前端面试复习笔记》（点击订阅）。1.循环打印红黄绿下面来看一道比较典型的问题，通过这个问题来对比几种异步编程方法：红灯3s亮一次，绿灯1s亮一次，黄灯2s亮一次；如何让三个灯不断交替重复亮灯？</div>
                    </li>
                    <li><a href="/article/1833603091291795456.htm"
                           title="CSS前端经典面试题及解析——小白入门必备" target="_blank">CSS前端经典面试题及解析——小白入门必备</a>
                        <span class="text-muted">2301_82243710</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>12.如何实现一个使用非标准字体的网页设计？使用@font-face并为不同的font-weight定义font-family。13.解释浏览器如何确定哪些元素与CSS选择器匹配。这部分与上面关于编写高效的CSS有关。浏览器从最右边的选择器（关键选择器）根据关键选择器，浏览器从DOM中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。例如，对于形如</div>
                    </li>
                    <li><a href="/article/1833602711271075840.htm"
                           title="前端基础面试题·第三篇——JavaScript（其四）" target="_blank">前端基础面试题·第三篇——JavaScript（其四）</a>
                        <span class="text-muted">DT——</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>highlight:atom-one-dark1.JSON.stringifyJSON.stringify()方法将一个JavaScript值（对象或者数组）转换为一个JSON字符串，如果指定了一个replacer函数，则可以替换值。语法：JSON.stringify(value,replacer,space)参数value：要转换的值。replacer：替换值，可以是一个函数或者数组。（这个参数</div>
                    </li>
                    <li><a href="/article/1833602459067576320.htm"
                           title="前端基础面试题·第二篇——CSS（其一）" target="_blank">前端基础面试题·第二篇——CSS（其一）</a>
                        <span class="text-muted">DT——</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>1.伪类与伪元素伪类，是用来描述元素的一个状态，比如第一个元素，元素被鼠标覆盖等等状态，写法为：伪元素，用于设置一个元素的特殊状态的一部分，写法为::伪元素于伪类：伪元素：::before::after::first-line伪类：:hover:active:focus:nth-child(n)2.单位px:像素，绝对单位em:相对单位，相对于父元素字体大小rem:相对单位，相对于根元素html的</div>
                    </li>
                    <li><a href="/article/1833600190687309824.htm"
                           title="前端基础面试题·第二篇——CSS（其二）" target="_blank">前端基础面试题·第二篇——CSS（其二）</a>
                        <span class="text-muted">DT——</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>1.CSS选择器的优先性：！important-强制生效样式-有即生效行内样式-有即生效权重：1000id选择器权重：100类选择器，伪类，属性选择器权重：10元素选择器，伪元素选择器，权重：1通配符，兄弟，后代，子代，权重：02.CSS继承性1.继承属性：1.字体系列属性font,font-family,font-weight,font-size,font-style,font-variant等</div>
                    </li>
                    <li><a href="/article/1833596914633895936.htm"
                           title="AJAX实时表单验证系统" target="_blank">AJAX实时表单验证系统</a>
                        <span class="text-muted">三年九班蓝同学</span>

                        <div>本文还有配套的精品资源，点击获取简介：在网页开发中，"ajax验证表单"是一项关键任务，确保数据符合格式和规则，提升数据质量和用户体验。本应用通过使用JavaScript和XMLHttpRequest对象实现后台验证，无需页面刷新。它包括前端验证、事件处理、Ajax调用、服务器端处理、响应处理、用户体验和安全性等关键步骤，以jQuery库简化开发流程，创建高效、安全的表单验证系统。1.表单验证的重</div>
                    </li>
                    <li><a href="/article/1833596283756048384.htm"
                           title="「 网络安全常用术语解读 」同源策略SOP详解：没有SOP就没有隐私" target="_blank">「 网络安全常用术语解读 」同源策略SOP详解：没有SOP就没有隐私</a>
                        <span class="text-muted">全栈安全</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8%E6%9C%AF%E8%AF%AD/1.htm">安全术语</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8%E6%9C%AF%E8%AF%AD/1.htm">安全术语</a>
                        <div>同源策略可保护用户的隐私和数据安全，防止恶意网站通过跨域请求（例如，通过JavaScript）访问或修改其他网站的数据。1.同源策略产生背景当浏览器从一个域发送一个HTTP请求到另一个域时，与另一个域相关的任何cookies，包括身份验证会话cookie，也会作为请求的一部分发送。如果没有同源策略，如果你访问一个恶意网站，该网站将能够读取你的电子邮件、私人消息等。2.同源策略定义同源策略（Same</div>
                    </li>
                                <li><a href="/article/96.htm"
                                       title="怎么样才能成为专业的程序员？" target="_blank">怎么样才能成为专业的程序员？</a>
                                    <span class="text-muted">cocos2d-x小菜</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a>
                                    <div>  
如何要想成为一名专业的程序员？仅仅会写代码是不够的。从团队合作去解决问题到版本控制，你还得具备其他关键技能的工具包。当我们询问相关的专业开发人员，那些必备的关键技能都是什么的时候，下面是我们了解到的情况。 
  
关于如何学习代码，各种声音很多，然后很多人就被误导为成为专业开发人员懂得一门编程语言就够了？！呵呵，就像其他工作一样，光会一个技能那是远远不够的。如果你想要成为</div>
                                </li>
                                <li><a href="/article/223.htm"
                                       title="java web开发 高并发处理" target="_blank">java web开发 高并发处理</a>
                                    <span class="text-muted">BreakingBad</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91/1.htm">开发</a><a class="tag" taget="_blank" href="/search/%E5%A4%84%E7%90%86/1.htm">处理</a><a class="tag" taget="_blank" href="/search/%E9%AB%98/1.htm">高</a>
                                    <div>java处理高并发高负载类网站中数据库的设计方法（java教程,java处理大量数据，java高负载数据） 一：高并发高负载类网站关注点之数据库 没错,首先是数据库,这是大多数应用所面临的首个SPOF。尤其是Web2.0的应用，数据库的响应是首先要解决的。 一般来说MySQL是最常用的，可能最初是一个mysql主机，当数据增加到100万以上，那么，MySQL的效能急剧下降。常用的优化措施是M-S（</div>
                                </li>
                                <li><a href="/article/350.htm"
                                       title="mysql批量更新" target="_blank">mysql批量更新</a>
                                    <span class="text-muted">ekian</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>mysql更新优化： 
一版的更新的话都是采用update set的方式，但是如果需要批量更新的话，只能for循环的执行更新。或者采用executeBatch的方式，执行更新。无论哪种方式，性能都不见得多好。 
三千多条的更新，需要3分多钟。 
查询了批量更新的优化，有说replace into的方式，即： 
 
 
replace into tableName(id,status) values</div>
                                </li>
                                <li><a href="/article/477.htm"
                                       title="微软BI（3）" target="_blank">微软BI（3）</a>
                                    <span class="text-muted">18289753290</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E8%BD%AFBI+SSIS/1.htm">微软BI SSIS</a>
                                    <div>1) 
Q：该列违反了完整性约束错误；已获得 OLE DB 记录。源:“Microsoft SQL Server Native Client 11.0” Hresult: 0x80004005 说明:“不能将值 NULL 插入列 'FZCHID'，表 'JRB_EnterpriseCredit.dbo.QYFZCH'；列不允许有 Null 值。INSERT 失败。”。 
A：一般这类问题的存在是 </div>
                                </li>
                                <li><a href="/article/604.htm"
                                       title="Java中的List" target="_blank">Java中的List</a>
                                    <span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>        List是一个有序的 collection（也称为序列）。此接口的用户可以对列表中每个元素的插入位置进行精确地控制。用户可以根据元素的整数索引（在列表中的位置）访问元素，并搜索列表中的元素。 
        与 set 不同，列表通常允许重复</div>
                                </li>
                                <li><a href="/article/731.htm"
                                       title="读书笔记" target="_blank">读书笔记</a>
                                    <span class="text-muted">永夜-极光</span>
<a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a>
                                    <div>   1.  K是一家加工厂,需要采购原材料,有A,B,C,D 4家供应商,其中A给出的价格最低,性价比最高,那么假如你是这家企业的采购经理,你会如何决策? 
    
     传统决策: A:100%订单  B,C,D:0% 
  
  &nbs</div>
                                </li>
                                <li><a href="/article/858.htm"
                                       title="centos 安装 Codeblocks" target="_blank">centos 安装 Codeblocks</a>
                                    <span class="text-muted">随便小屋</span>
<a class="tag" taget="_blank" href="/search/codeblocks/1.htm">codeblocks</a>
                                    <div>1.安装gcc,需要c和c++两部分,默认安装下,CentOS不安装编译器的,在终端输入以下命令即可yum install gccyum install gcc-c++ 
  
2.安装gtk2-devel,因为默认已经安装了正式产品需要的支持库,但是没有安装开发所需要的文档.yum install gtk2* 
3. 安装wxGTK 
   yum search w</div>
                                </li>
                                <li><a href="/article/985.htm"
                                       title="23种设计模式的形象比喻" target="_blank">23种设计模式的形象比喻</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
                                    <div>1、ABSTRACT FACTORY—追MM少不了请吃饭了，麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西，虽然口味有所不同，但不管你带MM去麦当劳或肯德基，只管向服务员说“来四个鸡翅”就行了。麦当劳和肯德基就是生产鸡翅的Factory  　　工厂模式：客户类和工厂类分开。消费者任何时候需要某种产品，只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时，工厂类也要做相应的修改。如：</div>
                                </li>
                                <li><a href="/article/1112.htm"
                                       title="开发管理 CheckLists" target="_blank">开发管理 CheckLists</a>
                                    <span class="text-muted">aoyouzi</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E7%AE%A1%E7%90%86+CheckLists/1.htm">开发管理 CheckLists</a>
                                    <div>开发管理 CheckLists(23) -使项目组度过完整的生命周期 
开发管理 CheckLists(22) -组织项目资源 
开发管理 CheckLists(21) -控制项目的范围开发管理 CheckLists(20) -项目利益相关者责任开发管理 CheckLists(19) -选择合适的团队成员开发管理 CheckLists(18) -敏捷开发 Scrum Master 工作开发管理 C</div>
                                </li>
                                <li><a href="/article/1239.htm"
                                       title="js实现切换" target="_blank">js实现切换</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E6%A0%8F%E7%9B%AE%E5%88%87%E6%8D%A2/1.htm">栏目切换</a>
                                    <div>js主要功能之一就是实现页面的特效,窗体的切换可以减少页面的大小,被门户网站大量应用思路: 
   1,先将要显示的设置为display:bisible  否则设为none
    2,设置栏目的id  ,js获取栏目的id,如果id为Null就设置为显示
    3,判断js获取的id名字;再设置是否显示
 
  
代码实现: 
  
html代码: 
  <di</div>
                                </li>
                                <li><a href="/article/1366.htm"
                                       title="周鸿祎在360新员工入职培训上的讲话" target="_blank">周鸿祎在360新员工入职培训上的讲话</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E6%84%9F%E6%82%9F/1.htm">感悟</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86/1.htm">项目管理</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E7%94%9F/1.htm">人生</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA/1.htm">职场</a>
                                    <div>        这篇文章也是最近偶尔看到的，考虑到原博客发布者可能将其删除等原因，也更方便个人查找，特将原文拷贝再发布的。“学东西是为自己的，不要整天以混的姿态来跟公司博弈，就算是混，我觉得你要是能在混的时间里，收获一些别的有利于人生发展的东西，也是不错的，看你怎么把握了”，看了之后，对这句话记忆犹新。  &</div>
                                </li>
                                <li><a href="/article/1493.htm"
                                       title="前端Web开发的页面效果" target="_blank">前端Web开发的页面效果</a>
                                    <span class="text-muted">Bill_chen</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/Microsoft/1.htm">Microsoft</a>
                                    <div>1.IE6下png图片的透明显示： 
<img src="图片地址" border="0" style="Filter.Alpha(Opacity)=数值(100),style=数值(3)"/> 
或在<head></head>间加一段JS代码让透明png图片正常显示。 
 
2.<li>标</div>
                                </li>
                                <li><a href="/article/1620.htm"
                                       title="【JVM五】老年代垃圾回收：并发标记清理GC(CMS GC)" target="_blank">【JVM五】老年代垃圾回收：并发标记清理GC(CMS GC)</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6/1.htm">垃圾回收</a>
                                    <div>  CMS概述 
并发标记清理垃圾回收(Concurrent Mark and Sweep GC）算法的主要目标是在GC过程中，减少暂停用户线程的次数以及在不得不暂停用户线程的请夸功能，尽可能短的暂停用户线程的时间。这对于交互式应用，比如web应用来说，是非常重要的。 
  
CMS垃圾回收针对新生代和老年代采用不同的策略。相比同吞吐量垃圾回收，它要复杂的多。吞吐量垃圾回收在执</div>
                                </li>
                                <li><a href="/article/1747.htm"
                                       title="Struts2技术总结" target="_blank">Struts2技术总结</a>
                                    <span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a>
                                    <div>  
 
 必备jar文件 
   
 早在struts2.0.*的时候，struts2的必备jar包需要如下几个： 
commons-logging-*.jar   Apache旗下commons项目的log日志包 
freemarker-*.jar          </div>
                                </li>
                                <li><a href="/article/1874.htm"
                                       title="Jquery easyui layout应用注意事项" target="_blank">Jquery easyui layout应用注意事项</a>
                                    <span class="text-muted">bozch</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/easyui/1.htm">easyui</a><a class="tag" taget="_blank" href="/search/layout/1.htm">layout</a>
                                    <div>在jquery easyui中提供了easyui-layout布局，他的布局比较局限，类似java中GUI的border布局。下面对其使用注意事项作简要介绍： 
     如果在现有的工程中前台界面均应用了jquery easyui，那么在布局的时候最好应用jquery eaysui的layout布局，否则在表单页面（编辑、查看、添加等等）在不同的浏览器会出</div>
                                </li>
                                <li><a href="/article/2001.htm"
                                       title="java-拷贝特殊链表：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？" target="_blank">java-拷贝特殊链表：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>
public class CopySpecialLinkedList {

	/**
	 * 题目：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？
拷贝pNext指针非常容易，所以题目的难点是如何拷贝pRand指针。
假设原来链表为A1 -> A2 ->... -> An，新拷贝</div>
                                </li>
                                <li><a href="/article/2128.htm"
                                       title="color" target="_blank">color</a>
                                    <span class="text-muted">Chen.H</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                                    <div><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">    <HTML>    <HEAD>&nbs</div>
                                </li>
                                <li><a href="/article/2255.htm"
                                       title="[信息与战争]移动通讯与网络" target="_blank">[信息与战争]移动通讯与网络</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
                                    <div>      两个坚持:手机的电池必须可以取下来 
               光纤不能够入户,只能够到楼宇 
 
      建议大家找这本书看看:<&</div>
                                </li>
                                <li><a href="/article/2382.htm"
                                       title="oracle flashback query(闪回查询)" target="_blank">oracle flashback query(闪回查询)</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/flashback+query/1.htm">flashback query</a><a class="tag" taget="_blank" href="/search/flashback+table/1.htm">flashback table</a>
                                    <div>在Oracle 10g中，Flash back家族分为以下成员： 
Flashback Database 
Flashback Drop 
Flashback Table 
Flashback Query(分Flashback Query,Flashback Version Query，Flashback Transaction Query) 
下面介绍一下Flashback Drop 和Flas</div>
                                </li>
                                <li><a href="/article/2509.htm"
                                       title="zeus持久层DAO单元测试" target="_blank">zeus持久层DAO单元测试</a>
                                    <span class="text-muted">deng520159</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a>
                                    <div>zeus代码测试正紧张进行中,但由于工作比较忙,但速度比较慢.现在已经完成读写分离单元测试了,现在把几种情况单元测试的例子发出来,希望有人能进出意见,让它走下去. 
本文是zeus的dao单元测试: 
1.单元测试直接上代码 
  
package com.dengliang.zeus.webdemo.test;


import org.junit.Test;
import o</div>
                                </li>
                                <li><a href="/article/2636.htm"
                                       title="C语言学习三printf函数和scanf函数学习" target="_blank">C语言学习三printf函数和scanf函数学习</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/printf/1.htm">printf</a><a class="tag" taget="_blank" href="/search/scanf/1.htm">scanf</a><a class="tag" taget="_blank" href="/search/language/1.htm">language</a>
                                    <div>printf函数 
/*
	2013年3月10日20:42:32
	地点：北京潘家园
	功能：
	目的：
		测试%x %X %#x %#X的用法
 */

# include <stdio.h>

int main(void)
{

	printf("哈哈！\n");  // \n表示换行

	int i = 10;
	printf</div>
                                </li>
                                <li><a href="/article/2763.htm"
                                       title="那你为什么小时候不好好读书?" target="_blank">那你为什么小时候不好好读书?</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/life/1.htm">life</a>
                                    <div>dady, 我今天捡到了十块钱, 不过我还给那个人了 
good girl! 那个人有没有和你讲thank you啊 
没有啦....他拉我的耳朵我才把钱还给他的, 他哪里会和我讲thank you 
  
爸爸, 如果地上有一张5块一张10块你拿哪一张呢.... 
当然是拿十块的咯... 
爸爸你很笨的, 你不会两张都拿 
  
爸爸为什么上个月那个人来跟你讨钱, 你告诉他没</div>
                                </li>
                                <li><a href="/article/2890.htm"
                                       title="iptables开放端口" target="_blank">iptables开放端口</a>
                                    <span class="text-muted">Fanyucai</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/iptables/1.htm">iptables</a><a class="tag" taget="_blank" href="/search/%E7%AB%AF%E5%8F%A3/1.htm">端口</a>
                                    <div>1，找到配置文件 
vi /etc/sysconfig/iptables   
  
2，添加端口开放，增加一行，开放18081端口 
-A INPUT -m state --state NEW -m tcp -p tcp --dport 18081 -j ACCEPT 
  
3，保存 
ESC
:wq! 
  
4，重启服务 
service iptables </div>
                                </li>
                                <li><a href="/article/3017.htm"
                                       title="Ehcache（05）——缓存的查询" target="_blank">Ehcache（05）——缓存的查询</a>
                                    <span class="text-muted">234390216</span>
<a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/%E7%BB%9F%E8%AE%A1/1.htm">统计</a><a class="tag" taget="_blank" href="/search/query/1.htm">query</a>
                                    <div>缓存的查询 
目录 
1.    使Cache可查询 
1.1     基于Xml配置 
1.2     基于代码的配置 
2     指定可搜索的属性 
2.1     可查询属性类型 
2.2 &</div>
                                </li>
                                <li><a href="/article/3144.htm"
                                       title="通过hashset找到数组中重复的元素" target="_blank">通过hashset找到数组中重复的元素</a>
                                    <span class="text-muted">jackyrong</span>
<a class="tag" taget="_blank" href="/search/hashset/1.htm">hashset</a>
                                    <div>  如何在hashset中快速找到重复的元素呢?方法很多，下面是其中一个办法： 
 
 


 int[] array = {1,1,2,3,4,5,6,7,8,8};
         
        Set<Integer> set = new HashSet<Integer>();
         
        for(int i = 0</div>
                                </li>
                                <li><a href="/article/3271.htm"
                                       title="使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL" target="_blank">使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL</a>
                                    <span class="text-muted">lanrikey</span>
<a class="tag" taget="_blank" href="/search/history/1.htm">history</a>
                                    <div>后退时关闭当前页面 
<script type="text/javascript"> 
 jQuery(document).ready(function ($) { 
        if (window.history && window.history.pushState) {</div>
                                </li>
                                <li><a href="/article/3398.htm"
                                       title="应用程序的通信成本" target="_blank">应用程序的通信成本</a>
                                    <span class="text-muted">netkiller.github.com</span>
<a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">虚拟机</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E9%99%88%E6%99%AF%E5%B3%B0/1.htm">陈景峰</a><a class="tag" taget="_blank" href="/search/netkiller/1.htm">netkiller</a><a class="tag" taget="_blank" href="/search/neo/1.htm">neo</a>
                                    <div>应用程序的通信成本  
什么是通信 
一个程序中两个以上功能相互传递信号或数据叫做通信。  
什么是成本 
这是是指时间成本与空间成本。 时间就是传递数据所花费的时间。空间是指传递过程耗费容量大小。  
都有哪些通信方式 
 
 全局变量 
 线程间通信 
 共享内存 
 共享文件 
 管道 
 Socket 
 硬件（串口，USB） 等等 
  
全局变量 
全局变量是成本最低通信方法，通过设置</div>
                                </li>
                                <li><a href="/article/3525.htm"
                                       title="一维数组与二维数组的声明与定义" target="_blank">一维数组与二维数组的声明与定义</a>
                                    <span class="text-muted">恋洁e生</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">一维数组</a><a class="tag" taget="_blank" href="/search/%E5%AE%9A%E4%B9%89/1.htm">定义</a><a class="tag" taget="_blank" href="/search/%E5%A3%B0%E6%98%8E/1.htm">声明</a><a class="tag" taget="_blank" href="/search/%E5%88%9D%E5%A7%8B%E5%8C%96/1.htm">初始化</a>
                                    <div>/**  *   */ package test20111005; /**  * @author FlyingFire  * @date:2011-11-18 上午04:33:36  * @author ：代码整理  * @introduce :一维数组与二维数组的初始化  *summary：  */ public c</div>
                                </li>
                                <li><a href="/article/3652.htm"
                                       title="Spring Mybatis独立事务配置" target="_blank">Spring Mybatis独立事务配置</a>
                                    <span class="text-muted">toknowme</span>
<a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a>
                                    <div>在项目中有很多地方会使用到独立事务，下面以获取主键为例      
（1）修改配置文件spring-mybatis.xml    <!-- 开启事务支持 -->    <tx:annotation-driven transaction-manager="transactionManager" />       &n</div>
                                </li>
                                <li><a href="/article/3779.htm"
                                       title="更新Anadroid SDK Tooks之后，Eclipse提示No update were found" target="_blank">更新Anadroid SDK Tooks之后，Eclipse提示No update were found</a>
                                    <span class="text-muted">xp9802</span>
<a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a>
                                    <div>使用Android SDK Manager 更新了Anadroid SDK Tooks 之后， 
打开eclipse提示 This Android SDK requires Android Developer Toolkit version 23.0.0 or above, 点击Check for Updates  
检测一会后提示 No update were found  </div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html>