前端
wunianisme
Java开发工程师
微信公众号:人玉林风
简书:勿念及时雨
展开
-
js如何判断浏览器版本
获取浏览器版本信息调用navigator对象的userAgent属性可以获取到浏览器版本,型号,内核,甚至安装的插件等信息。navigator.userAgent主流浏览器的userAgent信息一些主流浏览器的部分版本userAgent信息如下表所示:浏览器及版本userAgent信息IE7Mozilla/4.0 (compatible; MSIE 7.0; W...原创 2019-11-07 19:03:38 · 915 阅读 · 0 评论 -
使用highlight.js实现代码高亮
1.访问highlight.js官网,勾选你需要的语言,然后点击download按钮开始下载highlight.js插件。下载地址:https://highlightjs.org/download/2.将下载好的文件目录拷贝到项目中,在html页面中引用下面的文件和脚本代码:<link rel="stylesheet" href="/highlight/styles/default....原创 2019-11-04 18:11:36 · 1624 阅读 · 0 评论 -
jQuery根据属性或属性值获取元素的几种选择器
根据属性获取元素例如要获取div中含有class属性的元素。$("div[class]")根据属性值获取元素在选择元素的时候使用[attribute$=value],匹配给定的属性是以某些值结尾的元素。HTML代码<input name="username" /> <input name="password" /> <input name="newp...原创 2019-10-21 19:40:14 · 3998 阅读 · 0 评论 -
localStorage和sessionStorage
HTML5 Web存储包括localStorage和sessionStorage,HTML5 Web是以键值对的形式存储于客户端,通常存储的数据类型为字符串。localStoragelocalStorage能够永久存储,除非主动清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端中保存,不参与和服务器的通信。常用方法如下:1.保存数据到本地...原创 2019-10-13 19:15:19 · 170 阅读 · 0 评论 -
this.optional(element)的用法
this.optional(element)是jquery.validator.js表单验证框架中的一个函数,用于表单控件的值不为空时才触发验证。简单来说,就是当表单控件值为空的时候不会进行表单校验,此函数会返回true,表示校验通过,当表单控件值不为空的时候会执行后面的校验条件判断,并返回校验结果true或者false。一般在返回此函数返回值时会在后面使用||来连接一个校验条件。示例代码如下...原创 2019-08-30 00:34:48 · 1894 阅读 · 0 评论 -
typeof的用法
在js的开发过程中,我们有时可能遇到需要判断变量类型的情况。在js中,我们可以使用typeof运算符来检测一个变量的类型。语法如果想检测一个表达式的类型,可以使用:typeof (表达式)如果想检测一个变量的类型,可以使用:typeof 变量名返回值使用typeof进行运算后将会返回一个字符串,该字符串的值有六种,分别是undefined、boolean、string、numbe...原创 2019-08-13 23:33:19 · 470 阅读 · 0 评论 -
ES6 Set和Map数据结构
SetES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成Set数据结构。var s = new Set();[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));for (let i of s) { console.log(i);}// 2 3 5 4上面代码通过add方法向...原创 2019-06-21 22:45:54 · 140 阅读 · 0 评论 -
ES6 数值的扩展
二进制和八进制表示法ES6提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。0b111110111 === 503 // true0o767 === 503 // true如果要将0b和0o前缀的字符串数值转为十进制,要使用Number方法。Number('0b111') // 7Number('0o10') // 8Number.isFini...原创 2019-06-05 00:22:14 · 191 阅读 · 0 评论 -
ES6 正则的扩展
RegExp构造函数如果RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符。而且,返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符。下面代码中,原有正则对象的修饰符是ig,它会被第二个参数i覆盖。new RegExp(/abc/ig, 'i').flags// "i"字符串的正则方法字符串对象共有4个方法,可以使用正则表达式:match...原创 2019-06-04 00:28:08 · 174 阅读 · 0 评论 -
ES6 属性的遍历
ES6一共有5种方法可以遍历对象的属性。、for…infor…in循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)。Object.keys(obj)Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)。Object.getOwnPropertyNames(obj)Object.getOwnPropertyNames返回一个数...原创 2019-06-09 23:25:43 · 181 阅读 · 0 评论 -
ES6 对象的扩展
属性的简洁表示法ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。下面代码表明,ES6允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值。var foo = 'bar';var baz = {foo};baz // {foo: "bar"}// 等同于var baz = {foo: foo};除了属性简写,方法也可以简写。var o = ...原创 2019-06-08 23:40:18 · 125 阅读 · 0 评论 -
ES6 字符串的扩展
字符的Unicode表示法JavaScript允许采用\uxxxx形式表示一个字符,其中“xxxx”表示字符的码点。"\u0061"// "a"但是,这种表示法只限于\u0000——\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表达。"\uD842\uDFB7"// "原创 2019-06-03 00:14:21 · 109 阅读 · 0 评论 -
前端实现弹出“另存为”对话框的三种方式
今天开发一个需求,需要将一段字符串保存到文件中,并且保存之后在页面上弹出“另存为”对话框来实现将文件保存到指定位置。那么应该如何来实现在前端弹出“另存为”对话框呢?调用document.execCommand方法调用js方法document.execCommand可在前台页面调出“另存为”对话框,并将将服务器上存放的文件保存到本地指定的位置。需要注意的是,部分IE浏览器中,可能会阻止显示内容,...原创 2019-08-24 01:00:06 · 19531 阅读 · 3 评论 -
js实现实时监听input输入框值的变化
要想实现实时监听input输入框值的变化的效果,只需要让input元素监听两个事件:input和propertychange,然后调用对应的js监听函数即可。先使用原生js代码实现。<input type="text" oninput="onInputChange(event)" onpropertychange="onInputChange2(event)" /><sc...原创 2019-08-22 00:11:24 · 4699 阅读 · 0 评论 -
js实现textarea滚动条位置始终在最下方
在默认情况下,随着文本内容的不断增加,textarea的滚动条也会不断往上方移动,这就会导致当内容超出文本可视区域后,我们无法看到最下方的内容。这个时候,我们可能就会想让textarea滚动条的位置始终在最下方,因为只有滚动条在最下方时,textarea底部区域的文本才会显现出来。想要实现这个功能也很简单,只要几行js代码就可以搞定了,这里以jQuery为例来实现此功能。<script ...原创 2019-08-27 00:27:59 · 4006 阅读 · 0 评论 -
SVG简介
SVG是什么?SVG是使用XML来描述二维图形和绘图程序的语言,于2003年1月14日成为W3C推荐标准。SVG的特点可伸缩矢量图形万维网联盟的标准用于定义用于网络的基于矢量的图形使用XML格式定义图形在放大或改变尺寸的情况下其图形质量不会有所损失与DOM、XSL等W3C标准是一个整体SVG的优势与JPEG和GIF图像相比尺寸更小,可伸缩,且可压缩性更强可被非常多的工具...原创 2019-08-31 23:46:27 · 168 阅读 · 0 评论 -
js如何判断一个字符串是否以指定字符串开头
substrsubstr方法用于返回截取从指定位置上开始,指定长度的一段子串。##trueif("Hello World".substr(0, 5) == "Hello"){ return true;}substring与substr方法类似,都表示截取一段字符串,不同的是,substring方法中传入的两个参数表示起始位置和终止位置,且包含起始位置但不包含终止位置。#...原创 2019-09-01 18:52:13 · 10455 阅读 · 1 评论 -
使用pdf.js实现在线查看pdf文件
pdf.js是一个使用HTML5构建的可移植文档格式库。它可以帮助我们在浏览器中构建pdf文档,实现在线查看pdf文件的功能。实现步骤1.进入官网,选择Stable版本下载pdf.js插件并解压到本地。地址:http://mozilla.github.io/pdf.js/2.在服务器根目录创建pdfjs静态资源目录,并放入刚才解压的文件。3.在浏览器中访问服务器地址,能够看到pdfjs这...原创 2019-09-12 00:10:30 · 5622 阅读 · 0 评论 -
解决${xxx}赋值给js变量时取不到值的问题
问题最近开发时,在用JSP页面中有如下代码:<%request.setAttribute("contextPath",request.getContextPath());%><script> var Global={}; Global.contextPath='${contextPath}';</script>按照正常的执行结果,...原创 2019-09-18 00:31:49 · 2315 阅读 · 0 评论 -
location.href的几种用法
location.href在js中,location.href经常用于页面跳转。它主要有如下几种用法:1.在当前页面打开URL页面。需要注意的是window.location.href=window.location.href与window.location.reload()都是刷新当前页面,但是如果页面上有提交数据的时候,window.location.reload()会提示是否提交。se...原创 2019-09-26 18:48:52 · 21159 阅读 · 0 评论 -
js获取js文件传递的参数
在使用script标签将一个js文件引入到另一个前端页面时,遇到需要传递参数的情况,并且在被引入的js代码中需要对传递的参数进行获取。传递参数的方法很简单,就是像访问URL地址一样在script标签的src属性中引入的文件路径后面添加?参数名=参数值,如果要传递多个参数则用&连接。<script src="http://localhost:8080/opas-web/script...原创 2019-10-11 19:00:03 · 3940 阅读 · 0 评论 -
ES6 const命令
const声明一个只读的常量。一旦声明,常量的值就不能改变。const PI = 3.1415;PI // 3.1415PI = 3;// TypeError: Assignment to constant variable.上面代码表明改变常量的值会报错。const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。下面代码表示,对于con...原创 2019-06-08 00:46:46 · 99 阅读 · 0 评论 -
ES6 变量的解构赋值
基本用法ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。以前,为变量赋值,只能直接指定值。var a = 1;var b = 2;var c = 3;ES6允许写成如下形式。var [a, b, c] = [1, 2, 3];上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。本质上,这种写法属于“模式匹配”,...原创 2019-06-02 00:45:49 · 153 阅读 · 0 评论 -
vue-resource如何修改发送给服务端的数据类型
在默认情况下,对于PUT/POST/PATCH/DELETE等请求,请求头中的Content-Type为application/json,即JSON类型。有时我们需要将数据提交为指定类型,如application/x-www-form-urlencoded、multipart/form-data、text/plain等。下面以POST请求为例来说明。1.全局headers配置Vue.http....原创 2019-04-22 23:58:41 · 1283 阅读 · 0 评论 -
vue-resource如何发送JSONP请求
JSONP是利用Javascript可以跨域的特性从服务端请求数据的,即在跨域的情况下才有必要使用JSONP来发送请求。vue-resource提供了三种调用方式。1.全局方法Vue.http({ url:'http://example.com/books', //参数部分,将会拼接在url后面 params:{ cat:1 }, method:'JSONP'})...原创 2019-04-22 23:48:36 · 1898 阅读 · 0 评论 -
vue-resource中的Promise对象
vue-resource基本HTTP调用和RESTful调用action方法执行后都会返回一个Promise对象,该Promise对象提供了then、catch、finally等常用方法来注册回调函数。代码示例如下:var promise=this.$http.post( 'http://example.com/book/create', //请求体中要发送给服务端的数据 { ...原创 2019-04-21 23:42:46 · 274 阅读 · 0 评论 -
Vue.js自定义错误信息模板
在vue.js中,常常使用vue-validator插件对表单进行校验。而在vue-validator中,可以使用validator-errors组件来更便捷的输出错误信息。代码示例如下:<validator name="validation1"> <div class="username"> <label for="username">usern...原创 2019-04-13 23:52:22 · 1783 阅读 · 0 评论 -
vue-resource中的跨域资源请求
跨域AJAX早期,由于浏览器的安全策略,AJAX只能在同域情况下发送成功。但是目前很多浏览器已经开始支持XMLHttpRequest2。XMLHttpRequest2引入了大量的新特性,例如跨域资源请求(CORS)、上传进度事件、支持二进制数据上传/下载等。现在我们来了解一下vue-resource中用到的CORS特性和XMLHttpRequest2的替代品XDomainRequest。XM...原创 2019-04-20 23:48:14 · 952 阅读 · 0 评论 -
Vue.js组件注册
组件是Vue.js最推崇的,也是最强大的功能之一,核心目标是为了可重用性高,减少重复性的开发。组件有两种注册方式:全局注册和局部注册。全局注册Vue.component('my-component',MyComponent)如上所示,第一个参数是注册组件的名称(在HTML中可以使用组件:</my-component);第二个参数是组件的构造函数,它可以是Function,也可以是O...原创 2019-04-05 23:55:19 · 322 阅读 · 0 评论 -
Vue.js自定义filter
自定义filter可以写在全局的Vue下Vue.filter('reverse',function(value){ return value.split('').reverse().join('');})也可以写在实例中var demo=new Vue({ el:'#demo', data:{}., filters:{ reve...原创 2019-04-05 00:08:47 · 129 阅读 · 0 评论 -
浅谈(function($){...})(jQuery)
(function($){…})(jQuery)实际上是一个匿名函数。function(arg){…},这里定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即: (function(arg){…})(param) ,相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这个匿名函数。2.(functio...原创 2019-03-23 19:32:05 · 5093 阅读 · 1 评论 -
cookie,sessionStorage和localStorage的区别
相同点都存储在客户端。不同点1.存储大小cookie数据大小不能超过4k。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。2.有效时间localStorage:存储持久数据,浏览器关闭后数据不丢失除非主动删除数据。sessionStorage:数据在当前浏览器窗口关闭后自动删除。cookie:设置的coo...原创 2019-03-11 16:27:50 · 10347 阅读 · 0 评论 -
vue-cli模板
vue-cli是一个项目脚手架工具,它支持通过模板来生成项目结构。执行vue init命令可以指定模板的名字,默认情况下vue-cli会根据传入的模块名字去github中查找模板。vue-cli的模板分为官方模板、自定义模板和本地模板。官方模板在使用前可以先用vue list 命令查询有哪些模板可以使用,然后通过vue init命令来生成相应的项目结构。模板分为基础和高级两个版本,其中基础版...原创 2019-05-02 00:12:24 · 1068 阅读 · 2 评论 -
ESLint简介
在日常的团队开发中,为了避免出现低级bug和统一代码风格,通常会在开发前约定一套编码规范。为了保证规范的执行,可以使用Lint工具和代码风格检测工具。ESLint就是一个Lint工具,它是由JS红宝书的作者Nicholas C.Zakas创立的一个开源项目,旨在为大家提供一个可扩展、每条规则独立、不内置编码风格的语法检查工具。ESLint的配置在项目中配置ESLint有两种基本方法:1.用...原创 2019-05-02 23:32:58 · 248 阅读 · 0 评论 -
ES6 Promise对象和then()的用法
Promise 对象概述是异步编程的一种解决方案。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。状态Promise 异步操作有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。除了异步操作的结果,任何其他操作都无法改变这个状态。Promise 对象只有:从 pending 变为 fulfilled 和从 pending...原创 2019-06-01 01:09:11 · 9980 阅读 · 0 评论 -
layui table隐藏列
layui的官网table demo如下:layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:'/demo/table/user/' ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增...原创 2019-06-06 00:28:54 · 8035 阅读 · 3 评论 -
防止表单重复提交的几种方法
表单重复提交是在Web应用中经常遇到的一个比较麻烦的问题。有很多应用场景都会遇到重复提交问题,比如:点击提交按钮两次。点击刷新按钮。使用浏览器后退按钮重复之前的操作,导致重复提交表单。使用浏览器历史记录重复提交表单。浏览器重复的HTTP请求。用户提交表单时可能因为网速、网页被恶意刷新等原因,致使同一条记录重复插入到数据库中。我们可以从客户端和服务器端一起着手,设法避免同一表单的重复...原创 2019-05-25 01:01:40 · 921 阅读 · 0 评论 -
ES6 const与let变量
ES6ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本。但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中。var带来的问题首先说说以往使用var带来...原创 2019-05-16 00:06:11 · 112 阅读 · 0 评论 -
jQuery serialize()、serializeArray()方法实现表单序列化
serialize()serialize()方法作用于一个JQuery对象,它能够将DOM元素内容序列化为字符串。与JQuery中其他方法一样,serialize()方法也是作用于一个JQuery对象,它能够将DOM元素内容序列化为字符串,用于ajax请求。通过使用serialize()方法,可以提交本页面的所有域,代码如下:$("#send").click(function(){ ...原创 2019-05-11 00:17:49 · 1261 阅读 · 0 评论 -
layui数据表格
快速使用创建一个table实例最简单的方式是,在页面放置一个元素 <table id="demo"></table>,然后通过 table.render() 方法指定该容器,示例代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title&g...原创 2019-05-15 00:17:53 · 335 阅读 · 0 评论