jquery
关注
分享
扫一扫
duansamve
我的Web前端(React、Vue)、NodeJS......开发笔记
展开
-
My97 DatePicker日期控件中设置好时间后立刻执行相关函数
My97 DatePicker日期控件官网：http://www.my97.net/demo/index.htm方法：在input 标签中加入onfocus ，就可以了。wdatePicker()可以自定义事件函数。<input type="text" id="time" name="time" runat="server" onclick="WdatePicker({ realFullFmt: '%Date ', dateFmt: 'yyyy-MM-dd' })" onfocus原创 2020-05-14 22:04:37 · 389 阅读 · 0 评论 -
使用jquery.form异步提交文件和其它参数
使用jquery.form异步提交文件和其它参数原创 2020-07-02 22:32:32 · 436 阅读 · 0 评论 -
jQuery消息提示插件toastr使用详解
引入<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css"><script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>使用toastr.success('Hello world!', 'Toastr fun原创 2020-12-20 22:05:50 · 1574 阅读 · 0 评论 -
JavaScript实现文本框和密码框placeholder效果（兼容ie8）
<input type="text" name="hotGoods" id="search"> $(document).ready(function () { $("#search").val('请输入您要搜索的内容').css('color', '#ccc'); replacePlaceholder($("#search")); }); function replacePlaceholder.原创 2020-10-30 22:39:28 · 356 阅读 · 0 评论 -
Form表单提交之后，获取返回值
经常用form表单提交的小伙伴有没有发现，form表单默认的提交是没有返回值的，而且默认提交成功之后是跳转，跳转的action的路径，下面写一下默认的提交如何获取到form表单的返回值json，并且阻止默认的跳转动作。第一种方式 ：让form默认调整当前的iframe 即可页面结构见下面：<form target="form" action="" enctype="multipart/form-data" method="post"> <input type="fi...转载 2020-09-07 22:55:36 · 23947 阅读 · 2 评论 -
跨域请求时携带cookie
$.ajax({ type : "POST", url : url, cache: false, async : false, data : jsonData, dataType : 'json', timeout : 10000, crossDomain:true, //设置跨域为true xhrFields: { withCredentials: true.原创 2020-06-09 21:19:51 · 416 阅读 · 0 评论 -
ajax没运行完时切换页面报错解决方案
如：$.ajax{ ..... error:function(){ function001(); } }在页面没有加载完成时将function001 禁掉如下： window.onbeforeunload = win...转载 2020-03-31 21:22:53 · 376 阅读 · 0 评论 -
jquery插件：tabs页签
.my-nav { clear: both; } .my-nav li { height: 30px; width: 100px; float: left; } .my-tab-content { clear: both; } .tab-panel{ display: none; } .tab-panel.active{ ...原创 2020-03-19 22:05:26 · 301 阅读 · 0 评论 -
jquery插件：简单时间轴
body{ margin: 0; padding: 0;}.main{ width: 50%; margin: 30px auto;}.time-axis{ margin: 0; padding: 0; position: relative;}.time-axis:before{ content: ''; position: absolute; left: ...原创 2020-03-19 21:15:59 · 680 阅读 · 0 评论 -
日期时间插件WdatePicker.js使用方法
官网：http://www.my97.net/demo/index.htm支持浏览器IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+HTML<!-- 类名"Wdate"显示日期小图标--><input id="select-time" class="Wdate" />JavaScrip...原创 2020-02-19 16:26:54 · 768 阅读 · 0 评论 -
jquery.form.js提交 input file中的文件
现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台，供后台处理，可是开发中由于某些原因又不得不用ajax提交文件，解决方案：下面说说 jquery.form.min.js 插件 它是一个优秀的Ajax表单插件，我们可以非常容易的使用它处理表单控件的值，清空和复位表单控件，附件上传，以及完成Ajax表单提交。jquery.form.min.js 有两个核心方法ajaxFor...原创 2020-02-19 15:45:15 · 663 阅读 · 0 评论 -
加载状态的实现
.shade { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: #FFFFFF; z-index:99999; filter:alpha(opacity=100); /* IE */ -moz-opacity: 1; /* Moz + FF */ opacity: 1; ...原创 2019-12-03 21:19:12 · 261 阅读 · 0 评论 -
将页面内搜索结果高亮显示（使用mark.js），且页面顶部定位到第一个搜索结果
<!DOCTYPE><html> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" />...原创 2019-11-05 22:50:16 · 1098 阅读 · 0 评论 -
ztree点击树节点前的展开图标分级加载下拉树
onExpand：用于捕获节点被展开的事件回调函数，这个是关键。<ul id="share-to-department-modal-tree"></ul>var fileTreeSettingForShareToDept = { check : { enable : true, chkboxType : { "Y" : "", "N" :...原创 2019-10-23 21:43:43 · 684 阅读 · 0 评论 -
web实现断点续传
普通单文件上传：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>断点续传</title></head><body><div id="app"> <input type="...原创 2019-10-19 16:09:50 · 923 阅读 · 3 评论 -
完全由前端实现的超时时跳转到登录页（或其它页面）
var lastTime = new Date().getTime();var currentTime = new Date().getTime();var timeOut = 1*60*1000; //设置超时时间： 1分// 鼠标移动事件$(document).mousemove(function(){ lastTime = new Date().getTime(); //...原创 2019-10-19 10:34:11 · 1353 阅读 · 0 评论 -
ztree中根据节点类型不同显示不同图标
ztree的css文件metroStyle_adm.css中添加：.ztree li span.button.dept_ico_open{margin-right:2px; background: url(./img/group.png) 0 0 no-repeat; vertical-align:top; *vertical-align:middle}.ztree li span.but...原创 2019-09-18 10:38:00 · 2049 阅读 · 0 评论 -
ztree点击展开/收缩 按钮分级加载，解决数据量过大加载缓慢
有些项目的组织机构足足有六七万多条数据，加载十分缓慢，所考虑做成分级加载。由于本项目的ztree的树节点的点击事件已经被占用（加载组织人员），所以考虑使用ztree的 展开/收缩 （onExpand）按钮点击事件，即树前面的三角形按钮。（关键属性：isParent）加载第一级节点tree方法，效果如下图（第一次只查询父节点为null或者0的节点。此处应注意在将数据库查询到的数据转换为ztree...转载 2019-08-26 16:20:52 · 2024 阅读 · 0 评论 -
支持ie8的文件提交方式：使用Form表单插件jquery.form.js
jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit()， 它们集合了从控制表单元素到决定如何管理提交进程的功能。另外，插件还包括其他的一些方法： formToArray()、formSerialize()、fieldSerialize()、fiel...转载 2019-05-18 07:31:14 · 1299 阅读 · 0 评论 -
让IE8和IE9支持 placeholder
1、原因：placeholder是h5的新属性，IE10以前的浏览器(8、9)不支持此属性。2、解决方法：jQuery三方插件 jquery-placeholder3、快速开始：<!DOCTYPE html><html><head> <title>test</title> <script type...转载 2019-05-18 07:25:23 · 160 阅读 · 0 评论 -
jquery插件之：WebUI Popover使用
<link rel="stylesheet" href="vendor/webui-popover/jquery.webui-popover.min.css"><script src="public/vendor/jquery/jquery.min.js"></script><script src="vendor/webui-popov原创 2018-04-29 21:57:46 · 2367 阅读 · 0 评论 -
常用表单操作
一、select：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta charset="UTF-8"> <titl...原创 2018-08-13 21:57:38 · 322 阅读 · 0 评论 -
js/jquery对特殊字符进行转义防止js注入使用示例
/** JQuery Html Encoding、Decoding* 原理是利用JQuery自带的html()和text()函数可以转义Html字符* 虚拟一个Div通过赋值和取值来得到想要的Html编码或者解码*/<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><...转载 2018-09-05 22:56:02 · 4604 阅读 · 0 评论 -
ztree使用实例
一、当某节点被选择或被取消选择时获取所有被选择的节点：<link rel="stylesheet" href="./static/libs/ztree/css/metroStyle/metroStyle.css" type="text/css"><!-- ztree --><script src="./static/libs/ztree/js/jquery.z...原创 2018-10-03 22:20:41 · 2294 阅读 · 0 评论 -
bootstrapValidator验证表单后清除当次验证的方法
用bootstrapValidator的resetForm()方法：<!-- // create server begin --><div class="modal fade" id="server-create-server-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&.原创 2018-10-11 21:26:59 · 6361 阅读 · 0 评论 -
基于jquery、bootstrap的数据验证插件bootstrapValidator使用
一、实时验证用户名是否存在，密码不能和用户名相同，两次密码需要相同，提交之后需要验证返回值：<form id="defaultForm" role="form" class="form-signin" action="registerAccount.do" method="post"> <h2 class="f...原创 2018-09-27 22:04:07 · 658 阅读 · 0 评论 -
jQuery实现无刷新切换主题皮肤功能
主题皮肤切换功能在很多网站和系统中应用，用户可以根据此功能设置自己喜欢的主题颜色风格，增强了用户体验。本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能。查看演示DEMO：https://www.helloweba.net/demo/style-switch/实现该功能的原理就是通过点击定义的主题样式，改变页面当前引用的主题CSS文件，并且将当前的主题样式写入cookie中或者写...原创 2018-11-07 22:41:38 · 1030 阅读 · 1 评论 -
cookie使用
Cookie 用于存储 web 页面的用户信息。什么是 Cookie？Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。Cookie 的作用就是用于解决 "如何记录客户端的用户信息":当用户访问 web 页面时，他的名字可以记录在 cookie 中。在用户下一次访问该页面时，可以在...原创 2018-11-13 22:45:53 · 145 阅读 · 0 评论 -
关于Ajax无法下载文件到浏览器本地的问题(文件下载的几种方式)
最近在做网站的时候遇到这样一个功能，在如图所示的页面中，需要用户点击链接的时候，能够以异步Ajax的方式判断服务器中是否存储有相应的Excel文件，如果没有的话就提示用户没有找到，如果有的话就下载到用户本地。当然，这是很简单的一个问题，按照一般方式编写Ajax就可以了。但是当服务器端把文件内容以二进制的形式返回到浏览器端，浏览器的Ajax却抛出了错误。大致是ParseError, Inva...原创 2018-11-14 22:13:25 · 8804 阅读 · 4 评论 -
普通文件的上传（表单上传和ajax文件异步上传）
一、表单上传：html客户端部分：<form action="upload.ashx" method="post" enctype="multipart/form-data"> 选择文件:<input type="file" name="file1" /><br /> <原创 2018-11-26 21:51:34 · 765 阅读 · 0 评论 -
专题8：javascript中事件
一、事件流1.1 事件冒泡冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标的顺序逐一触发；注意：各个浏览器在处理<html>标记级别的事件时顺序有出入，因此无论任何情况，都应该尽量避免在<html>标记级别上处理事件；1.2 事件捕获二、事件处理程序：事件诸如：click、load、mouseover事件处理程序：响应某个事件的函数，以...原创 2018-12-01 22:07:00 · 216 阅读 · 0 评论 -
跨域请求携带cookie
function ajaxPostRequestCipherMachine(url, param) { var url = url; var dict = { 'ret' : false, 'errmsg' : '请求失败' }; var jsonData = param; ...原创 2019-02-13 21:45:32 · 769 阅读 · 0 评论 -
让浏览器不记住表单元素输入过的内容
<div id="login"> <form id="login-form" method="post" class="form-horizontal" action="/bmpf/home/"> <div id="login-name">保密综合管理系统<div id="logo"><img src="{{STAT...原创 2019-04-29 21:31:56 · 1747 阅读 · 0 评论 -
文件上传方式(上传file类型表单元素内容)
一、使用FormData：缺点：基本上不支持ie示例：<!-- // modal-body begin --> <div class="form-group"> <...原创 2019-04-29 21:56:28 · 2017 阅读 · 0 评论 -
文件下载方式：通过get和post方式下载
方式一：使用iframe /** * 功能：查看附件 */ $("#check-enclosure-button").click(function(){ var checkedStrategy = $softDistributeTable.bootstrapTable('getSelections');...原创 2019-04-29 22:08:40 · 868 阅读 · 0 评论 -
二级菜单中根据当前的url将对应的菜单设置为当前菜单
二级菜单的HTML代码如下：<!-- // left menu begin --><div class="main-left"> <div class="main-left-menu"> <h1><a href="/bmpf/home/" target="_self" class="main-le...原创 2019-04-29 22:13:12 · 1038 阅读 · 0 评论 -
项目中常用的javascript/jquery操作
1、判断复选框是否被选中？$("#cpuWindow").is(':checked');2、设置复选框被选中：$("#cpuWindow").prop("checked",true);3、取小数位数：(mem_value/1024).toFixed(2);4、判断某个值是否在元素中：同字符中的indexOf()函数，返回值小于0，则不在ioTypeArr.ind...原创 2018-05-08 23:05:49 · 194 阅读 · 0 评论