一、Ajax的实现主要分为四部分: 1、创建Ajax对象 1 // 创建ajax对象 2 var xhr = null; 3 if(window.XMLHttpRequest){ 4 xhr =...1 // 处理返回数据 2 /* 3 ** 每当readyState改变时,就会触发onreadystatechange事件 4 ** readyState属性存储有XMLHttpRequest的状态信息...failed){ 25 failed(xhr.status); 26 } 27 } 28 } 29 } 二、Ajax封装函数
本篇来看下js中的原生函数,也叫内置函数。...多数情况下,对象的内部[[class]]属性和创建该对象的内建原生构造函数相对应。...// 常量形式创建数组 5console.log(b); // [4, 5, 6] 但相较于其他原生构造函数,Date()和Error()则不一样,因为没有对应的常量形式来作为它们的替代。...除了上面的这些原生构造函数对象本身外,它们也都有各自的.prototype对象,即它们的原型对象,例如String.prototype、Array.prototype等,这些原型对象包含了其对应子类型所特有的行为特性...借助原型代理,所有的这些构造函数的"实例"对象都具有对应原型对象上的方法。 最后总结下,js为所有基本类型值提供了封装对象,它们也被称为原生函数(String、Number、Boolean等)。
call 和 apply call 和 apply 和 bind 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向。...js原生函数中的call和apply都不陌生,这两个方法的作用相似,接受两类参数。 第一类是context(上下文),传入的参数作为执行函数的上下文,也是要传入的第一个参数。...)是应用 call 和 apply 的一个函数式编程。...,同样接受两部分参数,上下文this和作用函数的后续参数,下面是我猜想的bind的模拟实现方法。...,bind返回的是一个新函数,而call这是直接执行了该函数。
给大家分享一个用原生JS实现的运动框架,并分别用改变高度、宽度、字体大小、边框、透明度来进行测试,欢迎大家复制粘贴及吐槽 。 首先看一下效果: 以下是代码实现: 原生...JS实现一个简易的运动函数 div { width: 100px;...}; // 获取属性值 function getStyle(obj, attr) { // 用两种不同的情况处理兼容...obj.timer = setInterval(function () { var current = 0; // 如果获取的属性值为透明度
前言 之前总是不清楚原生JS和jQuery中有哪些循环遍历函数,而且有时候还总是把原生JS方法当成jQuery方法来用,以致于项目总是报错,并且还不知道是什么原因。...这样原生JS和jQuery的方法,我们就可以随意使用了。...原生JS循环遍历函数 1.for() for循环得知道数组的长度才能循环。它比较常用,这里就不多说了。 2.forEach () 不需要知道数组长度,也可以对数组中每一个元素进行操作。...every() 方法使用指定函数检测数组中的所有元素: 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。 如果所有元素都满足条件,则返回 true。...; //当前元素索引 console.log(item); //当前元素 }) 2.map() 用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。
引入Javascript 的方式有三种 1.在html 中直接放到 2.外部引入js文件 3.在标签直接写 <p...2、以驼峰命名规则 ——开始单词小写 后面的单词首字母大写 例如 helloWorld boyAge suZiXing 保留字 js中大小写严格区分的 alert弹框 String() 保留字不能用于普通表示符...全局作用域: 在js中作用域: 一个变量作用的范围 1、全局作用域(整个 标签中): 页面打开全局作用域被打开,页面关闭全局作用域被销毁; 全局作用域的变量叫全局变量,全部变量可以在全局作用域中使用...特别的一个类可以有多个构造函数 ,可根据其参数个数的不同或参数 类型的不同来区分它们 创建一个构造函数,专门用来创建Person对象的 * 构造函数就是一个普通的函数,创建方式和普通函数没有区别,...* 不同的是构造函数习惯上首字母大写 * * 构造函数和普通函数的区别就是调用方式的不同 * 普通函数是直接调用,而构造函数需要使用new关键字来调用 * 构造函数的执行流程: * 1.立刻创建一个新的对象
转自:https://www.cnblogs.com/yufann/p/JS-Ajax.html 1.创建一个Ajax对象 非IE6浏览器:var obj = new XMLHttpReuqest...Date().getTime(),true); 3.发送请求 obj.send(); 4.接收返回值 请求状态监控:onreadystatechange事件:当自己的Ajax...---返回值responseText:从服务器返回的文本:obj.responseText(返回的为字符串) GET方式 function getAjax(){ var obj
大家好,又见面了,我是你们的朋友全栈君。...1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件,用于判断标签为空。...4.onkeydown 按下按键时的事件触发, 5.onkeyup 当按键抬起的时候触发的事件,在该事件触发之前一定触发了onkeydown事件–相当于一个按键,两个事件,没怎么用过 6.onclick...主要是用于 input type=button,input作为一个按钮使用时的鼠标点击事件 7.onselect 当input里的内容文本被选中后执行,只要选择了就会触发,不是全部选中 8.oninput...当input的value值发生变化时就会触发,(与onchange的区别是不用等到失去焦点就可以触发了) 使用方法: 以上事件可以直接放到input的属性里,例如: 1 , 可以通过js给input
原生ajax 原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe...… JS原生ajax与Jquery插件ajax深入学习 序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来...jquery插件ajax方法,于是就行了一些总结,因 … js原生Ajax的封装与使用 一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR...原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 2 [代码]JS原生Ajax&comma...;GET和POST javascript/js的ajax的GET请求: Jquery学习笔记(10)–ajax删除用户,使用了js原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦
在处理数组时,有时我们需要将其中的项目按照某个特定的属性或条件进行分类或分组。这个过程可能会多次重复,每次都需要编写分组函数或使用像 lodash 这样的库中的 groupBy 函数来完成。...console.log(peopleByAge); 这段代码使用了reduce函数,它将people数组中的每个个人对象依次传递给回调函数,并在每次迭代中更新累加器对象acc。...最终,peopleByAge对象包含了按年龄分组的结果,其结构与之前的示例相同。这种方法可以更紧凑和函数式地实现相同的逻辑。 无论使用哪种方式,这段代码确实存在一些重复的模式。...这就意味着你可以使用所有常规的 Map 方法来处理它,就像你处理其他 Map 一样。同时,由于它是一个 Map,你可以从回调函数中返回任何类型的值,而不仅仅是作为键的字符串。...由于这些方法已经在 Chrome 中实现,这意味着它们已经存在于 Chrome 使用的 JavaScript 引擎 V8 中,所以在下一次 V8 引擎的更新中,这些方法将变得在 Node.js 中可用。
在此记录自己已理解并开始遵循的前端代码规范。What How Why 原生JS TitleTip 为了实现对特定的A标签Title的美化,使其可以按照我们想要的样式显示。
").innerText; var input = document.getElementById("input"); input.value = text; // 修改文本框的内容
content="IE=edge"> 原生...JS拖拽 * { margin: 0; padding: 0; }...class="box" id="drag"> window.onload = function () { // 获取拖拽的节点...let drag = document.getElementById('drag') // console.log(drag); // 按下别拖拽对象的时候...=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离 let leftX = event.clientX - drag.offsetLeft;
//打印预览 window.print(); /*设置默认横向打印*/ @page { size: landscape; } /*设置默认纵向打印*/ @...
常用原生函数: String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() 原生函数可以被当作构造函数来使用...[[Class]] 属性和创建该对象的内建原生构造函数相对应,但并非总是如此。...// 虽然 Null() 和 Undefined() 这样的原生构造函数并不存在 // 但是内部 [[Class]] 属性值仍然是 "Null" 和"Undefined" Object.prototype.toString.call...可以使用 Symbol() 原生构造函数来自定义符号。...原生构造函数有自己的 .prototype 对象,如 Array.prototype 、String.prototype 等。
今天看JS文章,发现了一个新方法fetch https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch 这货跟ajax...很类似,跟axios功能一样; 除啦IE这个货之外基本上都支持的属性; fetch('http://example.com/movies.json') .then(function(response...response.json(); }) .then(function(myJson) { console.log(myJson); }); 看起来是不是很爽,不用安装任何插件完成请求大写的666
笔者最近在对原生JS的知识做系统梳理,因为我觉得JS作为前端工程师的根本技术,学再多遍都不为过。...这导致JS中的Number无法精确表示非常大的整数,它会将非常大的整数四舍五入,确切地说,JS中的Number类型只能安全地表示-9007199254740991(-(2^53-1))和9007199254740991...10 + 10n; // → TypeError 不能将BigInt传递给Web api和内置的 JS 函数,这些函数需要一个 Number 类型的数字。尝试这样做会报TypeError错误。...(其中自由变量,指在函数中使用的,但既不是函数参数arguments也不是函数的局部变量的变量,其实就是另外一个函数作用域中的变量。) 闭包产生的原因?...<= 5; i++){ setTimeout(function timer(){ console.log(i) },0)} let使JS发生革命性的变化,让JS有函数作用域变为了块级作用域,用
一个变量在其作用域内是可以被访问的,在作用域外不能被访问。 全局作用域与局部作用域 变量的执行环境有两种:一种是全局,另一种是局部(如:放在函数里面)。...全局变量 在window环境下声明的变量,或者可以理解为非函数内声明的变量,称为全局变量。全局变量存在于整个JavaScript当中,在任何地方都能被访问和修改。...局部变量 常见的局部变量有以下两种: ● 在函数内声明的变量(使用var); ● 函数参数(形参)。 局部变量存在于函数体内,它们的值只能在函数体内访问和修改。...不同作用域的访问关系 在函数内部声明的变量(局部变量),在函数外部并不能访问。在函数外部声明的变量,在函数内部可以访问。 一句话概括:“局部可以访问全局,但全局不能访问局部”。...,不难看出,全局的user变量和函数内部的变量,并不是同一个变量。
大家好,又见面了,我是你们的朋友全栈君。...原生js数组排序 js 排序 以正序为例(即由小到大) var arr = [0,2,1,4,3,9,6,5,7,8]; // 未排序的数组 var sortArr = null; // 排序后得到的数组...} } return nArr; } sortArr = sort(arr); 此方法会重新生成一个数组,并对其进行排序,并且执行效率较高,但是代码量比较大,对于我们这种爱研(de)究(se)的同学来说是不会满足于此的...这也是递归算法的终结部分 var base = Math.floor(arr.length / 2);//找到中间的基准元素位置 var baseEle = arr.splice(base, 1...这也是递归算法的终结部分 var base = Math.floor(arr.length / 2);//找到中间的基准元素位置 var baseEle = arr[base];//把基准元素从
原生Ajax: Ajax基础: --ajax:无刷新数据读取,读取服务器上的信息 --HTTP请求方法: --GET:用于获取数据,如浏览帖子 --POST:用于上传数据,如用户注册...t='+new Date().getTime(),true); --同步:js中指事情必须一件一件来 --异步:js中指多件事情要一起做 --ajax是做异步传输的,... alert('成功:'+oAjax.responseText); } } } 将原生Ajax封装成一个函数使用,最终编写的原生Ajax...为: 1) GET方法封装的函数为: function ajax(url,fnSuccess,fnFaild){ //1.创建Ajax对象 //js中,使用一个没有定义的变量会报错,...45 fnSuccess(oAjax.responseText); //成功时执行的函数 46 }else{ 47 if(fnFaild){ //判断是否传入失败是的函数
领取专属 10元无门槛券
手把手带您无忧上云