![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 61
刘小妞
遇见更好的自己---前端小白的成长历程,学的越多,发现自己越无知
展开
-
textarea高度随内容自动改变
需求textarea默认的高度不是对着内容变化,而是随着内容增多,出现了滚动条。目前的需求是实现一个能够输入的textarea,并且高度跟着内容变化。发现了一个比较好用的插件flexText,但是这个基于jquery写的,目前的技术栈是react,所以简单看了下,然后用原生的js模拟了一个实现。原理:html结构:div class="body"> di原创 2018-01-06 12:43:32 · 22446 阅读 · 2 评论 -
js中几种实用的跨域方法原理详解
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:要解决跨域的问题,我们可以使用以下几种方法:一转载 2016-09-29 22:25:21 · 246 阅读 · 0 评论 -
JavaScript跨域总结和解决办法
什么是跨域JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表:U转载 2016-09-29 22:24:32 · 320 阅读 · 0 评论 -
js闭包的用途
我们来看看闭包的用途。事实上,通过使用闭包,我们可以做很多事情。比如模拟面向对象的代码风格;更优雅,更简洁的表达出代码;在某些方面提升代码的执行效率。1 匿名自执行函数我们知道所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去,这样的临时变量加入全局对象有很多坏处,比如:别的函数可能误用这些变量;造成全局对象过于庞大,影响访问速度(因为变量的取值是需转载 2016-10-11 09:11:31 · 340 阅读 · 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 · 5007 阅读 · 0 评论 -
javascript事件绑定的三种方法
要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。在JavaScript中,有三种常用的绑定事件的方法:在DOM元素中直接绑定;在JavaScript代码中绑定;绑定事件监听函数。一. 在DOM元素中直接绑定这里的DOM元素,可以理解为HTML标签。JavaSc转载 2016-09-22 22:00:51 · 1385 阅读 · 0 评论 -
认识js中的function和this
javascript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的。通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前,先看一下函数的使用语法:以下是引用片段:function func1(…){…}var func2=function(…){…};var func3=function func4(…){…};转载 2016-09-22 21:49:17 · 1057 阅读 · 0 评论 -
JavaScript删除数组重复元素的5个高效算法
去正规的互联网公司笔试、面试有很大的概率会碰到 使用javascript实现数组去重 的编码问题:如:魅族笔试题;本博文就 js 如何实现数组去重整理出5种方法,并附上演示Demo 以及 源码。1.遍历数组法最简单的去重方法, 实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中;注意点:判断值是否在数组的方法“indexOf”是ECMAScript5 方法,IE8以转载 2016-09-13 12:33:52 · 398 阅读 · 0 评论 -
高效地随机选取数组中的元素
有前端题目大概是这样的:考虑到性能问题,如何快速从一个巨大的数组中随机获取部分元素。比如有个数组有100K个元素,从中不重复随机选取10K个元素。为了演示方便我们将数据简化,先给出方案最后再用大点的数据来测试性能的对比。常规解法常规做法倒也不难,生成一个0到数组长度减1的随机数,这个数也就是被选中元素在原数组中的下标,获得该元素后将值保存到另一个数组同时通过数组的splice方法将转载 2016-09-13 12:32:49 · 3976 阅读 · 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 · 712 阅读 · 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 · 452 阅读 · 0 评论 -
AJAX学习笔记--慕课网Ajax
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX是与服务器交换数据并更新部分网页的技术,在不重新加载整个页面情况下更新部分网页。同步: 异步 XMLHttpRequest 用于在后台与服务器交换数据。所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLH原创 2016-06-18 21:45:34 · 855 阅读 · 0 评论 -
javascript 常用方法
1.常用的HTML DOM**属性** innerHTML:节点(元素)的文本值 parentNode:节点元素的父节点 childNodes:元素的子节点 attributes:元素的属性节点 2.DOM 对象方法getElementById()//返回带有指定ID的元素getElementsByTagName()//返回包含带有指定标签名称的所有元素节点列表getElementsB原创 2016-06-17 22:29:19 · 312 阅读 · 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 · 320 阅读 · 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 · 532 阅读 · 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 · 513 阅读 · 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 · 2602 阅读 · 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 · 334 阅读 · 0 评论 -
异步 promise +generator+async(未完成)
Promise简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。特点promise有三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果可以决定当前是哪一种状态。一旦状态改变,就不会在变。状态的改变只有2种:原创 2017-12-17 17:24:09 · 512 阅读 · 0 评论 -
mobx基本使用
mobx是一个简单可扩展的状态管理库基本概念state(状态) 状态是驱动应用的数据,像有数据的excel表格2.derivations(衍生) 任何源自状态并且不会再进一步相互作用的东西。比如用户界面,待办事件的数量,把变化发送到服务端两种类型的衍生(1)computed values 是可以使用pure function从state中推导的值,m原创 2017-12-17 17:16:30 · 7041 阅读 · 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 · 507 阅读 · 0 评论 -
npm基本使用
npm是Node默认的模块管理器,是一个命令行下的软件,用来安装和管理Node模块。安装 npm install 模块名 -g全局安装本地安装:将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录),如果没有 node_modules 目录,会在当前执行 npm 命令的目录下生成 node_modules 目录。可以通过 require()原创 2017-12-17 11:13:00 · 1324 阅读 · 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 · 69801 阅读 · 0 评论 -
js实现滑动门效果
滑动门效果: 原理:一共四道门,初始情况下,第一道门打开,其他三道门关闭,如第一个图所示。 假设图片的宽度是120px,其他三道门露出的宽度是80px, 初始状态下, 第二道门左边的距离是120px, 第三道门左边的距离是200px, 第四道门左边的距离是280px。 当第二道门打开时, 第二道门左边的距离是80px,为(120-40)px 第三道和第四道门左边的距离不变。原创 2017-03-16 09:40:21 · 3346 阅读 · 0 评论 -
js--继承
每个类有3部分, 第一部分是构造函数内的,供实例化对象复制用的 第二部分是构造函数外的,直接通过点语法添加,这是供类使用的,实例化对象访问不到 第三部分是类的原型中,实例化对象可以通过其原型链间接访问到,也是供所有实例化对象共用的。 1.类式继承//类式继承//声明父类function SuperClass(){ this.superValue=true;}//为父类添加共有方法原创 2017-01-15 21:43:43 · 1309 阅读 · 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 · 553 阅读 · 0 评论 -
变量、对象、函数、类
1.函数的形式function checkName(){ //定义一个函数}var checkName=function(){//函数的另一种形式}2.用对象收编变量var CheckObject={ checkName:function(){ //验证姓名 }, checkEmail:function(){ //验证邮箱 },原创 2017-01-09 22:11:44 · 592 阅读 · 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 · 590 阅读 · 0 评论 -
Javascript模块化编程--学习笔记
1.模块的原始写法: 模块时实现特定功能的一组方法。只要把不同的函数(以及记录状态的变量)简单的放在一起,就算是一个模块。function fun1(){//实现一个功能}function fun2(){//实现另一个功能的函数}上面的函数fun1() ,fun2()组成了一个模块,使用的时候,直接调用就行了。这种做法的缺点很明显:污染了全局变量,无法保证不与其他模块发生变量名冲突,而且原创 2016-06-23 17:48:54 · 470 阅读 · 0 评论 -
关于原生dom操作
1. 关于查找1.1 通过父子兄弟关系查找childNodes //查找父元素的所有子元素(多层),返回一个类数组对象,支持到ie6parentNode //查找子元素的父节点(一层),返回父元素对象,支持到ie6previousSibling //查找前一个紧邻的兄弟元素,返回兄弟元素对象,支持到ie6nextSibling //查找后一个紧邻的兄弟元素,返回兄弟元转载 2016-10-07 20:06:54 · 1419 阅读 · 0 评论 -
关于字符串以及数组的操作
关于数组的操作先掌握一些基本的数组操作concat // 用于拼接多个数组,接受多个参数push // 从数组尾部插入一个数,并返回新的数组长度pop // 从数组尾部删除一个数,并返回被删除的数shift // 从数组头部删除一个数,并返回被删除的数unshift // 从数组头部插入一个数,并返回新的数组的长度sort // 将数组进行排序,可以转载 2016-10-07 20:04:09 · 275 阅读 · 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 · 812 阅读 · 0 评论 -
javascript编程规则
javascript使用window对象的open()创建新的浏览器窗口 window.open(url,name,feature) 第一个参数是新窗口的URL地址,省略会弹出一个空白的浏览器窗口 第二个参数是新窗口的名字。 最后一个参数是以逗号分隔的字符串,内容是新窗口的各种属性。(尺寸和功能)function popUp(winURL){ window.open(winURL原创 2016-03-04 11:21:52 · 405 阅读 · 0 评论 -
javascript 美术馆--改进1
1. 实现点击会在本页显示图片的代码分离window.onload=prepareGallery;//每个事件处理函数只能绑定一条指令function prepareGallery(){ if(!document.getElementsByTagName) return false;//判断是否支持javascript,否则不执行 if(!document.getElement原创 2016-03-04 14:34:57 · 576 阅读 · 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 · 977 阅读 · 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 · 531 阅读 · 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 · 267 阅读 · 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 · 781 阅读 · 0 评论 -
javascript 事件处理
1. 注册事件处理程序(1) 给事件目标对象或文档元素设置属性a.设置javascript对象属性为事件处理程序 window.onload=function(){}.每个事件目标对于事件类型将最多只有一个处理程序b.设置html标签属性为事件处理程序点击这里如果包含多条javascript属性,必须用分号分隔开(2) 将事件处理程序传递给对象或元素的一原创 2016-03-27 19:45:17 · 271 阅读 · 0 评论 -
读书笔记----js中window对象
1. setTimeout() 指定一个函数在指定的毫秒数之后运行,单词调用。2. setInterval() 重复调用函数3. location 表示该窗口中当前显示的文档的URL,并定义了方法使窗口载入新的文档window.location===document.location //总是返回trueDocument 对象也有一个URL属性,是文档首原创 2016-03-25 16:44:08 · 443 阅读 · 0 评论