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

互联网 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,falseBoolean 布尔 表达式 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); //4lastIndexOf() 从后查找下标
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) //falsein 方法。判断对象中属性是否存在,返回 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.PIPI=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统一资源定位符(网址)
protocolURL 协议 (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]
  • 邮箱 2028987066@qq.com
  • 腾讯课堂:腾讯课堂讲师
  • 专栏:全栈讲师
  • 腾讯云社区专栏 :https://cloud.tencent.com/developer/user/5998140
  • 简介: 全栈工程师。有近10年开发经验,全栈工程师,从事过多个大型项目的开发与管理工作,在动态开发语言方面有着丰富的经验.开发过大型门户网站,医疗管理系统,金融管理系统PC端与移动端,大型社区管理系统开发,站群系统,教育门户及考试系统的开发,自来水服务系统,ERP等。

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

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

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

站内搜索
首页 | W3C | ME