有一些耗cpu的计算，完全可以在客户端上计算，比如生成二维码。 qrcode其实是通过计算，然后使用jquery实现图形渲染和画图。支持canvas和table两种方式生成我们所需的二维码。 具体用法 qrcode是jquery组件，需要至少两个js, 就是 jquery 和 jquery.qrcode。可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码。代码如下:在页面上，需要显示二维码的地方加入一个空元素（此处用div）代码如下:在需要生成二维码的...
jquery.Validation是一款优秀的jquery插件，它能对客户端表单进行验证，并且提供了许多可以定制的属性和方法，良好的扩展性。现在结合实际情况，我把项目中经常要用到的验证整理成一个实例DEMO，本文就是通过讲解这个实例来理解Validation的应用。本实例涉及到的验证有： 用户名：长度、字符验证，重复性ajax验证（是否已存在）。 密码：长度验证，重复输入密码验证。 邮件：邮件地址验证。 固定电话：中国大陆固定电话号码验证。 ...
还记不记得jQuery初始化函数jQuery.fn.init中有这样是一个分支//document ready简便写法$(function(){…}) } else if ( jQuery.isFunction( selector ) ) {return rootjQuery.ready( selector ); }所以$(fn)===$(document).ready(fn)。来看一下jQuery.fn.ready的源码 ready: function( fn ) {// Add the callbackjQuery.ready.promise().done( fn );return this; }很明显在jQuery.ready.promise函数中设置了延时，当延时对象解决的...
数据收集并妥善管理数据是网络应用共同的必要。CRUD 允许我们生成页面列表，并编辑数据库记录。本教程将向你演示如何使用 jQuery EasyUI 框架实现一个 CRUD DataGrid。 我们将使用下面的插件： datagrid：向用户展示列表数据。 dialog：创建或编辑一条单一的用户信息。 form：用于提交表单数据。 messager：显示一些操作信息。 一、EasyUI创建CRUD应用 步骤 1：准备数据库 我们将使用 MySql 数据库来存储用户信息。创建数据库和 us...
jqGrid是一款基于jQuery的功能强大的表格插件，使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信，jqGrid运行速度相当快，可以很好的应用在一些后台管理系统来管理大量数据的场合。jqGrid特性： 基于jquery UI主题，开发者可以根据客户要求更换不同的主题。 兼容目前所有流行的web浏览器。 Ajax分页，可以控制每页显示的记录数。 支持XML，JSON，数组形式的数据源。 提供丰富的选项配置及方法事件接口。 支持表格排序，支...
jqGrid可以结合fancybox等插件完成超酷的弹出层效果，通过与php后台交互，可以轻松完成数据的添加与详情查看，而这个过程完全是一个ajax异步通信过程，是一个非常友好的富客户端应用。 下面给大家展示了效果图，喜欢的朋友可以直接下载源码哦。效果展示 源码下载 在上一篇文章中，我们提到过jqGrid自身有强大的单元格操作模块，但是这些模块操作起来不太适合用户的习惯，在本文中，我们使用fancybox，以及表单插件来完成jqGrid数...
position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。 所谓"被定位的元素"，就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可)。 该函数返回一个坐标对象，该对象有一个left属性和top属性。属性值均为数字，它们都以像素(px)为单位。 与offset()不同的是：position()返回的是相对于被定位的祖辈元素的坐标，offse...
一、jQuery Form的其他api 1. formSerialize 将表单序列化成查询串。这个方法将返回一个形如： name1=value1&name2=value2的字符串。 是否可以连环调用: 否, 这个方法返回的是一个字符串。 例子:var queryString = $('#myFormId').formSerialize(); // the data could now be submitted using $.get, $.post, $.ajax, etc $.post('myscript.jsp', queryString); 2. fieldSerialize 将表单里的元素序列化成字符串。当你只需要将表...
本文实例讲述了jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用。分享给大家供大家参考，具体如下： 事件的绑定和解绑 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script><script type="text/javascript">$(function () {$(#div1).bind(mouseover click,function (event) {//绑定事件:移动到div块上和点击al...
本文实例讲述了JQuery样式操作、click事件以及索引值-选项卡应用。分享给大家供大家参考，具体如下： JQuery的css函数既能读属性值，也能写属性值： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>样式操作</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">$(function () {var $div=$(#box);var sTr=$div.css(fontSize);//读alert(sTr);...
本文实例讲述了JQuery animate动画。分享给大家供大家参考，具体如下： 滑动选项卡 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">.btns input{width: 100px;height: 40px;background-color: grey;border: 0;}.btns .current{background-color: gold;}.cons .slides div{width: 500px;height: 300px;background-color: gold;/*display: none;!*整体都不显示了*!*/tex...
本文实例讲述了JQuery获取元素尺寸、位置及页面滚动事件应用。分享给大家供大家参考，具体如下： 获取元素尺寸 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">$(function () {var $div=$(.box);//盒子内容的尺寸console.log($div.width());console.log($div.height());//盒子内容加...
AJAX在jQuery中的应用 1. $.ajax()方法 $.ajax()方法是一个功能十分强悍的一个底层方法，基于该方法实现的$.get()和$.post()都是常用的向服务器请求数据的方法。 1.1 $.ajax()中的参数及使用方法 $.ajax()调用的语法格式为：$.ajax([options])其中，可选参数[options]作为$.ajax()方法中的请求设置，其格式为key/value，既包含发送请求的参数，也含有服务器响应回调的数据，常用的参数具体格式如下：1.2 $.ajax()方法的使用实例 实...
ajax缺点是破坏了浏览器的前进后退，因为ajax的请求不会留在历史记录中。pjax就不一样了，pjax被解释成ajax+pushState的封装，因为它把ajax的请求写入历史记录，并反映在地址栏，这样用户就能愉快地使用前进后退了。pjax有好几个实现方法，这里使用最常用的Jquery库，使用jquery.pjax.js。演示代码的服务器端使用PHP脚本语言。 Pjax用在那儿？就说百度云盘吧，这个大家肯定都用过。百度云盘PC端，在点击打开某个文件夹后会打开这个...
效果：实例如下所示： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{padding: 0px;margin: 0px;}li{width: 80px;height:300px;float: left;overflow: hidden;list-style: none;}</style><script type="text/javascript "src="http://code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <script >$(function () {$("ul li").mouseover(function (){$(this).stop().an...