![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Javascript
程序员杰森
热爱
展开
-
文件选中后自动AJAX上传文件
基本实现思路在表单上传File类型控件选中文件后,自动将数据打包入FormData并AJAX上传。实现示例···//海报图片选择点击事件var upload_btn_event=function () { $('#id_input_file_article_poster').click(); };$('#id_btn_upload_image').on('click',upload_btn_event);//海报图片自动上传$('#id_input_file_article_p原创 2020-07-08 16:30:41 · 614 阅读 · 0 评论 -
HTML5 FormData 对象的使用
感谢原文作者:Veb原文链接:https://www.jianshu.com/p/a98b2b2aff88目录简介简单使用通过HTML表单创建FormData对象搭配AJAX进度条拖拽上传实现简介FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。简单使用你可以自己创建一个FormData对象,然后调用它的append()方法来添加字段,像这样:var formD.转载 2020-07-08 08:56:18 · 156 阅读 · 0 评论 -
js实现滚动条滚动到页面底部继续加载
感谢原文作者:chua1989原文链接:https://www.jb51.net/article/76645.htm简介这篇文章主要为大家详细介绍了js实现滚动条滚动到页面底部继续加载,原理很简单,就是为window添加一个scroll事件,需要的朋友可以参考下。这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得。原理原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件.转载 2020-07-06 20:59:12 · 2277 阅读 · 0 评论 -
jsonp原理详解
感谢原文作者:HansExploration原文链接:https://blog.csdn.net/hansexploration/article/details/80314948什么是JSONP?Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。为什么需要JSONP?由于浏览器同源策略安全限制,数据是不可以直接跨域(包括不同的根域名、二级域名、或不同的端口)请求的,除非目标域名授权你可以访问。同源策略.转载 2020-07-06 16:06:31 · 183 阅读 · 0 评论 -
jquery里面的$(this)和this的区别
感谢原文作者:何少旭原文链接:https://www.cnblogs.com/heshaoxu/p/7672736.html前言当你用的是jquery时,就用$(this),如果是JS,就用this。示例/*JQuery*/$(this).html( $(this).html() + " BAM! ");/*JS*/this.innerHTML();this.reset(); 这个里的html()是JQUERY方法,用$(this).html(),当然,JS里也有相似方法inner.转载 2020-07-05 16:04:50 · 562 阅读 · 0 评论 -
JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
感谢原文作者:幽幽冷瞳原文链接:https://www.cnblogs.com/ifworld/p/7605954.htmloffsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)clientHeight //返回元素的高度(包括元素高度、内边距.转载 2020-05-22 17:54:19 · 240 阅读 · 0 评论 -
JS 面向对象
摘自:廖雪峰老师的JS教程简介JavaScript不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。这是与其他编程语言的区别(比如Java)。创建对象JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。逐层查找当我们用obj.xxx访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype对象,最后,如果还没有找到,就只能返回undefi.转载 2020-05-17 17:57:00 · 137 阅读 · 0 评论 -
JS JSON
博文分别引用自:菜鸟教程与廖雪峰老师的JS教程。非常感谢!!目录简介JSON内置数据类型JSON格式JSON语法规则JSON 数据 - 一个名称对应一个值JSON 对象JSON 数组JSON字符集序列化方法使用参数说明:返回值示例一、只写value的情况(常用)二、value与space的情况三、使用value,replacer,space的情况1. replacer传入数组,选取要序列化参数2. replacer传入函数,返回处理后的参数并序列化精准控制(重写对象方法)反序列化方法使用参数说明返回.原创 2020-05-17 16:48:18 · 142 阅读 · 0 评论 -
JS RegExp对象(正则表达式)
笔记整理自:廖雪峰老师的JS教程正则表达式语法:https://www.runoob.com/regexp/regexp-tutorial.html目录创建方式方式一方式二简单使用判断正则表达式是否匹配分组取串...创建方式JavaScript有两种方式创建一个正则表达式:两种写法是一样的。方式一第一种方式是直接通过/正则表达式/写出来:var re1 = /ABC\-001/;方式二第二种方式是通过new RegExp('正则表达式')创建一个RegExp对象。var .转载 2020-05-17 10:50:55 · 168 阅读 · 0 评论 -
AJAX请求的五个步骤
感谢原文作者:0x29a原文链接:https://www.cnblogs.com/0x29a/p/11231950.html1. 创建XMLHttpRequest异步对象步骤一代码引自:https://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.aspvar xhr;if (window.XMLHttpRequest)...转载 2020-04-14 22:05:04 · 548 阅读 · 0 评论 -
JS Date对象
目录简介创建方式1. 通过获取系统当前时间创建2. 通过指定日期和时间创建1. 指定 年 月 日 [小时 [分[ 秒 [ 毫秒 ]]]] 创建2.指定解析一个符合[ISO 8601](https://www.w3.org/TR/NOTE-datetime)格式的字符串时区简介在JavaScript中,Date对象用来表示日期和时间。创建方式1. 通过获取系统当前时间创建var now = new Date();注意:当前时间是浏览器从本机操作系统获取的时间,所以不一定准确,因为用户可以把当前时转载 2020-05-15 10:34:12 · 213 阅读 · 0 评论 -
JS 基本类型的包装对象
笔记整理自:廖雪峰老师的JS教程包装对象JavaScript还提供了包装对象,熟悉Java的小伙伴肯定很清楚int和Integer这种暧昧关系。number、boolean和string都有包装对象。没错,在JavaScript中,字符串也区分string类型和它的包装类型。包装对象用new创建:var n = new Number(123); // 123,生成了新的包装类型var b = new Boolean(true); // true,生成了新的包装类型var s = new St.转载 2020-05-12 15:16:13 · 302 阅读 · 0 评论 -
JS generator(生成器)
笔记整理自:廖雪峰老师的JS教程目录简介与函数的不同之处函数写法generator写法generator调用generator对象的`next()`方法调用`for ... of`循环调用简介generator(生成器)是ES6标准引入的新的数据类型。一个generator看上去像一个函数,但可以返回多次。与函数的不同之处generator和函数不同的是,generator由function*定义(注意多出的*号),并且,除了return语句,还可以用yield返回多次。大多数同学立刻就晕了.转载 2020-05-08 22:59:53 · 274 阅读 · 0 评论 -
JS 箭头函数
笔记整理自:廖雪峰老师的JS教程目录简介使用格式参数函数体注意点返回对象this简介ES6标准新增了一种新的函数:Arrow Function(箭头函数)。为什么叫Arrow Function?因为它的定义用的就是一个箭头:类似Java8出现的Lamda表达式,复习时注意一并复习Lamda表达式。x => x * x上面的箭头函数相当于:function (x) { return x * x;}箭头函数相当于匿名函数,并且简化了函数定义。但与匿名函数有所不同,区别在.转载 2020-05-08 22:04:49 · 216 阅读 · 0 评论 -
js 利用||和&&赋值小技巧
感谢原文作者:nayi_224原文链接:https://blog.csdn.net/nayi_224/article/details/80437329对于需要返回boolean类型数值的地方,比如if判断,逻辑运算符,js对象会默认转换为boolean类型数据。null,undefined,0,''返回false,其他返回true。同时,对于||与&&又有这样的特性:...转载 2020-05-07 22:54:48 · 268 阅读 · 0 评论 -
JS 闭包
笔记整理自:廖雪峰老师的JS教程目录闭包闭包每次返回新的对象闭包内部循环语句的执行问题闭包内部循环语句变量的锁定问题解决创建一个匿名函数并立刻执行闭包实际作用闭包高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回。function lazy_sum(arr) { var sum = function () { return arr.reduce(fu...转载 2020-05-07 22:38:07 · 84 阅读 · 0 评论 -
JS 高阶函数
笔记整理自:廖雪峰老师的JS教程概述高阶函数英文叫Higher-order function。那么什么是高阶函数?JavaScript的函数其实都指向某个变量。既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数。一个最简单的高阶函数:function add(x, y, f) { return f(x) + f(y)...转载 2020-05-07 15:23:09 · 113 阅读 · 0 评论 -
JS字符串和数组之间的转换
感谢原文作者:霜末之冬原文链接:https://www.cnblogs.com/smzd/p/11792878.html1、字符串转换为数组var string = '123,456,789';var stringResult = string.split(',');console.log(stringResult) //输出["123", "456", "789"] var s...转载 2020-05-07 15:04:12 · 286 阅读 · 0 评论 -
JS 方法
笔记整理自:廖雪峰老师的JS教程在一个对象中绑定函数,称为这个对象的方法。var xiaoming = { name: '小明', birth: 1990, age: function () { var y = new Date().getFullYear(); return y - this.birth; }};xia...转载 2020-05-06 15:40:25 · 107 阅读 · 0 评论 -
JS 解构赋值
感谢原文作者:小火柴的蓝色理想原文链接:https://www.cnblogs.com/xiaohuochai/p/7243166.html介绍解构赋值语法是一种 Javascript ES6引入的表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。解构。解构是一种打破数据结构,将其拆分为更小部分的过程。对象解构基础语法let node = { typ...转载 2020-05-06 14:48:16 · 221 阅读 · 0 评论 -
JS 变量作用域
笔记整理自:廖雪峰老师的JS教程在JavaScript中,用var申明的变量实际上是有作用域的。如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量,不同函数内部的同名变量互相独立,互不影响:'use strict';function foo() { var x = 1; x = x + 1;}function bar() { ...转载 2020-05-04 11:18:31 · 163 阅读 · 0 评论 -
JS 函数
笔记整理自:廖雪峰老师的JS教程定义函数function abs(x) { if (x >= 0) { return x; } else { return -x; }}上述abs()函数的定义如下:function指出这是一个函数定义;abs是函数的名称,可以视为指向该函数的变量;(x)括号内列出函数的参数,多个参...转载 2020-05-04 10:23:15 · 116 阅读 · 0 评论 -
JS中typeof的用法
感谢原文作者:zh2443原文链接:https://www.jianshu.com/p/8107d25f54acjs是一门弱语言,它在声明变量时无需确定变量的类型,js在运行时会自动判断。那么如何判断一个变量的类型呢,js提供了typeof运算符,用来检测一个变量的类型。1. typeof的语法typeof是一个运算符,有2种使用方式:typeof(表达式)和typeof 变量名,第一...转载 2020-05-04 10:05:13 · 1328 阅读 · 0 评论 -
JS Map与Set
笔记整理自:廖雪峰老师的JS教程MapJavaScript的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。为了解决这个问题,最新的ES6规范引入了新的数据类型Map。使用初始化Map需要一个二维数组,或者直接初始化一个空Map。Map具有以下方法:var m = new Map(); // 空Mapm.set('Adam', 67)...转载 2020-05-04 08:10:24 · 160 阅读 · 0 评论 -
JS 选择结构语句与循环结构语句
笔记整理自:廖雪峰老师的JS教程选择结构与Java使用一致。需要注意的JavaScript把null、undefined、0、NaN和空字符串''视为false,其他值一概视为true。循环结构for(;;)与Java使用一致,包括break等。for(var key in obj)类似Java中的foreach循环,只不过每次获取的元素是键值对(Key-Value...转载 2020-05-02 16:07:03 · 213 阅读 · 0 评论 -
JS 对象
笔记摘自:廖雪峰老师的JS教程JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。JavaScript的对象用于描述现实世界中的某个对象。例如,为了描述“小明”这个淘气的小朋友,我们可以用若干键值对来描述他:var xiaoming = { name: '小明', birth: 1990, school: 'No.1 Middle School...转载 2020-05-02 10:59:42 · 147 阅读 · 0 评论 -
JS 数组
笔记摘自:廖雪峰老师的JS教程JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素。要取得Array的长度,直接访问length属性。注意:直接给Array的length赋一个新的值会导致Array大小的变化。方法具体查阅JS文档。indexOfslicepush和popunshift和shiftsortspliceconcatjoin...转载 2020-05-02 10:45:06 · 120 阅读 · 0 评论 -
JS let, var, const的用法以及区别
本文摘自多位前辈的博文,另外还有一些我的多余补充,摘自地址已补充。深入学习ES6的知识还请访问阮一峰老师的ES6教程如果不使用let或者const,在JS只有函数作用域和全局作用域,没有块级作用域,所以{}限定不了var声明变量的访问范围。1. var声明语句摘自:https://blog.csdn.net/weixin_44939019/article/details/9984...原创 2020-05-02 10:27:09 · 192 阅读 · 0 评论 -
JS 函数提升&变量提升以及函数声明&函数表达式的区别
感谢原文作者:迟早会有猫原文链接:https://www.cnblogs.com/SidselLoong/p/10515809.html今天看js的变量提升问题,里面提到了函数提升。然后发现自己之前一直把函数声明和函数表达式弄错,导致函数提升出错一、变量提升console.log(a)var a=100 //undefinedconsole.log(a)//100提升后相当于...转载 2020-05-02 08:02:00 · 326 阅读 · 0 评论 -
JS 字符串
以下整理自:廖雪峰老师的JS教程1. 转义字符串JS转义字符与Java大致一致。2. 多行字符串(ES6)反引号括起来。`这是一个多行字符串`;3. 模板字符串模板字符串分为两种:字符串拼接(与Java一致)。ES6提供一种新的模板字符串方式。var name = '小明';var age = 20;var message = `你好, ${name}, 你今...转载 2020-05-01 17:13:21 · 109 阅读 · 0 评论 -
JS 变量
感谢原文作者:zhangxiaohui原文链接:https://www.cnblogs.com/xiaohuizhang/p/11755737.htmlJavascript声明变量的时候,虽然用var关键字声明和不用关键字声明,很多时候运行并没有问题,但是这两种方式还是有区别的。可以正常运行的代码并不代表是合适的代码。使用var:var num = 1;是在当前域中声明变量. 如...转载 2020-05-01 16:40:50 · 99 阅读 · 0 评论 -
JS 数据类型与运算符
以下内容均整理自:廖雪峰老师的JS教程非常感谢廖老师!数据类型1. NumberJavaScript不区分整数和浮点数,统一用Number表示,以下都是合法的Number类型:123; // 整数1230.456; // 浮点数0.4561.2345e3; // 科学计数法表示1.2345x1000,等同于1234.5-99; // 负数NaN; // NaN表示Not a ...转载 2020-05-01 16:02:33 · 151 阅读 · 0 评论 -
HTML加载动画实现
在页面加载完成之前或者执行某操作时,先显示要显示的加载动画。实现原理先定义一个加载动画元素(最好是纯CSS实现,图片的话可能慢一点),当页面未加载完成之前,先使其“可见”,当页面加载完成后,再使其“不可见”。重要的一点就是怎样知道页面或者元素加载完成了,详情可以看一下:https://blog.csdn.net/weixin_43670802/article/details/1058751...原创 2020-05-01 11:13:59 · 1592 阅读 · 0 评论 -
DOM Document.readyState 属性
感谢原文作者:MDN原文地址:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState描述一个document 的 Document.readyState 属性描述了文档的加载状态。当该属性值发生变化时,会在document 对象上触发readystatechange事件。document.readySt...转载 2020-05-01 10:51:55 · 2808 阅读 · 0 评论 -
原生js获取子元素
感谢原文作者:归一山人原文链接:https://www.cnblogs.com/guiyishanren/p/12214757.html获取子元素的方法有//获取第一个demo类dom = document.getElementsByClassName('demo')[0];//获取父节点dom.parentNode;//获取上一兄弟节点dom.previousSibling;...转载 2020-04-29 15:10:44 · 7541 阅读 · 0 评论 -
JS 创建元素的三种方法
感谢原文作者:py-小白原文链接:https://www.cnblogs.com/wanguofeng/p/10559880.html1、动态创建元素一 document.write()例如向页面中输出一个 li 标签<pre class="html" name="code"><span style="font-size:12px;"><script>...转载 2020-03-16 11:01:29 · 688 阅读 · 0 评论 -
JavaScript与java语法区别
网页中各种技术的作用感谢大佬:https://blog.csdn.net/RookiexiaoMu_a/article/details/89052768HTML 制作网页的结构CSS 美化网页JavaScript 让网页具有交互功能,在网页上运行脚本JavaScript与java的区别**特点** **Java** **JavaScript**面向对象 面向对象...转载 2019-09-23 10:44:24 · 1277 阅读 · 0 评论