- 博客(38)
- 收藏
- 关注
RSS订阅原创 JS学习笔记---17 PC端网页特效-5、mouseenter 和 mouseover 的区别
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发之所以这样，就是因为mouseenter不会冒泡跟mouseenter 搭配，鼠标离开 mouseleave 同样也不会冒泡
2021-08-20 02:48:14
162
原创 JS学习笔记---17 PC端网页特效-4、元素滚动 scroll 系列
4、元素滚动 scroll 系列4.1、元素 scroll 系列属性scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。scroll 系列属性作用element.scrollTop返回被卷去的上侧距离，返回数值不带单位element.scrollLeft返回被卷去的左侧距离，返回数值不带单位element.scrollWidth返回自身实际的宽度（实际内容，内容超出也计算在内），不含边框，包含paddin
2021-08-20 02:47:19
200
原创 JS学习笔记---17 PC端网页特效-3、立即执行函数
3、立即执行函数语法：(function(){})() 或 (function(){}())也可以有变量 后面一个括号相当于调用(function(a){})(1) 或 (function(a){}(1))主要作用：创建一个独立的作用域。（所有的变量都是局部变量，不会有命名冲突的情况）// 1.立即执行函数: 不需要调用，立马能够自己执行的函数function fn() { console.log(1);}fn();// 2. 写法 也可以传递参数进来// 1.(fun
2021-08-20 02:45:35
153
原创 JS学习笔记---17 PC端网页特效-2、元素可视区 client 系列
2、元素可视区 client 系列client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。client 系列属性作用element.clientTop返回元素上边框的大小element.clientLeft返回元素左边框的大小element.clientWidth返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位element
2021-08-20 02:44:16
77
原创 JS学习笔记---17 PC端网页特效-1、元素偏移量 offset 系列
PC端 网页特效1、元素偏移量 offset 系列1.1、offset 概述offset 翻译过来就是偏移量，我们是用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位offset 系列常用属性：offset 系列属性作用element.offsetParent返回作为该元素带有定位的父级元素，如果父级都没有定位，则返回bodyelement.offs
2021-08-20 02:42:42
94
原创 JS学习笔记---16 BOM-7、history 对象
7、history 对象window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。history 对象方法作用back()后退功能forword()前进功能go(参数)前进后退功能 参数如果是 1 ，前进一个页面；如果是 -1，后退一个页面...
2021-08-20 02:37:59
140
原创 JS学习笔记---16 BOM-6、navigator 对象
6、navigator 对象navigator 对象包含有关浏览器的信息，他有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。下面前端代码可以判断用户那个终端打开的页面内，实现跳转...
2021-08-20 02:36:35
69
原创 JS学习笔记---16 BOM-5、location 对象
5、location 对象5.1、什么是 location 对象window 对象给我们提供了一个 location 属性 用于获取或设置窗体的URL，并且可以用于解析 URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。5.2、URL统一资源定位符URL 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。URL 的一般语法格式为：protocol://host[:port]/path/[
2021-08-20 02:34:17
94
原创 JS学习笔记---16 BOM-3、定时器
3、定时器3.1、两种定时器window 对象给我们提供了 2 个非常好用的方法-定时器。setTimeout()setInterval()3.2、setTimeout() 定时器window.setTimeout(调用函数，[延迟的毫秒数])；setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。注意：window 可以省略这个调用函数可以直接写函数，或者写函数名 或者采取字符串‘ 函数名() ’ 三种形式，第三种不推荐。延迟的毫秒数省略默认
2021-08-19 03:00:36
106
原创 JS学习笔记---16 BOM-2、window 对象的常见事件
2、window 对象的常见事件2.1、窗口加载事件window.onload = function(){}或者window.addEventListener(“load”,function(){});window.onload 是窗口（页面）加载事件，当文件内容全部加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。注意：1、有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
2021-08-19 02:58:30
90
原创 JS学习笔记---16 BOM-1、BOM 概述
BOM1、BOM 概述1、什么是 BOMBOM 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。1.2、BOM 的构成BOM 比 DOM 更大，它包含 DOM。window 对象是浏览器的顶级对象，它具有双重角色。1、它是 JS 访问浏览器窗口的一个接口2、它是一个全局变量。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。在调用的时候可以省略 w
2021-08-19 02:57:37
121
原创 JS学习笔记---15 事件高级-8、常用的键盘事件
8、常用的键盘事件8.1、常用的键盘事件事件除了使用鼠标触发，还可以使用键盘触发。键盘事件触发条件onkeyup某个键盘按键被松开时触发onkeydown某个键盘按键被按下时触发onkeypress某个键盘按键被按下时触发 但是它不识别功能键 比如： ctrl、shift、箭头等注意：如果使用 addEventListener 不需要加 ononkeypress 和前面2 个的区别是，它不能识别功能键三个事件的执行顺序是：keydown -->
2021-08-19 02:55:47
107
原创 JS学习笔记---15 事件高级-7、常用的鼠标事件
7、常用的鼠标事件7.1、常用的鼠标事件1、禁止鼠标右键菜单 contextmenucontextmenu 主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。document.addEventListener(‘contextmenu’,function(e){ e.preventDefault();})2、禁止选中文字 selectstartselectstartdocument.addEventListener(‘selectstart’, function(
2021-08-19 02:53:51
199
原创 JS学习笔记---15 事件高级-6、事件委托（代理、委派）
6、事件委托（代理、委派）事件委托事件委托也称为事件代理，在 jQuery 例面称为事件委派。事件委托的原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。以上案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器。事件委托的作用我们只操作了一次 DOM，提高了程序的性能。...
2021-08-19 02:52:28
128
原创 JS学习笔记---15 事件高级-5、阻止事件冒泡
5、阻止事件冒泡5.1、阻止事件冒泡的两种方式事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到 DOM 最顶层节点。阻止事件冒泡标准写法：利用事件对象 stopPropagation() 方法非标准写法：利用 cancelBubble属性var son = document.querySelector('.son');son.addEventListener('click', function(e) { alert('son'); e.stopPropagat
2021-08-19 02:51:51
99
原创 JS学习笔记---15 事件高级-4、事件对象
4、事件对象4.1、什么是事件对象eventTarget.onclick = function(event){}eventTarget.addEventListener(‘click’,function(event){})//这个 event 就是事件对象，我们还喜欢的写成 e 或 evt官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标位置、鼠标按钮的状态简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性
2021-08-19 02:51:06
97
原创 JS学习笔记---15 事件高级-3、DOM 事件流
3、DOM 事件流事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。比如我们给一个div 注册了点击事件：DOM 事件流分为3个阶段：1、捕获阶段2、当前目标阶段3、冒泡阶段事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到 DOM 最顶层节点的过程。事件捕获：由DOM 最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。注意：1、JS 代码中只能执行捕获或者冒泡其中的一个阶段。2、onclick 和
2021-08-19 02:49:21
79
原创 JS学习笔记---15 事件高级-2、删除事件（解绑事件）
2、删除事件（解绑事件）2.1、删除事件的方式1、传统方式eventTarget.onclick = null；divs[0].onclick = function() { alert(11); // 1. 传统方式删除事件 divs[0].onclick = null; }2、方法监听注册方式（1）eventTarget.removeEventListener(type，listener[, useCapture]);不能使
2021-08-19 02:46:45
118
原创 JS学习笔记---15 事件高级-1、注册事件
事件高级1、注册事件（绑定事件）1.1、注册事件概述给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式 和 方法监听注册方式传统注册方法利用 on 开头的事件 onclick< button οnclick=“alert('hi~)”></ button>btn.onclick = function(){}特点：注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式W3C
2021-08-17 02:45:32
286
原创 JS学习笔记---14 DOM-5、节点操作
5、节点操作5.1、为什么学节点操作获取元素通常使用两种方式：1、利用 DOM 提供的方法获取元素document.getElementById()document.getElementByTagName()document.querySelector() 等逻辑性不强、繁琐2、利用节点层次关系获取元素利用父子兄节点关系获取元素逻辑性强，但是兼容性较差这两种方式都可以获取元素节点，我们后面都会用到，但是节点操作更简单5.2、节点概述页面中所有内容都是节点（标签、属性、文本、
2021-08-17 02:40:10
115
原创 JS学习笔记---14 DOM-4、操作元素
4、操作元素4.1、改变元素内容element.innerText = 值从起始位置到终止为止的内容，但它去除 html 标签，同时空格和换行符也会去掉//当我们点击了按钮，div里面的文字会发生变化//1、获取元素var btn = document.querySelector('button');var div = document.querySelector('div');//2、注册事件btn.onclick = function () { div.innerText
2021-08-17 02:34:37
138
原创 JS学习笔记---14 DOM-3、事件基础
3、事件基础3.1、事件概述JS 是我们有能力创建动态页面，而事件是可以被 JS 侦测到的行为。简单理解： 触发—响应机制网页中的每个元素都可以产生某些可以触发 JS 的时间，例如，我们可以再用户点击某按钮时产生一个事件，然后去执行某些操作。3.2、事件三要素事件由三部分组成：事件源、事件类型、事件处理程序事件源：事件被触发的对象事件类型 ：如何触发 什么事件 比如：鼠标点击（onclick）、鼠标经过、鼠标按下事件处理程序：通过一个函数赋值的方式完成<body>
2021-08-17 02:24:22
165
原创 JS学习笔记---14 DOM-2、获取元素
2、获取元素2.1、如何获取页面元素2.2、根据ID 获取使用 getElementById() 方法可以获取带有 ID 的元素对象。document.getElementById(‘ID号’);参数 id 是一个字符串返回的是一个元素对象//1、因为我们文档页面从上往下加载，所以先得有标签，所以我们script写到标签下面//2、参数 id 是大小写敏感的字符串//3、返回的是一个元素对象var timer = document.getElementById('time');
2021-08-17 02:23:30
116
原创 JS学习笔记---14 DOM-1、什么是DOM
DOM1、什么是DOM文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C已经定义了一系列的 DOM 接口，通过这些DOM接口可以改变网页的内容、结构和样式。1.1、DOM 树文档：一个页面就是一个文档，DOM 中使用 document 表示元素：页面中的所有标签都是元素，DOM 中使用element 表示节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node表
2021-08-17 02:20:38
99
原创 JS学习笔记---13 API
API 和 Web API1、APIAPI （应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。简单理解： API 是给程序员提供的一种工具，以便能更轻松地实现想要完成的功能。2、Web API1、Web API 是浏览器提供的一套操作浏览器功能和页面元素的API（BOM 和 DOM）2、Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果3、Web API 一般都有输入和输出（
2021-08-17 02:17:51
114
原创 JS学习笔记---12 字符串对象
字符串对象1、基本包装类型为了方便基本操作，JS提供了三个特殊的引用类型：String、Number 和 Bollean基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法//基本包装类型var str = 'andy';console.log(str.length);//对象 才有 属性和方法，复杂数据类型才有属性和方法//简单数据类型为什么会有length 属性？//基本包装类型：就是把简单数据类型 包装成了 复杂数据类型步骤：(1)把简单数据类型包
2021-08-17 02:16:51
82
原创 JS学习笔记---11 数组对象
数组对象1、检测是否为数组1、instanceof 运算符var arr = [];var obj = {};console.log(arr instanceof Array); //trueconsole.log(obj instanceof Array); //false2、Array.isArray(参数)var arr = [];var obj = {};console.log(Array.isArray(arr)); //trueconsole.log(Array.isAr
2021-08-17 02:14:13
118
原创 JS学习笔记---10 内置对象
1、内置对象内置对象就是指JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）JS 提供了多个内置对象：Math、Date、Array、String 等2、查文档2.1、MDNMDN：https://developer.mozilla.org/zh-CN/3、Math对象3.1、静态方法调用直接 Math . 方法名();Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值、取整、最大值等）可以
2021-08-17 02:12:39
109
原创 JS学习笔记---09 对象
对象1、创建对象的三种方法在 JS 中，现阶段我们可以采用三种方式创建对象（object）：利用字面量创建对象利用 new Object 创建对象利用构造函数创建对象1.1、利用字面量创建对象对象字面量： 就是花括号{ }里面包含了表达这个具体事物（对象）的属性和方法。//利用对象字面量创建对象//var obj = {}; //创建了一个空对象var obj = { uname:'宇宇', age:18, sex:'男', sayHi:functi
2021-08-06 01:37:53
92
原创 JS学习笔记---08 预解析
预解析JS 代码是由浏览器中的JavaScript 解析器来执行的。JavaScript 解析器在运行 JS 代码的时候分为两步：预解析和代码执行。1、JS 引擎运行 JS 分为两步：预解析、代码执行预解析： JS 引擎会把 JS 里面所有的 var 和 function 提升到当前作用域的最前面代码执行：按照代码书写的顺序从上往下执行2、预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）变量提升： 就是把所有的变量声明提升到当前作用域的最前面，不提升赋值操作函数提升： 就是
2021-08-06 01:35:35
67
原创 JS学习笔记---07 函数
函数1、函数的使用1.1、声明函数（1）利用函数关键字自定义函数（命名函数）// 声明函数function 函数名(){ //函数体代码}function 是声明函数的关键字，必须小写由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词。（2）函数表达式（匿名函数）格式： var 变量名 = function ( ) { };//声明var fun = function(aru){ console.log('我是函数表达式。'); co
2021-08-06 01:31:50
52
原创 JS学习笔记---06 数组
数组1、数组的创建方式JS 中创建数组有两种方式：利用 new 创建数组利用数组字面量创建数组1.1、利用 new 创建数组var 数组名 = new Array();var arr = new Array(); //创建一个新的空数组1.2、利用数组字面量创建数组//1、使用数组字面量方式创建空的数组var 数组名 = [];//2、使用数组字面量方式创建带初始值的数组var 数组名 = ['小白','小黑','小红'];数组的字面量是方括号[ ]声明数组并赋值称为数
2021-08-06 01:28:04
77
原创 JS学习笔记---05 数据类型
数据类型1、变量的数据类型JS是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。var age = 10; //这是一个数字型var areYouOk = '使得'; //这是一个字符串在代码运行时，变量的数据类型是由JS引擎根据 = 变量值的数据类型来判断的，运行完毕后，变量就确定了数据类型。JS 拥有动态类型，同时也意味着相同的变量可用作不同的类型：var x = 6; //x为数字var x
2021-08-05 01:52:41
139
原创 JS学习笔记---04 变量
变量一、变量的使用1、声明变量//声明变量var age; //声明一个名称为age的变量var 是一个JS关键字，用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管。age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间2、赋值age = 10; //给 age 这个变量赋值为10= 用来把右边的值赋给左边的变量空间中，此处代表赋值的意思变量值是程序员保存到变量空间里的值3、变量的初始化var
2021-08-04 20:35:44
63
原创 JS学习笔记---03 JS输入输出语句
JS输入输出语句方法说明归属alert(msg)浏览器弹出警示框浏览器console.log(msg)浏览器控制台打印输出信息浏览器prompt(info)浏览器弹出输入框，用户可以输入浏览器代码 // 这是一个输入框 prompt('请输入你的年龄'); // alert 弹出警示框 输出的 展示给用户 alert('计算的结果是'); //console
2021-08-04 20:31:22
71
原创 JS学习笔记---02 JS注释
03、JS注释单行注释 ctrl + /多行注释 默认的快捷键 shift + alt + a多行注释 vscode 左下角设置中 修改多行注释快捷键：ctrl + shift + /
2021-08-04 20:27:12
55
原创 JS学习笔记---01 JS初体验
01 JS 初体验JS有3种书写位置，分别为 行内、内嵌 和 外部1、行内式JS<input type = "button" value="点我试试" onclick="alert('Hello World')"/>可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号可读性差，在html中编写JS代码时，不方便阅读引号易错，引号多层嵌套匹配时，非常容易弄混特殊
2021-08-04 20:25:12
46
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人