jQuery UI框架
随笔分类 - jQuery
js分页页码算法
摘要: function get_hs_page(cur_page, total_page) { var result = ""; for(var i = 1; i 1) { i = cur_page - 6; }else if(i == cur_page ...阅读全文
ueditor编辑器和at.js集成
摘要: 源码： "> at+ueditor整合 /css/jquery.atwho.min.css" rel="stylesheet"> ...阅读全文
使用grunt打包ueditor源代码
摘要: 支持版本支持 UEditor 1.3.0+ 的版本使用方法1、线上下载ueditor下载地址：ueditor，要下载"完整版 + 源码"2、安装nodejs下载nodejs并安装到本地安装成功后，打开控制台，在控制台下输入node -v如果控制台输出nodejs的版本。那恭喜你，nodejs安装好了...阅读全文
js操作textarea方法集合
摘要: "> js操作textarea方法集合 abcdefghijklmnopqrstuvwxyz ...阅读全文
UEditor编辑器上传图片开发流程
摘要: 在ueditor目录下找到uedior.config.js，找到如下三行：,imageUrl: "/controller.json" //图片上传提交后台对应的地址，路径固定为*/controller.*,imagePath: "/ueditor/" //图片在服务器上的存储目录,imageFiel...阅读全文
用jQuery获取table中行id和td值
摘要: 点击 日 一 二 三 四 五 六 ...阅读全文
jQuery UI框架
摘要: 1、oschina开源社区-jQuery教程2、jQuery PrimeUI(推荐)3、弹出框、警告框、提示框、拖动支持、位置固定、选项卡切换4、Bootstrap框架(推荐)5、Bootstrap3.1.1DEMO6、Bootstrap教程阅读全文
jQuery插件：跨浏览器复制jQuery-zclip
摘要: jQuery-zclip是一个复制内容到剪贴板的jQuery插件，使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。jQuery-zclip插件需要Flash的支持，使用时记得安装Adobe Flash Player。1、jQuery-zclip插件官网ZeroClipboard.swf下载地址2、jQuery-zclip用法//引入jQuery-zclip相关js及swf文件 复制 配置说明path:swf的路径(复制主要是用flash解决不同浏览器的复制)copy:待复制的内容, 可以是静态内容, 也可以 return 动态...阅读全文
jQuery插件AjaxFileUpload实现ajax文件上传
摘要: jQuery插件AjaxFileUpload用来实现ajax文件上传，该插件使用非常简单，接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。1、引入AjaxFileUpload插件相关的js备注：测试发现，ajaxfileupload对jQuery版本是有要求的，在使用中ajaxfileupload和jQuery对应的js版本要一致，不然会导致异常发生，可以从ajaxfileupload官网下载，避免版本冲突。2、实现上传功能代码 "> ajax文件上传 ...阅读全文
IE WebDeveloper--IE浏览器web调试工具
摘要: 目前市面上比较火爆的浏览器内核提供商，有微软的IE、mozilla的firefox、谷歌的chrome、苹果的safari。IE浏览器下的项目过去占比非常大，近年随着其他浏览器厂商发展势头迅猛，过去的项目要求在其他浏览器下也能兼容，势必引起一场兼容测试风暴。而今天，笔者向大家介绍一下IE浏览器下的web调试工具，帮助大家了解web测试工具的使用。IE WebDeveloper(官网)IE WebDeveloper可以让你检查和编辑你的HTML DOM, 显示错误信息, 日志信息, 显示网站源代码, 监视DHTML事件和HTTP流量. 如果你是一个开发人员或设计人员, 但平常又喜欢使用IE, 那阅读全文
jQuery Ajax通用js封装
摘要: 第一步：引入jQuery库第二步：开发Ajax封装类，已测试通过，可以直接调用，直接贴代码，讲解就省了/***************************************************************** jQuery Ajax封装通用类 (linjq) *****************************************************************/$(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服...阅读全文
封装jQuery Validate扩展验证方法
摘要: 一、封装自定义验证方法-validate-methods.js/***************************************************************** jQuery Validate扩展验证方法 (linjq) *****************************************************************/$(function(){ // 判断整数value是否等于0 jQuery.validator.addMethod("isIntEqZero", f...阅读全文
jQuery Validate验证框架详解
摘要: jQuery校验官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation一、导入js库注：返回web项目的根路径。二、默认校验规则(1)、required:true 必输字段(2)、remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值(3)、email:true 必须输入正确格式的电子邮件(4)、url:true 必须输入正确格式的网址(5)、date:t...阅读全文
史上最全JS表单验证封装类
摘要: /***************************************************************** 表单校验工具类 (linjq) *****************************************************************/ /** * 判断整数num是否等于0 * * @param num * @return * @author jiqinlin */function isIntEqZero(num){ return num==0;}/** * 判断整数num...阅读全文
JQuery上传插件Uploadify API详解
摘要: 一、相关key值介绍uploader：uploadify.swf文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。 script：后台处理程序的相对路径 。默认值：uploadify.php scriptData：上传到后台的参数，参数为json格式。checkScript：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径 fileDataName：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata method：提交方式Post或Get，默认为Post scriptAcc阅读全文
jQuery插件开发
摘要: jQuery插件的开发包括两种：一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。1、类级别的插件开发-为jQuery添加静态方法类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：1.1 添加一个新的全局函数添加一个全局函数，我们只需如下定义：阅读全文
利用jQuery实现CheckBox全选/全不选/反选
摘要: jQuery有些版本中实现CheckBox全选/全不选/反选会有bug，经测试jquery-1.3.1.js–>测试通过，jquery-1.5.1.js–>测试不通过。实现CheckBox全选/全不选/反选代码如下：<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title&阅读全文
My97DatePicker日期控件的使用
摘要: 本文演示如何在MyEclipse项目中使用My97DatePicker日期控件1、下载My97DatePicker日期控件，My97DatePicker日期控件下载地址2、在MyEclipse项目中安装My97DatePicker，把下载后的My97DatePicker解压后放在WebRoot子目录下，如WebRoot/dd/js/My97DatePicker(我把My97DatePicker放在WebRoot/dd/js/目录下，My97DatePicker为解压后的文件夹)3、引用My97DatePicker，在要使用的jsp页面中引入js，如下4、调用My97DatePicker，如下/阅读全文
漂亮的表格样式–>使用CSS样式表控制表格样式
摘要: 依照WEB2.0风格，设计了几个表格样式，希望大家喜欢。WEB2.0提倡使用div开布局，但不是要完全放弃使用表格，表格在数据展现方面还是不错的选择。现在介绍使用CSS样式表来控制、美化表格的方法。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"阅读全文
js正则表达式总结
摘要: 1、require: /.+/,2、username: /^[u4E00-u9FA5A-Za-z0-9_ ]{3,20}$/i,3、password: /^[a-zA-Z0-9\_-~!\%*@#$&.()[]{}<>?\/’”]{3,20}$/,4、number: /^d+$/,5、money: /^(([1-9]d*)|(([0-9]{1}|[1-9]+).[0-9]{1,2}))$/,6、per: /^(?:[1-9][0-9]?|100)(?:.[0-9]{1,2})?$/,7、email: /^w+([-阅读全文
使用jQuery实现类似开关按钮的效果
摘要: 本案例实现类似开关按钮效果。页面有下拉列表、文本框、按钮等表单元素，大致实现如下效果：1、页面一加载时，文本框隐藏，下拉列表显示，按钮值变为“显示文本框”。2、点击“显示文本框”按钮时，文本框显示，下拉列表隐藏，按钮值变为“显示下拉列表”。3、点击“显示下拉列表”按钮时，文本框隐藏，下拉列表显示，按钮值变为“显示文本框”。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>hide_or_show.html</阅读全文
向table添加水平滚动条
摘要: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>给table新增水平滚动条</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is 阅读全文
jQuery插件–jqueryflexselect下拉框自动提示
摘要: 原理：用户在文本框中输入一个字符(或输入字符的首字母)，然后利用ajax，从后台服务器中进行检索，组装后并返回到页面，页面通过javascript进行解析，在一个层里面显示出来。类似的效果如下：<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>jQuery插件--jque阅读全文
ajax请求成功后打开新窗口地址
摘要: jQuery.ajax({"type":"post","url":"http://www.baidu.com", "success":function(rel){if(rel.isSuccess){ window.open(rel.url,"_blank");}}});这个url请求成功后window.open(rel.url,"_blank");会被浏览器拦截，无法打开新窗口，如果把window.open()放在ajax外面，问题就迎刃而解，代码如下：v阅读全文
自动补齐flexselect+级联下拉框案例
摘要: 在开发web应用时，经常遇到类似省市区级联下拉框操作，即选中省份自动级联加载该省份所有的市，选中市自动级联加载该市所有的区；假设省市区的数据量很大，此时用户想选中某市，因而要从上往下查找，可能半天都找不到，用户体验不佳，因此引入jQuery插件–自动补齐flexselect可解决该弊端，因为该插件支持模糊检索自动补齐，可在极短时间内找到想要的结果，节省了时间又增强了用户操作速度。自动补齐flexselect插件用法请看：http://www.tieguanyin168.com/index.php/jqueryflexselect-1505.html以下模拟省市区级联案例，效果如下：源码：1、服阅读全文
利用jquery给指定的table动态添加一行、删除一行
摘要: 今天在项目中，刚好用到给指定的table添加一行、删除一行，就直接找google，搜出来的东西不尽如人意，不是功能不好就是千篇一律，简直浪费时间还不讨好，于是乎就自己动手封装个，现就把代码分享出来，避免大伙重复造轮子，如有问题欢迎大伙拍砖指正，千万可别人身攻击，嘎嘎。。。需求场景1）、添加一行支持在任意行添加一行且可配置的，如可在第一行添加一行、第二行添加一行、倒数第一行添加一行、倒数第二行添加一行，随需求的变化都不会影响。前提条件：行数需在表中存在否则添加不成功。2）、删除一行支持动态删除一行。先演示结果，如中意了在好好研究代码。1、原始界面如下：2、添加一行，如要添加一行需点击“添加”按钮阅读全文
js字符串转化为日期及日期判断大小
摘要: //将字符串转换为日期 var begin=new Date($("#begin").val().replace(/-/g,"/")); var end=new Date($("#end").val().replace(/-/g,"/")); //js判断日期 if(begin-end>0){ alert("开始日期要在截止日期之前!"); return false; }阅读全文
jQuery 复选框全选反选
摘要: <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").click(function(){ $('[name=items]:checkbox').attr("checked", this.checked ); }); $('[name=items]:checkbox').click(function(){ //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率。 var $tmp=$(阅读全文
jQuery验证框架教程
摘要: jQuery验证框架--可选项（一） http://my.oschina.net/duanlijun/blog/9950jQuery验证框架--插件方法（二） http://my.oschina.net/duanlijun/blog/9951jQuery验证框架--选择器及实用工具（三、四） http://my.oschina.net/duanlijun/blog/9952jQuery验证框架--验证器（五） http://my.oschina.net/duanlijun/blog/9953jQuery验证框架--内置验证方法（六） http://my.oschina.net/duanliju阅读全文
json服务器端
摘要: /** * 根据品牌id动态加载标的物 * @return * @throws DataBaseException * @throws IOException */ public String loadModel() throws DataBaseException, IOException{ HttpServletRequest request=ServletActionContext.getRequest(); HttpServletResponse response=ServletActionContext.getResponse(); response.setContentType(.阅读全文
jQuery动画高级用法——详解animation中的.queue()函数
摘要: 如果你拿着一个疑问去找专业人士寻找答案，那么你的一个疑问会变成三个，因为他会用另外两个令你更加一头雾水的名词来解释你的这个疑问。 我想这是大多数，包括我在内，IT人在学习过程中碰到的最大问题。当你有一段代码或是一个概念不是很清楚，百度也好，Google也好，在论坛发问也好，给出的答案往往又会夹杂着更多你不懂得概念和令你头疼的代码。 我亦是吃了同样的亏，痛定思痛，决定对animate方面做一些总结，希望能给大家一些启发和帮助从一个实际应用谈起 今天不谈animate()、fadeIn()、fadeOut()、slideUp()、slideDown()、show()、hide()诸如此类的具体动.阅读全文
jQuery：将文本转化成JSON对象应注意的问题
摘要: 在jQuery的许多方法中，很多方法的参数可以传入一个JSON对象，比如Ajax方法的第二个参数。怎么将文本转化成JSON对象，需要注意以下问题：1）$.parseJSON方法返回的是一个字符串，而不是JSON对象。2）要将字符串转化成对象，很容易想起JS中的eval方法。事实上是可以的，不过需要加上括号。如var js="{"PageIndex":"1"}";var obj=eval("("+js+")");。不过使用eval,是不安全的，因为其可以编译任何js代码。3）下载一个JSO阅读全文
jquery $(document).ready() 与window.onload的区别
摘要: 1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数不同window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个$(document).ready()可以同时编写多个，并且都可以得到执行 3.简化写法window.onload没有简化写法$(document).ready(function(){})可以简写成$(function(){});另外，需要注意一点，由于在 $(document).ready() 方法内注册阅读全文
Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）
摘要: 1判断select选项中是否存在Value="paraValue"的Item2向select选项中加入一个Item3从select选项中删除一个Item4删除select中选中的项5修改select选项中value="paraValue"的text为"paraText"6设置select中text="paraText"的第一个Item为选中7设置select中value="paraValue"的Item为选中8得到select的当前选中项的value9得到select的当前选中项的text10得阅读全文
jQuery Select的操作集合
摘要: 1. $("#select_id").change(function(){... }); //为select添加事件，当选择其中一项时触发2. $("#select_id").find("option:selected").text();//获取select选中的Text3. $("#select_id").val();//获取Select选中的Value4. $("#select_id ").get(0).selectedIndex;//获取Select选中的索引值5. $("#se阅读全文
servlet+json+ajax集成
摘要: 模拟下拉列表二级菜单联动 1、页面 <tr> <td align="right"><font color="red">*</font>一级服务类型：</td> <td> <select name="dept" id="dept" onchange="loadDeptChild(this.options[this.options.selectedIndex].value)"/> <option value=&阅读全文
html中select标签刷新后不回到默认值而是保持之前选择值
摘要: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>3G业务文件下载</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> &阅读全文
JavaScript设置Cookie
摘要: 一、设置cookie 每个cookie都是一个键/值对，可以把一个字符串赋值给document.cookie，如：document.cookie="userId=828"; 如果要一次存储多个键/值对，可以使用分号加空格（; ）隔开，如： document.cookie="userId=828; userName=hulk"; 在cookie的键或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。在cookie的键中做到这点很容易，但要保存的值是不确定的。如何来存储这些值呢？方法是用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，阅读全文
让html元素随浏览器的大小自适应垂直居中
摘要: 表格可以实现td中的元素垂直居中显示，但是前提条件必须定义td的高才可行。但是很多时候会用到元素跟随浏览器的大小垂直居中，如在制作展示官网、活动展示网等等的时候。问题：实现div垂直居中并在缩放浏览器尺寸的时候仍然居中。解决方案：1、浏览器可视区域的高度-元素的高度/2 = 元素距离浏览器可视区域顶部的距离。(bodyHeight – divHeight)/22、浏览器可视区域如果小于元素的高度，即元素距离浏览器可视区域顶部的距离为零。3、onresize()当浏览器的尺寸改变的时候触发事件。使用onresize()每次改变的时候，重新计算一下元素到顶部的距离。 实现代码：function d阅读全文
dwr+spring集成
摘要: DWR（Direct Web Remoting）是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器里一样。 以下模拟一个简单的dwr入门案例，重点理解dwr是如何跟java后台服务器打交道的模拟效果如下该功能说明了dwr是怎么跟后台服务器打交道的模拟从服务器加载下拉列表数据模拟保存功能模拟查询功能 接下来为dwr+spring集成步骤：1、新建一个web工程，导入dwr+spring所需jar，如下图 目录结构图 修改web.xml<?xml阅读全文
使用XHR对象发送和接受xml数据
摘要: 使用XMLHTTPRequest对象来进行AJAX的异步数据交互服务器端代码和请求页面请看http://www.cnblogs.com/linjiqin/archive/2011/03/26/1996629.htmljs代码如下：//用户名校验的方法//使用XMLHTTPRequest对象来进行AJAX的异步数据交互var xmlhttp;function verify() { var userName = document.getElementById("userName").value; //1.创建XMLHttpRequest对象 //这是XMLHttpReuques阅读全文
使用XHR对象发送和接受数据
摘要: 使用XMLHTTPRequest对象来进行AJAX的异步数据交互服务器端代码和请求页面请看http://www.cnblogs.com/linjiqin/archive/2011/03/24/1994463.htmljs代码如：//用户名校验的方法//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互var xmlhttp;function verify() { //0。使用dom的方式获取文本框中的值 //document.getElementById("userName")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签阅读全文
利用jQuery接受和处理xml数据
摘要: 以下使用jQuery+Servlet接受和处理xml数据，模拟判断用户名是否存在，效果如下：服务器端package com.ljq.test;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletException;import java.io.IOException;import java.io.PrintWriter;/** * 利用阅读全文
下拉列表回选
摘要: <select name="queryInfo.cityCode"> <!-- 服务器端代码如： public class QueryInfo { private String cityCode; //cityCode的getter、setter public String getCityCode() { return cityCode; } public void setCityCode(String cityCode) { this.cityCode = cityCode; } } private QueryInfo queryInfo; //quer阅读全文
模拟jQuery ajax服务器端与客户端通信
摘要: 本案例通过jQuery和Servlet技术来判断用户名是否存在，让读者明白jQuery是怎么调用服务器后台的。还给出了解决中文乱码的方案和如何避免各种浏览器的缓存。 功能如下：如果用户名为空提示“用户名不能为空 ”如果用户名存在提示“用户名[xxxxxx]已经存在，请使用其他用户名, 4 ” 如果用户名不存在提示“用户名[xxxxxx]尚未存在，可以使用该用户名注册, 5”运行效果如下： 目录结构：服务器端AjaxServerpackage com.ljq.test;import java.io.IOException;import java.io.PrintWriter;import jav阅读全文
myeclipse安装jQuery插件
摘要: 以下为myeclipse安装jQuery插件的安装步骤：1、在网上下载spket-1.6.12.zip压缩文件，解压后会看到eclipse目录下有features、plugins这两个文件夹2、把features、plugins这两个文件夹下的文件复制黏贴到D:myeclipse6.5myeclipseeclipse目录下(注意features、plugins要对应清楚哦)，然后重启myeclipse3、重启myeclipse后，打开window -> preference -> spket -> javascript profiles -> new ->阅读全文
struts2+jquery+json集成
摘要: 以下采用struts2+jquery+json模拟一个案例。当点击提交按钮时会把输入的数据提交到后台，然后从后台获取数据在客户端显示。效果如下：接下来为struts2+jquery+json集成步骤：1、新建一个web工程，导入struts2+jquery+json所需jar，如下图目录结构图 2、创建实体类Userpackage com.ljq.bean;import java.io.Serializable;@SuppressWarnings("serial")public class User implements Serializable { private int阅读全文
jQuery实现动态搜索显示功能
摘要: 本案例采用jQuery实现动态搜索显示功能，只要输入值就能立刻动态显示数据，不同于常规查询方法。模拟效果如下：1、 2、 <%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>struts2</title> <meta http-equiv="阅读全文
设置背景图片占满整个浏览器屏幕
摘要: <body style="background:url(images/body_bg.gif) no-repeat; background-position:bottom right">阅读全文
js获取项目根路径
摘要: //js获取项目根路径，如： http://localhost:8083/uimcardprjfunction getRootPath(){ //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp var curWwwPath=window.document.location.href; //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp var pathName=window.document.location.pathname; var pos=curWwwPath.indexOf(pathN阅读全文