JS
文章平均质量分 57
Pi皮蛋儿
这个作者很懒,什么都没留下…
展开
-
JS动画原理
动画事件原理:通过定时器 setInterval()不断移动盒子位置。动画盒子需要加定位 position:relative | absolute | fixed动画函数封装 animate缓动动画效果原理:使得元素运动有所变化。让盒子每次移动的距离慢慢变小,速度就会慢慢落下来核心算法:(目标值-现在的位置)/ 10 做为移动的距离步长停止条件:让当前盒子位置等于目标位置就停止定时器步长值需要取整Math.ceil | Math.floor<!DOCTYPE html>&l原创 2021-04-02 15:00:33 · 241 阅读 · 0 评论 -
mouseover和mouseenter的区别
mouseenter鼠标事件当鼠标移动到元素上时就会触发 mouseenter 事件类似mouseover,它们两者之间的差别是mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter 只会经过自身盒子触发,mouseenter不会冒泡跟mouseenter 搭配鼠标离开 mouseleave 同样不会冒泡...原创 2021-04-02 12:53:52 · 95 阅读 · 0 评论 -
网页特效offset、client、scroll系列属性的作用
元素偏移量 offset 系列可以动态的得到元素的位置(偏移)、大小等获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意:返回的数字都不带单位offset系列属性作用element.offsetParent返回作为该元素带有定位的父级元素 如果父级都没有定位则返回bodyelement.offsetTop返回元素相对带有定位的父级元素上方的偏移element.offsetLeft返回元素相对带有定位的父级元素左边框的偏移element原创 2021-04-02 12:39:39 · 154 阅读 · 0 评论 -
window.location对象、window.navigator对象、window.history对象
location 对象是 window 对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。URL 统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含信息指出文件的位置以及浏览器应该怎么处理它。URL的一般语法格式为:protocol://host[:port]/path/[?query]#fragmenthttp://www.itcast.cn/原创 2021-04-02 09:54:47 · 267 阅读 · 2 评论 -
Js执行机制——同步和异步
同步:单线程,同步任务都在主线程上执行。异步:多线程,异步任务是通过回调函数实现的,异步任务添加到任务队列中执行。异步任务一般有三类:普通事件 click、resize资源加载 load、error定时器 setInterval、setTimeoutjs执行机制:先执行主线程上的同步任务异步任务(回调函数)放入任务队列中一旦主线程同步任务执行完毕后,系统会按次序读取任务队列中的异步任务(回调函数),进入主线程执行栈,开始执行。由于主线程不断的重复获得任务,执行任务,再获取任务、再原创 2021-04-01 18:58:29 · 117 阅读 · 0 评论 -
this的指向问题
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c原创 2021-04-01 18:45:50 · 99 阅读 · 0 评论 -
BOM——window对象
BOM 浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是windowBOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性BOM 缺乏标准,JavaScript 语法的标准化组织是ECMA,DOM 的标准化组织是 W3C ,BOM 最初是 Netscape 浏览器标准的一部分。因为浏览器厂商太多,导致BOM 兼容性较差。DOM文档对象模型DOM 就是把文档当作一个对象看待DOM 的顶级对象是documentDOM 主要学习的是操作页面元素DOM 是W原创 2021-04-01 16:54:02 · 246 阅读 · 0 评论 -
JS事件高级
注册事件(绑定事件)注册事件两种方式:传统方式 、方法监听注册方式传统方式:利用on开头的事件 onclick<button onclick = ’ alert( ’ hi~ ’ ) </ button> '>btn.onclick = function ( ) { }特点:注册事件的唯一性同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式W3C标准 推荐方式addEventListener( ) .原创 2021-04-01 15:12:06 · 77 阅读 · 0 评论 -
DOM的重点核心
DOM文档对象模型,是W3C组织推荐的处理可扩展标记语言(HMTL或XML)的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。对于JavaScript,为了能够使JavaScript操作HTML,JavaScript就有了一套自己的dom编程接口。对于HMTL,DOM使得HTML形成一课DOM树,包含文档、元素、节点。我们获取到的DOM元素是一个对象(Object),所以称为文档对象模型。关于DOM操作,主要针对元素的操作。主要有创建、增、原创 2021-04-01 11:43:53 · 127 阅读 · 0 评论 -
三种动态创建元素区别
document.write()element.innerHTMLdocument.creatElement()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w.原创 2021-04-01 11:20:12 · 76 阅读 · 0 评论 -
操作自定义属性、H5自定义属性
获取属性element.属性 获取属性值。element.getAttribute(‘属性’);区别:element.属性 获取内置属性值(元素本身自带的属性)element.getAttribute(‘属性’);主要获得自定义的属性(标准)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co原创 2021-03-29 14:53:12 · 142 阅读 · 0 评论 -
JS排他思想
排他思想<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&原创 2021-03-29 14:23:36 · 59 阅读 · 0 评论 -
DOM获取元素、事件基础、操作元素、节点操作
什么是DOM?文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML 或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容,结构和样式。DOM树文档:一个页面就是一个文档,DOM中使用document表示元素:页面中的所有标签都是元素,DOM中使用element表示节点:网页中的所有内容都是节点(标签,属性,文本,注释等),DOM中使用node表示。DOM把以上都看作是对象,对象有很对属性和方法。获取页面元素根据ID 标签名获取通原创 2021-03-29 14:13:20 · 259 阅读 · 0 评论 -
Web APIs
WeB APIs阶段与Javascript语法阶段(Js基础)的关联性js基础阶段:学习ECMAScript标准规定的基本语法Web APIs阶段web APIs 是W3C组织的标准web APIs 主要学习DOM 和BOMweb APIs 是Js独有的部分主要学习页面交互功能js基础学习 ECMAScript 基础语法为后面作铺垫,web APIs 是js的应用,大量使用Js基础语法做交互效果。什么是API?应用程序编程接口,是一些预先定义的函数,是给程序员提供的工具,使用时程序员直原创 2021-03-29 09:31:50 · 88 阅读 · 0 评论 -
JS中简单数据类型和复杂数据类型
简单数据类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型值类型:简单数据类型/基本数据类型,在储存变量中存储的是值本身,因此叫做值类型。string,number,boolean,undefined,null简单数据类型 null 返回的是一个空对象 objectvar timer = null;console.log(typeof timer); // object如果有个变量我们以后打算存储为对象,暂时没想好放什么?这个时候可以给 null引用类型:复杂数据类型,在存储时变量中原创 2021-03-29 09:14:17 · 170 阅读 · 0 评论 -
内置对象 API Math对象、Data对象、Array对象、String对象
Javascript分三种对象:自定义对象、内置对象、浏览器对象前两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于我们JS独有的。内置对象: 就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)常用的Math对象Math对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整,最大值等)可以使用Math中的成员。Math.PI圆周率Math.floor()向下取整原创 2021-03-27 17:50:39 · 160 阅读 · 0 评论 -
变量、属性、函数、方法总结
// 变量、属性、函数、方法 // 变量、属性的相同,都是用来保存数据的 var num = 10; var obj = { age = 18 } // 变量 单独声明并赋值,使用直接写变量名, 单独存在 // 属性 在对象里面的不需要声明,使用时必须 对象.属性名 // 函数、方法的相同,都是实现某种功能 var objs ={原创 2021-03-25 13:07:23 · 101 阅读 · 0 评论 -
Javascript三种创建对象的方法,new关键字,for...in 遍历对象
在Javascript中,对象是一组无序的相关属性和方法的集合,例如:字符串、数值、数组、函数等。对象是有属性和方法组成属性:事物的特征方法:事物的行为字面量创建对象:{ } 里面包含了表达这个对象的属性和方法new object创建对象:利用构造函数创建对象// 利用对象字面量创建对象 {} var obj = { uname: '小明', age: 18, sayHi: function() {原创 2021-03-25 12:59:47 · 808 阅读 · 0 评论 -
Javascript作用域
Javascript作用域:就是代码名字(变量)在某个范围内起作用和效果,目的是为了提高程序的可靠性和减少名命名冲突js的作用域(es6)之前:全局作用域、局部作用域全局作用域:整个script标签中,或单独的js文件 全局变量 浏览器关闭才能销毁,比较占内存局部作用域:在函数内部起作用和效果为局部作用域 局部变量 函数执行完毕销毁,比较节约内存es6 新增块级作用域 {}中就是块级作用域 if{} for{} java中var a = 1; function fn1原创 2021-03-25 11:45:47 · 55 阅读 · 0 评论 -
Javascript预解析、代码执行
1、js引擎分为两部 :预解析 代码执行预解析js引擎会把 js 里面所有的 var 还有 function 提升到当前作用域的最前面代码执行 按照代码书写的顺序从上往下执行2、预解析分为 变量预解析(变量提升)和 函数预解析(函数提升)变量提升 就是把所有的变量提升到当前的作用域最前面 不提升赋值操作函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数// 代码预解 代码执行 // 1 问 console.log(num原创 2021-03-25 11:55:30 · 101 阅读 · 0 评论