JavaScript
文章平均质量分 57
左岸16
Hello World!
展开
-
使用原生JavaScript实现网页定位导航
上一节我们通过jQuery实现了简单的网页定位导航,这一节使用JavaScript来实现。或许有人在想jQuery实现已经那么简便了怎么还要用JavaScript,但是作为一名合格的前端工程师,对底层的js也要有一定认识和掌握。这一节我们需要使用的知识有,学会将经常使用到的方法进行封装,方便在实验中的调用,jQuery和js获取元素的不同实现方法,还有正则表达式的使用等等。现在就让我们进入正题。原创 2016-07-19 14:50:22 · 2233 阅读 · 0 评论 -
深入理解JavaScript中关键字this的使用
什么是this?this是JavaScript的关键字之一。找拥有当前上下文(context)的对象(context object)。它是 对象 自动生成的一个内部对象,只能在 对象 内部使用。随着函数使用场合的不同,this的值会发生变化。this指向的是当前谁调用了它,它就指向谁。在普通情况下就是全局,浏览器里就是window;在use strict的情况下就是undefined。...原创 2017-10-06 17:52:33 · 6412 阅读 · 1 评论 -
使用React实现选择城市三级联动组件
以下代码是初期写的代码,后来对代码进行优化,解决了初期的bug。完整的选择城市三级联动组件可以参考我的github项目中的代码,这是后期调试成功上传上去的React选择城市三级联动组件<SelectArea allAreaInfo={allAreaInfo} province={province} city={city} district={district} cancel={thi...原创 2018-04-08 11:21:23 · 8180 阅读 · 0 评论 -
阶段性前端整理总结
请求头X-Requested-With这个请求头是用来判断一个请求是传统的HTTP请求,还是Ajax请求,Ajax请求一般都会带上X-Requested-With头域,默认可能会设置X-Requested-With为XMLHttpRequest。但用户客户端也可以设置它的值,HttpRequest对象.setRequestHeader("X-Requested-With","任意字符串"),可...原创 2018-05-14 12:41:00 · 361 阅读 · 0 评论 -
H5开发实践-内容总结
盒模型元素宽度的计算方式IE没有标准盒模型元素宽度 = width + padding + border盒子总宽度 = 元素宽度 + marginCSS3中增加了一个计算盒模型的css属性box-sizingbox-sizing: content-box | padding-box | border-box;默认值:content-box为了避免盒模型大小变化造成网页排...原创 2018-06-04 11:54:42 · 2782 阅读 · 0 评论 -
学习JavaScript数据结构与算法
栈(Stack)栈是一种遵循后进先出(LIFO, Last In First Out)原则的有序集合。新添加或者待删除的元素都保存在栈的末尾,称作栈顶,另一端叫做栈底。创建一个类来表示栈,首先先声明这个类:function Stack() { // 声明各种属性和方法}为栈声明如下的方法:push(element(s)):添加一个(或几个)新元素到栈顶。pop()...原创 2018-06-21 14:56:04 · 1070 阅读 · 0 评论 -
JavaScript数据结构与算法——集合Set
JavaScript中的集合 数据结构——SetES6提供了新的数据结构Set,它类似数组,不同的是集合Set中每个元素都是唯一的,没有重复的值。 Set本身是一个构造函数,可以实例化一个Set数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x =&gt; s.add(x));for (let i of s) { ...原创 2018-06-22 15:45:23 · 504 阅读 · 0 评论 -
JavaScript数据结构与算法——字典Dictionary
创建一个字典function Dictionary() { var items = {}; this.has = function(value) { return value in items; }; this.set = function(key, value) { items[key] = value; };...原创 2018-06-22 16:52:19 · 265 阅读 · 0 评论 -
JavaScript中数组常用的方法总结
sort() 对数组中的元素进行排序,返回排序后的数组sort()对数组元素进行排序,并返回排序后的数组。 参数:可选,规定排序方式的比较函数 默认情况下sort()方法没有传比较函数作为参数的话,默认按字母升序,如果不是元素不是字母形式的字符串的话,会调用toString()方法将元素转化为字符串的Unicode(编码)位点,然后再比较字符。比较函数会包含两个参数,这两个参数就是数组...原创 2018-06-01 11:40:53 · 284 阅读 · 0 评论 -
JavaScript数据结构与算法——排序算法
冒泡排序冒泡排序是将相邻元素进行比较,如果前面的元素大于后面的元素,则交换这两个元素的位置,进行多轮比较排序后,数组的元素按照从小到大的顺序排列完成。function ArrayList() { var array = []; this.insert = function(item) { array.push(item); }; this.t...原创 2018-06-25 17:09:22 · 305 阅读 · 0 评论 -
字符串ASCII码的常用方法
charCodeAt(index)index。必需,字符串中某个位置的数字,即字符在字符串中的索引。 可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。 如果index是负数或者大于字符串的长度,则返回NaN。var string = 'Hello World';console.log(string.charCodeAt(0)); //...原创 2018-07-10 10:54:01 · 9347 阅读 · 0 评论 -
关于JavaScript装饰器相关知识点
Object.defineProperty(obj, prop, descriptor)该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。Object.getOwnPropertyDescriptor(obj, prop)该方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)如果指定的属...原创 2018-07-16 17:09:38 · 241 阅读 · 0 评论 -
FileReader的使用方法
根据MDN文档的阐释 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。 其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行moz...原创 2018-07-13 15:52:58 · 25793 阅读 · 0 评论 -
Cookie和Session的运行机制
Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份,相应的也增加了服务器的存储压力。HTTP协议是无连接无状态的协议。 无连接是指限制每次连接只处理一个请求,服务器处理完客户端的请求,并收到客户端的应答后就断开连接,这样可以节省传输时间。无状态是指协议对于事务处理没有记忆能力,如果后续需要处理前面的信息,则必须重传,这样可能导致每次连接传送的数据量增大...原创 2018-10-12 11:28:37 · 366 阅读 · 0 评论 -
关于ES6箭头函数的使用误区
function add (a, b) { return a + b;}使用箭头函数可以这样写:const add = (a, b) => a+b;// 相当于const add = (a, b) => { return a + b; }箭头函数的使用方法:当没有传递参数或者参数多于一个时,使用圆括号把参数包围起来,如() => {...},(a, b, c)...原创 2018-09-29 15:28:02 · 409 阅读 · 0 评论 -
JavaScript判断滚动条是否滑动到页面底部
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。scrollTop为滚动条在Y轴上的滚动距离。clientHeight为内容可视区域的高度。scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == ...转载 2019-01-21 16:51:28 · 1847 阅读 · 0 评论 -
零碎小知识
一个&amp;amp;amp;amp;amp;amp;amp;lt;div&amp;amp;amp;amp;amp;amp;amp;gt;和一个&amp;amp;amp;amp;amp;amp;amp;lt;i&amp;amp;amp;amp;amp;amp;amp;gt;同一个层级使用vertical-align: middle;可以竖直方向对齐原创 2019-01-16 15:27:14 · 305 阅读 · 0 评论 -
前端开发小总结
减少多重if…else判断为了后期测试调试方便,可以先分析业务,把多个if…else判断分成下面几个部分去分别判断: 1. 空值判断 2. 业务判断 3. 状态判断立即执行函数var a = 2;(function IIFE(global) { var a = 3; console.log(a); // 3 console.log(global...原创 2018-02-06 10:31:41 · 304 阅读 · 0 评论 -
Canvas 基本用途
canvas标签类似img,可以设置width属性和height属性,如果没有设置,canvas画布的默认宽高是300 * 150。canvas只有width和height这两个属性。 使用方法:<canvas id="canvas" width="200" height="120"></canvas>原创 2017-12-29 00:13:21 · 3307 阅读 · 0 评论 -
谈谈JavaScript异步操作Promise
Promise是一个构造函数var p = new Promise(function(resolve, reject) { // 异步操作 setTimeout(function() { console.log('success'); resolve('async data'); }, 2000);}).then((data) => {原创 2017-11-16 09:54:25 · 467 阅读 · 0 评论 -
JavaScript中的事件处理程序
事件:指文档或浏览器窗口中发生的特定的交互瞬间。JavaScript<——>HTML 事件流:描述的是从页面中接受事件的顺序,包括IE提出的事件冒泡流(即事件最开始由最具体的元素接收,然后逐级向上传播至最不具体的节点或文档)和Netscape提出的事件捕获流(即不太具体的节点应该更早接收事件,而最具体的节点最后接收事件)。事件处理程序分为一下几类:1.HTML事件处理程序 事件加在HTML代码中原创 2016-07-31 18:03:22 · 377 阅读 · 0 评论 -
JavaScript中的事件对象
在触发DOM上的事件时都会产生一个对象,即事件对象event。 1.DOM中的事件对象event 有以下常用的属性和方法: type属性:用于获取事件类型 target属性:用于获取事件目标,即哪个元素 stopPropagation()方法:阻止事件冒泡,即不执行上级祖先元素的行为 preventDefault()方法:阻止事件的默认行为,例如元素a的自动跳转行为,在移动端应用较多。原创 2016-08-01 15:11:43 · 392 阅读 · 0 评论 -
利用JavaScript操作表单的小例子
t检查用户注册信息是否正确,在以下情况不满足时报错并阻止提交表单:用户名必须是3-10位英文字母或数字;口令必须是6-20位;两次输入口令必须一致。<form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()"> <p id="test-error" style="color:原创 2016-08-21 20:39:38 · 1398 阅读 · 0 评论 -
使用JavaScript实现二分查找
二分查找 js原创 2017-01-19 10:25:04 · 6373 阅读 · 5 评论 -
你不知道的JavaScript(上卷)读书笔记
介绍《你不知道的JavaScript》读书笔记原创 2017-05-24 23:28:56 · 342 阅读 · 0 评论 -
Javascript小示例
Javascript原创 2017-05-12 15:02:15 · 316 阅读 · 0 评论 -
Ajax相关知识点
Ajax实现原创 2017-05-17 22:44:24 · 383 阅读 · 0 评论 -
Javascript正则表达式
JavaScript正则表达式的相关基础知识:原创 2017-05-12 15:20:46 · 317 阅读 · 0 评论 -
HTML标签与属性
HTML标签与属性的使用原创 2017-07-09 23:16:47 · 310 阅读 · 0 评论 -
JavaScript中的 == 和 === 的区别
== 和 === 的区别原创 2017-08-23 00:06:04 · 253 阅读 · 0 评论 -
mouseenter与mouseover的区别
mouseenter | onmouseenter eventThe event fires only if the mouse pointer is outside the boundaries of the object and the user moves the mouse pointer inside the boundaries of the object. If the mouse p原创 2017-10-05 20:19:16 · 2231 阅读 · 0 评论 -
浏览器的跨域问题及其解决方法
跨域由于浏览器的同源策略(请求的url地址,必须与浏览器上的url地址处于同一域上),不在同一域下的地址不能互相访问。同源是指,域名、协议、端口号都一致。同源策略分为以下两种: DOM同源策略:禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况,不同域名的iframe是限制互相访问的。 XMLHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请求原创 2017-10-27 18:04:05 · 870 阅读 · 0 评论 -
页面DOM元素的scroll与offset相关属性
1.offsetParent元素的offsetParent属性是距离该元素最近的一个具有定位的父辈元素,如果没有符合条件的父辈元素,那么body就是它的offsetParent。2.offsetWidth与offsetHeightoffsetWidth=width+横向padding值+横向border值+[横向滚动条width] 实际上,就是元素渲染到页面后的实际宽度尺寸,是否包含横向滚动条的宽原创 2017-10-01 23:55:30 · 1788 阅读 · 0 评论 -
使用fetch代替传统的Ajax
在 jQuery 开发时代,jQuery 已经为我们封装了非常优雅的 ajax 函数,并且针对各个浏览器都做了很好的兼容,使用起来非常方便。但是,当我们使用React或Vue或Angular开发时,就没有必要为了使用Ajax而导入一整个jQuery。同时,JavaScript 中的 ajax 很早之前就有一个诟病————复杂业务下的 callback 嵌套的问题。为了解决这个问题,ES6的语法推出来原创 2017-10-29 11:53:30 · 2042 阅读 · 0 评论 -
JavaScript中typeof和instanceof的介绍
typeoftypeof操作符返回一个字符串,指示未经计算的操作数的类型。typeof operationoperation是一个表达式,表示对象或原始值,其类型将被返回。 对应不同的数据类型可能的返回值有:String ==> stringUndefined ==> undefinedNumber ==> numberBoolean ==> booleanNull ==> object原创 2017-10-11 11:50:07 · 330 阅读 · 0 评论 -
JavaScript经典案例
1.关于JavaScript Function.call()函数function a() { console.log(this);}a.call(null); // window关于a.call(null); 根据EcmaScript 6 规范规定,如果第一个参数传入的对象调用者是null,或者undefined,call方法就把全局对象(浏览器上全局对象是window对象,Node.原创 2017-05-21 22:29:24 · 2918 阅读 · 0 评论 -
JavaScript基础案例实现
1.去除一个数组里面重复的元素var arr1 = [1,2,2,2,3,3,3,4,5,6];var arr2 = [];for(var i = 0, len = arr1.length;i<len;i++){ if(arr2.indexOf(arr1[i])<0) { arr2.push(arr1[i]); }}console.log(arr2);运行结果原创 2017-10-02 14:23:10 · 575 阅读 · 0 评论 -
开发PC端页面布局遇到的问题总结
Element.getBoundingClientRect()Element.getBoundingClientRect()方法返回元素的大小及其相对于视口左上角的位置。返回的对象包含一组只读属性——top, bottom, left, right,单位为像素px。const ele = document.getElementById('target')const top = ele.get...原创 2019-06-04 11:58:58 · 925 阅读 · 0 评论