笔记"/>
JavaScript自制笔记
JavaScript基础
文章目录
- JavaScript基础
- 1、输入输出语句
- 2、变量的声明
- 3、变量类型
- ①简单数据类型
- ②常用函数
- 4、字面量
- 5、比较运算符
- 6、数组
- 案例：数组转换分割字符串
- 7、函数
- 8、预解析
- 9、全局变量
- 10、对象
- 11、构造函数
- 12、遍历对象
- 13、内置对象
- ①Math对象
- ②Math.random()随机数
- ③Date对象
- 14、基本包装类型
- 15、字符串常用函数
- Web APIs(DOM BOM)
- 一、DOM:文档对象模型：
- 1、获取页面元素：
- 2、事件基础
- 3、操作元素
- 4、鼠标指令
- 5、键盘指令
- 6、排他思想
- 7、获得元素属性
- ▲重要：自定义属性
- 8、移除元素属性
- 9、更改元素属性
- 10、HTML5的自定义属性规范
- 二、节点操作：
- 1、节点类别：
- 2、创建节点和添加节点
- 3、删除节点
- 4、克隆节点
- 三、事件高级
- 1、注册事件概述
- ①传统方式
- ②方法监听注册方式
- 2、删除事件
- 3、捕获阶段、冒泡阶段
- 4、事件对象
- 5、对象属性
- 96、事件委托
- 7、常用鼠标事件
- 8、常用键盘事件
- 9、事件对象
- 二、BOM
- 1、页面加载事件
- load
- DOMContentLoaded
- 2、调整窗口大小事件
- 3、定时器
- 4、location对象
- 5、navigation对象
- 6、history对象
- 7、PC端网页特效
- ①offset元素偏移量系列
- ②client元素可视区系列
- ③scroll元素滚动系列
- ④动画函数封装
- ⑤常见网页特效案例
- ⑥立即执行函数(匿名函数)
- ⑦两种鼠标移动事件的区别
- ⑧缓动效果原理
1、输入输出语句
alert(msg) //浏览器弹出警示框
console.log(msg) //浏览器控制台打印输出信息，（在F12中给程序员看的）
prompt(info) //浏览器弹出输入框，用户可输入
2、变量的声明
var age； //var + 变量名 来声明变量
3、变量类型
特点：js是动态语言，变量的类型可以变化
①简单数据类型
Number //数字型
▲范围为Number.MAX_VALUE~Number.MIN_VALUE（最大值~最小值）
特殊的有：Infinity、-Infinity、NaN（无穷大、无穷小、非数值）
Boolean //布尔型
▲如果布尔参与运算，true为1，false为0
String //字符串
▲推荐用单引号，引号内要用引号时，需要“外单内双”，或者用转义字符
Undefined //未定义
Null //空值，默认为0
②常用函数
判断是否为数字：
isNaN( ** ) //判断是否为数字，返回true或false
检测字符串的长度：
变量名.length //返回变量的长度
字符串拼接：
用 + 来拼接，同java
检测数据类型：
typeof 变量名； //返回数据类型的字符串
转换为字符串：
变量名.toString()
String（变量） //强制转换
用加号拼接
转换为数字型：
变量名.parseInt(string) //转int，首字符不是数字则会返回NaN变量名.parseFloat(string) //转floatNumber() //强制转换用+ - * / 隐式转换 //z
4、字面量
定义：是源代码中队固定值的一个表示法
5、比较运算符
18 == '18' //返回true，因为会自动隐形转换'18'==='18' //数值和类型一样才返回true，不然返回false
6、数组
①数组的声明：用new创建
var 数组名 = new Array（）；
②字面量直接声明
var arr= [];var arr=[1,2,'zyk',true]; //数组中元素类型可以不同
③数组长度函数
在数组名.length //返回数组的长度值
案例：数组转换分割字符串
var arr=['red','green','blue','pink']; var str=''; for(var i=0;i<4;i++){ str+=arr[i]; str+='|'; } console.log(str)
④新增数组元素
var arr=['red','green','blue','pink']; //先修改数组的长度 arr.length=5; //或者直接追加 arr[4]='gray';
7、函数
①声明函数
function 函数名（形参列表【无需数据类型】）{ //这里形参可以是数组，仍不用写类型，只要实参是数组即可 函数体；}
方法二：var func(变量名) = function(){ 函数体；}调用时：func（）；
②返回值
function 函数名（形参列表【无需数据类型】）{ 函数体； return 结果值； //无需在声明函数时定义返回值类型，可以返回数组等}
▲如果没有返回值，默认返回undefined
③arguments的使用
定义：当我们不确定有多少形式参数传递的时候，可以用arguments来获取在 Javascript中，arguments实际上是对当前函数的一个内置对象，所有函数都内置了一个arguments对象，arguments对象。中储存了传递的所有实参。
function func(){ console.log(arguments); //一个伪数组储存了所有的实参也具有length等特性}
④作用域链
如果在一个嵌套的作用域中，访问变量会呈链式查找，如
funcetion a(){ var num = 20; funcetion a(){ var num = 10; funcetion a(){ console.log(num); //从里向外查找,答案是10 } }}
8、预解析
描述：Js引擎运行分为两步，预解析和代码执行。预解析,预习Js引擎会把js里面所有的var还有function提升到当前作用域的最前面。然后代码执行，按照书写的顺序从上往下执行。预解析分为变量预解析和函数预解析，变量预解析就是把作用域的最前面，不会提升赋值操作。函数就是把函数声明放到作用域的最前面，不会提升调用操作。
9、全局变量
▲当在局部变量出现一个没有被var修饰的变量，默认是声明了一个全局变量，在全局可用
10、对象
①创建对象的方式：
▲属性采用冒号声明，中各个属性间使用逗号连接，不用声明数据类型
var obj={ //字面量直接创建 name:'朱', sex:'男', age:18, sayHi:function(){ console.log('hello'); }}
var obj= new Object();obj.name='朱玉坤';obj.age=18;boj.sayHi = function(){console.log}
②使用对象的方法：
abj.age //第一种方式调用obj['age'] //第二种方式调用
11、构造函数
语法：
function 构造函数名(){ //构造函数首字母大写 this.属性=值； this.方法=function(){ 函数体； }}
函数的调用：
new Star('刘德华'，18)； //类似于java的狗崽方法
12、遍历对象
for(变量 in 对象for（var k in obj）{ console.log(k); //输出obj中各个属性名 console.log(obk //输出对象中的各个属性值}
13、内置对象
对象分为：自定义对象、内置对象、浏览器对象
①Math对象
Math.PI //圆周率Math.floor() //向下取整Math.ceil() //向上取整Math.round() //四舍五入Math.abs() //绝对值Math.max()/ min() //求最大和最小值
②Math.random()随机数
return Math.random()*(max - min + 1) +min //取min到max之间的随机整数
③Date对象
描述：date对象是一个构造函数，必须使用new来调用
函数的多种形参：new Date( ) //无参数返回系统当前的所有时间new Date(2021,8,7) //数字型new Date('2021-8-7 23:8:13')
获取时间的函数
getFulYear() //年份getMonth() //月份，月份值在0~11之间，所以要+1getDate() //完整时间getDay() //当前周几，值在0~6之间，周日返回0getHours() //小时getMinutes() //分钟getSeconds() //秒Date.now(); / getTime(); /+new Date(时间); //现在距离1970.1.1的毫秒
③Array对象
▲复习
new Array(2) //代表创建一个2长度的数组nbew Array(2,3) //代表创建一个元素为2、3的数组
▲新函数：判断对象类型
变量 instanceof 变量类型； //返回true或false
▲判断是否为数组
Array.isArray(a); //返回true或false ，判断是否为数组
▲末尾添加一个或多个元素，会修改原数组，返回值为新长度
对象.push(参数1，参数2...);
▲删除数组最后一个元素，，会修改原数组，长度减一，返回值为被删除的最后一个元素
对象.pop();
▲删除数组第一个元素，，会修改原数组，长度减一，返回值为被删除的第一个元素
对象.shift();
▲在开头添加一个或多个元素，会修改原数组，返回值为新长度
对象.unshift();
▲反转数组元素，返回新数组
对象.reverse();
▲排序数组元素，返回新数组
对象.sort();arr.sort(function(a,b){ return a-b; //升序排序，不然默认是比较ASCII})
▲返回数组元素索引的方法
var arr=['red','pink','blue'];arr.indexOf('pink'); //返回值为1,有重复的元素会返回第一个出现的下标，如果没有则返回-1（indexOf('pink',可选形参：表示起始位置)）；arr.lastIndexOf('pink') //从后向前数索引
▲将数组转换成字符串
var arr=[1,2,3];arr.toString(); //把数组所有元素转换成字符串，元素中间用逗号隔开
▲将数组转换成字符串
arr.join('分隔符')；如： arr.join('-')； arr.join('')；
▲连接两个或多个数组，不影响原来的数组
arr.concat(); //返回新的连接好的数组，形参可以是元素，也可以是多个整个的数组
▲截取数组元素
用法：arrayObj - 原始数组;
start - 必填；设定新数组的起始位置；如果是负数，则表示从数组尾部开始算起（-1
指最后一个元素，-2 指倒数第二个元素，以此类推）。
end - 可选；设定新数组的结束位置；如果不填写该参数，默认到数组结尾；如果是负数，则表示从数组尾部开始算起（-1 指最后一个元素，-2
指倒数第二个元素，以此类推）。
arr.slice(begin,end); //返回截取的新数组例1：获取仅包含最后一个元素的子数组var arr=[1,2,3,4,5];arr.slice(-1);//[5]例2：获取不包含最后一个元素的子数组var arr=[1,2,3,4,5];arr.slice(0, -1);//[1,2,3,4]例3：获取包含 从第二个元素开始的所有元素的子数组var arr=[1,2,3,4,5];arr.slice(1);//[2,3,4,5]
▲数组删除指定区段元素
- 删除功能，第一个参数为第一项位置，第二个参数为要删除几个。
用法：array.splice(index,num)，返回值为删除内容，array为结果值。
- 插入功能，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）。
用法：array.splice(index,0,insertValue)，返回值为空数组，array值为最终结果值。
- 替换功能，第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）。
用法：array.splice(index,num,insertValue)，返回值为删除内容，array为结果值。
arr.splice(从哪里开始，删除的个数)； //返回数组，会影响原来的数组
14、基本包装类型
①js会把简单数据类型包装成复杂数据类型
var str='zhu';str.length;//等价于以下代码var temp = new String('zhu');str = temp;temp = null; //销毁临时变量，使str成为对象，再使用length
②字符串常量不会改变，如果再次赋值，只不过是指向了新的地址，新new的对象
15、字符串常用函数
▲返回指定位置的字符
charAt(index); //返回下标处字符
▲返回指定位置的ASCII
charCodeAt(index); //返回下标处ASCII，为了判断用户按了键盘哪一个按键
▲获取目标处字符
str[0]; //像是数组直接访问，兼容性不好
▲字符串拼接
str.concat(str2);
▲截取字符串
str.substr(起始位置，多长);
▲替换字符串.
str='andy';str.replace('a','b'); //b替换a，结果为'bndy',且只会替换第一个符合条件的字符
▲字符串转换为数组
str.split('分隔符')；
Web APIs(DOM BOM)
一、DOM:文档对象模型：
1、获取页面元素：
①根据ID获取标签
getElementByld(); //可以获取带有ID属性的元素对象，返回值是标签对象//使用语法var element = document.getElementByld(id); //id 是个字符串
▲打印返回元素对象，更好的查看里面的属性和方法
console.div(对象)； //打印返回元素对象，更好的查看里面的属性和方法
②根据标签名获取
getElementsByTagName(); //返回带有标签名的对象的集合，伪数组//可以用类似数组来使用它的参数getElementsByTagName(ele[0]); //第一个Li标签的内容//如果没有此标签，返回一个空数组 //当需要区分不同父元素中的相同标签时 var ol = document.getElementsByTagName('ul'); console.log(ol[0].getElementsByTagName('li'); //先找到父元素，再用父元素.d
③通过HTML5新增方法获取类选择器
element.getlementsByClassName('类名')； //根据类名寻找标签,返回对象集合
④特殊元素获取，返回特定选择器的第一个元素
document.querySelector('.类名')/('#id名') //选择出第一个指定标签
document.querySelectorAll('.类/#ID'); //选择特定选择器的所有元素，返回元素集合
⑤获取body标签
document.body; //返回body标签中的所有元素
⑥获取HTML中的所有元素
var ele = document.documentElement; //应该是一个成员对象，可以返回html中的所有元素
2、事件基础
①组成部分：事件源、事件类型、事件处理程序
事件源：事件被触发的对象事件类型：如何触发？什么事件？ 如：鼠标点击（onclick）、鼠标经过、键盘按下事件处理程序：通过函数赋值的方式完成
例子：
<button id='btn'>点我！点我</button> <script> var btn = document.getElementById('btn'); btn.onclick = function(){ alert('没毛病！'); } </script>
3、操作元素
①改变元素内容
element.innerText; //只有元素中的文本属性，需要用=来赋值修改，但是赋值的字符串不能包含html的标签 //例子 div.innerText = '2021-08-09';
element.innerHTML; //可以包含html的标签语法,是所有的内容 //例子 div.innerText = '<strong>2021</strong>-08-09';
②表单元素的可操作元素
利用DOM可以操作如下表单元素的属性
type、value（内容、值）、checked（选项是否被选中）、selected（可选属性）、disabled(禁用表单元素)
▲this指向事件函数的调用者，所以可以用this来代替元素
③样式属性操作
element.style //行内样式操作element.className //类名样式操作
style使用，如：
var div = document.querySelector('div');div.onclick = function(){ this.style.backgroundColor = 'purple'；} //修改了DIV的背景颜色
案例：循环精灵图
var lis = document . querySelectorAll('li' );for (var i = 0; i < lis.length; i++) //让索引号乘以44就是每个li的背景y坐标 index就是我们的y坐标varindex=i*44;lis[i]. style. backgroundPosition = 'O -' + index + 'px' ;
案例：表单文本框默认文字焦点问题（之前的placeholder也可实现）
对象.onfocus； //得到焦点对象.onblur; //失去焦点
className的使用，如：
当你要对一个元素修改一个类的css属性时，用className属性whis.className = '新类名';
如果想保留原先的类名：
要赋值时写成："旧类名 新类名"；
4、鼠标指令
onmouseover //鼠标经过onmouseout //鼠标离开onmousedown 按下 onmouseup抬起oncontextmenu右键 onmusemove 移动onmouseover/onmouseenter移入 onmouseout/onmouseleave 移出（建议使用mouseenter 、mouseleave,因为mouseover和mouseout在鼠标进入元素子级会触发）
5、键盘指令
6、排他思想
描述：如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环
1、所有元素清除样式
2、给当前元素变化样式
7、获得元素属性
语法：
ele.getAttribute('id/class/...属性'); //获得元素属性
▲重要：自定义属性
<div index = '自定义数值'> //再用getAttribute来获得其中的自定义数值</div>
8、移除元素属性
ele.remove.Attribute('id/class/...属性');
9、更改元素属性
ele.setAttribute('属性',要改为的值); //修改元素属性的值，是数值就不要引号，是字符串就要加
10、HTML5的自定义属性规范
<div data-index='1'> //自定义属性一般在前面加data-，来设定一个规范</div>
获取自定义属性方法：
element.dataset.index(自定义属性)
二、节点操作：
描述：一般，节点至少拥有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）三个基本属性
nodeType：值1：元素节点2：属性节点3：文本节点
1、节点类别：
类名（元素名）.parentNode； //会获得其元素的父亲节点类名（元素名）.childNodes; //获得其所有类型的孩子节点,呈一个数组形式返回类名（元素名）.children; //获得元素所有的元素节点 ▲重点、常用类名（元素名）.firstElementChild; //获得第一个子元素节点类名（元素名）.lastElementChild; //获得最后一个子元素节点类名（元素名）.firstChild; //获得第一个子节点类名（元素名）.lastChild; ///获得最后一个子节点类名（元素名）.nextSibling; //获得下一个兄弟节点（不只是元素节点）类名（元素名）.previousSibling; //获得上一个兄弟节点（不只是元素节点）类名（元素名）.nextElementSibling; //获得下一个元素兄弟节点类名（元素名）.previousElementSibling; //获得上一个元素兄弟节点
2、创建节点和添加节点
var li = document.createElement('li');var ul = document.querySelector('ul');ul.appendChild(li);
3、删除节点
父节点.removeChild('某个子节点'); //返回被删除的节点
▲阻止链接跳转：href = ‘javascript:;’ 即可
4、克隆节点
node.cloneNode(); //返回已复制的节点，参数为空即只赋值元素，如果参数为true也f值
三、事件高级
1、注册事件概述
给元素添加事件，成为注册事件或绑定事件
注册事件有两种方式，：传统方式 和 方法监听注册方式
①传统方式
特性：注册事件有唯一性，同一个元素的同一个事件只能设置一个处理函数，最后的注册处理函数会覆盖前面的处理函数
②方法监听注册方式
特性：可以实现同一元素有多个同样处理函数，执行顺序从上到下
语法：
eventTarget.addEventListener(type,listener[,useCapture]) //或者是(type,function(){函数体})，或者是函数名type:事件类型字符串，如click、mouseover(不带on)listener:事件处理函数，事件发生时，会调用该监听函数useCapture:可选参数，是一个布尔值，默认为false
2、删除事件
①传统方式
ele.onclick = null; //实现删除事件
eventTarget.removeEventListener(type,函数名)
var div.addEventListener('click',fn);function fn(){ alert(666); this.removeEventListener('click',fn)}
3、捕获阶段、冒泡阶段
当addEventListener(‘click’,fn)有第三个参数时，true代表捕获，false代表冒泡
捕获从外到里，冒泡从里到外
4、事件对象
event就是一个事件对象，写在监听函数的小括号里，当形参来看，
但它本身是自己写好的，会储存当前事件的对象，比如有鼠标、键盘、点击的对象信息
如：div.onclick = function(event){ console.log('event');}
5、对象属性
e.target //返回触发事件的元素对象e.currentTarget //返回绑定事件e.type //返回事件的类型e.preventDefault() //阻止默认事件，比如阻止点击链接被打开(或者用return false阻止默认事件)e.stopPropagation(); //停止传播冒泡，停止冒泡e.clientX //返回鼠标当前x坐标 (相对浏览器)e.clientY //返回鼠标当前y坐标 (相对浏览器)e.pageX //返回鼠标当前x坐标 (相对整个文档页面)e.pageY //返回鼠标当前y坐标 (相对整个文档页面)e.screenX //返回鼠标当前x坐标 (相对电脑屏幕)e.screenY //同上
兼容性停止冒泡解决方案：
if(e&&e.stopPropagation){
e.stopPropagation();
}
else{
window.e.cancelBubble = true;
}
96、事件委托
原理：给父节点添加监听器（事件函数），利用事件冒泡原理影响每一个子节点
7、常用鼠标事件
div.contextmenu = function(){ //阻止鼠标再document中使用右键 e.preventDefault(); //阻止事件}
div.selectstart = function(){ //阻止鼠标再document中选中文字 e.preventDefault(); //阻止事件}
ele.mousemove //s
8、常用键盘事件
onkeyup //键盘弹起,触发的优先级高，多用于配合文本框使用onkeydown //键盘弹起，字母不分大小写，触发的优先级低onkeypress //键盘弹起(不识别特殊功能按键，如：control、alt)，触发的优先级d
9、事件对象
e.keyCode; //按下的按键的ASCII值,推荐用keypress
二、BOM
定义：BOM(brower object model)，浏览器对象模型，提供独立于内容而与浏览器窗口进行交互的对象，其核心是windows（最顶级对象）
1、页面加载事件
load
作用：把页面所有元素加载完毕后再执行里面的功能
window.onload = function(){ ******；}window.addEventListener('load',function(){ } )
DOMContentLoaded
作用：是DOM加载完毕后即可执行功能
2、调整窗口大小事件
resize / onresize
window.onresize = function(){
3、定时器
window对象提供了两个非常好用的方法——定时器
当延迟时间经过，执行函数
window.setTimeout(调用函数,延迟的毫秒数); //无参时使用window.setTimeout('调用函数(参数)',延迟的毫秒数); //带参时使用
▲停止定时器
window.clearTimeout(定时器变量名称);
以上两种方法，window皆可省略
▲重复调用定时器
setInterval(); 重复调用一个函数，每过这段时间就会调用一次
window.setInterval(回调函数，[米毫秒数])；window.setInterval('调用函数(参数)',延迟的毫秒数); //带参时使用
4、location对象
location是浏览器的一个对象
常用属性：href（地址）、search（提交的数据 ）
常用方法：
location.assign('地址') // 跳转页面location.replace('地址') // 跳转页面（无法后退页面）location.reload() //重新加载页面（刷新）
5、navigation对象
6、history对象
7、PC端网页特效
①offset元素偏移量系列
定义：offset相关属性可以动态得到元素的偏移位置、大小等
●获得元素距离带有定位父元素的位置
●获得元素自身大小（高度、宽度）
●返回的数值不带单位
ele.offsetParent(); //获得元素距离带有定位父元素,如果父级没有定位泽返回body
ele.offsetTop(); //返回元素相对父级元素上边缘的偏移量
ele.offsetLeft(); //返回元素相对父级元素左边缘的偏移量
ele.offsetWidth(); //返回自身包括padding、边框、内容区的宽度，返回不带单位
ele.offsetHeight(); //返回自身包括padding、边框、内容区的高度，返回不带单位
②client元素可视区系列
和offset类似
③scroll元素滚动系列
ele.scrollTop(); //返回元素内容滚动的上偏移量
ele.scrollLeft(); //返回元素内容滚动的左偏移量
ele.scrollWidth(); //返回自身包括padding、内容区的宽度，返回不带单位
ele.scrollHeight(); //返回自身包括padding、内容区的高度，返回不带单位
如果对象是整个页面要用：
window.pageX/YOffset()
特殊事件：
addEventLister('scroll',function()31'
仂.
){});
④动画函数封装
▲核心原理：通过定时器setInterval()不断移动盒子位置
实现步骤：
1、获得当前盒子位置
2、让盒子移动一个距离
3、定时器重复移动1像素
4、结束定时器条件
5、添加定位，因为要使用ele.style.top/left
把以上步骤写成函数，形参是元素对象和其他参数等（距离，位置，时间）
定时器的变量名为 object.timer = setInterval(func(){},1000);
当多次激活定时器时，记得每次都要清除定时器
▲这样可以使不同的元素获得（新增）其自身的成员方法：定时器
⑤常见网页特效案例
⑥立即执行函数(匿名函数)
(function(形参列表){})(实参列表) //直接执行函数
⑦两种鼠标移动事件的区别
mouseover：会冒泡，经过自身或者子盒父、子都会触发
mouseenter：不会冒泡,只有经过本身元素才会触发
⑧缓动效果原理
思路：让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
更多推荐
JavaScript自制笔记
发布评论