本文深入探讨JavaScript的基础知识，包括new关键字的工作原理、内置对象的使用、DOM与BOM的操作方法，以及事件处理技巧等内容。
JavaScript学习（二）
文章目录
知识梳理
new关键字执行过程
1.在内存中创建一个新的空对象。
2.让this指向这个新的空对象
3.执行构造函数里面的代码，给这个新对象添加属性和方法。
4.返回这个新对象（所以构造函数里面不需要return）
遍历对象
1.遍历对象属性
for…in语句用于对数组或者对象的属性进行循环操作
for(var k in obj) {
console.log(k); // 得到属性名
console.log(obj[k]); // 得到属性值
}
内置对象
指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或最基本而必要的功能（属性和方法）
常用内置对象
Math数学对象
不是构造函数，所以我们不需要new来调用而是直接使用里面的属性和方法即可
例如：
console.log(Math.PI); //圆周率
console.log(Math.max(1,10,-1)); //10
console.log(Math.abs(-1)); //1
console.log(Math.abs('-1'));//1 隐式转换 会把字符型转化为数字型
console.log(Math.round(1.1)); //1
console.log(Math.round(1.9)); //2
//随机数 得到两个数之间的随机整数
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
日期对象（Date）
注意Date为一个构造函数，必须使用new 来调用创建我们的日期对象
var date=new Date(); //如果没有参数 返回当前系统的当前时间
var date=new Date('2022-1-1 8:8:8');
console.log(date.getMonth); // 比实际月份小1月 需手动加1
var date = +new Date(); //返回总毫秒数
console.log(date.now()); //也可以返回总的毫秒数(h5新增)
实例
倒计时（使用时间戳）
function countDown(time) {
var nowTime = +new Date();
var inputTime = +new Date(time);
var times = (inputTime - nowTime) / 1000;
var d = parseInt(times / 60 / 60 / 24);
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
数组对象
一 、添加删除数组元素的方法
push
(1) push可以给数组追加新的元素
(2) push()直接写数组元素就可以了
(3) push完毕之后，返回的结果是 新数组长度
(4) 原数组会放生变化
unshift
(1)unshift 可以给数组前面追加新的元素
(2)其他和push相同
pop
(1) pop可以删除数组的最后一个元素 注：一次只能删除一个元素
(2) pop()没有参数
(3) pop完毕之后，返回的结果是 删除的那个元素
(4) 原数组会放生变化
shift
(1) pop可以删除数组的最后一个元素 注：一次只能删除一个元素
(2)其他和pop相同
二、数组排序
1.反转数组
reverse()
2.数组排序sort
使用方法：
arr.sort(function(a, b) {
return a - b; //升序排序
//return b-a; 降序排序
})
三、数组索引
indexOf (数组元素)
(1) 作用是返回数组元素的第一个满足条件的索引号
(2)如果在该数组没有找到这个元素则返回-1
lastindexOf
(1) 从后面开始查找
(2) 其他同indexOf
实例
数组去重
function unique(arr) {
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i]);
}
}
return newArr;
}
四、数组转化为字符串
1.toString
var arr[1,2,3];
console.log(arr.toString());//1,2,3
2.join(分隔符)
console.log(arr.join());
console.log(arr.join('-')); // 1-2-3
字符串对象
1.indexOf
2.charAt(index)
返回指定位置的字符
3.charCodeAt(index)
获取指定位置字符的ASCII码值
4.str[indedx]
HTML5,IE8+ 支持和charAt等效
5.concat
用于连接两个或多个字符串 拼接字符串
6.substr(start,length)
(1)作用截取字符串
(2)从start位置开始(索引号) ， length 取得个数
7.slice(start,end)
(1)作用截取字符串
(2)从start位置开始,截取到end位置，end取不到 (都为索引号)
8.substring(start,end)
(1) 基本和slice相同 但是不接受负值
9.replace(‘被替换字符’ , ‘替换为的字符’)
(1) 作用替换字符
(2)只会替换第一个字符
10.split(‘分隔符’)
(1)作用字符转换为数组
11.toUpperCase()
(1)作用转化为大写
12.toLowerperCase()
(1)作用转化为小写
实例
1.求某个字符出现的位置以及次数
var str = 'asdovnsodjodcovodso';
var index = str.indexOf('o');
var num = 0;
while (index != -1) {
console.log(index);
num++;
index = str.indexOf('o', index + 1);
}
console.log('o出现了' + num + '次');
2.统计出现次数最多的字符
var str = 'abcoefoxyozzop';
var obj = {};
for (var i = 0; i < str.length; i++) {
chars = str.charAt(i);
if (obj[chars]) {
obj[chars]++;
} else {
obj[chars] = 1;
}
}
var max = 0;
var maxCh = '';
for (var k in obj) {
if (obj[k] > max) {
max = obj[k];
maxCh = k;
}
}
console.log('最多的字符是' + maxCh + '出现了' + max + '次');
DOM
DOM简介
1.什么是DOM
文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
DOM树
- 文档 ：一个页面就是一个文档，DOM中使用document表示
- 元素 ：页面中的所有标签都是元素 ，DOM中使用 elements 表示
- 节点 ：网页中的所有内容都是节点(标签、属性、文本、注释等) ，DOM中使用node表示
获得元素方法
1.document.getElementById()
getElementById是Document上的一个方法，用元素Id把单个元素整块抠出来（包括其孩子）
2.**document.getElementsByTagName() element.getElementsByTagName()
**
通过标签名把元素及其孩子抠出来（包括其孩子）
3.document.getElementsByClassName() element.getElementsByClassName()
通过元素类名把元素整块抠出（包括其孩子）
4.document.querySelector() element.querySelector()
通过类名，id名，标签名把单个元素整块抠出来
5.document.querySelectorAll() element.querySelectorAll()
通过类名，id名，标签名把多个元素整块抠出来
html，body的获取方法
console.log(document.body);
console.log(document.documentElement);
元素节点操作
父节点
node.parentNode
(1)parentNode属性返回当前节点的最近父节点
(2) 如果没有父节点，返回null
子节点
1.node.childNodes
- 返回元素的所有子节点（包括元素节点，文本节点）
2.body.children 只返回元素的子节点中的元素节点不是文本节点，也不是属性节点
(常用)
获得第一个子节点和最后一个子节点
1.firstChild lastChild
元素节点和***文本节点***
2.firstElementChild lastElementChild
元素节点（不兼容旧浏览器
3.node.children[0] node.children[node.children.length - 1]
元素节点 (常用)
兄弟节点
1.node.nextSibling node.previousSibling
下一个兄弟节点/上一个兄弟节点 包含元素节点或者 文本节点等等
2.node.nextElementSibling node.previousElementSibling
元素节点（不兼容旧浏览器）
创建、追加、删除节点
1.document.createElement(“tagName”)
创建节点（标签）
2.node.appendChild(child)
把child追加到node子节点列表末尾
3.node.insertBefore(newNode, referenceNode)
- insertedNode 被插入节点(newNode)
- parentNode 新插入节点的父节点
- newNode 用于插入的节点
- referenceNode newNode 将要插在这个节点之前
如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾。、
4.node.removeChild(child)
删除child，返回值为被删除的child节点
复制节点
node.cloneNode()
括号内可传入false, true，不传默认为浅拷贝，false为浅拷贝，true为深拷贝，浅拷贝就是只克隆标签，抛弃内容，深拷贝就是克隆标签以及内层的所有东西。返回值就是克隆出来的节点。
注册事件两种方法
1.传统方式注册事件
- on+事件名=“fuctionName()”
- 注：一个元素只能绑定一个事件，多写相当于最后注册的事件绑定覆盖掉前面的，前面的注册事件全部失效
btns.onclick = function() {
alert('hi');
}
btns.onclick = function() {
alert('hao a u');
}
结果为hao a u
2.addEventListener() 事件侦听注册事件
(1) 里面的事件类型是字符串 必定加引号 而且不带on
(2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
btn.addEventListener('click', function() {
alert(22);
})
btn.addEventListener('click', function() {
alert(33);
})
结果先弹出22再弹出33
删除事件
- 传统方式删除事件
div.onclick = null;
2.- eventTarget.removeEventListener(type, listener[, useCapture])
div.addEventListener('click', fn) // 里面的fn 不需要调用加小括号
function fn() {
alert(22);
div.removeEventListener('click', fn);
}
3.- eventTarget.detachEvent(eventNameWithOn, callback)
div.attachEvent('onclick', fn1);
function fn1() {
alert(33);
div.detachEvent('onclick', fn1);
}
事件对象
- event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
- 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
- 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
- 这个事件对象我们可以自己命名 比如 event 、 evt、 e
- 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event;
DOM事件流(冒泡、捕获)
DOM事件流有三个阶段：
- 事件捕获阶段：捕获阶段是从外到内传播即从根节点向最内侧节点传播，与我们上面例子中讲到的刚好相反
- 事件目标阶段：目标阶段就是事件到达我们具体点击的那个元素时的阶段，在上面的案例中就是粉圆
- 事件冒泡阶段：冒泡阶段就是我们上面案例中将的一样，从内向外传播直到根节点结束
捕获阶段
冒泡阶段
总示意图
阻止默认行为（事件）
让链接不跳转 或者让提交按钮不提交
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
e.returnValue;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
return false;
}
阻止事件冒泡
阻止冒泡 dom 推荐的标准 stopPropagation()
son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation();
);
事件委托（事件代理，事件委派）
事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
正则表达式
正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。
- new RegExp("规则", "匹配模式")
匹配模式 传入i为忽略字母大小写，传入g为全局匹配，就是从头到尾找一遍
简便的字面量写法: var reg = /规则/匹配模式;
- 限定符（限定字符的出现次数）：
? 0次或1次 /a?/
* 0次或多次 /a*/
+ >= 1次 /a+/
{ } 限定次数 /a{0,9}/ /a{9,}/ /a{,9}/
| [ ] 或 /a|b/ /(ab)|(bc)/ /[abc]/ /[a-z]/ /[0-9]/
^ 除了（方括号里的^） /[^0-9]/
元字符
\d 数字字符 /\d/
\w 英文字符下划线
\s Tab字符和换行符
. 除了换行符的任意字符 （ \. 用转义字符表示. \\用转义字符表示\ ）
^a 以a开头 /^ac$/
a$ 以a结尾
\bword\b 匹配单词word /\bwhat\b/
BOM
BOM(Browser Object Model) 即浏览器对象模型，他提供独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分
重点问题梳理
注册事件兼容性处理方法
function addEventListener(element, eventName, fn) {
//判断浏览器是否支持 addEventListener 方法
if(element.addEventListener) {
element.addEventListener(eventName, fn);
} else if(element.attachEvent) {
element.attachEvent('on'+eventName, fn);
} else {
//相当于element.onclick = fn;
element['on' + eventName] = fn;
}
}
删除事件兼容性处理方法
function removeEventListener(element, eventName, fn) {
//判断浏览器是否支持 removeEventListener 方法
if(element.removeEventListener) {
element.removeEventListener(eventName, fn);
} else if(element.detachEvent) {
element.detachEvent('on'+eventName, fn);
} else {
element['on' + eventName] = null;
}
}
获取兄弟节点的兼容性处理方法
function getNextElementSibling(element) {
var el = element;
while (el =el.nextSibling) {
if (el.nodeType === 1) {
return e1;
}
}
return null;
}
this问题
解析器在调用函数，每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this
this指向的是一个对象。
一般情况下this的最终指向的是那个调用它的对象
1.全局作用域或者普通函数中this指向全局变量window
2.方法调用中谁调用this指向谁
3.构造函数中this指向构造函数的实例
this和e.target区别
e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）
区别 ： e.target 点击了那个元素，就返回那个元素， this 那个元素绑定了这个点击事件，那么就返回谁
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
