Array.isArray() 和 isObject() 原生js实现

原生JS：Array对象详解

Array对象本文参考MDN做的详细整理,方便大家参考[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) 创建数组: 数组字面量:var arr1 = [1,2,3]; Array构造函数1:var arr2 = new Array(1,2,3); //[1,2,3] Array构造函数2:var arr3 = new Array(3); var arr3 = new…

原生js dom记忆的内容

1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelectorAllgetAttributesetAttributeremoveAttribute domobj.tagNamedomobj.innerHTML innerHTML与innerText的区别.http://akunamotata.iteye.com/blog/440863domobj.idd…

原生JS替代jQuery的各种方法汇总

前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少.本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器. Query Selector 常用的 class.id.属性选择器都可以使用 document.querySelector 或 document.q…

jQuery与原生JS相互转化

前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少.总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器. Query Selector 常用的 class.id.属性选择器都可以使用 document.querySelector 或 document.quer…

原生JS面试题

面试中遇到的原生js题总结 1.js 去重1) indexOf Array.prototype.unique = function(){ var result = []; var len = this.length; for(var i = 0; i<len; i++){ if(result.indexOf(this[i])<0){ result.push(this[i]); } } return result; } var arr = [1,2,3,2,1,3,2,1]; arr.uni…

面试中遇到的原生js题总结

最近面试,遇到很多js相关的面试题,总结一下. 1.js 去重 1) indexOf Array.prototype.unique = function(){ var result = []; var len = this.length; for(var i = 0; i<len; i++){ if(result.indexOf(this[i])<0){ result.push(this[i]); } } return result; } var arr = [1,2,3,2,1,3,2,1]…

放弃jQuery，使用原生js吧！

转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样很好用.下面介绍几个原生替换jq的方法. 获取元素 JQuery $('.xxx'); //class获取 $('#xxx'); //id获取 $('.xxx.ccc'); //同时包含xxx和ccc $('.xxx,.zzz'); //多选 $('.xxx div'); //子类 $('.xxx…

原生js替换jQuery各种方法-中文版

原文https://github.com/nefe/You-D... 原生JS与jQuery操作DOM对比 You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少.本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器.…

轮播图原生js实现和jquery实现和js面向对象方式实现

原生JS实现 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>rotate</title> <link rel="stylesheet" href="css/index.css" /> <style type="text/cs…

原生JS实现"旋转木马"效果的图片轮播插件

一.写在最前面最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果由于自己的服务器还没弄好.在线演…

原生js实现autocomplete插件

在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间,自己动手写写,看一些原生js的东西,根据自己的思路做插件,这样能提高水平. 说到autotemplete,好多人都用过,引用autotemplete.js,然后就可以实现在输入框输入值的时候提示下拉选项,类似于百度搜索框那种提示功能,下面就来说说自己的思路. 为输入框添加input事件 input事…

原生JS：JSON对象详解

JSON对象支持到IE8,旧版的IE需要Polyfill 本文参考MDN做的详细整理,方便大家参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) JSON对象本身不能被调用或者作为构造函数,除了它的这两个方法属性外 JSON 对象本身并没有什么有用的功能. 每个JSON对象,就是一个值.要么是简单类型的值,要么是复合类型的值,但是只能是一个值,不能是两个或更多的值.这就是说,每个JSON文档只能包含一个值. 描述 J…

原生JS中apply()方法的一个值得注意的用法

今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { "length": 5, "0": 'eat', "1": 'play' });//得到ary = ['eat', 'play', undefined*3] 在这个用法中,apply的第一个参数为null,第二个参数是一个包含length字段的对象,查了…

原生js写的贪吃蛇网页版游戏特效

框架操作DOM和原生js操作DOM比较

问题引出对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html ng-app="test"> <head> <title>Performance Comparison for Knockout, Angular and React</title> <link href="//cdnjs.cloud…

原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!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…

扩展原生js的一些方法

扩展原生js的Array类 Array.prototype.add = function(item){ this.push(item); } Array.prototype.addRange = function(items){ var length = items.length; if(length!=0){ for (var index = 0; index < length; index++) { this.push(items[index]); } } } Array.prototype…

基于原生js的图片延迟加载

