JS

最新推荐文章于 2024-10-18 17:51:23 发布

浅吻＠

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量149

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43278089/article/details/89048335

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS篇

1.介绍：js是浏览器解释型语言，直接交给浏览器，由浏览器的解释引擎运行(脚本语言)

2.作用：实现动态效果和用户交互

3.组成：1.核心语法 2.内置对象（1.基础对象类型 2.DOM 3.BOM） 3.自定义对象

js的三种引入方法

1.元素绑定事件函数的方式

<h1 onclick="alert('点击了h1')">
    点击
</h1>

2.通过script标签的方式引入

3.通过外部引入js文件

if条件语句

if (条件1) {
    条件1成立时执行
}else if(条件2){
    条件2成立时执行
}...else if(条件n){
	条件n成立时执行
}else{
    //最终情况
}

switch(语句)

switch (变量){
    case 值1 :
        代码语句    //值匹配恒等,执行的操作
        break;     //结束匹配
    case 值2 :
        代码语句
        break;
        ...
    default :
        //匹配失败之后默认执行的操作
        break;
}

使用说明：
	1. switch 判断值,用的是恒等,要求数据类型和值都相等才能匹配成功
    2. case 用来列出所有可能的值,一旦与变量匹配恒等,就执行当前case中的语句
    3. default 表示匹配失败之后执行的操作,不用给值，一般写在末尾
    4. break,表示跳出匹配,不再向后执行.可以省略,省略之后,表示从当前匹配到的case
    向后执行所有的代码语句,直至结束
    5. case 可以共用代码语句,列出所有相关的情形,共用一组执行语句 :
    语法 :
    case 值1:
    case 值2:
    case 值3:
    ...
    case 值 :
    代码语句
    break;

while语句

while (循环条件){
    循环体
    更新循环变量
}

do - while 循环

do {
    循环体
    更新循环变量
}while(循环条件)

for循环

for(初始化循环变量;定义循环条件;更新循环变量){
    循环体
}
流程 :
1. 初始化循环变量
2. 判断循环条件
3. 循环条件成立,执行循环体
4. 更新循环变量,重复2 - 3 - 4,直至跳出

函数

function 函数名(参数列表){
    函数体;
    return 返回值;
}

匿名函数

var fn = function (){};
//定义变量保存函数地址,等同于函数名
//调用函数
fn()

匿名函数自执行

(function (形参){})(实参)

变量的作用域

1. 全局变量
在全局作用域,程序的任意地方都可以访问
2. 局部变量
在函数作用域中可以访问,出了当前函数,变量就无法
##使用
1. 函数外部定义的变量,都是全局变量,任意地方都可以访问
2. 函数内部使用var关键字定义的变量,是局部变量,只在
当前函数作用域中起作用,外界无法访问
3. 函数内部省略var关键字定义的变量,都是全局变量

JS 内置对象

分类：Array String RegExp Math Date…

1.Array 数组

Array创建:
//字面量方式
var arr = ['10',10,true]
//创建的同时初始化元素
var arr = new Array(10,20,30)
//只传入一个number值,表示指定数组长度
var arr = new Array(5)
//数组长度
arr.length

1.1遍历数组

//普通的for循环
for(var i = 0; i < arr.length; i ++){
    console.log(arr[i]);
}

for(var j = arr.length-1; j >= 0; j --){
    console.log(arr[j]);
}

//forEach  forEach方法对数组的每个元素执行一次提供的函数,是es5操作数组的一种方法。
arr.forEach(function (element){
    console.log(element);
})

1.2数组方法

方法	说明
arr.push(arg1,arg2,…)	可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
arr.pop()	数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。
shift()	删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
unshift(arg1,arg2,…)	将一个或多个参数添加到原数组开头，并返回数组的长度。
sort()	按升序排列数组项。在排序时，sort()方法会调用每个数组项的 toString()方法，然后比较得到的字符串，以确定如何排序
reverse()	反转数组项的顺序。返回转换后的数组，会改变原数组的结构。
concat()	将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。
slice()	返回从原数组中指定开始下标到结束下标之间的项组成的新数组。
splice()	splice()很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。
indexOf()和 lastIndexOf()	indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的开头（位置 0）开始向后查找。 lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的末尾开始向前查找。
map()	指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
filter()	“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件为true组成的数组。
every()	判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
some()	判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
reduce()	实现迭代数组的所有项，
toString()	将数组元素转换成字符串输出,返回一个字符串
join()	将数组中元素拼接成一个字符串并返回

sort排序

