jQuery
文章平均质量分 62
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
别团等shy哥发育
硕士在读,对分布式、中间件、容器、微服务、深度学习、机器学习与数据挖掘方面感兴趣,希望可以在这些方面和大家交流学习方法。
后续文章会搬到这里:www.codeleader.top
展开
-
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to th
文章目录1、问题描述:2、原因分析:3、解决方案:1、问题描述:今天在谷歌浏览器的控制台中发现个警告:Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to th我翻译了下:主线程上的同步XMLHttpRequest已被弃用,因为它会对最终用户的体验产生不利影响。2、原因分析:一个是Ajax请求分异步和同步2种模式。如果请求是同步的,在请求返回之前线程会一直原创 2021-04-17 23:13:25 · 7074 阅读 · 0 评论 -
summernote富文本编辑器基本使用
summernote富文本编辑器的基本使用一、简介二、下载:三、基本使用:1、引入js/css2、建立一个div3、用 js初始化操作4、上传图片的Controller5、过去编辑器内容的代码:6、为编辑器赋值的方法:7、效果展示:四、总结一、简介Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。二、下载:官网下载地址:https://github.com/summernote/summe原创 2021-04-08 00:00:10 · 1584 阅读 · 0 评论 -
SpringMVC接收JSON数组
SpringMvc接收JSON数组1、前端ajax请求:2、后端接收:3、javabean4、关键(1)设置contentType=application/json;charset=utf-8(2)@RequestBody注解1、前端ajax请求: var wellInfos=new Array(); for (var i=0;i<selects.length;i++){ //我是取得数据,你们根据自己情况 wellInfos.push({原创 2021-04-04 02:05:38 · 694 阅读 · 0 评论 -
zTree实现树形结构菜单
文章目录一、简介二、前端渲染效果三、实现步骤1、数据库表结构2、引入zTree插件3、树形结构实体类SysModule4、表示层代码5、js渲染部分1、树初始化配置2、加载数据树4、控制器关键代码5、业务逻辑层代码:6、数据访问层代码:四、碰到的bug及解决方案1、指定结点选中无效2、mybatis多对多关系的处理较为麻烦一、简介zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。官方文档:http://www.treejs.原创 2021-03-26 00:06:10 · 1516 阅读 · 0 评论 -
laydate插件实现时间选择器
文章目录一、前言:二、年选择器:1、引入js和css文件:2、写一个input标签:3、执行一个laydate实例4、页面效果:三、年月选择器1、替换type属性2、页面效果:四、碰到的bug1、每次都会有上次输入的痕迹,影响第二次的输入2、实现点击即选中一、前言:layDate 在 layui 2.0 的版本中迎来一次重生。无论曾经它给你带来过多么糟糕的体验,从今往后,所有的旧坑都将弥合。全面重写的 layDate 包含了大量的更新,其中主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选原创 2021-03-21 20:58:09 · 760 阅读 · 0 评论 -
Bootstrap-table的客户端分页渲染表格
文章目录一、前言:1、服务端分页地址:2、下载地址:二、客户端分页步骤:1、table标签:2、js渲染:2.1、表格初始化2.2、页脚格式化处理:3、后端处理:4、前端页面渲染效果:一、前言:具有单选,复选框,排序,分页,扩展和其他添加功能的扩展Bootstrap表1、服务端分页地址:https://blog.csdn.net/qq_43753724/article/details/1120745572、下载地址:https://download.csdn.net/download/qq_43原创 2021-03-20 21:05:56 · 1066 阅读 · 0 评论 -
利用bootstrap-table插件自带的打印功能打印表格
文章目录1、前端代码:2、前端页面:1、表格数据展示2、点击打印按钮之后:3、插件下载地址:4、碰到的bug1、前端代码:<link href="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.css" rel="stylesheet"><script src="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.js"原创 2021-03-17 17:16:51 · 3988 阅读 · 0 评论 -
printThis前端打印插件
文章目录一、前言:1、特征2、插件下载地址:二、用法:1、所有配置:三、示例代码:1、jsp代码:2、 js部分:3、前端页面:四、bug1、设置的pageTitle属性无效一、前言:一款打印jQuery插件1、特征打印特定的和多个DOM元素保留页面CSS /样式**或添加新CSS;世界是你的牡蛎!保留表单条目画布支持2、插件下载地址:https://download.csdn.net/download/qq_43753724/15850787?spm=1001.2014.3001.原创 2021-03-17 16:55:49 · 3236 阅读 · 2 评论 -
bootstrap-suggest插件处理复杂对象时的解决方案
文章目录一、问题描述:二、解决办法:后端代码:jsp页面:js代码渲染:实现效果:一、问题描述:在用bootstrap-suggest插件的时候,如果要提示的属性中有关联对象的话,前端页面显示不出来(下面的areaId属性加载不出来)wellInfo类关键属性:public class WellInfo { private String wellId; private Area area; private String wellType; private原创 2021-03-16 15:46:48 · 1663 阅读 · 0 评论 -
Echarts异步加载和更新
文章目录一、前言二、 代码实现步骤1、引入插件2、为 ECharts 准备 一个DOM 容器。3、通过 echarts.init 方法初始化一个echarts 实例4、异步加载数据三、渲染之后的效果四、bug及解决方案1、生成图形不适配外层div:2、在数据更新时没有清除上一次的旧数据第一种:可以采取在setOption后面加一个参数来解决问题:第二种:在每次更新之前,先调用clear方法3、如果前端传递过来的集合为空,页面不变化一、前言实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 j原创 2021-03-13 20:39:50 · 817 阅读 · 0 评论 -
Hplus框架动态添加选项卡功能(扩展)
文章目录一、前言二、代码如下:1、随便写个按钮2、调用openTabPage()三、实现效果:1、点击测试选项卡按钮2、可以看到确实动态添加了一个选项卡并打开了新页面四、感谢openTabPage函数源码的作者:一、前言hplus框架确实是后端开发人员的福音,但是有很多功能没有实现,我根据网上大神的做法,实现了动态添加选项卡来打开新页面的功能。二、代码如下:1、随便写个按钮<div class="row"> <button class="b原创 2021-03-10 16:17:04 · 838 阅读 · 0 评论 -
POI结合bootstrap-fileinput上传Excel内容到数据库
文章目录一、准备工作1、POI依赖2、bootstrap-fileinput插件下载:二、代码部分1、前端代码:2、javascript渲染部分:3、Controller层:4、Service:5、Service实现类:6、Dao层代码:三、实现效果:1、准备导入的excel数据:2、在前端页面中导入该文件:3、查看数据库是否更新了数据:一、准备工作1、POI依赖如果是maven项目,在pom.xml中添加下面的依赖: <!--POI 实现Excel的导入导出--> <d原创 2021-03-03 16:30:31 · 559 阅读 · 1 评论 -
bootstrap-fileinput插件实现文件上传
文章目录一、准备二、使用示例1、引入响应的js和css文件2、批量导入前端代码三、效果展示:一、准备源码下载地址:https://github.com/kartik-v/bootstrap-fileinputDemo地址:https://plugins.krajee.com/file-input/demo中文文档:http://www.bootstrap-fileinput.com/下载好的目录如下图:将该文件引入到项目中二、使用示例1、引入响应的js和css文件 <link hr原创 2021-03-03 16:05:50 · 1576 阅读 · 0 评论 -
bootstrap-suggest插件
文章目录一、bootstrap-suggest1.1 功能说明1.2 实现效果:1.3 方法调用1.4 事件监听1.5 完整代码实现:1.5.1 前端关键代码:1.5.2 js代码:1.5.3 Controller层:配置参数如下:一、bootstrap-suggest这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件,必须使用于按钮式下拉菜单组件上。示例地址:http://lzw.me/pages/demo/bootstrap-suggest-plugin/demo/插件源码:ht原创 2021-02-22 20:24:33 · 4042 阅读 · 4 评论 -
jquery.validate清除表单的验证结果
文章目录发现bug:分析bug:解决bug:发现bug:jquery.validate无法清除同表单的上次验证结果,如下:分析bug:查阅官方文档之后,观察validate的返回类型,可以发现validate 方法返回一个 Validator 对象。名称返回类型描述validate(options)Validator验证所选的FormValidator 对象有很多方法可以用来引发校验程序或者改变 form 的内容,下面列出几个常用的方法。名称返回类型原创 2021-01-22 20:24:01 · 2078 阅读 · 0 评论 -
Echarts与SSM框架交互
Echarts与SSM框架交互1、实现效果:数据库表结构:2、前端代码: <!--宿舍分配情况可视化--> <div class="col-sm-12"> <div class="ibox-content"> <div class="echarts" id="echarts_dorm"></div> </div原创 2021-01-18 12:40:04 · 569 阅读 · 0 评论 -
js中onclick传json数据
js中onclick传json数据现在要在onclick事件中传递对象参数,由于我们是通过字符串拼接传的,那我们传之前用JSON.stringify(value)先将JSON对象转为JSON字符串,传之后再用eval(value)将JSON字符串转为JSON对象。(当然了,方法很多,这只是其中一种)...原创 2021-01-18 11:55:22 · 1123 阅读 · 0 评论 -
jquery ajax参数详解
Jquery中的AJAX参数url,[settings]url:一个用来包含发送请求的URL字符串。settings:AJAX 请求设置。所有选项都是可选的。settings:选项acceptstype:Map默认: 取决于数据类型。内容类型发送请求头,告诉服务器什么样的响应会接受返回。如果accepts设置需要修改,推荐在$.ajaxSetup()方法中做一次。asynctype:boolean(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将原创 2021-01-10 23:12:37 · 1426 阅读 · 0 评论 -
bootstrap-table数据导出Excel 、JSON、txt、pdf等
API地址:https://examples.bootstrap-table.com/#options/server-side-pagination.htmltableExport源码下载地址:https://github.com/hhurz/tableExport.jquery.pluginbootstrap-table下载地址:https://github.com/wenzhixin/bootstrap-table一、引入js源码:<!--bootstrap-table及数据导出相关 --原创 2021-01-10 00:32:18 · 3526 阅读 · 1 评论 -
BootStrap-table插件添加toolbar工具栏
1、实现效果2、定义id="toolbar"的容器(id可以自定义) <div class="row" id="toolbar"> <div class="col-sm-3"> <button class="btn btn-w-m btn-primary glyphicon glyphicon-plus" data-toggle="原创 2021-01-03 14:10:46 · 4630 阅读 · 0 评论 -
jQuery设置select的某个option选中
jQuery设置select的某个option选中html部分 <label class="col-sm-1 control-label text-right">商品类型:</label> <div class="col-sm-2"> <select class="form-control" id="type"></select>原创 2021-01-02 16:49:16 · 8437 阅读 · 0 评论 -
bootstrap-table插件实现分页(服务端分页)
前端html部分<%--商品列表显示--%> <div class="ibox-content table-responsive"> <table id="table" class="table" data-click-to-select="true"> </table> </div>js部分$(function () {原创 2021-01-01 22:26:30 · 1550 阅读 · 0 评论 -
jQuery Validate插件实现表单验证
jQuery Validate前言jQuery Validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供可选的定制选项,以满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括URL和电子邮件验证,同时提供了一个使用编写用户自定义方法的API。所有的捆绑方法替换使用英语作为错误信息,并已翻译成其他37种语言。引入js库由于每个人放置的位置不一样,所以相对路径也会不一样,自己改下路径<script src="/ssm_test/commons/jslib/h原创 2021-01-01 22:01:04 · 277 阅读 · 0 评论 -
springmvc文件上传(ajax请求 带参数)
前言这里用ajax文件上传,并携带几个参数,网上查到的大多都是没带参数只有文件的。由于我项目代码太多,这里只给出关键代码。操作**我用的SSM框架,传之前,先在WEB-INF/dispatcherServlet-servlet.xml中配置**multipartResolver<!-- 文件上传 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.Common原创 2021-01-01 21:26:28 · 895 阅读 · 0 评论 -
AJAX动态加载下拉框数据
1、type表数据2、前端页面现在的想法是点击商品类型下拉框按钮,动态加载所有商品类型利用select标签的id属性3、jQuery代码部分这句放在自执行函数里面loadProductType("/ssm_test/type/getProductType","type");那个swal是我用的弹出框插件,你换成alert()函数即可//加载商品类别下拉框 function loadProductType(url,idStr){ $.ajax({原创 2020-12-31 12:54:00 · 795 阅读 · 0 评论 -
jQuery遍历List对象
jQuery遍历List对象在jQuery中,可以使用each()方法以一种非常直观的方式来模拟break和continue关键字的功能。只需在回调函数中编写一条return语句即可。要停止迭代,只需从回调函数返回false,这与在普通循环语句中使用break语句类似。要跳过当前迭代并继续进行下一轮迭代,只需返回true即可,这与在循环语句中使用continue类似。下图为后端封装的集合类型我们现在只遍历集合types就行,前端js代码如下:$.each(data.ProductType,funct原创 2020-12-31 12:42:10 · 2422 阅读 · 1 评论 -
ECharts多图表与后台交互
ECharts多图表与后台交互多图表交互目前暂时的想法是多绑定一个DOM1、效果:2、test2.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--引入Echarts文件--> <script src="js/echarts.min.js">原创 2020-12-14 13:36:42 · 631 阅读 · 0 评论 -
ECharts与java后台交互绘制图表
ECharts与java后台交互绘制图表效果如下:1、test.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--引入Echarts文件--> <script src="js/echarts.min.js"></script>原创 2020-12-14 12:09:40 · 836 阅读 · 0 评论 -
jQuery ajax方法
1、新建一个ajax.html页面我们通过店家按钮执行ajax方法,将提交得数据显示在上图下面那个div中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></原创 2020-12-12 23:05:51 · 240 阅读 · 0 评论