javascript-原生-结构

JavaScript原生折叠扩展收缩菜单带缓冲动画

JavaScript原生折叠扩展收缩菜单带缓冲动画 @落雨 <div id="div_two" style="display: none;"> <p class="p1">机房介绍</p> <div class="hide_jie"> <p>上海三门路数据中心</p> 位于上海市杨浦区三门路561号1楼C1室,一期机架数量200个,总规划机架数量500个,…

jQuery 事件绑定和 JavaScript 原生事件绑定

总结一下:jQuery 事件绑定和 JavaScript 原生事件绑定及区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.on, 对应的解除监听的函数分别是 unbind.die.undelegate.off. live.delegate 不多用,在Jquery1.7中已经移除,这里不多说重点介绍 bind.on bind(event,[data],function) bind 是使用频率较高的一种,作用就是在选择到的…

javascript原生事件总结

javascript原生的事件,总结了一下,包括事件流.处理函数.事件对象这几样东西.而在兼容性方面,主要是老牌ie8以及以下和现代浏览器的差异,也就是ie和DOM事件标准的差异. 事件流这个事件流ie4和Netscape4提出来的,但是两个公司提出的事件流确实刚好相反的.ie的是事件冒泡,Netscape的是事件捕获.ie会从触发事件的元素一直往上冒泡直到document元素.如图ie8以下包括ie8的Netscape则是从document元素开始往下传播一直到触发事件的元素.如图而DOM标准…

jQuery? 回归JavaScript原生API

如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且有时候只不过小写一个Demo,或者产品中只有少量的前端效果或DOM操作,就去花时间&空间引入jQuery,或者React?不免有取宰牛之刀以杀鸡之嫌. 原文首链:http://www.jeffjade.com/2015/11/25/2015-11-31-jQuery-vs-javaScript/ 在…

据说每个大牛、小牛都应该有自己的库——JavaScript原生对象拓展

在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏,一是,关于写个自己的库的想法由来已久,但只是周末才下决心要写,本来觉得会有很多以前的总结要写出来的,可是一下笔才知道有多难,零零散散的东西谁都能够写出来,可怎么把这些东西写的有条理.效率高.可用性强之前从来没有想过,二是最近几天和未来的日子公司会比较忙,下班回来的时间有限,没太多时间去想,所以拖沓了,不过不会太监. JavaScr…

[转] 有趣的JavaScript原生数组函数

在JavaScript中,可以通过两种方式创建数组,Array构造函数和 [] 便捷方式, 其中后者为首选方法.数组对象继承自Object.prototype,对数组执行typeof操作符返回‘object’而不是‘array’.然而执行[] instanceof Array返回true.此外,还有类数组对象使问题更复杂,如字符串对象,arguments对象.arguments对象不是Array的实例,但却有个length属性,并且值能通过索引获取,所以能像数组一样通过循环操作. 在本文中,…

JavaScript原生数组函数

有趣的JavaScript原生数组函数在JavaScript中,可以通过两种方式创建数组,构造函数和数组直接量, 其中后者为首选方法.数组对象继承自Object.prototype,对数组执行typeof操作符返回‘object’而不是‘array’.然而执行[] instanceof Array返回true.此外,还有类数组对象是问题更复杂,如字符串对象,arguments对象.arguments对象不是Array的实例,但却有个length属性,并且值能通过索引获取,所以能像数组一样通过循…

JavaScript原生对象拓展

JavaScript原生对象拓展在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏,一是,关于写个自己的库的想法由来已久,但只是周末才下决心要写,本来觉得会有很多以前的总结要写出来的,可是一下笔才知道有多难,零零散散的东西谁都能够写出来,可怎么把这些东西写的有条理.效率高.可用性强之前从来没有想过,二是最近几天和未来的日子公司会比较忙,下班回来的时间有限,没太多时间去想,所以拖沓…

JavaScript原生Array常用方法

JavaScript原生Array常用方法在入门Vue时, 列表渲染一节中提到数组的变异方法, 其中包括push(), pop(), shift(), unshift(), splice(), sort(), reverse(), 而concat()和slice()不属于变异方法. 在这里就复习一下Array所提供的这几个方法的使用. 1.栈方法 push方法和pop方法, 可以使数组的行为类似于栈, 先进后出, 并且推入和弹出操作只发生在一端. push方法 push方法可以接收一个或多个参…

有趣的JavaScript原生数组函数

