Javascript

分类下相关文章

百度编辑器 UEditor 限制高度

文章内容太长的情况下,如果不限制编辑器的高度,会导致要下拉很久才能点击到保存按钮。 如果可以设置编辑器的高度,即使文章再长,也可以在编辑器内部下拉滚动条,而不会影响网页的高度。 百度编辑器 UEditor 的设置方法: var ue = UE.getEditor('container'); ue.ready(function() { this.setContent('xxx'); this.setHeight(500); }) ...

阅读全文...

使用 JS 修改提交按钮的处理状态

代码 $('#email_submit').prop('disabled', true); $('#email_submit').attr('style', 'background: grey !important'); $('*').css('cursor', 'progress'); $('#email_submit').prop('disabled', false); $('#email_submit').attr('style', 'background: #e40013 !important'); $('*').css('cursor', 'default'); 修改鼠标样式为“ ...

阅读全文...

Uncaught SyntaxError: await is only valid in async function

在使用 sweet alert 组件时,遇到一个错误提示: Uncaught SyntaxError: await is only valid in async function function edit_dis_top(user_id) { const {value: formValues} = await Swal.fire({ title: '设置推荐人', // ... }) if (formValues) { Swal.fire(JSON.stringify(formValues)) } } 这让我想起了 C# 的 awa ...

阅读全文...

使用 Babel 将 ES6 转成 ES5 代码

Laravel 内置的 Mix 太过臃肿了,我本身又非常反感 JS NPM 这种低质量代码的包管理方式,所以能少一点 JS 依赖就尽量少一点。所以,我直接抛弃了 Laravel Mix。而且,Laravel Mix 在 Windows WSL 中非常不稳定,安装都会报错,问题颇多,并不想研究。 最终,我决定使用简单的 Babel 替换掉 Laravel Mix,因为我实际上只需要 ES6 转成 ES5 这一个功能。 Babel 的文档写的真好 解释了 ES 2015 有哪些新特性 Babel 的配置文件 可以在三个地方配置 Babel babel.config.js .babelrc p ...

阅读全文...

使用 fetch 替代 ajax

前一段时间看到条消息 bootstrap 5 将移除对 jquery 的依赖。例如: 用 querySelectorAll 来查询 DOM 节点 使用 fetch 代替 ajax(在不支持的浏览器上使用 XHR) 使用代理事件来进行事件处理 为一些尚未实现的 DOM 标准写了 polyfill 更多地使用自定义元素 (CustomElement) 我完全理解 bootstrap 这样做的初衷,因为写一个简单的小功能,例如调用服务端接口,就需要引入庞大的 jquery 依赖,实际上是非常不合理的。 所以,我决定在新项目中都采用相同的做法,使用 fetch 替代 ajax。 fetch 如何替 ...

阅读全文...

innerHTML, innerText, TextContent 的区别

测试用的 HTML 代码 <div class="quoteText"> “Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.” <br> ― <span class="authorOrTitle"> Albert Einstein </span> </div> innerHTML document.querySelect ...

阅读全文...

返璞归真:使用纯粹的 javascript 替换掉 jQuery

为何要替换掉 jQuery 一个简单的 element 选择,为何要引入一个 jQuery 依赖? 我想尝试一下摆脱 jQuery 的依赖 Vuejs 中使用 jQuery 总感觉怪怪的 为何 jQuery 可以被替换掉 使用 jQuery 有一个很大的历史原因,那个年代,多种浏览器需要兼容,而 jQuery 是兼容的最好的。例如,ie6 很多功能函数跟 firefox / chrome 不一致,一行 js 代码就需要不得不多写几行来做兼容。用 jQuery 确实省心。 但是,时代不同了。目前手机浏览器完全没有 ie 的包袱,并且桌面平台 ie8 以下的用户凤毛麟角,甚至可以完全忽略不计。 ...

阅读全文...

javascript 正则提取页面中的变量值

有的网页为了防止 tampermonkey 这类插件读取页面中的 js 变量,把变量写到了匿名自调用函数 self-invocation 中,例如 <script type="text/javascript"> (function() { var a = 1; console.log(a); })(); </script> 而我为了某些不可告人的目的必须读取到变量 a 的值。 一种有效的方式是,使用 ajax 获取当前页面的源代码,然后正则匹配中某个指定变量的值。 正则匹配 var s = 'var name = "hahahah ...

阅读全文...

JQuery 自动勾选 checkbox, 并触发提交

正在用 tampermonkey 写一个网站自动答题的程序。 网站题目的大致结构是 <input type="radio" name="qa" value="A"> <input type="radio" name="qa" value="B"> <a href="javascript:" class="submit-answer">提交答案</a> $('.submit-answer' ...

阅读全文...

使用 fiddler5 替换线上生产环境的 JS 文件,方便调试

晚上回家想继续调试白天没有调完的管理后台 JS Bug,但是又懒得重新搭建一套后台开发环境。 于是想起之前使用的 fiddler,替换线上环境的 JS 文件为本地文件即可。 发现当年使用的 fiddler2 已经升级到了 fiddler5。 我在 Windows 10 上使用 fiddler 始终无法启动 Chrome,干脆换成了 Edge,发现兼容性还不错。 ...

阅读全文...

JS 的省市区三级联动选择组件

由于后台要与小程序前端的城市选择对应起来,所以需要实现一个 JS 的后台省市区三级联动选择组件。 方案一:基于 element-china-area-data 的实现 https://github.com/Plortinus/element-china-area-data element-china-area-data 是基于 Vue 的 element ui 的一个实现。效果如图: 注意,github 里只介绍了基于 npm 的实现,如果想使用 CDN 引入的方式实现。 可以参考: <link rel="stylesheet" href="https:/ ...

阅读全文...

ES6 三个点新语法:数组元素的 rest / spread ,与对象属性的 rest / spread

今天在看微信小程序 zanui 的 field 组件代码时,发现一个新的语法,即三个点: <template is="zan-field" data="{{ ...config.base.name, value }}"></template> 其中的 config.base.name 是个对象,类似于 name: { focus: true, title: '收货人', placeholder: '名字' } 如果不加这三个点就会报错 Bad attr `data` with message & ...

阅读全文...

javascript 正则解析选择题答案

在做题库录入后台的 vuejs 组件。 一个一个录入答案确实费劲,如果能将几个答案一起粘贴过来,自动解析成独立的答案分别自动录入就爽多了。。。 下面的实现,支持带英文句点、中文逗号、以及没有间隔符的情况。 var str2 = new_value.replace(/^(.*)(A[\.\u3001]*\s*)/,'') // 去掉 A 选项前的内容 var choices = str2.split(/[A-G][\.\u3001]*\s*/); // 按选项分割 \u3001 是中文顿号的 unicode. ...

阅读全文...

Grunt.js Warning: Path must be a string

Github 上找了个 Chrome 插件进行修改,但是运行 grunt 命令之后报错 Running "jshint:files" (jshint) task Warning: Path must be a string. Received null Use --force to continue. Aborted d ...

阅读全文...

百度统计的自定义上报功能 - 事件分析

在页面引入百度统计的代码之后,对于页面上需要统计的事件,可以加入自定义统计。 例如,点击了某个按钮,完成了某个流程,等等 _hmt.push([‘_trackEvent’, category, action, opt_label, opt_value]); 具体参数,参考百度统计文档 http://tongji.baidu.com/web/help/article?id=236&type=0 举例说明,统计页面上的打赏按钮的点击量 var title = document.getElementsByTagName("title")[0].innerHTML; _h ...

阅读全文...

近期节日

2019年10月22日 世界传统医药日
2019年10月24日 霜降
2019年10月24日 联合国日
2019年10月31日 世界勤俭日
2019年11月01日 万圣节
2019年11月08日 立冬
2019年11月08日 中国记者日
2019年11月10日 世界青年节
2019年11月11日 光棍节,双十一购物节
2019年11月14日 世界糖尿病日
2019年11月17日 国际大学生节
2019年11月20日 国际儿童日
查看更多节日