JavaScript复习内容

输入框	prompt('请输入你的年龄');
声明多个变量	var age = 18,myname = '卡卡西',gz = 2000;
命名规范	严格区分大小写 var 18age;出现了波浪线就错了 保留字不要用 用英文 ‘$’‘ _’可以用来开头 数字不可以 驼峰命名法 第一个字符小写然后其他的大写关键字不要用name 浏览器有用不要用
// 8进制 0~7       // 16进制 0~9 a~f;   // 获取数字型的最大值 // 获取数字型的最小值  // 无穷大  // 无穷小   //isNaN 用来判断是否是一个非数字	我们在数字前面加一个0表示八进制 #ffffff  数字前面加0x Number.MAX_VALUE Number.MIN_VALUE Number.MAX_VALUE * 2 -Number.MAX_VALUE * 2 //如果是数字 返回false //如果不是数字 返回true
//推荐使用单引号   双引号单引号都可以用//外单内双	//字符串使用转移字符   在引号里面加上         // \n  表示换行的意思;         // \\  表示斜杆 \         // \'  表示单引号 '         // \"  表示双引号 "         // \t  表示tab缩进         // \b  空格,b是blank的意思
1.检测字符串的长度	str.length
// boolean	true 当1来看false 当0来看
浏览器打印	/* 一般来说 consolo.log()         18   number 是蓝色的         '18' string 是黑色的         true boolean 是深蓝色的         undefined undefined 是浅灰色的         null null 是浅灰色的         */
//1转换为字符串toString();  //2利用String(变量)   //3利用加号便字符串 隐式转换	var str = num.toString(); String(num)  console.log(num + "");
// parseInt();可以把字符串变成整数	console.log(parseInt('3.14')); //3 取整 console.log(parseInt('3.98')); //3 取整 console.log(parseInt('120px')); //会去掉px单位 console.log(parseInt('rem20px')); //第一个是英文 得到 NaN
//parseFloat() 数字型 小数	console.log(parseFloat('3.14')); //3.14 console.log(parseFloat('120px')); //120 console.log(parseFloat('rem120px')); //NaN
//利用Number(变量)	var str = '123'; console.log(Number(str)); console.log(Number('12'));
//利用乘或者除 减 * / -  隐式转化	console.log(12 - '0');         console.log(12 * '1');         console.log(12 / '1');
Boolean转化	console.log(Boolean('')); //false         console.log(Boolean(0)); //false         console.log(Boolean(NaN)); //false         console.log(Boolean(null)); //false         console.log(Boolean(undefined)); //false         //--------------------------------------         console.log(Boolean('12')); //true         console.log(Boolean(1)); //true         console.log(Boolean('陈雅婕')); //true
注意	console.log(0.2 + 0.3); //0.300000000000000000000004
自增	var e = 10;         var f = ++e + e++; //e = 11 e++ =11         console.log(f); // 22
全等于	===
// 逻辑与 &&  and 两个都为真才为真	console.log(3 > 5 && 3 > 2); //false  console.log(3 < 5 && 3 > 2); //true
// 逻辑或 || or 一个为真就为真	console.log(3 > 5 || 3 < 2); //true         console.log(3 > 5 && 3 < 2); //false
//逻辑非 not	console.log(!ture); //false
使用我们的逻辑运算 true && false = false	//'' 0 NaN null undefined  为假的
3.逻辑与短路运算  表达式1结果为真,返回表达式2;        表达式1结果为假,返回表达式1	console.log(123 && 456); //456         console.log(0 && 123); //0         console.log(0 && 1 + 2 && 456 * 789); //0
//4.逻辑或短路运算 表达式1为真,则返回表达式1;            表达式1为假则返回表达式2	console.log(123 || 456); //123         console.log(123 || 456 || 456 + 123); //123         console.log(0 || 456 || 456 + 123); //456
赋值运算符	// num = num +- 1      num++  --         //num = num +- 2       num +=2   num -=2         //num = num */ 5       num *=5   num /= 5
优先级	//             优先级              运算符              顺序         //               1                小括号               ()         //               2              一元运算符            ++ --!         //               3              算术运算符            先* / % 后+ -         //               4              关系运算符            > >= < <=         //               5              相等运算符            == != === !==         //               6              逻辑运算符            先 && 后 ||         //               7              赋值运算符            =         //               8              逗号运算符            ,
// 条件表达式?表达式一:表达式二         // 真的返回表达式一         // 假的返回表达式二	num > 5 ? console.log('是的') : console.log('不是');
数字补零	var result = time > 10 ? time : '0' + time;
打断点	// 打断点         // 1到浏览器         // 2按sources         // 3点一下         // 往下走按F11就好
// 1.利用Array()创造数组 // 2.利用字面量创建数组	var arr = new Array(); // 船舰一个空数组 var arr = []; //创建了一个空数组
思维	newarr[newarr.length] = arr[i];
//1.声明函数         /* function 函数名(){             函数体         } */	function sayHi() {             console.log('hello');         }
// 2.我们可以根据传的参数不同而执行不同的代码         /* function 函数名(形参1, 形参2, 形参3, 形参4) {         }         函数名(实参1,实参2,实参3,实参4);*/	//形参和实参的执行过程         function cook(aru) { //相当于一个变量             console.log(aru);         }         cook('酸辣土豆丝');         cook('大肘子');
//函数形参实参个数匹配         function getSum(num1, num2) {             console.log(num1 + num2);         }	//如果形参和实参个数匹配则正常输出结果         getSum(1, 2); //3         // 如果实参个数多于形参个数,会取到形参个数         getSum(1, 2, 3); // 3没有运算         // 如果实参小于形参,少的会用undefined来补上,答案最终为NaN;         getSum(1); //NaN         // 尽量让形参个数等于实参的个数
// 函数遇到return就返回
//return 只能返回一个值         //return 后面的代码不会被执行	// 返回的是一个最后的值         //返回多个值用数组           // 没有返回值返回的是undifined;
// 只有函数才有这个arguments         // 而且是内置的每个函数都有这个         function fn() {             console.log(arguments);         }	//伪数组 具有数组的length方法         console.log(fn(1, 2, 3));
函数的相互调用	function fn1() {             console.log(11);             fn2();         }         fn1();         function fn2() {             console.log(22);         }
// 第一种方式利用关键字声明 //第二种方式(匿名表达式)         // var 变量名 = function() {};	function fn1() {         }         fn1();  var fun = function(aru) {             alert(aru);         }         fun(213);
//javascript 的作用域目的是为了提高可靠性更多的是减少命名冲突         // 全局作用域 // 局部作用域 (函数作用域)	var sum = 0; function fn() {             // 局部作用域             var sum = 20;             console.log(sum); //20         }
//全局变量：在全局下都可以使用  //局部变量 :只能在函数里面使用 // 局部变量执行完就消失 //全局变量只有在浏览器关闭才会消失	var num = 10; function fn() {             var sum = 10;             // 如果在函数内部没有声明函数就会变成全局变量             num = 10;         }
//块级作用域{} if{} for{}	if (3 > 5) {var num = 10}console.log(num); //10
/外部函数	// 内部函数  就近原则
//原因之提升声明	//2.js引擎运行js分为两步 会把里面的var 还有function提到作用域最前面         //3.代码的执行 按照书写的顺序从上到下         //4.变量与解析和函数与解析         //(1)只提升声明,不提升赋值
// 利用对象字面量创建对象   //(1)里面的属性我们采用键值对 值 属性值         // (2)多个属性用冒号分开         // (3)冒号后面跟得是一个匿名函数         //1.调用对象得方法 我们采取对象名.属性名  .我们理解为的         console.log(obj.name);         // 2.第二种方法.采取对象名['属性名'];         console.log(obj['age']);         // 调用对象的方法 对象名.方法名()  千万别忘记添加小括号         console.log(obj.sayHi());	var obj = {}; //创建了一个空对象 /(1)里面的属性我们采用键值对 值 属性值         // (2)多个属性用冒号分开         // (3)冒号后面跟得是一个匿名函数         //1.调用对象得方法 我们采取对象名.属性名  .我们理解为的  var obj = {             name: '李镇',             age: 18,             sex: '男',             sayHi: function() {                 console.log("hi");             }         }
对象的读取	//1.对象名.属性值  //2.对象名['属性值']  //3.对象名.方法名()
//利用 new Object创建对象	var obj = new Object(); //创建了一个空的对象
构造函数	function Star(uname, age, sex) {             this.uname = uname;             this.age = age;             this.sex = sex;             this.sing = function(sang) {                 console.log(sang);             }         }         var ldh = new Star('刘德华', 18, '男');         console.log(typeof ldh);         console.log(ldh.uname);         console.log(ldh.sex);         ldh.sing('冰雨');         console.log(ldh['age']);         var zxy = new Star('张学友', 18, '女');
//遍历对象	// for..in..遍历我们的对象             // for (变量 in 对象) {             // }         for (var k in obj) {             console.log(k); //输出的是属性名             console.log(obj[k]); //得到的是属性值         }         //喜欢用k或者key
//Math是一个构造方法不是不需要 new	console.log(Math.PI); //圆周率         console.log(Math.max(1, 99, 3)); // 99         console.log(Math.max(1, 'pink')); // NaN         console.log(Math.max()); //-infinity
//1.绝对值方法  //2.取整的方法  // (1).Math.floor()向下取整  // (2).Math.ceil()向上取整  // (1).Math.round()四舍五入	console.log(Math.abs(1)); // 1 console.log(Math.floor(1.1)); //1 console.log(Math.ceil(1.1)); //2 console.log(Math.round(1.1)); //1
//radom()随即返回一个值0<=x<1// 这个方法里面不跟参数
//Date()是一日期对象,必须使用new来调用我们创建的日期对象 //1.使用date没带参数 返回当前系统时间 // 2.带参数的写法 数字型 2019，10，10 或者是 字符串型 '2002-10-19 8:8:8'	var arr = new Array(); // 创建一个数组对象  var obj = new Object(); //创建一个对象实例 var date = new Date(); console.log(date); //Sun Jan 30 2022 23:02:32 GMT+0800 (中国标准时间) var date1 = new Date(2019, 10, 10); //返回的是11月
//格式化日期 年月日 //返回当前日期的年 2022 //返回当前日期的月份要加1 1 date.getDate() date.getDay()	var date = new Date(); date.getFullYear() date.getMonth() + 1 //返回当前日期的天数 30 //返回当前星期几 周日是0 是一个数组
//获取距离1970年1月1日的毫秒数(时间戳)  //2.简单的写法(最常用的)  // 3.H5新增的(兼容性)	// 1.通过 getTime() valueOf()         var date = new Date();         console.log(date.getTime());         console.log(date.valueOf()); var date1 = +new Date(); //返回的就是当前的总毫秒数 console.log(Date.now());
//1.利用字面量  //2.利用new Array()创建	var arr = [1, 2, 3];  var arr1 = new Array(2, 3); //创建了数组里面放着2,3
//1.instanceOf 运算符 可以判断是否为数组   // 2.Array.isArray(参数); //H5新增	console.log(arr instanceof Array); // true console.log(obj instanceof Array); // false  console.log(obj instanceof Object); // true console.log(Array.isArray(arr)); //false
//添加删除数组的元素的方法         // 1.push()在我们数组末尾添加一个或多个元素   // 1.unshift在数组的开头添加一个新元素或多个新元素 // 3.Pop()删除数组的最后一个元素 // 4.shift可以删除第一个元素	var arr = [1, 2, 3];onsole.log(arr.push(7));  arr.unshift('我是加在开头');   arr.pop();  arr.shift();
//获取数组索引的方法 indexOf()返回给定元素的索引值 值返回第一个满足条件的索引号  找不到给定的元素返回-1	arr.indexOf('blue')
//toStirng()将我们的数组转化为字符串  console.log(arr1.join()); //默认为逗号         console.log(arr.join('-'));         console.log(arr.join('&'));	arr.toString() pink,yellow,red,blue 121-数组转化为字符串.html:15 1-2-3 121-数组转化为字符串.html:16 1&2&3
//返回第一个 没有返回-1 str.indexOf('要查的字符',[起始位置])	// str2.toUpperCase  转大写         // str2.toLowerCase  转小写
获取id	document.getElementById('time'); //返回的是一个元素对象
// 找不到返回空的数组	var lis = document.getElementsByTagName('li');
var box = document.getElementsByClassName('box');  var allBox = document.querySelectorAll('.box');	//1.getElementsByClassName  //2.获取第一个元素querySelector  里面记得加符号
//获取body元素  //获取html元素	var bodyEle = document.body;   var htmlEle = document.documentElement;
事件的三个属性	//事件源  //事件类型 //事件处理程序
//innerText 和 innerHTML 的区别         //ineerText不区分元素标签   // 两个标签都可以获取元素的内容	div.innerText = '<strong>今天是</strong>'; //不区分         div.innerHTML = '<strong>今天是</strong>'; //区分 console.log(div.innerText); //去掉空格         console.log(div.innerHTML); //获取标签和空格
this的指向	// this指向调用者谁调用谁被指向this
修改类	this.className = 'change first';  // this.className = 'change';
//elemet.属性  // 程序员自己定义的属性叫做自定义属性         ***规范  data-index="1"  data开头 *** //设元素属性值         //1.element.属性=值; // 2.element.setAttribute('属性','值'); //主要正对自定义的值         //移除属性removeAttribute(属性)	console.log(div.id);  // element.getAttribute('属性')  console.log(div.getAttribute('id'));  console.log(div.getAttribute('index'));  div.id = 'test'; div.setAttribute('index', 2);   div.removeAttribute('lizhen');
<!-- 规范命名第二个是对的 -->	<div getTime="20" data-index="2"></div>   console.log(div.getAttribute('getTime'));  div.setAttribute('data-index', 20);
//得到的是离元素最近的父亲(亲爹) 找不到父节点就返回为空	erweima.parentNode
// childern 常用（不是标准） 实际开发常用的 //文本为1 标签为2 文字3 不提倡不常用	ul.children ul.childNodes[1].nodeType
//1.firstchile 第一个子节点不管是文本还是元素节点都返回  1.lastchile 最后个子节点不管是文本还是元素节点都返回 firstElementChild 返回第一个元素字节点 //3.实际开发而且没有兼容性问题 (个数不一定)	ol.firstChild ol.firstElementChild ol.lastElementChild ol.children[0] ol.children[ol.children.length - 1]
// nextSibiling //nextElementSibling  nodeType 可以判元素类型	console.log(div.nextSibling); //文本节点 找下一个兄弟 console.log(div.previousSibling); //文本节点 找上一个兄弟 console.log(div.nextElementSibling); // 拿到span 得到下一个兄弟元素节点 console.log(div.previousElementSibling); // 那不到没兄弟 得到下一个兄弟元素节点
//创建节点  //添加节点node.appendChild(child) node是父级 child 是子级  //添加节点node.insertBefore(child,'指定元素') //添加节点node.insertBefore(child,'指定元素')   //页面增加元素 1.创建元素 2.添加元素	var li = document.createElement('li'); var ul = document.querySelector('ul'); ul.appendChild(li); //在后面追加元素  var lili = document.createElement('li');   ul.insertBefore(lili, ul.children[0]);
//删除元素node.removeChild(child);	// ul.removeChild(ul.children[0]);
//node.cloneNode();括号里面为空或者false为浅拷贝只复制标签不复制内容         //node.cloneNode();括号里面为true深复制赋值标签和内容	var lili = ul.children[0].cloneNode(true);         ul.appendChild(lili);
// 三种创建方式的区别 //会重构页面 会导致崩掉页面             // 1.document.write()             // 2.innerHTML 创建元素 可以识别元素  //不拼接字符串 这个速度最快             // 2.document.createElement  //拼接字符串的时候这个效率最快
传统	var btn = document.querySelectorAll('btn');         btn[0].onclick = function() {             alert('a');         }
方法	// 利用事件侦听注册事件  支付串 不带on         btn[1].addEventListener('click', function() {             alert(22);         })
删除事件	divs[1].removeEventListener('click', fn);
返回触发源	e.target
阻止默认事件	e.preventDefault(); //dom的推荐写法
阻止冒泡	e.stopPropagation();
事件委托给父组件加点击事件	e.target.style.backgroundColor = 'pink';
键盘事件 键盘弹起 键盘弹起 键盘弹起	onkeyup onkeydown onkeypress
预加载事件	DOMContentLoaded
页面所有内容全部加载完才可以显示	load
调整窗口事件	window.innerWidth
定时器  window可以省略setTimeout(callBack, 3000);	window.setTimeout(调用函数,延时时间)
停止定时器	clearTimeout(timer);
setInterval 重复调用	setInterval(function() {}, 1000);
停止定时器	clearInterval(timer);
页面跳转	location.href = 'http://www.baidu.com';
<form action="192-index.html"></from>提交到那个页面	location.search //?=username=id
记录历史可以实现后退功能 不记录历史不可以实现后退功能 //等于true强制刷新,重新从服务器拿数据  //不写或者false刷新页面	location.assign('http://www.baidu.com'); location.replace('http://www.baidu.com');  location.reload(true);
前进后退箭头	history.forward();   history.back();  history.go(-1);
返回元素的偏移量要有定位 才能返回定位 包含padding+border+width 返回带有定位的父亲否则返回body 返回最近的父亲 返回不带边框的大小 立即执行函数	divs[0].offsetTop divs[0].offsetLeft divs[1].offsetWidth divs[1].offsetParent divs[1].parentNode div.clientWidth (function() {})() 或者   (function(){}())
//页面大小发生改变时执行这个函数 //当页面发生加载的时候执行	'resize' pageshow
屏幕滚动    滑块 距离上面的距离	scroll   scrollTop
//经过自身盒子和自己的儿子的盒子不会触发  不会冒泡	mouseenter
	window.scroll(x, y);  直接写数字 不用带单位 window.pageYOffset  页面被卷去的头部
//只要浏览器不关闭数据就不会丢失 //获取数据 //删除数据 //删除所有数据 慎用不怕被人打你可以用	sessionStorage.setItem('uname', val); sessionStorage.getItem('uname') sessionStorage.removeItem('uname'); sessionStorage.clear();
//只要浏览器关闭数据都不会丢失(同一个浏览器可以共享) //获取数据     //删除数据  //删除所有数据 慎用不怕被人打你可以用	localStorage.setItem('uname', val);  // localStorage.getItem('uname');  localStorage.removeItem('uname');