当页面图片比较多的时候,我们通常会做一个延迟加载,避免页面打开时一下子的请求数太多,加载过慢影响用户体验. 如果项目用了jquery框架,则可以直接用 jquery.lazyload.可在jquery官网下载到. 如果项目是基于原生js的,可以参考以下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lazyloa…

原生js实现常见的jquery的功能

原生选择器充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <li class="lione">2222</li> <li class="lione">3333</li> </ul> </div> <div id="box2"> <…

原生js中slice()方法和splice()区别

slice()方法和splice()方法都是原生js中对数组操作的方法. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),start是必选的.规定从何处开始选取,如果是负数,则是从数组元素尾部选取,也就是说-1指最后一个元素,-2指倒数第二个元素:end是可选元素.规定从何处结束选取.该参数没有,表示从开始位置截取到数组末尾,如果是负数,表示从数组末尾向前截取元素.该方法不会修改原数组,如果想删除数组中某一段元素,使用spl…

原生JS—实现图片循环切换的两种方法

今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一在上栗子之前我们先简单介绍一下所用的一些知识点.首先是--JS中的数组,什么是数组呢?其实数组就是在内存空间中连续存储有序数据的结合,元素在数组中的顺序,成为下标,可以使用下标访问数组的每个元素.我们声明数组有如下方式: 1.使用字面量申明:var arr=[ ]; 2.在JS中,同一数组,可以存储各种数据类型,直接将数据存储在数组中例如:va…

原生JS—实现图片循环切换及监测鼠标滚动切换图片

今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一在上栗子之前我们先简单介绍一下所用的一些知识点.首先是--JS中的数组,什么是数组呢?其实数组就是在内存空间中连续存储有序数据的结合,元素在数组中的顺序,成为下标,可以使用下标访问数组的每个元素.我们声明数组有如下方式: 1.使用字面量申明:var arr=[ ]; 2.在JS中,同一数组,可以存储各种数据类型,直…

原生js实现canvas气泡冒泡效果

说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入JumpBubble.js一个js文件即可项目源码地址: https://github.com/wanghairong-i/JumpBubble== 使用demo: ES6版本的使用demo: const bubble = new JumpBubble(document.getElementById…

页面性能优化-原生JS实现图片懒加载

在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的方式叫做图片懒加载,又叫做按需加载或图片的延时加载.这样做的好处是:1.可以加快页面首屏渲染的速度:2.节约用户的流量. 一.实现思路 1.图片img标签自定义一个属性data-src来存放真实的地址. 2.当滚动页面时,检查所有的img标签,判断是否出现在事业中,如果…

原生JS插件（超详细）

作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦.以前一直说,掌握了js原生,就基本上可以解决前端的所有脚本交互工作了,这话大体上是有些浮夸了.不过,也从侧面说明了原生js在前端中占着多么重要的一面.好了.废话不多说.咱们就来看一下怎么去做一个自己的js插件吧. 插件的需求我们写代码,并不是所有的业务或者逻辑代码都要抽出来复用.首先,我们得看一下…

原生JS forEach()和map()遍历的区别以及兼容写法

一.原生JS forEach()和map()遍历共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. 3.匿名函数中的this都是指Window. 4.只能遍历数组. 1.forEach() 没有返回值. arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项,…

原生JS实现简易轮播图

原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = function() { var tab = 0; var loop_imgs = new Array("img/l1.jpg", "img/l2.jpg", "img/l3.jpg", "img/l4.jpg", "img/l5…

原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用

优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动端开发中,用户上传图片宽高不一致而导致的图片变形的问题 3.简洁的API,让你分分钟入门!!! 代码如下[默认模式,不对图片进行剪切]:<!DOCTYPE html><html lang="en"> <head> <meta charset=&qu…

【面试篇】寒冬求职季之你必须要懂的原生JS(中)

互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在,很显然是不行了.本文梳理出了一些面试中有一定难度的高频原生JS问题,部分知识点可能你之前从未关注过,或者看到了,却没有仔细研究,但是它们却非常重要. 本文将以真实的面试题的形式来呈现知识点,大家在阅读时,建议不要先看我的答案,而是自己先思考一番.尽管,本文所有的答案,都是我在翻阅各种资料,思考并验…

【Array.isArray() 和 isObject() 原生js实现】的更多相关文章