//因为sort()方法比较的也是字符串，因此会出现以下的这种情况：
1 var arr1 = ["a", "d", "c", "b"];
2 console.log(arr1.sort()); // ["a", "b", "c", "d"]
3 arr2 = [13, 24, 51, 3];
4 console.log(arr2.sort()); // [13, 24, 3, 51]
5 console.log(arr2); // [13, 24, 3, 51](元数组被改变)

//为了解决上述问题，sort()方法可以接收一个比较函数作为参数。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：
1 function compare(value1, value2) {
2 if (value1 < value2) {
3 		return -1;
4 } else if (value1 > value2) {
5 		return 1;
6 } else {
7 		return 0;
8 }
9 }
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [3, 13, 24, 51]

concat()

1 var arr = [1,3,5,7];
2 var arrCopy = arr.concat(9,[11,13]);
3 console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
4 console.log(arr); // [1, 3, 5, 7](原数组未被修改)

splice()

1 var arr = [1,3,5,7,9,11];
2 var arrRemoved = arr.splice(0,2);
3 console.log(arr); //[5, 7, 9, 11]
4 console.log(arrRemoved); //[1, 3]
5 var arrRemoved2 = arr.splice(2,0,4,6);
6 console.log(arr); // [5, 7, 4, 6, 9, 11]
7 console.log(arrRemoved2); // []
8 var arrRemoved3 = arr.splice(1,1,2,4);
9 console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
10 console.log(arrRemoved3); //[7]

map()

1 var arr = [1, 2, 3, 4, 5];
2 var arr2 = arr.map(function(item){
3 		return item*item;
4 });
5 console.log(arr2); //[1, 4, 9, 16, 25]

filter()

1 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
2 var arr2 = arr.filter(function(x, index) {
3 		return index % 3 === 0 || x >= 8;
4 }); 
5 console.log(arr2); //[1, 4, 7, 8, 9, 10]

every()

1 var arr = [1, 2, 3, 4, 5];
2 var arr2 = arr.every(function(x) {
3 		return x < 10;
4 }); 
5 console.log(arr2); //true

some()

1 var arr = [1, 2, 3, 4, 5];
2 var arr3 = arr.some(function(x) {
3 		return x < 3;
4 }); 
5 console.log(arr3); // true

reduce()

1 var values = [1,2,3,4,5];
2 var sum = values.reduceRight(function(prev, cur){
3 		return prev + cur;
4 });
5 console.log(sum); //15

String字符串

方法	说明
toUpperCase()	转换大写字母，返回新的字符串
toLowerCase（）	转换小写字母,返回新的字符串
charCodeAt(index)	获取指定位置字符的Unicode码
charAt(index)	获取指定下标位置的字符
indexOf(value[,fromIndex])	获取指定字符的下标,value,查找的字符，fromIndex，起始位置
lastIndexOf(value[,fromIndex])	返回指定字符最后一次出现的下标
substring(startIndex,endIndex)	根据指定的开始下标截取,截取至endIndex(不包含)，endIndex可以省略,省略结束下标,表示截至末尾
split(seperator)	根据指定的符号将字符分割
正则匹配
RegExp表达方式	var reg1 = /\d{3,5}/ig；i表示忽略大小写，g表示全局匹配 var reg2 = /hello/;
search(substr\|RegExp)	根据指定的字符串或正则模式,查找字符串内容,返回数组，保存匹配结果
replace(substr\|RegExp,newString)	根据正则模式查找内容,并且使用newString替换,返回替换后的字符串

Math 数学对象

属性	说明
Math.PI	Π
Math.E	自然对数
方法	说明
Math.sin(deg)	sin()
Math.cos(deg)	cos()
Math.tan(deg)	tan()
Math.sqrt(x)	对x开平方
Math.pow(x,y)	求x的y次方
Math.log(x)	求对数
Math.abs(x)	求x的绝对值
Math.max(n1,n2,n3…,n10)	求一组数据中的最大值
Math.min(n1,n2,n3)	求一组数据的最小值
Math.random()	获取[0,1)之间的随机数
Math.ceil(x)	对x向上取整
Math.floor(x)	对x向下取整,舍弃小数位
Math.round(x)	对x四舍五入取整数

Date 日期对象

