后退刷新前进收藏顶部 | 知道黑匣子富媒体技术服务

互联网 IT工程师专业课程

精选直播课(公开课)

自学基础课程(HTML5,CSS3,ES,JAVAEE)

前端框架课程（WEB）

JAVASCRIPT

加载JS文件

加载JS文件
< script >< /script >	内嵌 head,body
< script src="./js/main.js" >< /script >	引入外部js文件。

输入输出

输入输出
prompt("请输入你的名字");	弹窗输入
alert("内容")	弹窗输出
console.log("内容")	控制台输出
document.write("内容")	写入到 body标签内
area.innerHTML="< h1 >hello word< /h1 >"	在id为area这个标签里输入内容

注释

注释
//	单行注释
/**/	多行注释

变量

变量
var x="tom",y="jerry";	var 变量名="赋值" // 注意变量名不能是关键字与保留字符,变量不要使用引号引起来变量严格区分大小写,区分中英文，变量名不能以数字开头
let x="let";	定义后不能反复定义
const pi=3.14159265	定义后不能修改

数据类型

数据类型
var x="hello",y='x';	如果一个变量在引号里，他就是一个字符串,不再是变量
str.length	获取字符长度 var str="abc"; console.log(str.length==3) ; //true
str.charAt(下标)	charAt 获取下标位置字符，下标从 0 开始; str.charAt(str.length-1) 获取到最后一个字符
var str="abc"+x+"lmn"	+ 号表示字符拼接，变量与字符拼接最终也会是一个字符串
Number.MAX_VALUE	数字类型 (最大值： 1.7976931348623157e+308)
Number.MIN_VALUE	（最小值： 5e-324）
Infinity / -Infinity	（正/负无穷）表示极限值
NAN	是一个特殊的数字,类型是 number
true,false	Boolean 布尔表达式 3>2,2==2,3<2
undefined	表示变量命名，但是没有赋值
"use strict"	JS 严格模式，变量必须先声明再使用
null	空，对象为空，是一个特殊值
Symbol	表示独一无二的值
[],{},function	引用数据类型, 数组，对象，函数
typeof x; typeof(x+y);	数据类型 (返回是字符串) string,number,boolean,undefind,null,object,function
Boolean(0);	基础类型转布尔类型; false: "" 0 null undefind NaN
var x=str*1; var x=Number(str);	String转为Number
var num=parseInt(str);	把字符串(或数字)变为整数，小数舍弃
var num=parseFloat(str)	把字符串变为数字; 保存小数部分;
var str=""+num; var str=num.toString();	把数字转化为字符
var str=num.toFixed(2);	num.Fixed(n) 保留第n位,后一位会四舍五入,返回一个字符串

算数运算符

算数运算符
加`+` 运算	加法，如果有一方是字符，注意是拼接运算
减`-`	减法，如果有一方是字符，字符串会自动转化为数字
乘`*`	乘法，如果有一方是字符，字符串会自动转化为数字
除`/`	除法，如果有一方是字符，字符串会自动转化为数字。注意除数非0;
取余`%`	获取余数，除不尽余下的数；

赋值运算符

赋值运算符
`=`	将符号右边的值赋给左边的变量;
`+=`	将左边变量的值加上右边的值，再赋给左边的变量
`-=`	将左边变量的值减去右边的值，再赋给左边的变量
`*=`	将左边变量的值乘以右边的值，再赋给左边变量
`/=`	将左边变量的值除以右边的值，再赋给左边变量
`%=`	将左边变量的值与右边值取余，再赋给左边变量

关系运算符

关系运算符
`>`	大于
`<`	小于
`>=`	大于等于
`<=`	小于等于
`==`	等于不比对数据类型
`!=`	不等于
`===`	恒等于，全等于注意：NaN
`!==`	不恒等于，不全等于

逻辑运算符

逻辑运算符
与(并且)`&&`	两边条件都成立才为 true
或（或者） `\|\|`	两边只要有一个为true 直接返回真
非(取反)`!`	真为假，假为真

javascript 中认定为假：false,undefined,'',null,0,NaN

自增减运算

自增减运算
`++num`	前自增：先增加再赋值
`num++`	后自增：先赋值再增加。返回的是num原值
`--num`	前自减：先自减再赋值
`num--`	后自减：先赋值再自减。返回的是num原值

运算的优先级

