![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript笔记
courageFei
这个作者很懒,什么都没留下…
展开
-
用 IntersectionObserver api 监听元素曝光
用 IntersectionObserver api 监听元素曝光以前在 H5 页面都是监听 window 的 scroll 事件从而去监测元素的曝光。但是最近接到的一个需求,去监听 scroll 事件监测曝光并不友好,于是 发现了一个从没用过的 api ,试着做了一个demo ,由于不会监听scroll 事件去频繁触发 scroll 事件。所以性能上会提高很多,但是不兼容 ie, MDN 上...原创 2019-08-22 19:03:10 · 1479 阅读 · 0 评论 -
对象到底是什么,我们可以从两次层次来理解。
对象到底是什么,我们可以从两次层次来理解。(1) 对象是具体事物的抽象。一本书、一辆汽车、一个人都可以是对象,当实物被抽象成对象,实物之间的关系就变成了对象之间的关系,从而就可以模拟现实情况,针对对象进行编程。(2)对象是无序键值对的集合,其属性可以包含基本值、对象或者函数每个对象都是基于一个引用类型创建的,这些类型可以是系统内置的原生类型,也可以是开发人员自定义的类型。什么是...转载 2018-09-10 10:31:37 · 509 阅读 · 0 评论 -
JavaScript 中的数据类型
JavaScript 中的数据类型JavaScript 有 5 种简单数据类型:Undefined、Null、Boolean、Number、String 和 1 种复杂数据类型 Object 。基本类型(值类型)UndefinedNullBooleanNumberString复杂类型(引用类型)ObjectArrayDateRegExpFunction基...原创 2018-09-10 10:18:27 · 109 阅读 · 0 评论 -
函数进阶
函数成员arguments 实参集合caller 函数的调用者,谁调用就是谁。length 形参的个数name 函数的名称只读不可以修改。 function fn(x, y, z) { console.log(fn.length) // 3 形参的个数 console.log(arguments) // [3,2,1] 是一个伪数组 实...原创 2018-09-17 08:42:57 · 184 阅读 · 0 评论 -
JS 的上下文调用模式
上下文调用模式也叫方法借用模式,分为apply与callcall方法可以调用一个函数,并且可以指定这个函数的this指向所有的函数都可以使用call进行调用参数1:指定函数的this,如果不传,则this指向window其余参数:和函数的参数列表一模一样。 call方法也可以和()一样,进行函数调用,call方法的第一个参数可以指定函数内部的this指向。 fn.call...原创 2018-09-15 23:31:27 · 766 阅读 · 0 评论 -
用JS实现完整轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &转载 2018-09-03 19:43:19 · 147 阅读 · 0 评论 -
用 js 实现的拖拽页面上的某框
// 鼠标点击,显示遮罩层与登录框 document.getElementById("link").onclick = function () { document.getElementById("login").style.display = "block"; document.getElementById("bg").style.display = "bloc...转载 2018-09-08 23:33:37 · 548 阅读 · 0 评论 -
用js实现高清放大图片效果
var box = my$("box"); var small = box.children[0]; var big = box.children[1]; var mask = small.children[1]; var bigImg = big.children[0]; //鼠标进入显示遮挡层和大图div box.onmouseover = ...转载 2018-09-08 23:31:38 · 2884 阅读 · 0 评论 -
用 js 实现的简单的倒计时,天数,小时,分钟,秒
<script> var d = document.getElementById("d"); var h = document.getElementById("h"); var m = document.getElementById("m"); var s = document.getElementById("s"); getTime()...原创 2018-09-08 23:26:47 · 3441 阅读 · 0 评论 -
用js原生实现多个属性的缓动动画函数
<script> // 获取当前任意一个元素的任意一个属性 // window.getComputedStyle 火狐谷歌支持,返回值是一个字符串类型的。 // 第一个参数是元素,第二个可以为空,返回的是属性值。 // element.currentStyle[attr] ie支持,谷歌火狐不支持。 function getStyle(elem...转载 2018-09-08 23:18:10 · 947 阅读 · 0 评论 -
用js 实现简单的随机点名
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l原创 2018-08-31 23:44:10 · 3798 阅读 · 1 评论 -
innerText 和 textContent 的兼容问题
innerText 和 textContent 的兼容问题innerText 属于IE标准,目前一些高版本的浏览器都会支持。可以设置文本内容,也可以获取标签中的文本。textContent 火狐支持,谷歌支持,IE8不支持。只可以去中间的内容,不会显示标签的样式。innerHTML 如果标签文本都想获取,可以使用。兼容代码//设置任意元素的中间的文本内容functio...原创 2018-08-23 15:21:39 · 677 阅读 · 0 评论 -
定义函数的三种方式
函数声明 函数声明可以先调用,在声明fn(); function fn(){ console.log(“函数体”) }函数表达式就是将一个匿名函数整体赋值给一个变量,就是函数表达式的形式。 函数表达式必须先声明,再调用 var fn = function() { console.log(“函数体”); } fn();构造函数Function 函数也是对象,可以...原创 2018-09-12 23:18:05 · 7308 阅读 · 0 评论 -
Javascript原型
JavaScript中的原型Javascript 中每一个构造函数都有一个 prototype 属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。这也就意味着,我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。function Person (name, age) { this.name = name this.age =...原创 2018-09-12 23:28:49 · 101 阅读 · 0 评论 -
前端通过响应头获取后端传输的信息
前端通过响应头获取后端传输的信息工作中碰到后端在请求头中带的信息,需要前端获取这个信息。原本可能只是自己的知识盲区,又可以直接获取后端接口请求头中的api,差了很多资料都没与找到相关的资料。又请教了公司的大佬,大佬们也没听说过这样的做法。所以和后端同学商量了下,让他放在接口的响应头中前端再来获取。于是后端同学将我所需的信息通过响应头传递给我,前端项目是用vue + axios:我在axios的...原创 2019-08-25 19:37:07 · 5655 阅读 · 1 评论 -
必用 vsode 插件
整理一下个人用的Vscode 好用的插件Bracket PairColorizer 花括号配对Chinese Langeage Rack for Visual Studio Code 将编辑器语言转换为中文Document this ...原创 2019-05-16 11:34:18 · 501 阅读 · 0 评论 -
前端实用小方法
一 提取URL中的某个查询字符串的值getParams() { let url = localtion.search; var param = {}; if (url.indexOf('?') != -1) { let query = url.slice(url.indexOf('?')).slice(1); l...原创 2019-03-27 20:10:05 · 152 阅读 · 0 评论 -
利用懒加载原理实现曝光上报
1.懒加载原理如下图监听window的滚动事件 ,当 卷曲上去的距离 + 可视区域的高度 &gt; 元素的 offsetTop 元素就会暴露出屏幕的可视区域。let flag = true;window.addEventListener("scroll",function(){ const target = document.getElementById("Slider")...原创 2019-03-18 11:37:59 · 342 阅读 · 0 评论 -
iscroll插件的使用
近期用到 iscroll.js 插件,找了几篇参考,网址如下:有使用的详细步骤和说明: [http://caibaojian.com/iscroll-5/]参考文档(http://www.mamicode.com/info-detail-331827.html)git 下载地址[(https://github.com/cubiq/iscroll)最后本人总结了以下使用主要注意点:...原创 2018-11-06 11:38:42 · 470 阅读 · 0 评论 -
正则表达式
标题正则表达式(regular expression)是什么呢?正则表达式是按照某种规则组成的一个表达式。作用就是为了匹配字符串,让它符合某一种规律。那正则表达式到底是什么样的呢?正则表达式也叫规则表达式,就是普通字符和元字符(元字符就是具有特殊含义的的字符)组成的。正则表达式中常用的元字符有哪些呢?. 用这个符号可以表示除了换行和回车之外的任意字符。\d用这个符号可...原创 2018-09-27 22:36:17 · 115 阅读 · 0 评论 -
JavaScript基本包装类型
基本包装类型为了便于操作基本类型值,ECMAScript还提供了3个特殊的引用类型:Boolean、Number和String。这些类型与其它引用类型相似,但同时也具有与各自的基本类型相应的特殊行为。实际上,每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据。如:var s1 = “some text”;var s2 = s1....转载 2018-09-22 20:27:29 · 914 阅读 · 0 评论 -
函数的调用方式
函数的调用方式普通函数构造函数对象方法借用调用模式函数内 this 指向的不同场景 函数的调用方式决定了 this 指向的不同:普通函数调用 一般情况下指向window ,严格模式下是 undefined 构造函数调用 一般指向实例对象 ,原型方法中 this 也是实例对象 对象方法调用 指向调用者 事件绑定方法 指向绑定事件对象...原创 2018-09-14 23:26:07 · 218 阅读 · 0 评论 -
继承
什么是继承构造函数的属性继承:借用构造函数function Person (name, age) { this.type = 'human' this.name = name this.age = age}function Student (name, age) { // 借用构造函数继承属性成员 Person.call(this, name, age)}v...转载 2018-09-14 23:22:45 · 111 阅读 · 0 评论 -
getComputedStyle()与currentStyle()、style()方法
JS使用getComputedStyle()方法获取CSS属性值 在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style type="text/c...转载 2018-09-19 19:20:45 · 7340 阅读 · 4 评论 -
JavaScript原型对象
- 属性搜索原则*属性一般访问的时候都是沿河原型链往上访问,找到的话就返回,找不到继续往上走。 每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性搜索会从实例对象自己本身的属性开始搜索,找到了返回,不在继续往上找了。如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性如果在原型对象中找到了这个属性,则返回该属性的值总之就是说...原创 2018-09-12 23:39:39 · 130 阅读 · 0 评论 -
用js实现的简单的点击小图片,显示对应的大图片
**以下是简单的点击小图,显示大图的代码。具体简单的解释在注释中。<body> <div class="box"> <ul id="gallary"> <li> <a href="images/6信息.png" title="信息">原创 2018-08-22 23:08:13 · 17696 阅读 · 0 评论 -
简单tab栏切换
tab栏切换js 部分代码如下: <script> //获取tab栏最外面的大盒子 var bigbox = document.getElementById("bigbox"); // 获取tab栏的标题栏,就是最外面大盒子里的第一个div var hd =bigbox.getElementsByTagName("div")[0]; ...原创 2018-08-22 22:52:57 · 3546 阅读 · 0 评论 -
JavaScript的基本概念——语法及变量
1. 语法JavaScript中是区分大小写的。标识符,是指变量、函数或属性的名字,或者函数的参数。必须满足下面的规则: 第一个字符必须是一个字母,下划线(_)或者一个美元符号($); 其他字符可以是字母、下划线、美元符号、数字; 按照惯例,采用驼峰命名的方式,就是第一个字母小写,剩下的每个有意义的单词首字母大写; ...原创 2018-05-16 21:32:53 · 140 阅读 · 0 评论 -
基本类型和引用类型的值
1 基本类型和引用类型的值基本类型指的是简单的数据段。引用类型值指那些可能由多个值构成的对象。基本数据类型:undefined,Null,Boolean,Number和String。这5种基本数据类型是按值访问的,因为可以操作保存在变量中的实际的值。引用类型的值是保存在内存中的对象。JavaScript不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间。在操作对象时...原创 2018-05-22 22:52:05 · 152 阅读 · 0 评论 -
在HTML中使用JavaScript
1. <script>元素向HTML中插入JavaScript的主要方法就是使用<script>元素.。HTML 4.01为<script> 定义了下列6个属性:aync 可选。针对于外部脚本,表示应该立即下载脚本,但是不会影响到页面中的其他操作。比如下载其他资源或等待加载其他脚本。设置属性为aync="aync"。.defer可选。针对于外部...原创 2018-05-15 16:22:02 · 121 阅读 · 0 评论 -
JavaScript的三个主要组成部分
Java Script的三个主要组成部分是:ECMAScript(核心),DOM(文档对象模型),BOM(浏览器对象模型)。- ECMAScriptECMA-262没有参照web浏览器,规定了语言的组成部分,具体包括语法、类型、语言、关键字、保留字、操作符、对象。ECMAScript就是对该标准规定了各个方面内容的语言的描述。ECMAScript的兼容:1 支持EC...原创 2018-05-14 20:51:25 · 24193 阅读 · 0 评论 -
JavaScript——函数
函数通过函数可以封装任意多条语句,可以在任何地方,任何时候调用执行。ECMAScript中的函数使用function关键字来声明,后跟一组参数和函数体。语法: funcation funcationName(arg0,arg1……,argN){ statements } function sayHi(name,...原创 2018-05-20 22:25:51 · 138 阅读 · 0 评论 -
JavaScript——语句
1 if语句语法:if(condition) statement1 else statement2;condition条件可以使任意表达式;如果表达式的求值的结果不是结果,是一个布尔值,那么ECMAScript会自动调用Boolean()转换函数将这个表达式的值转换为布尔值,如果condition的求值结果为true那么执行(statement1)语句1,如果condit...原创 2018-05-20 15:49:16 · 113 阅读 · 0 评论 -
JavaScript ——操作符
布尔操作符1. 逻辑非由一个感叹号(!)表示,可以应用与ECMAScript中任何类型的值,最终会返回一个布尔值。逻辑非操作符需要遵循下列规则:如果操作数是一个对象,返回false。如果操作数是一个空字符串,返回true。如果操作数是一个非空的字符串,返回false。如果操作数是数值0,返回true。如果操作数是null,返回true。如果操作数是NaN,返回tr...原创 2018-05-19 20:00:22 · 154 阅读 · 0 评论 -
JavaScript ——— 一元操作符与位操作符
- 一元操作符 ECMAScript中最简单的操作符就是一元操作符,它只可以操作一个值。递增与递减操作符递增与递减操作符分为前置型与后置型。执行前置递增和递减操作时,变量的值是在语句被求值以前变的。 如下例:var num1=2;var num2=20;var num3=--num1+num2; //21var num4=num1+num2; //21...原创 2018-05-17 20:20:15 · 469 阅读 · 0 评论 -
JavaScript——数据类型
数值转换1、 Number()可用于任何数据类型,转换规则如下:如果是Boolean值,true和false分别转换为1,0;如果是数值,只是简单的传入和返回;如果是空值,返回0;如果是undefined,返回NaN。如果是字符串且只包含数值,则将其转换为十进制数;如果字符串中只包含十六进制格式例如“OXF”则返回对应的十进制整数值;如果字符串为空,转换为0;如果字符串包...原创 2018-05-17 13:18:46 · 87 阅读 · 0 评论 -
JavaScript中Array对象常用的方法
Array对象的实例如何创建使用Array创建var arr = new Array();var arr1 = new Array(2); //后面的参数表示数组的长度为2var arr3 = new Array(2,3,4); //表示数组里面的数据有2,3,4.使用字面量创建var arr4 =[2,3,4,5]; //声明的时候...原创 2018-08-09 20:36:26 · 1055 阅读 · 2 评论 -
JS中的对象
对象是什么呢?JS中对象的定义是内存中一段有意义的空间。对象可以是生活中的任何事物。而JS中的对象就是将生活中的对象抽象化了,这些对象抽象化之后就是有一些无序属性,这些属性构成了一个无序的集合。对象中主要包含属性(就相当与生活中某对象的特征) 一般情况下是一个名词,方法(就相当于生活中对象可以做到动作,事情,方法)一般情况下是动词。对象是怎么创建的呢?用Object构造函数创...原创 2018-08-05 22:17:59 · 123 阅读 · 0 评论 -
js事件中的this
1.事件中的this 当在事件中表示当前元素的时候,可以使用thisvar btn = document.getElementById("btn");btn.onclick = function() { this.value = "按鈕"; //给btn注册的事件,因此this表示btn}2.阻止a标签跳转 对于a标签来说,默认的行为就是进行页面跳转,如...原创 2018-08-22 22:37:04 · 2206 阅读 · 0 评论 -
浏览器对象模型(BOM)
浏览器对象模型(BOM) 概念BOM处理浏览器窗口和框架。包括:弹出新浏览器窗口的功能。移动,缩放,关闭浏览器黄口的功能。提供浏览器详细信息的navigator对象。提供浏览器所加载页面的详细信息的location对象。对cookies的支持。提供与浏览器加交互方法的接口。BOM的顶级对象windowwindow是浏览器的顶级对象,当调用window下的属性和方法时...原创 2018-08-19 21:08:17 · 445 阅读 · 0 评论