本文由伯乐在线 - yanhaijing 翻译.未经许可,禁止转载!英文出处:flippinawesome.欢迎加入翻译小组. 在JavaScript中,可以通过两种方式创建数组,Array构造函数和 [] 便捷方式, 其中后者为首选方法.数组对象继承自Object.prototype,对数组执行typeof操作符返回‘object’而不是‘array’.然而执行[] instanceof Array返回true.此外,还有类数组对象使问题更复杂,如字符串对象,arguments对象.argu…

javascript原生bind方法详解

bind()方法,是javascript原生的函数类的一个原型方法(即Function.prototype里的方法),不支持ie低版本. 基本格式: function.bind(obj1,obj2,obj3...); 其中,function是一个方法属性 obj1是执行此方法的this上下文 obj2及之后的参数,是执行function时传入的参数 bind方法有两个用处: 1.用来改变function方法中的上下文 2.给function方法传入参数 bind方法和apply方法,call方法…

JavaScript原生实现《贪吃蛇》

概述 JavaScript原生实现<贪吃蛇>,每吃掉一个食物,蛇的身体会变长,食物会重新换位置. 详细代码下载:http://www.demodashi.com/demo/10728.html 贪吃蛇大家都不陌生吧~ 简单做一个. 一.思路 1.让我们的小蛇动起来 2.随机生成食物 3.每吃掉一个食物,蛇的身体会变长,食物会重新换位置 html界面 <div class="face">  <div id=&qu…

javascript原生bind方法ie低版本兼容详解

上一篇文章讲到了javascript原生的bind方法: http://www.cnblogs.com/liulangmao/p/3451669.html 这篇文章就在理解了原生bind方法的原理以后,自己写一个原型bind方法,来兼容ie低版本浏览器: bind方法一共做了三件事: 1.改变方法中的上下文 2.为方法传入实参 3.返回一个改变了上下文并且调用的时候传入指定的实参的新方法因此,我们就照着这个思路,写一个Function的原型方法: if(!Function.prototype.…

javascript 原生得到document.Element的方法

今天这里写这个博客的主要目的是记录一下javascript原生的选择dom的集中方法. 1.document.getElementById.这个方法接收1个参数,就是DOM元素的id(区分大小写),这也是平时用的最多的方法,并且用这种方法DOM查找的效率是最高的,所以如果能用id查找的dom元素尽量用id来查询,返回的类型是DOM ELEMENT. 2.document.getElementsByTagName.这个方法接收1个参数,需要查询的元素标签(不区分大小写).返回的是一个 HTMLCo…

JavaScript原生函数（内置函数）

1.JavaScript原生函数(内置函数) JavaScript原生函数(内置函数)有: String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() 2.创建内置函数 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> &l…

JavaScript 原生提供两个 Base64 相关的方法

JavaScript 原生提供两个 Base64 相关的方法. btoa():任意值转为 Base64 编码 atob():Base64 编码转为原来的值 var string = 'Hello World!'; btoa(string) // "SGVsbG8gV29ybGQh" atob('SGVsbG8gV29ybGQh') // "Hello World!" 注意,这两个方法不适合非 ASCII 码的字符,会报错. btoa('你好') // 报错要将非…

javascript原生js轮播图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

JavaScript原生的节点操作

前言:原生是Javascript的基础,还是需要多多重视,时间长都忘记了,现在整理一下. 获取子节点 children 不是标准的dom属性,但是几乎被所有浏览器支持.不包含文本节点. 注意:在IE中,children包含注释节点. childNodes 是标准属性.返回所有子节点.包括文本节点. 获取第一个子节点 1.firstChild document.getElementById('b_pole').childNodes[0].childNodes[0].firstChild 获取最后一…

javascript 原生常用api 数组方法大全

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10 ]; var newA…

第二章：Javascript词法结构

编程语言的词法结构是一套基础性的规则,用来描述你如何编写这门语言.作为语法的基础,它规定了变量名是怎么样的,如何写注释,以及语句之间是如何区分的.本节用很短的篇幅来介绍javascript的词法结构. 1.字符集 javascript程序是用Unicode字符集编写的,Unicode是ASCII和Latin-1的超集,并支持地区上几乎所有的语言.ECMAscript3要求javascript的实现必须支持Unicode2,1及后续版本,ECMAscript5则要求支持Unicode3及后续版本…

用NativeScript创建JavaScript原生移动应用