运算的优先级
()	小括号
.	字段访问
++ ， - -， !	一元运算
* / %	乘法，除法，取余
+ -	加（字符），减
> ,<, >=,<=	大于，小于，大于等于，小于等于
== , ===,!=,!==	等于，全等，不等，全不等
&&	与（并且）
\|\|	或（或者）
？：	三元运算
=，+=，-=，*=，/=,%=	赋值运算

分支结构

分支结构
if(条件)｛为真时的代码块｝	单分支
if(条件)｛为真时代码块｝else{为假时的代码块}	双分支
if(…){ }else if(…){ }else{ }	多分支
var str= 条件`？`为真时的返回值`：`为假时的返回值	三元运算符
switch(变量)｛ case 值： break; default: ｝	switch分支结构注意：case 值一定是固定值，可以比对的值， === 全等

进制

进制
`parseInt(字符串,进制);`	其它进制转化为10进制
`str.toString(进制)`	10进制转换为其它进制

二进制，八进制，十进制，十六进制（2，8，10，16）

控制结构（循环）

控制结构（循环）
while(true){ break;} var i=0;while(i<10){ //code ; i+=1}	while 循环
for(;;){break;} for(var i=0;i<10;i+=2){ //code }	for 循环
x: for(;;){ y:for(;;){ //code; break x;} }	嵌套循环及跳出 x层
break;	循环，switch; 结束的是整个循环
continue;	结束的是当次循环，进入下次循环

数组基础

数组基础
var arr=[1,3,2];	声明数组
var arr=new Arrray(1,3,2);	声明数组
arr[0], arr[arr.length-1]	获取数组中数据
arr.length	获取数组元素个数(长度)
arr[arr.length]="值"	向数组添加元素
arr[x]="值"	替换数组中指定位置的元素,X 存在的下标。
arr.length–;arr.length=0;arr=[]	删除数组中元素
delete arr[x];	将指定元素赋空(empty);X 存在的下标。
for(let i=0;i<arr.length;i++){ }	数组遍历for
for(let index in arr){ }	数组遍历for in; 注意 typeof(index)=="string"
for(let item of arr){ }	数组遍历for of; 没有下标，item 子元素
var arr=[[1,2,3],[null,"",0,undefined],[]]	二维数组
arr[外层下标] [内层下标]	获取二维数组中数据

数组常用函数

数组常用函数
arr.push(1,null,[2,3])	push() 追加将元素添加到数组的末尾，返回新数据的长度
var len=arr.unshift("chenshuaishuai","yuwenjuan")	unshift() 添加到开头，返回新数据的长度
var item=arr.pop()	pop() 删除最后一个,返回删除的元素
var item= arr.shift();	shift() 删除开头,返回删除的元素
var item=arr.splice(3,2,"liyupeng"); arr.splice(3,1);	splice 替换(开始下标,个数,替换值多个) * 返回删除的原来元素数组[] * arr.splice(3,1); 删除操作（开始下标，删除个数）
var str=arr.join("-");	join 数组转换字符串,不会改变原数据
var arr=[1,2,3,6,8,7,22,33,100,4]; arr.reverse();	reverse() 反转,返回值==反转后的值； * 反转操作会改变原数组位置
var lastArr=arr.concat(arr2,["jerry","dog"],"zhiqiang");	concat 合并,合并操作返回值是合并后的结果，不影响原值 * 参数：可以是一个或多个元素
var subArr=lastArr.slice(13); var subArr=lastArr.slice(13,14);	slice（前取下标，后不取下标）截取 * 不会改变原数据，返回一个新的数组
arr.sort(); arr.sort((a,b)=>a-b); arr.sort((a,b)=>b-a);	sort 排序,会改变原值==返回值 //默认排序以字符排序
var arr=["CCTV","NBA",2,"cba",2,3,4,5,null]; arr.indexOf("NBA")); //1	indexOf() 获取元素下标,返回元素在数组中的下标，没有返回 -1；判断是全等 === 才可以返回下标
arr.lastIndexOf(2); //4	lastIndexOf() 从后查找下标
arr.forEach((item,index)=>{ //code })	forEach 必须循环完，不允许跳出;匿名函数(元素,下标){ //code }

对象

对象
var obj=new Object(); var obj={}; var obj={sex:true,power:1}	新建对象
obj.name="shuke"; obj["pwd"]="123456"	对象添加属性
document.write(obj.name); console.log(obj["pwd"])	对象获取属性
obj.name="jerry"; obj["pwd"]="654321"	对象修改属性
delete obj.name; delete obj["pwd"]; obj={};	对象删除属性
("name" in obj) //false	in 方法。判断对象中属性是否存在,返回 true,false
for(let key in obj){ //key, obj[key] }	对象的遍历 for…in
this	//默认window, 哪个对象使用就指向哪个对象；

数组，对象字符串
`JSON.stringify(对象);`	数组，对象转换字符串
`JSON.parse(对象);`	以上操作还原回来（字符串转换为数组，对象）

函数

函数
function fun(){} fun()	定义及使用
function fun(x,y){ } fun("实参1","实参2 ")	参数的使用形参与实参一一对应
function fun(x,y){ return x+y; //return ; }	函数返回值;注意返回值，也可以是（undefined）
function getSum() {console.log(arguments)}	内置arguments类数组,可使用下标，for ,for…in 循环
arguments.length	获取函数的形参个数
var fun=function(){ }	函数表达式

String内置对象

字符内置函数
str.charAt(0);	返回str指定位置下标的字符
str.charCodeAt(0)	返回指定字符Unicode码
str.concat("a",1)	连接两个或多个字符串
str.indexOf("a")	返回某个字符串在字符中出现的位置。（模糊匹配）
str.lastIndexOf("a")	返回某个字符串在字符中最后出现的位置。
str.replace("被替换","替换")	使用指定字符串替换子串，只替换一次
str.replaceAll("被替换","替换")	使用指定字符串替换子串，替换所有
str.slice(0,str.length)	截取字符中的某个子串，返回新的字符串
str.split("字符")	字符串切割为数组
str.toLowerCase()	将字符串中字母转为小写
str.toUpperCase()	将字符串中字母转为大写
str.startsWith("字符串")	字符串是否以某个字符串开头; 返回true/false
str.endsWith("字符串")	字符串是否以某个字符串结尾; 返回true/false
str.trim()	去除字符串收尾空格，不包含字符中间空格
str.substr(4,2)	提取指定位置下标开始的字符数（个数）
str.substring(0,str.length)	提取指定位置下标开始到指定位置下标结束的字符串(前取后不取) 注意：下标没有负数。

Math内置对象

Math内置方法
Math.abs(-1);	绝对值 //1
Math.max(2,3);	返回数据中（参数）最大的值 //3
Math.min(3,4,1);	返回数据中（参数）最小的值 //1
Math.round(3.14);	返回数据四舍五入的结果（整数）//3
Math.ceil(3.14);	返回数据向上取整的结果 //4
Math.floor(3.14);	返回数据向下取整的结果（删除小数）//3
Math.PI	PI=3.141592653589793
Math.pow(2,3);	返回数据中底数与指数的计算结果 //8 ==2**3
Math.sqrt(2);	返回数据的平方根 //1.414
Math.random(); parseInt(Math.random()*(100-90)+90);	返回一个 [0-1)区间的小数// 范围取整 [90 - 100)

Date内置对象

Date内置对象
var date=new Date();	当前日期对象 // Sun Apr 24 2022 11:14:32 GMT+0800 (中国标准时间) {}
date.getTime(); +new Date();	获取时间戳：时间与数字的转换
var dateObj=new Date(0)	数字（时间戳）转换为时间对象
date.getFullYear() ;	获取date中的年
date.getMonth()+1;	获取date中的月
date.getDate();	获取date中的日
date.getHours();	获取date中的时
date.getMinutes();	获取date中的分
date.getSeconds();	获取date中的秒
date.getDay();	获取date中的星期（1，2，3，4，5，6，0）

window 常用属性与API

window属性与API
innerheight	【返回窗口的文档显示区的高度】
innerwidth	【返回窗口的文档显示区的宽度】
outerwidth	【返回窗口的外部宽度】
outerheight	【返回窗口的外部高度】
document	【返回网页只读引用】
var win=open("http://www.baidu.com", "_blank","width=200,height=200") ;	JS脚本打开网页方式
win.close();	只能关闭浏览器弹出（打开）的窗口；
alert("仅仅是一个弹窗");	一个提示消息，和一个确定按钮的警告框没返回值
confirm("你确定要删除操作吗？");	一个提示消息，有确定按钮与取消按钮的确认框返回值 true/false
prompt("请输入字符串"); prompt("请输入")==null	一个提示消息，和一个输入框，确定与取消的输入框返回值确定：返回用户输入的内容取消：null 可以推断出用户点了哪个按钮；
var timmer=setInterval(function(){ //code },1000)	周期性定时器（间隔定时器）循环操作参数：（匿名函数，毫秒）注意：定时器会叠加（先清理再加载）
clearInterval(timmer)	取消周期性定时器
var timmer=setTimeout(function(){ },1000);	延时定时器。只执行一次, 代码中表示 1秒后执行函数代码
clearTimeout(timmer)	取消延时定时器定时器

screen 用户屏幕的信息(移动端)
var value=window.screen.orientation.angle;	value==90?"这是横屏模式":"这是坚屏模式"

window.location 属性解析
协议//域名（ip）:端口号/文件路径?参数	URL统一资源定位符（网址）
protocol	URL 协议（http,https）
port	端口号(数字)
hostname	域名（IP）
pathname	文件路径
search	参数（GET）数据是从？+之后数据
href	获取完整地址(URL)
window.location.href="http://www.baidu.com/"	JS脚本打开网页方式：跳转网页
location.reload();	重新加载当前文件（刷新）,不会增加历史记录
location.assign("http://www.coolneng.com:80");	跳转指定页面（可以返回的跳转），会增加历史记录
location.replace("http://www.coolneng.com:80");	替换当前历史记录（不可返回的跳转），不会增加历史记录。

history 操作历史记录接口
history.length	长度 1
history.back();	后退
history.forward();	前进
history.go(0);	重新加载
history.go(2);	加载向后数第2个URL
window.history.go(-2);	加载向前数第2个URL

navigator 关访问者浏览器的信息
navigator.userAgent	获取当前客户信息（平台，内核，浏览器）

//eg 常用于用户是电脑还是移动端
   var reg=/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i;
if (window.navigator.userAgent.match(reg)) {
    //移动端的代码console.log('移动端');
} else {
    //pc端的代码console.log("pc端");
}

document对象

document对象
`document.body`	提供对body对象（标签）访问
`document.head`	提供对 head对象（标签）访问
`document.title`	提供对 body对象（标签）访问及修改
`document.URL`	提供对当前页面的URL访问。
`document.images`	提供对页面中所有图片(img标签)的访问，结果是个数组
`document.forms`	提供对页面中所有表单(form标签)的访问，结果是个数组
`window.onload=function(){}`	网页加载完成后执行;多个只执行最后一个；
document.nodeType	//9
document.body.nodeType	//1
document.nodeName	// 根节点 #document
document.body.nodeName	//标签 BODY

获取HTML节点（查）

获取HTML节点
var ele=document.getElementById("id名");	通过id 获取的是一个对象
var eles=document.getElementsByClassName("class名")	通过class 获取的是一个数组
var eles=document.getElementsByTagName("li");	通过标签名 Tag 获取的是一个数组
var ele=document.querySelector("css选择器");	通过css选择器，返回第一个标签对象
var eles=document.querySelectorAll("css选择器");	通过css选择器，会返回伪数组(包含id)
document.getElementById("box").textContent;	获取文本节点
document.getElementById("box").textContent="< h1 >he< /h1 >llo";	修改文本节点，不会解析标签
document.getElementById("box").innerHTML="< h1 >abc";	会解析标签

修改文本节点

修改文本节点
ele.innerHTML=“< h1 >文本节点< /h1 >”	修改：标签变量.innerHTML= 数值 ,数值中包含标签字符串也会被解析成标签。
ele.innerText="纯文本节点"	修改：标签变量.innerText= 数值 ,数值中所有的标签字符都会被解析成字符串。
input.value;input.value="tom"	表单标签.value: 注意点：input,select,textarea
checkbox[0].checked=true;	修改选择 radio checkbox 状态 true/false
ele.className="bg-red"	标签属性修改（class id title \| border \| src alt \|….）
ele.getAttribute("属性名")	标签所有属性的获取
ele.setAttribute("属性名","属性值")	标签所有属性的修改

删除HTML节点

删除HTML节点
var lis=faEle.getElementsByTagName("li"); faEle.removeChild(lis[0]);	父级标签删除子元素 ul 删除第一个 li
faEle.innerHTML="";	快捷删除,删除所有内容

获取标签API

获取标签API
ele.firstElementChild;	获取第一个子标签; object
ele.lastElementChild;	获取最后一个子标签 ; object
ele.children;	获取所有的子标签； array
ele.parentElement	获取父级元素; object
ele.previousElementSibling;	获取前一个兄弟标签
ele.nextElementSibling;	获取后一个兄弟标签

查找CSS（外联，内联）样式

查找CSS（外联，内联）样式
var eleSty=window.getComputedStyle(ele,null)	查找CSS（外联，内联）样式; 返回值是一个object(非标签)，只能获取，不能修改。
ele.style.backgroundRadius="5px"; ele.setAttribute("style","color:white");	修改标签的两种方法

事件简介

事件简介
window.onload=function(){} img.onload=function(){} window.onresize==function(){}	浏览器窗口 onload(文件)
ele.onclick =function(){} ele.ondbclick=function(){}	鼠标单击与双击
ele.onmousemove =function(){}	鼠标移动事件，会反复触发
ele.onmouseleave =function(){}	鼠标离开事件会触发一次
ele.onmouseenter =function(){}	鼠标进入事件,会触发一次
ele.onmousewheel =function(){}	鼠标滚轴滑动事件,会反复触发
ele.onkeydown =function(){}	当用户按下任意键触发
ele.onkeyup =function(){}	当用户释放任意键触发
ele.onkeypress =function(){}	按键按住不放时触发。反复触发
formEle.focus();	获取光标方法。
formEle.blur();	失去光标方法。
formEle.onfocus =function(){}	监听获取光标事件
formEle.onblur=function(){}	监听失去光标事件
formEle.onchange =function(){}	表单数据发生改变时触发
formEle.oninput =function(){}	输入（数据改变时）会触发

捕获阶段事件

addEventListener
ele.addEventListener("click",function(event){ },true); false: （在冒泡后执行）,默认值。 true: (在冒泡前执行);	第三个参数是布尔型：控制事件的处理方式
event.stopPropagation()	阻止事件的传播.(捕获阶段:不包含自身)
event.stopImmediatePropagation();	停止事件传播（捕获阶段:包含自身）
onclick="event.preventDefault()"; event.preventDefault()	取消标签默认行为

注册监听与解除绑定

注册监听
button[onclick="msg('DOM0注册监听')]{提交}	利用HTML标签自带的属性进行绑定。
ele.onclick=function(){ msg('DOM0注册监听') }	通过JS定位事件源,使用`on+事件名称`的方式来完成事件的绑定。
ele.addEventListener(“click”,function(){},true);	通过JS定位事件源，使用 ele.addEventListener(…) 函数进行事件绑定。
解除事件绑定
ele.removeAttribute("onclick");	移除元素属性 removeAttribute
ele.onclick=null;	ele.事件名赋值
ele.addEventListener("click",msg,false); //捕获事件,第三个参数是FALSE才能被移除, ele.removeEventListener("click",msg); //移除捕获事件	解除监听的函数对象，监听的函数对象如果是匿名函数，不能解除绑定

事件源(event)

事件源event
btn[onclick="msg(event)"]; ele.onmouseleave=function (event){ …} box.addEventListener("dblclick",function (e) {e==event)})	获取event对象即使不通过传参方法也可以直接获取 event
常用api或属性
event.target	表示事件目标本身
event.currentTarget	当前冒泡标签;
event.clientX; event.clientY:	触发事件时，鼠标相对于浏览器的X,Y的坐标位置(不包含滚动条)
event.pageX; event.pageY;	触发事件时，鼠标相对于网页的X,Y的坐标位置(包含滚动条)
event.offsetX; event.offsetY;	指触发事件时鼠标相对于事件标签左上角的坐标偏移量。
event.preventDefault()	阻止标签的默认行为
event.stopPropagation()	阻止冒泡或捕获
事件委托
event.target	获取事件源对象 (触发父事件的子标签)
event.currentTarget	获取正在处理事件的元素对象。（this）（事件标签）

后台PHP,Java,Python课程(后端课程)

整理中...

导师在线

舒克老师 [微信：cnshuke]
电话 13636476004
邮箱 2028987066@qq.com
腾讯课堂：腾讯课堂讲师
专栏：全栈讲师
腾讯云社区专栏：https://cloud.tencent.com/developer/user/5998140
简介: 全栈工程师。有近10年开发经验，全栈工程师，从事过多个大型项目的开发与管理工作，在动态开发语言方面有着丰富的经验.开发过大型门户网站，医疗管理系统，金融管理系统PC端与移动端，大型社区管理系统开发，站群系统，教育门户及考试系统的开发，自来水服务系统,ERP等。

获取资源(课程大纲，视频，源码)

助教会根据以下填写的信息发放相关资料

课程内容：大数据，人工智能，JAVA开发，WEB前端，移动应用开发...

关于我们ABOUT SHUKE

微博关注我们点击关注

站内搜索

首页 | W3C | ME