方法	说明
new Date(时间格式的字符串)	获取时间对象
getTime()	获取当前日期对象距离1970-01-01 00:00:00之间的毫秒数
setTime(毫秒数)	根据指定的毫秒数,结合1970-01-01 00:00:00计算日期
getFullYear()	获取当前时间对象中的年份信息，四位年份数字
getMonth()	获取时间对象中的月份信息，返回值 0-11 对应12个月
getDate()	获取时间对象中的日期信息
getDay()	获取时间对象中的星期信息
getHours()	获取小时数
getMinutes()	获取分钟数
getSeconds()	获取秒数
getMilliseconds()	获取毫秒数

BOM

浏览器对象模型，提供操作浏览器相关属性和方法，学习BOM主要围绕JS顶层对象window，学习window对象的属性和方法

window对象跟随浏览器运行自动产生，每个窗口都对应有自己的window对象，window对象可以省略，直接使用相关属性和方法

１.window对象

跟随网页运行自动创建，表示当前窗口对象，所有的全局变量和函数，都是window对象的属性和方法，对话框都是window对象的方法：

１.　alert（“提示文本”）

２.　prompt（“提示文本”［，value］）带有输入框的弹窗

３.　confirm（“提示文本”）点击确定，返回true，取消返回false

DOM

文档对象模型，提供操作文档的属性和方法，DOM的核心对象document（文档对象）是window的属性

eg：

document.write()

window.document.write()

BOM - window对象

方法：
1.setInterval(function,time) 周期性定时器
参数：function：要执行的代码
      time：表示时间间隔，默认以毫秒为单位
返回值：定时器的id
清除周期定时器：clearInterval(timeID)

2.setTimeout(function,delay)  超时就调用
参数：function：需要执行的代码
      delay：延迟执行的时长，默认以毫秒为单位
返回值：定时器ID
关闭超时调用：clearTimeout(timeID)

属性：
window对象中大部分属性，又都是对象类型，包含自身的属性和方法

1.screen对象
属性：
1. width/height : 屏幕宽高
2. availWidth/availHeight : 屏幕实际可用的宽高
    
2.history对象
保存当前窗口访问过的url
属性：
1.length : 当前窗口访问过的url数量,至少为1
方法：
1. back() : 回退上一条url (浏览器后退按钮)
2. forward() : 访问下一条url (前进按钮)
3. go(num) : 跳转至指定的url,通过参数控制,参数为整数值,可正可负,正值表示前进,
            负值表示后退
        
3.location对象
保存地址栏信息（url）
属性：
1.href：保存当前窗口的url，如果赋值，相当于跳转页面
方法：
1.reload（[param]）: 重新载入页面（刷新）
参数：选填，可选true / false 
	 true：忽略缓存，从服务器重新加载
     false：默认值，从缓存中加载
        
4.navigator 对象
保存浏览器相关的信息（版本，内核，代理）

DOM - document对象

文档对象模型,提供一系列操作页面的属性和方法.该模型中顶层对象是document对象.其属性和方法由W3C国际组织进行规范和推广

节点和节点树

网页在加载过程中，会自动生成节点树（DOM树），节点对象封装网页中的所有内容（标签，文本，标签属性，注释…），节点树中保存所有的节点对象，表示各节点之间的层级关系

1.节点分类：

元素节点 ——> 文档中的标签
文本节点 ——> 标签中的文本内容
属性节点 ——> 标签属性

2.节点操作

获取节点对象
修改节点
删除节点
增加节点

3.获取元素节点

document.getElementsByTagName(’’); 　根据标签获取元素节点，返回元素节点数组
document.getElementById(’’); 　根据ID属性值获取元素，返回元素节点
document.getElementsByClassName(’’);　根据class属性值获取元素，返回元素节点数组
document.getElementsByName(’’);　　根据表单控件name属性值获取元素，返回元素节点数组

封装函数,实现获取元素
		function $(tagName){
			var elem = document.getElementsByTagName(tagName)[0];
			return elem;
		}

4.获取元素节点属性

1. 获取指定属性的值
getAttribute('attrName') 	根据传入的属性名，获取对应的属性值
2.为元素节点设置属性
setAttribute("attrName","value");
3. 移除指定属性
removeAttribute("attrName");
4. 标签属性就是元素节点对象的属性，可以使用点语法访问
如：
	获取：
    	elem.id  //获取id属性值
        elem.className  //获取class属性值
    设置：
    	elem.id = 'd1';
        elem.className = 'c1';
    移除：
    	elem.id = null

5.给元素节点添加样式(添加css样式)

1. 通过id/class选择器,为元素添加样式
eg: 给p标签一个定义好的class样式c1
	p.className = 'c1'

2.通过style标签属性，操作元素样式
	elem.style.CSS属性名 = "";
	
