【原生js数组排序（封装方法）】的更多相关文章

原生Js 两种方法实现页面关键字高亮显示

原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换html标签3.替换要修改的关键字4.再把html标签修改回去不足就是如果查找的关键字跟替换的标签一样就有冲突了 效果预览:http://jsfiddle.net/dtdxrk/EAqkN/embedded/result/ 1 <!DOCTYPE HTML> 2 <html lang=&qu…

原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaScript对象属性进行绑定: var a=document.getElementById("a"); a.onclick=function(){alert("你好!")};//这里也可以不用匿名的函数直接赋方法名也是可以的 通过以上这种方式进行事件函数的绑定有个缺点就是…

原生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添加节点方法与jQuery添加节点方法的比较及总结

一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> </div> <div id="div…

原生JS实现new方法、new一个对象发生的四部、new里面常用的优先级

一.js中new一个对象的过程 首先了解new做了什么,使用new关键字调用函数(new ClassA(…))的具体步骤: 1.创建一个新对象: var obj = {}; 2.设置新对象的constructor属性为构造函数的名称,设置新对象的__proto__属性指向构造函数的prototype对象: obj.__proto__ = ClassA.prototype; 3.使用新对象调用函数,函数中的this被指向新实例对象: ClassA.call(obj); //{}.构造函数() 4.…

【CSS进阶】原生JS getComputedStyle等方法解析

最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹. 另外,阅读源码让我接触到了大量底层的知识.对原生JS .框架设计.代码优化有了全新的认识,接下来将会写一系列关于 jQuery 解析的文章. 我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下…

扩展原生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 ui = { $close: $('.close') , $pop: $('.pop') , $topopBtn: $('.topop-btn') , $popbtnArea: $('.popbtn-area') }; // 绑定打开弹窗 ui.$popbtnArea.on('click','.topop-btn',function(){ ui.$pop.eq($(this).index()).show(); }) // 关闭弹窗 ui.$close.on('click',fu…

转载 -- 基于原生JS与OC方法互相调用并传值（附HTML代码）

最近项目里面有有个商品活动界面,要与web端传值,将用户在网页点击的商品id 传给客户端,也就是js交互,其实再说明白一点就是方法的互相调用而已. 本文叙述下如何进行原生的JavaScript交互 本文包括JS调用OC方法并传值,OC调用JS方法并传值 本来想把html放进服务器里面,然后访问,但是觉得如果html在本地加载更有助于理解,特把html放进项目里 HTML代码 <!DOCTYPE html> <html> <head> <meta charset=&…

原生js实现append()方法

一．在使用jquery时,append() 方法在被选元素的结尾(仍然在内部)插入指定内容 使用方法:$(selector).append(content),content为必需的.规定要插入的内容(可包含 HTML 标签) 二．在使用原生js时,使用appendChild() 方法可向节点的子节点列表的末尾添加新的子节点, 用法:parent.appendChild(child); child没有引号包住,child参数,是node类型.给一个空文档里面动态创建元素,要使用document.b…

原生js重写each方法