Telerik公开了用于创建安卓.iOS和Windows Universal跨平台原生应用的框架,NativeScript的公共访问权限. NativeScript既不是一种新型的JavaScript语言,也不是原生功能的封装器,它包括一个JavaScript运行时环境和一种将JavaScript调用转化为原生调用的机制.用JavaScript(或TypeScript,CoffeeScript等)语言编写应用,之后在安卓平台用V8,在iOS和Windows Phone上用WebKit JavaS…

JavaScript原生对象总纲

一. javascript之Array类创建js数组两种方式: var arr = []; 或var arr = new Array(); ()里可以指定长度,也可以不指定,指不指定都无所谓,因为js里的数组长度是可变的 1.concat(arr1,arr2,arr3......arrx): js数组合并,返回合并后的新数组,传递一个或多个数组,字符串都可以行,返回的都是一个合并的新数组(传的数组会先转成字符串再一个一个的传入进去). 2. join(): 将数组元素按指定的分隔符拼接成一字…

JavaScript原生实现观察者模式

观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象. 它是由两类对象组成,主题和观察者,主题负责发布事件,同时观察者通过订阅这些事件来观察该主体,发布者和订阅者是完全解耦的,彼此不知道对方的存在,两者仅仅共享一个自定义事件的名称. 在Nodejs中通过EventEmitter实现了原生的对于这一模式的支持. 在JavaScript中事件监听机制就可以理解为一种观察者模式.通过onclick进行事件绑定…

javascript 词法结构小结

作为一名前端程序员,自然学习了一些框架,但是学的越多越发现自己基础的不足,于是想系统的学习一下js基础,然后把它记录下来. 如其他编程语言一样,词法结构是一门语言的基础,它规定了诸如如何给变量起名字.如何写注释.如何断句等. 字符集 JavaScript 所使用的是Unicode字符集编码.和HTML不同,JavaScript 是区分大小写的.也就是说变量.函数名.关键字和所有的标识符都必须使用一致的大小写形式.比如我们可以使用 var 来定义一个变量,而不能使用 VAR 或者 Var 来定义.…

客户端优化之使用javascript原生方法替代复杂的数学运算和jquery方法

尽管jQuery等js框架相比原生javascript使用起来极为方便但是为什么在一些大型互联网公司还是一致强调前端开发人员的js基础,因为尽管javascript使用起来可能非常不便不仅体现在语法而且还要处理复杂的浏览器兼容,但是无论我们如何优化jQuery等框架编写的代码,它永远不可能比javascript引擎提供的原生方法性能更好,原因十分简单:Javascript的原生部分在你编写前端代码之前已经存在于浏览器中,都是用低级语言编写的,这意味着这些方法均被编译成机器码,作为浏览器的一部分,…

JavaScript原生对象及扩展

来源于 https://segmentfault.com/a/1190000002634958 内置对象与原生对象内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集:而后者包括了一些在运行过程中动态创建的对象. 原生对象(New后的对象) ECMA-262 把原生对象(native object)定义为“独立于宿主环境的 ECMAScript 实现提供的对象”.包括如下: Object.Function.Array.St…

【前端】强大的javascript原生选择器querySelector 和 querySelectorAll

querySelector 和 querySelectorAll 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id 等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库.事实上,现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持…

扩展javascript原生对象

原文地址: http://javascript.info/tutorial/native-prototypes 原生的javascript 对象在prototypes里面保存他们可用的方法. 比如,当我们创建一个新的对象时, 它并未包含任何东西,它怎么知道能够有个toString方法可供使用呢? var obj={}; alert(obj.toString()) 那是因为obj={}是下面语句 obj = new Object() 的缩写,而Object是原生的javascript 构造函数,而…

javascript原生360 开机小动画

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box{ width: 322px; position: fixed; bottom:; right:; } span{ position: absolute; top:; right:; width:30px…

100行代码让您学会JavaScript原生的Proxy设计模式

面向对象设计里的设计模式之Proxy(代理)模式,相信很多朋友已经很熟悉了.比如我之前写过代理模式在Java中实现的两篇文章: Java代理设计模式(Proxy)的四种具体实现:静态代理和动态代理 Java动态代理之InvocationHandler最简单的入门教程其实和Java一样,JavaScript从语言层面来讲,也提供了对代理这个设计模式的原生支持.我们用一个不到100行代码的例子来看看吧. 下面的代码创建了一个名叫Jerry的Employee对象,然后用函数hireEmployee雇…

【javascript-原生-结构】的更多相关文章