JavaScript
爱玲姐姐
大家好,我是计爱玲,英文名:Cathy,是一名前端开发工程师,热爱解锁各种前端新技术。我的爱豆是王一博,当然我也想认识更多同行的帅哥,
我的微信jal517486222,欢迎加我好友交流编程技术*^_^*
个人网站:https://jiailing.com
展开
-
大前端学习--TypeScript
TypeScript一、JavaScript1. 弱类型、动态语言的缺陷程序中的异常在运行时才能发现类型不明确函数功能会发生改变对对象索引器的错误用法2. 强类型的优势错误更早暴露代码更智能,编码更准确重构更牢靠减少不必要的类型判断二、Flow1. Flow是JavaScript类型检查器// : number 叫做类型注解function sum (a: number, b: number) { return a + b}console.log(s原创 2020-05-19 13:39:39 · 1243 阅读 · 0 评论 -
大前端学习--异步编程
异步编程一、JS是单线程语言JS执行环境找那个负责执行代码的线程只有一个执行任务的模式有两种:同步模式、异步模式。二、Promise1. 基本使用// Promise 基本演示const promise = new Promise(function (resolve, reject) { // 这里用于兑现承诺 // resolve(100) // 承诺达成 reject(new Error('promise rejected')) // 承诺失败})promise.t原创 2020-05-19 13:37:35 · 1102 阅读 · 0 评论 -
大前端学习--ES6 新特性
ES6 新特性一、ECMAScript 20151. ES2015共有三种作用域全局作用域函数作用域块级作用域(新增)2. 变量声明:let constlet const都是块级作用域,let是变量,const是常量for点击事件var element = [{}, {}, {}]for(var i = 0; i < element.length; i++) { element[i].onclick = function () { // i是全局变量,已经变成了原创 2020-05-19 12:31:26 · 1301 阅读 · 0 评论 -
JS基础知识学习--JS知识体系
原创 2020-04-29 12:34:14 · 930 阅读 · 0 评论 -
JS基础知识学习--真题总结
JS真题题目一1. var和let const的区别答:var是ES5语法,let、const是ES6语法; var有变量提升var和let是变量,可修改; const是常量,不可修改;let、const有块级作用域,var没有2. typeof返回哪些类型答:undefined、string、number、boolean、symbolobject(注意...原创 2020-04-29 12:32:24 · 2052 阅读 · 5 评论 -
JS基础知识学习总结
JS 学习总结1. typeof能判断的类型?(JS变量类型)答:undefined、number、string、boolean、symbol、object、function2. 何时使用===,何时使用==(强制类型转换)答:任何时候都用===,除非是判断==null3. window.onload和DOMContentLoaded的区别(页面加载过程)答:window.onload...原创 2020-04-29 12:30:23 · 1098 阅读 · 0 评论 -
JS 性能优化:防抖(debounce)、节流(throttle)
一、防抖(debounce)const title = document.getElementById('title')// let timer = null// title.addEventListener('keyup', function () {// if(timer) {// clearTimeout(timer)// }// timer = setTi...原创 2020-04-16 15:48:17 · 826 阅读 · 0 评论 -
自己实现call、apply、bind方法
一、实现call方法代码:Function.prototype.myCall = function (context) { if(context == null){ context = window; } context.fn = this; const arg = [...arguments].slice(1); const ret = context.fn(...原创 2020-03-13 16:26:47 · 986 阅读 · 0 评论 -
jQuery报错at w.fn.init.val (jquery.min.js:2)
jquery.min.js:2 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined at w.fn.init.val (jquery.min.js:2) at HTMLInputElement.<anonymous> ((index):71) at HTMLInputElemen...原创 2020-03-12 17:02:15 · 1231 阅读 · 0 评论 -
JS中FormData类实现文件上传
上篇文章讲到了FormReader类实现文件上传,但是那是HTML5的新特性,在不支持H5的浏览器上则无法使用。这次介绍一个JS的普通类FormData,在不支持H5浏览器环境下也可以文件上传和预览,并且还能监控上传进度。案例一:xhr.upload.onprogress监控文件的上传进度,并且动态显示<!DOCTYPE html><html lang="en">...原创 2020-03-10 10:41:22 · 1330 阅读 · 0 评论 -
原生js使用XMLHTTPRequest对象实现ajax函数封装
XMLHTTPRequest对象实现ajax函数封装function ajax (options) { var defaults = { type: 'get', url: '', data: {}, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, s...原创 2020-03-09 15:43:28 · 896 阅读 · 0 评论 -
JS中FileReader类(H5新特性)实现文件上传时的及时预览功能
测试图片也用我啵的美照~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...原创 2020-03-07 21:44:43 · 961 阅读 · 1 评论 -
JS学习--JS预解析
JS预解析一、预解析的相关概念(ES5)JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步: 预解析和代码执行。预解析:在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义,预解析也叫做变量、函数提升。...原创 2020-02-24 10:35:10 · 792 阅读 · 0 评论 -
JS学习--JS数据类型转换
JS数据类型转换JS共有五大数据类型:String、Number、Boolean、undefined、object。String类型是指所有带引号的字符串Number类型包含:整数、小数、NaN、InfinitiyBoolean类型只有true、falseundefined类型只有undefinedobject类型包含对象、数组、null一、转化为字符串(String)类型:...原创 2020-02-22 18:58:32 · 791 阅读 · 0 评论 -
jQuery实现全国高校三级下拉框
AllSchool.js下载链接index.html<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>jQuery全国高校三级联动下拉选择菜单代码</title> <原创 2018-09-06 10:49:39 · 1401 阅读 · 1 评论 -
table导出成excel并下载,js插件tableExport.min.js
table导出成excel并下载,js插件tableExport.min.js下载地址:https://download.csdn.net/download/jal517486222/10914744html代码:&lt;button id="btnExport"&gt;下载Excel&lt;/button&gt;&lt;table id='myTable'&a原创 2019-01-13 22:35:50 · 3698 阅读 · 0 评论 -
对HTML文件局部进行转码、gbk编码的文件中a链接的href中的URL中文参数不自动转义原样显示 jsencodeURI函数
实现非utf-8文件的a标签中的href中文参数不自动转义原样显示有时候我们可能需要通过get方法请求一个外部接口,而我们携带的参数中含有中文的话(源文件不是utf-8编码),在点击链接的时候,URL中含有中文会自动进行base64编码,而外部接口的代码是我们无法处理的,一旦URL的中文自动编码了则会出现意想不到的错误。这时候有两种处理方式:将源文件的编码改成utf-8编码,这样a标签的中h...原创 2019-03-03 19:34:55 · 2782 阅读 · 0 评论 -
JS处理日期时间"yyyy--dd HH:mm:ss"格式的字符串转Date对象,进行比较
HTML页面间需要传递日期和时间参数的时候,如果需要对日期字符串进行时间的运算,就需要先将日期字符串转换成JS日期对象。在js中,yyyy-MM-dd HH:mm:ss格式的日期字符串不能用来直接构造JS日期对象,需要先做将“-”替换处理:deadline = deadline.replace(/-/g, ‘/’);// 给Number原型添加左边补位函数Number.prototype....原创 2019-04-11 13:18:06 · 2774 阅读 · 1 评论 -
PHP输出到网页上的文本防止被转义成HTML元素
使用PHP中的htmlentities函数即可原样显示文本,使得字符串中的特殊符号不被浏览器解析成网页中的元素。如下代码所示:如果直接输出$str则会在每次打开这个网页的时候都弹出弹框。而用htmlentities函数对字符串变量进行处理过再输出,则只会在网页中原样显示字符串,如同普通字符串一样,而不会被解析成HTML标签。<?php $str = "<script>al...原创 2019-05-10 18:04:14 · 3422 阅读 · 3 评论 -
JS正则表达式验证表单
我们通常写的表单中,往往要判断用户填的是否符合要求,那么可以通过js的正则式来验证。js的正则式语法可参考菜鸟教程:JS正则表达式下面是我的表单页面:在点击下一步的时候,可以通过JS来控制下,如果不符合要求,则不进行跳转。下面代码中的变量名都是输入框所填项的英文,应该没歧义吧,我就不展示HTML部分了,直接给出js判断。$(document).ready(function() { ...原创 2019-06-16 14:48:26 · 1208 阅读 · 0 评论 -
支持web端和移动端的拖拽排序插件 dragula
Dragula是一款支持移动触摸屏设备的纯js元素拖放插件。这个元素拖放插件使用简单,浏览器兼容性好,能够实现通过鼠标或在移动设备中通过手指来拖动DOM元素的位置。代码演示:<script src="dist/dragula.js"></script><link rel="stylesheet" href="dist/dragula.css"><原创 2018-12-15 19:19:25 · 7856 阅读 · 7 评论 -
第一次使用echarts绘图(心得)
Echarts官网链接我就是用这个实例图来绘制的,突然感觉echarts用起来好简单,哈哈我下载了官方实例后,进行了相应的修改,下面是我的代码:<div class="row" id="container" style="height: 200px;width: 100%;"><div> <script type="text/javascript&qu原创 2018-12-02 20:18:49 · 3939 阅读 · 0 评论 -
JQuery、BootStrap实现鼠标悬浮出现下拉框
JQuery、BootStrap实现鼠标悬浮出现下拉框,并且鼠标可以进入下拉框,鼠标离开下拉框后,下拉框隐藏html 部分(bootstrap):<li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" id="dropdo原创 2018-10-19 17:49:48 · 5000 阅读 · 0 评论 -
在JS中模拟表单的post提交,进行页面的跳转
封装为Post(URL, PARAMTERS) 函数: /**功能: 模拟form表单的提交*参数: URL 跳转地址 PARAMTERS 参数*/ function Post(URL, PARAMTERS) { //创建form表单 var temp_form = document.createElement("form"); ...原创 2018-10-18 15:41:17 · 8938 阅读 · 0 评论 -
用原生JS实现maquee上下滚动公告效果
用原生JS实现maquee<!DOCTYPE HTML><html><script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><head> <style type="text/css"> ul原创 2018-09-21 13:55:54 · 1506 阅读 · 0 评论 -
jquery中的plot函数的使用
调用plot函数的方法如下:var plot = $.plot(placeholder, data, options)$.plot($("#submission"), [ {label: "<?php echo $MSG_SUBMIT?>", data: d1, points: {show: true},lines:{show:true},color:"#...原创 2018-09-19 22:47:29 · 6230 阅读 · 0 评论 -
如何实现鼠标移动按钮上,按钮变颜色的效果
可以通过js来改变鼠标放在按钮上的样式:这是按钮的默认状态:<button id='btn' class=" btn btn-block btn-default">提交</button>js中可以这样写:<script> window.onload = function() { var btn ...原创 2018-09-05 15:56:32 · 12145 阅读 · 0 评论 -
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
代码如下<!DOCTYPE html><html><head> <meta charset="utf8"> <title>js拖拽效果</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jq原创 2018-08-28 20:40:29 · 3364 阅读 · 0 评论 -
$.post(url,data,function(val){})回调函数的参数
写这篇博客是为了纪念一下今晚如此机智的自己~ 我居然猜到了$.post(url,data,function(val){})回调函数的参数居然就是url这个PHP页面的echo值,突然好喜欢我自己,嘿嘿嘿这是我的调用$.post()函数的代码function load_collection(collection_id){if(confirm("载入本条收藏代码后将覆盖当前代码框内容,是否...原创 2018-08-07 00:00:22 · 8752 阅读 · 0 评论 -
点击按钮button,弹出一个对话框输入数据
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> RunJS 演示代码 </title> &a原创 2018-08-06 19:06:35 · 29759 阅读 · 2 评论 -
JQuery中的$.post(url,data,fun)函数获取php后台返回的对象、在js的ajax异步传输的post方法中传输json数组
JQuery中的$.post(url,data,fun)函数获取php后台返回的对象网上找了很多居然都找不到,呜~最终自己悟出来了,真是令人百感交集一、这是前台页面index.php&lt;?php/** * Created by PhpStorm. * User: zj * Date: 18-10-22 * Time: 下午8:50 */?&gt;&lt;!DOCTYPE...原创 2018-10-22 21:13:08 · 2174 阅读 · 0 评论 -
JS检测鼠标滚轮是否滚动到底部,激活button按钮的点击事件
JS检测鼠标滚轮是否滚动到底部,激活button按钮的点击事件一、HTML中的文本框和button按钮&amp;lt;div class=&quot;form-group&quot;&amp;gt; &amp;lt;label class=&quot;col-sm-4 control-label&quot;&amp;gt;考前须知&amp;原创 2018-10-25 21:02:38 · 3484 阅读 · 0 评论 -
PHP中的数组如何转成JavaScript数组?
超级简单的方法,一行就搞定$x_array是PHP中的一维数组,经过json_encode函数处理后,输出到js中,就直接成了js中的数组,真是超级方便,亲测可用哟var x_data = &lt;?php echo json_encode($x_array);?&gt;;下面是网页上按F12后的js代码:...原创 2018-12-02 19:18:34 · 1276 阅读 · 2 评论 -
js中的trim函数怎么使用
JQuery中有个全局函数trim()可以实现去掉字符串两端的空白var x = " abc ";x = $.trim(x);alert(x);//此时x就是“abc”原创 2018-11-23 15:23:01 · 11546 阅读 · 1 评论 -
JS实现radio单选的同时,可以自定义输入值
效果图:css.radio { background-color: white; border-color: gray; color: gray; border-style: solid; border-width: thin; text-align...原创 2018-11-21 13:35:25 · 1467 阅读 · 0 评论 -
怎样用js实现为一段HTML元素设置随机颜色字体(亲测可用)
用JS为一段HTML元素设置随机颜色字体HTML中的元素&lt;p id='broadcast'&gt;testtest&lt;/p&gt;JS部分var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];function generateMixed...原创 2018-11-12 20:51:30 · 4788 阅读 · 3 评论 -
点击按钮,实时更新右侧的内容 ajax技术$.post()方法同步局部刷新页面
我感觉我真的好机智啊,有些很偏的问题,百度不到的时候,真的就只能靠自己钻研了我是想通过点击按钮根据左侧框中的问题编号来更新显示右侧是弹出框中的data-content的内容(每一编号对应的名称)。我是用bootstrap中的popover弹出框来实现的,下面是菜鸟教程给出关于弹出框的案例:<button type="button" class="btn btn-warning" ti...原创 2018-11-13 12:42:44 · 2899 阅读 · 0 评论 -
h5如何实现左右滑动效果,一个滑动插件swiper就搞定
演示效果图:这是我的文件路径结构:这是index.html文件:&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot原创 2018-11-09 18:12:51 · 12311 阅读 · 0 评论 -
在form表单提交之前执行一些js判断
在form表单提交之前执行一些js判断我刚开的时候,是用onsubmit属性的,如下所示:index.php: <h2>用户登录</h2> <form method="post" id="userForm" onsubmit="return isRemeber()"> <div class="form-gr原创 2018-11-09 14:14:37 · 10485 阅读 · 1 评论 -
用JQuery实现点击按钮来显示/隐藏某个div
刚开始我还在判断div的display属性是不是等于"none",来选择是show()还是hide(),现在才想起来直接用toggle()方法就可以了嘛,真的是太方便了使用jQuery的时候,千万不要忘记在HTML页面加jQuery的CDN哟<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">&l...原创 2018-10-31 16:50:58 · 2805 阅读 · 0 评论