eg: CSS属性名中出现的连接符-,在JS中一律改成驼峰标识
    h1.style.backgroundColor = 'red';
    h1.style.fontSize = '20px'

6.给元素节点添加内容

1. 属性 : innerHTML
    设置或读取标签内容,可以识别HTML标签
2. 属性 : innerText
    设置或读取标签内容,不能识别HTML标签
3. 属性 : value
    获取表单控件的值

7.节点的层次属性

1.parentNode   获取父节点(只有一个)
2.childNodes   获取所有子节点(包含文本节点:文本内容,换行)
3.children	 获取所有直接子元素(只包含元素节点,不含文本节点)
4.nextSibling   属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）
5.nextElementSibling  属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）
6.previousSibling  属性返回元素节点的前一个兄弟节点（包括文本节点、注释节点，没有返回null
7.previousElementSibling  属性只返回元素节点的前一个兄弟元素节点（不包括文本节点、注释节点）,没有返回null
8.attributes  获取元素节点所有的属性节点

8.节点操作（创建，增加，删除）

1.创建节点：
   1.创建元素节点：
    document.createElement('标签名')
   2.创建文本节点
    document.createTextNode('文本内容')
   3.创建属性节点 
	div.id = 'd1';
    
2.添加节点
parentNode.appendChild(elem);
parentNode.insertBefore(newElem,oldELem);

3.移除
parentNode.removeChild(elem);

9.事件

事件：用户行为激发的操作
事件处理函数：系统定义好的，针对用户不同的行为提供的函数。事件函数由用户行为触发，浏览器自动调用，我们只需要实现函数，定义事件发生后需要执行的操作

分类：
所有事件函数都以on为前缀
1.鼠标事件函数：
	onclick		鼠标单击
    ondblclick		鼠标双击
    onmouseover		鼠标移入元素时触发
    onmousemove		鼠标在元素中移动时不断触发
    onmouseout		鼠标移除元素时触发

2.文档和元素加载完毕后触发
	onload

3.表单控件状态改变事件
	onfocus  	元素获取焦点时触发
    onblur		元素失去焦点时触发
    onchange	元素内容发生改变，并且失去焦点之后触发
    oninput		元素正在输入，value值发生变化时触发
    onsubmit	点击提交按钮时触发
    
4.键盘事件
	onkeydown	键盘按键被按下
    onkeypress	按键按压
    onkeyup		按键抬起

10.事件绑定方式

1. 元素内联绑定
eg:
    <button onclick="点击事件触发的操作"></button>

2. JS中动态绑定事件
eg:
    h1.onclick = function (){};

3. W3C标准的事件监听函数
eg:
    h1.addEventListener("click",function[,false]);
    参数：1.省略 "on" 前缀的事件函数名
    	 2.事件触发后要执行的操作
     	 3.可选参数，设置事件传递机制，默认为false

11.this

this 指函数或方法的调用者，全局函数是window对象的方法，全局函数中的this都表示window对象

12.事件对象

定义：伴随事件触发自动产生，包含与当前事件相关的信息
获取事件对象：浏览器会将事件对象以参数的形式传给事件处理函数，我们只负责接受
事件对象常用属性：不同的事件类型，事件对象中包含的信息（属性）也不相同

eg:
    div.onclick = function (evt){
      	console.log(evt);
        console.log(evt.target)
    };
    
     事件对象常用属性
     1.evt.target	触发事件的节点对象
    
     2.鼠标事件对象
        1.offsetX  offsetY
        获取鼠标在元素中的坐标位置,以元素左上角为(0,0)点,向右,向下为正方向
        2.clientX clientY
        获取鼠标在网页中的坐标位置
        3.screenX screenY
        获取鼠标在屏幕中的坐标信息

     3.键盘事件对象
    	1. onkeydown 事件中的which属性
        which属性 :获取当前按键的编码值 : 键盘上所有按键都对应有自己的码值(键码),数字		和字母的编码值与ASC对照一致,不区分大小写,统一返回大写字母的码值
    	2. onkeypress 
        which属性：返回按键字符对应的ASC码，区分大小写
        key属性：返回当前键位表示的字符

13.事件传递机制

事件传递：当页面上某一个元素被点击,相关的元素都能接收到事件,可以选择是否处理
事件传递机制：实际上事件传递给相关元素的顺序

默认：从触发元素开始逐级向外传递,冒泡传递

特殊：捕获传递，事件发生后，从外向里逐级传递，IE浏览器不支持捕获，默认机制为冒泡
阻止事件传递：通过事件对象阻止事件向其他元素传递

evt.stopPropagation();