js原生有个for-each方法,但是只能遍历数组不能遍历对象; jq有个$.each倒是可以遍历数组和对象,但是项目中如果不想用jq呢,我们就用原生来写一个吧. [12,23,34].forEach((item,index)=>{ <!--这里默认this是window--> console.log(item); if(index>=1){ return fasle } },"这个参数可以指定回调函数里的this") 执行结果: 12,23 $.each({&…

原生js的各种方法

原生js操作dom元素 var link = document.createElement( "link" );link.type = "image/x-icon";link.rel = "icon";link.href = "https://i.alipayobjects.com/common/favicon/favicon.ico";document.getElementsByTagName('head')[0].appe…

原生js实现replace方法

今天看到有人提问js的replace方法怎么实现的,自己就试了试js手册里的String对象的介绍replace大概是这样: string.replace(regexp, replacement) 第一个参数:(regexp) 声明了要替换的模式的RegExp对象.如果该参数是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换成RegExp对象. 第二个参数(replacement) 一个字符串,声明的是替换文本或生成替换文本的函数.详见描述部分. 返回值 一个新字符串,是用repl…

原生js数组排序（封装方法）

//两值互换 function Sort(arr, index){ //参数arr代表数组,index代表数组元素下标 arr[index] += arr[index + 1];  //a+=b; arr[index + 1] = arr[index] - arr[index + 1]; // b = a - b; arr[index] -= arr[index + 1]; //a -= b; } function arrays(arr, asc){ //参数arr代表数组,sac为设置升降序…

原生js实现each方法

首先我们了解一下什么是callback函数 CALLBACK,即回调函数,是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数. 回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应. 实现的机制 [1]定义一个回调函数: [2]提供函数实现的一方在初始化的时候,将回调函数的函数指针注册给调用者: [3]当特定的事件或条件发生的时候,调用者使用函数指…

原生js使用getComputedStyle方法获取CSS内部属性值

在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式, 1.下面的方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style type="text/css">里面的样式属性值 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;…

原生js实例对象方法

Array中的方法 ☞ toString() // 把数组转换为字符串,使用逗号分隔☞ valueOf() // 返回数组对象本身 ☞ 栈方法(先进后出)ary.push() // 该方法有一个返回值,表示数组最新的长度,该方法中可以设置多个参数ary.pop() //返回数组中最后一个字,且会修改数组的长度 ☞ 队列方法(先进先出)ary.shift() //取出数组中的第一个元素,修改数组的长度ary.unshift(number) //在数组中最开始位置添加一个值 ☞ 排序方法ary.re…

js数组排序实用方法集锦

前言: 据说程序员三个月就能忘记自己写的代码,所以最好是在有空的时候及时做些总结,记录下来,这样后边遇到类似问题的话,就可以直接先查看自己的博客了.写技术博客,对自己是一种总结,对别人,是一种参考. 对于数组排序,这里主要介绍sort()方法(sort基本上已经能满足绝大多数数组的排序了). array.sort(): sort() 方法用于对数组的元素进行排序,默认按“字母”升序,即使数组的元素是数字,因此,对于数字,就需要特殊的写法了. 普通数组: 1. 字符串数组: var fruits…

原生js ajax 封装

首先我们先了解ajax的get和post请求分别是怎样请求数据的 get请求 let ajx = new XMLHttpRequest() //创建ajax实例 /*打开需要请求的地址,可以有三个参数 参1:请求方式 参2:请求地址 参3:是否异步,可选,默认异步 */ ajx.open('get','http://localhost/day02/api/gouwu.php?name=zhangsan') ajx.send()//向后端发送的数据,get方式用不到 ajx.onreadystat…

原生JS添加事件方法

事件 事件添加方式 EvenTarget.addEventListener(EvenName, functionName, option); EventName: example => click dblclick change blur focus keyperss keydown keyup mouseover mouseout; option 可以是一个对象也可以是Boolean值. Boolean值时, 事件运行方式true为事件冒泡阶段处理事件(自下而上), 不写传参时为默认false…

原生js实现ajax方法

下面是一个比较完整的Ajax function ajax(){ var ajaxData = { type:arguments[0].type || "GET", url:arguments[0].url || "", async:arguments[0].async || "true", data:arguments[0].data || null, dataType:arguments[0].dataType || "text&qu…

js数组排序sort()方法

一.sort方法升序: <script> var arr=[1,15,10,3,56]; arr.sort(function(num1,num2){ return num1-num2; }); </script> 二.sort方法降序: <script> var arr=[1,15,10,3,56]; arr.sort(function(num1,num2){ return num2-num1; }); </script>…

原生js的remove方法代表删除节点

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…

常用原生JS方法总结（兼容性写法）

经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了... ①添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 element.addEventListener(typ…

原生js封装ajax：传json，str，excel文件上传表单提交

由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f…

如何打造属于自己的Javascript武器库(封装方法)

前言 代码写的久了,就会发现很多时候都是在写一些重复的东西,这个时候就应该要考虑到提高工作效率了,比如对常用方法的封装,例如日期格式化,浏览器类型判断等. 今天这篇文章我们就来看看如何封装常用的Javascript方法,打造出属于自己的一套Javascript武器库吧.封装的代码为了不依赖于其他库,都采用原生的Javascript编写. Javascript 数组-判断相等 在某些场景下,我们需要判断两个数组是否相等.主要思想如下: 首先判断传入的参数是否为数组,如果不为数组,则返回false:…

原生js实现Ajax

一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataType: '', data: { }, success: function(){ }, error: function(){ } }) 原生js实现Ajax方法: var Ajax={ get: function (url,fn){ var obj=new XMLHttpRequest(); //…

【转载】JS中bind方法与函数柯里化

原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情况戳这里ECMAScript 5 compatibility table),权威指南上提到在ES3中利用apply模拟该方法的实现(JS权威指南中函数那章), 但无法真实还原该方法, 这也是真bind方法中的有趣特性. (原文这边理解有问题, 这段话的意思如果结合犀牛书上下文的意思, 再结合犀牛书中…

JS调用OC方法并传值，OC调用JS方法并传值////////////////////////zz

 iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码)     最近项目里面有有个商品活动界面,要与web端传值,将用户在网页点击的商品id 传给客户端,也就是js交互,其实再说明白一点就是方法的互相调用而已. 本文叙述下如何进行原生的JavaScript交互 本文包括JS调用OC方法并传值,OC调用JS方法并传值 本来想把html放进服务器里面,然后访问,但是觉得如果html在本地加载更有助于理解,特把html放进项目里 HTML代码 <!DOCTYPE html> <h…

JS添加节点方法与JQuery添加节点方法的比较及总结

原生JS添加节点方法与JQuery添加节点方法的比较及总结   一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> &…