【笔记】javascript学习

最新推荐文章于 2024-09-30 18:55:14 发布

sailven

最新推荐文章于 2024-09-30 18:55:14 发布

阅读量174

点赞数

分类专栏： js学习笔记文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/sailven/article/details/127828539

版权

js学习同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

笔记

6 篇文章 0 订阅

订阅专栏

Js的组成

ECMAscript（JavaScript语法）、DOM（页面文档对象模型）、BOM（浏览器对象模型）

JS 有3种书写位置，分别为行内、内嵌和外部

①行内在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
②内嵌 <script> alert(‘ ’); </script>
③外部 <script src=”xxx.js”></script>

常见输出语句

Alert(msg)（警示框）
console.log(msg)（控制台输出）
prompt(info)（提供输入框）

数据类型

Number(没有int！！！)，string,boolean,Null,Undefind(未赋值的变量为该值),object

Number

在JS中八进制前面加0，十六进制前面加 0x
三个特殊值：
在这里插入图片描述
isNaN() 返回一个Boolean

转义符

\n换行 \ \’ \” \t（tab） \b（blank）

字符串长度 String.length

alert(‘100’ + ‘100’); // 100100

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。
console.log(true + 1); // 2
console.log(false + 1); // 1

数据类型转换
转换为字符串
在这里插入图片描述

转换为数字型
在这里插入图片描述

转换为布尔值
Boolean(‘ ’) 、null、undefined、NaN这些会被转换为false

逻辑中断
算到哪一个可以确定结果，就输出哪个结果，后面的不运行了
在这里插入图片描述

三元表达式
表达式一？表达式二：表达式三
如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值

switch

switch( 表达式 ){ 
case value1: 
// 表达式 等于 value1 时要执行的代码 
break; 
case value2: 
// 表达式 等于 value2 时要执行的代码 
break; 
default: 
// 表达式 不等于任何一个 value 时要执行的代码 
}

预解析 将所有的var和function提到当前作用域最前面先解释,var先赋值undefined

对象

创建方式①字面量 var n = {name:jack,age:18};
属性调用方法：对象.属性名/对象[‘属性名’]
②new object var n = new Object();n.name = ‘mike’;
③构造函数构造函数约定首字母大写
在这里插入图片描述

遍历对象属性

for (var k in obj（对象）) { 
console.log(k); // 这里的 k 是属性名 
console.log(obj[k]); // 这里的 obj[k] 是属性值 
}

JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象
JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

Math对象

random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1
得到min到max间随机整数，包含两端

function getRandom(min, max) { 
return Math.floor(Math.random() * (max - min + 1)) + min; 
}

Date（需要new）

在这里插入图片描述获得时间戳 var date = + new Date();

数组对象

instanceof 运算符，可以判断一个对象是否属于某种类型
Arr instanceof Array //true
Array.isArray(arr) //判断是否为数组

arr.sort(function(a, b) { 
return b - a; // 降a序 
// return a - b; // 升序 
});

数字转化为字符串 arr.toString()（默认逗号分隔）或者arr.join(‘分隔符’)
在这里插入图片描述

字符串对象

字符串是不可变的，变的是地址
在这里插入图片描述和数组中找元素类似

根据位置找字符
在这里插入图片描述

Web API

获取元素（文档中所有标签都是元素）
①通过id
document.getElementById('id');
console.dir()打印获取的元素对象

②通过标签名
document.getElementsByTagName('标签名');
得到元素对象是动态的

③通过h5新方法(最常用！)
.ByClassNamee(‘类名’)；
.querySelector(‘选择器’); (最常用！)
.querySelectorAll(‘选择器’);
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:
document.querySelector('#nav');

④特殊元素获取
.body .documentElement

改变元素内容

Element.innerText（从起始到终止的内容, 去除标签，空格和换行也会去掉）
Element.innerHTML（起始到终止的全部内容，包括标签，保留空格和换行）

改变元素属性

Element.属性名 = ‘新属性值’;

注意：修改样式时，应该 Element.style.属性名 = ‘新属性值’;

要修改多个css样式时，可以直接修改类名
This.className = ‘目标类名’;

获取属性

	系统定义	自定义
获取属性	element.属性	element.getAttribute(‘属性’)
设置属性值	element.属性 = ‘值’	element.setAttribute(‘属性’, ‘值’)
移除属性		element.removeAttribute(‘属性’);

节点

节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性

node.parentNode 返回最近的一个父节点
parentNode.childNodes 子节点的集合，但是会返回所有子节点！（包括非元素节点
parentNode.children 它只返回子元素节点，其余节点不返回

如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]

兄弟节点

node.nextSibling 当前元素的下一个兄弟元素节点，找不到则返回null。包含所有的节点。
node.previousSibling 当前元素上一个兄弟元素节点，找不到则返回null。包含所有的节点。

寻找下一个兄弟元素节点，只找type为1的

function getNextElementSibling(element) { 
var el = element; 
while (el = el.nextSibling) { 
if (el.nodeType === 1) { 
return el; 
} 
} 
return null; 
}

创建节点
document.createElement('tagName')
删除节点
node.removeChild(child)
克隆节点
node.cloneNode() 括号内为true是深拷贝，false为浅拷贝，

事件高级操作

监听事件

eventTarget.addEventListener(type, listener[, useCapture])
type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on，要加引号‘’
listener：事件处理函数，事件发生时，会调用该监听函数，不是匿名函数的话可以不用加小括号调用

eventTarget.attachEvent(eventNameWithOn, callback) （非标准不推荐使用）

解绑事件

①eventTarget.onclick = null;

② eventTarget.removeEventListener(type, listener[, useCapture]);
eventTarget.detachEvent(eventNameWithOn, callback)（不推荐使用）

解绑事件无法解绑匿名函数！

事件对象

eventTarget.addEventListener(‘click’, function(event) {}）
包含事件的各种参数、属性

e.target 返回触发事件对象 this 返回绑定事件对象
e.preventDefault(); 阻止默认事件，如页面跳转、提交按钮提交数据
e.stopPropagation(); 阻止冒泡，暂时不需要事件时使用

利用冒泡原理，可以进行事件委派
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

例如：对于ul中的每个li，都想要拥有点击变色的功能，不用获取全部的li，在父元素ul添加事件监听，然后用e.target.style.backgroundColor进行变色操作。
在这里插入图片描述

BOM

BOM 比 DOM 更大，它包含 DOM

①它是 JS 访问浏览器窗口的一个接口。
②它是一个全局对象。
定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法
前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。
定义的变量也属于window的属性，例如console.log(num)实际上是console.log(window.num)

window.onload = function(){}或者
window.addEventListener("load",function(){});

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，
再去执行处理函数。

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
window.innerWidth 窗口当前宽度

定时器

(windows.)setTimeout(回调函数,[延迟毫秒数])
可以起名字区分 var time1 = setTimeout(callback,3000);

回调函数

而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。
简单理解：回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数

清除定时器

（window.）clearTimeout(定时器名字)

(window.)setInterval(回调函数, [间隔的毫秒数]);
(window.)clearInterval(intervalID);

同步和异步

JS 的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型:
1、普通事件，如 click、resize 等
2、资源加载，如 load、error 等
3、定时器，包括 setInterval、setTimeout 等
异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。
在这里插入图片描述