JavaScript
关注
分享
扫一扫
文章平均质量分 61
刘小妞
遇见更好的自己---前端小白的成长历程，学的越多，发现自己越无知
展开
-
textarea高度随内容自动改变
需求textarea默认的高度不是对着内容变化，而是随着内容增多，出现了滚动条。目前的需求是实现一个能够输入的textarea，并且高度跟着内容变化。发现了一个比较好用的插件flexText，但是这个基于jquery写的，目前的技术栈是react，所以简单看了下，然后用原生的js模拟了一个实现。原理：html结构：div class="body"> di原创 2018-01-06 12:43:32 · 22633 阅读 · 2 评论 -
js中几种实用的跨域方法原理详解
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:要解决跨域的问题，我们可以使用以下几种方法：一转载 2016-09-29 22:25:21 · 261 阅读 · 0 评论 -
JavaScript跨域总结和解决办法
什么是跨域JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：U转载 2016-09-29 22:24:32 · 345 阅读 · 0 评论 -
js闭包的用途
我们来看看闭包的用途。事实上，通过使用闭包，我们可以做很多事情。比如模拟面向对象的代码风格；更优雅，更简洁的表达出代码；在某些方面提升代码的执行效率。1 匿名自执行函数我们知道所有的变量，如果不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需转载 2016-10-11 09:11:31 · 361 阅读 · 0 评论 -
js 算出Array数组中出现次数最多的元素
var array = new Array(4, 5, 4,7, 8, 4,2,67,5,89,5,67); var count = 1; var yuansu= new Array();//存放数组array的不重复的元素比如{4,5,7,8,2,67,89,} var sum = new Array(); //存放数组array中每个不同元转载 2016-09-22 22:01:46 · 5035 阅读 · 0 评论 -
javascript事件绑定的三种方法
要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。在JavaScript中，有三种常用的绑定事件的方法：在DOM元素中直接绑定；在JavaScript代码中绑定；绑定事件监听函数。一. 在DOM元素中直接绑定这里的DOM元素，可以理解为HTML标签。JavaSc转载 2016-09-22 22:00:51 · 1405 阅读 · 0 评论 -
认识js中的function和this
javascript中的函数不同于其他的语言，每个函数都是作为一个对象被维护和运行的。通过函数对象的性质，可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前，先看一下函数的使用语法：以下是引用片段：function func1(…){…}var func2=function(…){…};var func3=function func4(…){…};转载 2016-09-22 21:49:17 · 1082 阅读 · 0 评论 -
JavaScript删除数组重复元素的5个高效算法
去正规的互联网公司笔试、面试有很大的概率会碰到 使用javascript实现数组去重 的编码问题：如：魅族笔试题；本博文就 js 如何实现数组去重整理出5种方法，并附上演示Demo 以及 源码。1.遍历数组法最简单的去重方法， 实现思路：新建一新数组，遍历传入数组，值不在新数组就加入该新数组中；注意点：判断值是否在数组的方法“indexOf”是ECMAScript5 方法，IE8以转载 2016-09-13 12:33:52 · 428 阅读 · 0 评论 -
高效地随机选取数组中的元素
有前端题目大概是这样的：考虑到性能问题，如何快速从一个巨大的数组中随机获取部分元素。比如有个数组有100K个元素，从中不重复随机选取10K个元素。为了演示方便我们将数据简化，先给出方案最后再用大点的数据来测试性能的对比。常规解法常规做法倒也不难，生成一个0到数组长度减1的随机数，这个数也就是被选中元素在原数组中的下标，获得该元素后将值保存到另一个数组同时通过数组的splice方法将转载 2016-09-13 12:32:49 · 4036 阅读 · 0 评论 -
JSON学习笔记
JSON:JavaScript对象表示法(JavaScript Object Notation),是存储和交换文本信息的语法。 JSON是轻量级的文本数据交换格式，独立于语言。对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用： 1、使用 XML 1）读取 XML 文档 2）使用 XML DOM 来循环遍历文档 3）读取值并存储在变量中原创 2016-06-19 15:45:00 · 732 阅读 · 0 评论 -
AJAX基础和jQuery中的AJAX
AJAX是在不重新加载整个页面的情况下，与服务器交换数据并异步更新部分网页。 1. javascript使用ajax （1）生成XMLHttpRequest对象var xmlhttp;if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}else{ xmlhttp=new ActiveXObject("Microsoft.X原创 2016-06-19 14:35:54 · 477 阅读 · 0 评论 -
AJAX学习笔记--慕课网Ajax
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面情况下更新部分网页。同步： 异步 XMLHttpRequest 用于在后台与服务器交换数据。所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLH原创 2016-06-18 21:45:34 · 875 阅读 · 0 评论 -
javascript 常用方法
1.常用的HTML DOM**属性** innerHTML:节点（元素）的文本值 parentNode：节点元素的父节点 childNodes:元素的子节点 attributes:元素的属性节点 2.DOM 对象方法getElementById()//返回带有指定ID的元素getElementsByTagName()//返回包含带有指定标签名称的所有元素节点列表getElementsB原创 2016-06-17 22:29:19 · 334 阅读 · 0 评论 -
javascript基本知识
DOM是一种API（应用编程接口）Javascript使用的 第一种方法：1.将代码插入文档部分的<html><head><script type="text/javascript"> javascript </script></head><body></body></html>// JavaScript Document第二种方法是：把javascript代码存入一个人独立原创 2016-03-03 15:15:52 · 338 阅读 · 0 评论 -
javascript 小函数 点击图片 在显示区域显示 不跳转
<html><head><title>Image Gallery</title></head><body><h1>Snapshots</h1><ul> <li><a href="image/fireworks.jpg" onclick="showPic(this); return false;" title="a fireworks display">fireworks</a>/原创 2016-03-03 17:38:45 · 556 阅读 · 0 评论 -
慕课网--JS/jQuery中宽高的理解和应用
window是指整个浏览器窗口，可省略 document是窗口的一部分，window窗口的一部分。html文档是document对象的一部分window.location document.location 是一样的window.innerHeight和 window.outerHeight screen.width screen.availWidth是不可以改变的，但是scree原创 2016-11-07 16:46:42 · 538 阅读 · 0 评论 -
纯javascript实现dom树的遍历
二叉 DOM 树的遍历[javascript] view plain copy function Tree() { var Node = function(key){ this.key = key; this.left = null;转载 2016-10-19 10:59:55 · 2632 阅读 · 0 评论 -
深入理解javascript关键字this
1. 一般用处2. this.x 与 apply()、call()3. 无意义（诡异）的this用处4. 事件监听函数中的this5. 总结在JavaScript中this变量是一个令人难以摸清的关键字，this可谓是非常强大，充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余。1. 一般用处对于this变转载 2016-09-29 20:17:16 · 349 阅读 · 0 评论 -
异步 promise +generator+async(未完成)
Promise简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。特点promise有三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果可以决定当前是哪一种状态。一旦状态改变，就不会在变。状态的改变只有2种：原创 2017-12-17 17:24:09 · 565 阅读 · 0 评论 -
mobx基本使用
mobx是一个简单可扩展的状态管理库基本概念state(状态) 状态是驱动应用的数据，像有数据的excel表格2.derivations（衍生） 任何源自状态并且不会再进一步相互作用的东西。比如用户界面，待办事件的数量，把变化发送到服务端两种类型的衍生（1）computed values 是可以使用pure function从state中推导的值，m原创 2017-12-17 17:16:30 · 7133 阅读 · 1 评论 -
js数组方法总结
Array.from() 方法从一个类似数组或可迭代的对象中创建一个新的数组实例Array.from('foo');// ["f", "o", "o"]Array.isArray() 用于确定传递的值是否是一个 Array。Array.isArray([1, 2, 3]); // trueArray.isArray({foo: 123}); // falseArr原创 2017-12-17 11:30:02 · 533 阅读 · 0 评论 -
npm基本使用
npm是Node默认的模块管理器，是一个命令行下的软件，用来安装和管理Node模块。安装 npm install 模块名 -g全局安装本地安装：将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。可以通过 require()原创 2017-12-17 11:13:00 · 1358 阅读 · 0 评论 -
js增加class或者删除class
1.比较传统的方法var classVal = document.getElementById("id").getAttribute("class");//删除的话classVal = classVal.replace("someClassName","");document.getElementById("id").setAttribute("class",classVa原创 2017-12-13 19:45:58 · 71137 阅读 · 0 评论 -
js实现滑动门效果
滑动门效果： 原理：一共四道门，初始情况下，第一道门打开，其他三道门关闭，如第一个图所示。 假设图片的宽度是120px，其他三道门露出的宽度是80px， 初始状态下， 第二道门左边的距离是120px, 第三道门左边的距离是200px, 第四道门左边的距离是280px。 当第二道门打开时， 第二道门左边的距离是80px，为（120-40）px 第三道和第四道门左边的距离不变。原创 2017-03-16 09:40:21 · 3388 阅读 · 0 评论 -
js--继承
每个类有3部分， 第一部分是构造函数内的，供实例化对象复制用的 第二部分是构造函数外的，直接通过点语法添加，这是供类使用的，实例化对象访问不到 第三部分是类的原型中，实例化对象可以通过其原型链间接访问到，也是供所有实例化对象共用的。 1.类式继承//类式继承//声明父类function SuperClass(){ this.superValue=true;}//为父类添加共有方法原创 2017-01-15 21:43:43 · 1332 阅读 · 0 评论 -
javascript 封装
1.创建一个类 在JavaScript中创建一个类，首先声明一个函数保存在一个变量里，然后这个类内部通过对this变量添加属性或方法实现对类添加属性或者方法。var Book=function(id,bookname,price){ this.id=id; this.bookname=bookname; this.price=price;}也可以通过类的原型添加属性和方法，有两种方式，一种原创 2017-01-10 16:33:11 · 587 阅读 · 0 评论 -
变量、对象、函数、类
1.函数的形式function checkName(){ //定义一个函数}var checkName=function(){//函数的另一种形式}2.用对象收编变量var CheckObject={ checkName:function(){ //验证姓名 }， checkEmail：function(){ //验证邮箱 }，原创 2017-01-09 22:11:44 · 623 阅读 · 0 评论 -
javascript中多态
多态，对同一个方法的多种调用方式，在javascript中，通过对传入的参数做判断以实现多种调用方式//多态function add(){ var arg=arguments, len=arg.length; switch(len){ case 0: return 10; case 1: retur原创 2017-01-09 19:47:49 · 612 阅读 · 0 评论 -
Javascript模块化编程--学习笔记
1.模块的原始写法： 模块时实现特定功能的一组方法。只要把不同的函数（以及记录状态的变量）简单的放在一起，就算是一个模块。function fun1(){//实现一个功能}function fun2(){//实现另一个功能的函数}上面的函数fun1() ,fun2()组成了一个模块，使用的时候，直接调用就行了。这种做法的缺点很明显：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且原创 2016-06-23 17:48:54 · 490 阅读 · 0 评论 -
关于原生dom操作
1. 关于查找1.1 通过父子兄弟关系查找childNodes //查找父元素的所有子元素（多层），返回一个类数组对象，支持到ie6parentNode //查找子元素的父节点（一层），返回父元素对象，支持到ie6previousSibling //查找前一个紧邻的兄弟元素，返回兄弟元素对象，支持到ie6nextSibling //查找后一个紧邻的兄弟元素，返回兄弟元转载 2016-10-07 20:06:54 · 1452 阅读 · 0 评论 -
关于字符串以及数组的操作
关于数组的操作先掌握一些基本的数组操作concat // 用于拼接多个数组，接受多个参数push // 从数组尾部插入一个数，并返回新的数组长度pop // 从数组尾部删除一个数，并返回被删除的数shift // 从数组头部删除一个数，并返回被删除的数unshift // 从数组头部插入一个数，并返回新的数组的长度sort // 将数组进行排序，可以转载 2016-10-07 20:04:09 · 290 阅读 · 0 评论 -
JS正则表达式验证账号、手机号、电话和邮箱
验证帐号是否合法验证规则：字母、数字、下划线组成，字母开头，4-16位。function checkUser(str){ var re = /^[a-zA-z]\w{3,15}$/; if(re.test(str)){ alert("正确"); }else{ alert("错误"); } }c转载 2016-10-07 20:00:37 · 825 阅读 · 0 评论 -
javascript编程规则
javascript使用window对象的open()创建新的浏览器窗口 window.open(url,name,feature) 第一个参数是新窗口的URL地址，省略会弹出一个空白的浏览器窗口 第二个参数是新窗口的名字。 最后一个参数是以逗号分隔的字符串，内容是新窗口的各种属性。（尺寸和功能）function popUp(winURL){ window.open(winURL原创 2016-03-04 11:21:52 · 424 阅读 · 0 评论 -
javascript 美术馆--改进1
1． 实现点击会在本页显示图片的代码分离window.onload=prepareGallery;//每个事件处理函数只能绑定一条指令function prepareGallery(){ if(!document.getElementsByTagName) return false;//判断是否支持javascript,否则不执行 if(!document.getElement原创 2016-03-04 14:34:57 · 601 阅读 · 0 评论 -
javascript动态创建html内容
Document.write() 把字符串插入到文档里<html><head><title>Test</title><script type="text/javascript"></head><body><div id="testdiv"><p>This is <em>my</em>content.</p></div><script type="text/javascript"原创 2016-03-04 20:31:27 · 1014 阅读 · 0 评论 -
javascript 美术馆
childNodes属性 从给定的节点树把任何一个元素的所有子元素检索出来，返回一个数组function countBodyChildren(){var body_element=document.getElementsByTagName("body")[0];//检索到bodyalert(body_element.childNodes);//检索到body的所有子元素alert(body_原创 2016-03-03 22:24:56 · 550 阅读 · 0 评论 -
javascript 美术库 改进2
1.html代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Image Gallery</title><script type="text/javascrip原创 2016-03-04 21:24:29 · 278 阅读 · 0 评论 -
javascript实现轮播图
1.首先是最简单的图片切换效果。 实现方法：将所有的图片放入一个数组中，几秒后切换为下一张。如果到了最后一张，切换为第一张显示。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="原创 2016-03-24 19:28:07 · 810 阅读 · 0 评论 -
javascript 事件处理
1. 注册事件处理程序（1） 给事件目标对象或文档元素设置属性a.设置javascript对象属性为事件处理程序 window.onload=function(){}.每个事件目标对于事件类型将最多只有一个处理程序b.设置html标签属性为事件处理程序点击这里如果包含多条javascript属性，必须用分号分隔开（2） 将事件处理程序传递给对象或元素的一原创 2016-03-27 19:45:17 · 286 阅读 · 0 评论 -
读书笔记----js中window对象
1. setTimeout() 指定一个函数在指定的毫秒数之后运行，单词调用。2. setInterval() 重复调用函数3. location 表示该窗口中当前显示的文档的URL，并定义了方法使窗口载入新的文档window.location===document.location //总是返回trueDocument 对象也有一个URL属性，是文档首原创 2016-03-25 16:44:08 · 467 阅读 · 0 评论