jquery.form.js中文API

合集下载

JQuery提交表单 Form.js官方插件介绍

JQuery提交表单Form.js官方插件介绍Form插件，支持Ajax，支持Ajax文件上传，功能强大，基本满足日常应用。

1、JQuery框架下载/2、Form插件下载/jquery/form/#download3、Form插件的简单入门第二步：jquery.js和form.js文件的包含表单插件API提供了几个方法，让你轻松管理表单数据和进行表单提交。

ajaxForm增加所有需要的事件监听器，为AJAX提交表单做好准备。

ajaxForm不能提交表单。

在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。

ajaxForm接受0个或1个参数。

这个单个的参数既可以是一个回调函数，也可以是一个Options对象。

可链接（Chainable）：可以。

实例：$('#myFormId').ajaxForm();ajaxSubmit马上由AJAX来提交表单。

大多数情况下，都是调用ajaxSubmit来对用户提交表单进行响应。

ajaxSubmit接受0个或1个参数。

这个单个的参数既可以是一个回调函数，也可以是一个Options对象。

可链接（Chainable）：可以。

实例：// 绑定表单提交事件处理器$('#myFormId').submit(function() {// 提交表单$(this).ajaxSubmit();// 为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）返回falsereturn false;});formSerialize将表单串行化（或序列化）成一个查询字符串。

这个方法将返回以下格式的字符串：name1=value1&name2=value2。

可链接（Chainable）：不能，这个方法返回一个字符串。

实例：var queryString = $('#myFormId').formSerialize();// 现在可以使用$.get、$.post、$.ajax等来提交数据$.post('myscript.php', queryString);fieldSerialize将表单的字段元素串行化（或序列化）成一个查询字符串。

jQuery1.7.1_API中文手册

jQuery1.7.1API手册本文基于jQuery1.7.1版本，是对官方API的整理和总结，完整的官方API见/browser/0、总述jQuery框架提供了很多方法，但大致上可以分为3大类：获取jQuery对象的方法、在jQuery 对象间跳转的方法，以及获取jQuery对象后调用的方法其中第一步是怎样获取jQuery对象。

大致来说，是通过最核心的$()方法，将页面上的元素（或者在页面上不存在的html片段）包装成jQuery对象。

$()方法里面支持的语法又包括3大类，分别是表达式（包括类表达式.，id表达式#，元素表达式等）、符号（包括后代符号space，next符号+等）、过滤器（包括:过滤器和[]过滤器）。

通过以上3种的组合，“查询”得到想要操作的元素或者元素集合，作为$()的参数，得到jQuery 对象（或者jQuery对象的集合）第二步是在jQuery对象间的跳转。

也就是说，已经得到了一个jQuery对象，但是并不是想要的，那么可以通过一系列的跳转方法，比如parent()、next()、children()、find()等，或者过滤筛选的方法，比如eq()、filter()、not()等，来得到最终想要操作的jQuery对象。

用跳转和过滤方式得到的jQuery结果，往往通过比较复杂的表达式组合，可以达到同样的目的。

比如说$("div").eq(3)，也可以用$("div:eq(3)")达到同样的目的。

又比如说$("div").find("span")，可以用$("div span")取到同样的元素。

方法是很灵活的，要根据具体的情况来选择。

一般来说，HTML页面写得越规范，使用jQuery 就越简单还有一种情况，在得到了jQuery()对象之后，想要判断其是否满足条件，那么可以调用is()、hasClass()等方法，返回一个boolean值，进行后续的判断。

用jquery获取form表单值的方法总结

用jquery获取form表单值的方法总结用jquery获取form表单值的方法总结： jquery获取radio单选按钮的值$(input[name='items']:checked).val(); jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项的值 var item = $('input[name=items][checked]').val(); 获取select被选中项的文本 var item = $(select[name用jquery获取form表单值的方法总结：jquery获取radio单选按钮的值$("input[name='items']:checked").val();jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项的值var item = $('input[name=items][checked]').val();获取select被选中项的文本var item = $("select[name=items] option[selected]").text();select下拉框的第二个元素为当前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[name=items]').get(1).checked = true;获取值：文本框，文本区域：$("#txt").attr("value")；多选框checkbox：$("#checkbox_id").attr("value")；单选组radio： $("input[type=radio][checked]").val();下拉框select： $('#sel').val();控制表单元素：文本框，文本区域：$("#txt").attr("value",'');//清空内容$("#txt").attr("value",'11');//填充内容多选框checkbox： $("#chk1").attr("checked",'');//不打勾$("#chk2").attr("checked",true);//打勾if($("#chk1").attr('checked')==undefined) //判断是否已经打勾单选组radio： $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项$("<option value='1'>1111</option><optionvalue='2'>2222</option>").appendTo("#sel")//添加下拉框的option $("#sel").empty()；//清空下拉框刚开始接触jquery，很多东西不熟悉在用$("#id")来获得页面的input元素的时候，发现$("#id").value不能取到值后来终于在伟大的百度帮助下，找到了问题的原因：$("")是一个jquery对象，而不是一个dom elementvalue是dom element的属性jquery与之对应的是valval() :获得第一个匹配元素的当前值。

jquery的ajax获取form表单数据、提交表单form

jquery的ajax获取form表单数据、提交表单formjq是对dom进⾏的再次封装。

是⼀个js库，极⼤简化了js使⽤。

jquery库在js⽂件中，包含了所有jquery函数，引⽤：<script src="jquery-1.11.1.min.js"></script>。

这⾥主要介绍jquery获取页⾯form数据使⽤的过程，html页⾯代码如下，有⼀个form表单，id是login_value.填写内容后请求接⼝。

<form id="login_value"><div><label>⽤户名：</label><input id="username" type="text" name="username" placeholder="请输⼊⽤户名" value="admin"></div><div><label>密码：</label><input id="passwd" type="password" name="passwd" placeholder="请输⼊密码" value="123456"></div><div><input type="button" value="登陆" onclick="login()"><input type="reset" value="重置"></div></form>ajax使⽤:ajax只能传⽂本，不能传⽂件。

jquery点击提交。将form表单的值提交到另一个页面并显示出来。不使用ajax。

jquery点击提交。

将form表单的值提交到另一个页面并显示出来。

不使用ajax。

jquery 点击提交。

将form表单的值提交到另一个页面并显示出来。

不使用ajax。

$("formid").sumbit();不过要提前将form的action写好提交form表单：$('form').submit();具体提交到哪里取决于你的form标签的action属性。

要在另一个页面显示提交的数据那实现的方式就多了。

如何动态构建FORM表单提交到另一个页面实现思路：先通过java代码获取到jsp中相应的参数值（可以多次获取到不同的值）举例：form中定义：<input type=text value="zhangsan1" name ="username"/> <input type=text value="23" name ="userage"/>java中定义：String age = request.getParameter (“userage”);获取到jsp 中的值String username= request.getParameter (“username”);获取到jsp中的值备注：form中标签字段必须有name属性，否则获取不到。

用一个页面设计一个表单，使其能够提交内容到另并显示一页面并显示提交的内容,不使用数据库reg.jsp<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+":"+request.getServerName()+":"+request .getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 TransitionalEN"><><head><base href="<%=basePath%>"><title>My JSP 'reg.jsp' starting page</title></head><body><form action="login.jsp"><table><tr><td>Email</td><td><input type=text name=email></td></tr><tr><td>昵称</td><td><input type=text name=nickname></td></tr></table></form></body></>login.jsp<%= request.getParameter("email") %><%= request.getParameter("nickname"）%>使用ajax提交form表单form表单的action属性怎么设置<!DOCTYPE ><><head><meta charset=UTF-8><title>Insert title here</title><script type=text/javascript src=../script/jquery-1.10.2.js></script></head><script type=text/javascript>$(function(){var check = 1;$("#myForm").submit(function(e){取消默认提交事件e.preventDefault();if(check == 1){console.log("验证通过，提交数据");$(this).ajaxSubmit({type: 'post', 提交方式 get/posturl: '/servlet/query', 需要提交的 urldata: {'attr1': "白日依山尽",'attr2': "宝塔镇河妖"},suess: function(data) { data 保存提交后返回的数据，一般为json 数据此处可对 data 作相关处理alert('提交成功！');}});$(this).resetForm(); 提交后重置表单return false; 阻止表单自动提交事件});});</script><body><form action="/servlet/query" method="post" id="myForm"><input type=text name=userName id="userName"/><input type=submit id="btnSubmit" value="提交"/></form></body></>试下用这个可否解决你的问题，另外jquery-form.js是可用实现form提交回调的；表单提交内容怎么显示到另一个页面参考一下这个<script>function query_get(){var querystr = window.location.href.split("?")return querystr[1];}var gets = query_get();var gets_array = gets.split("&");for (var i=0; i<gets_array.length;i++){var getvar = gets_array[i].split('=');var output = getvar[0] + " 的值是" + "\"" + getvar[1] + "\"<br>";document.write(output);</script>ajax（或者jquery）怎么提交整个form表单$("button").click(function(){$.post("你的服务器文件",{表单里的内容name:"Donald Duck",city:"Duckburg"},function(data,status){alert("数据：" + data + "\n状态：" + status);});});如何用语言将提交按钮提交的表单内容显示出来如果可以用jsp的话就很简单了，仅仅用和js我只知道一个方法，把表单内容放到一个隐藏域里面，按钮传值即可。

jQueryform插件之formDdata参数校验表单及验证后提交

jQueryform插件之formDdata参数校验表单及验证后提交Form Plugin API ⾥提供了很多有⽤的⽅法可以让你轻松的处理表单⾥的数据和表单的提交过程。

测试环境：部署到Tomcat中的web项⽬。

⼀、引⼊依赖js<script src="jquery-1.3.1.js" type="text/javascript"></script><script src="jquery.form.js" type="text/javascript"></script>⼆、初始化回调函数。

⾸先，我们初始化这个表单，给它⼀个 beforeSubmit 回调函数 - 这是⼀个⽤来校验的函数。

$(document).ready(function() {$('#myForm').ajaxForm({target:'#output1', // ⽤服务器返回的数据更新 id为output1的内容.beforeSubmit: validate // 提交前，验证});});三、校验规则function validate(formData, jqForm, options) {// formdata是数组对象,每个对象拥有名称和值.// 数据如下⾯的格式：// [// { name: username , value: usernameValue },// { name: password , value: passwordValue }// ]for (var i=0; i < formData.length; i++) {if (!formData[i].value) {alert('⽤户名,地址和⾃我介绍都不能为空!');return false;}}var queryString = $.param(formData); //组装数据//alert(queryString); //类似： name=1&add=2return true;}四、详细代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>jQuery form插件的使⽤--⽤ formData 参数校验表单</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script src="jquery-1.3.1.js" type="text/javascript"></script><script src="jquery.form.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {$('#myForm').ajaxForm({target: '#output1', // ⽤服务器返回的数据更新 id为output1的内容.beforeSubmit: validate // 提交前，验证});});function validate(formData, jqForm, options) {// formdata是数组对象,每个对象拥有名称和值.// 数据如下⾯的格式：// [// { name: username , value: usernameValue },// { name: password , value: passwordValue }// ]for (var i=0; i < formData.length; i++) {if (!formData[i].value) {alert('⽤户名,地址和⾃我介绍都不能为空!');return false;}}var queryString = $.param(formData); //组装数据//alert(queryString); //类似： name=1&add=2return true;}</script></head><body><h3> Demo 5 :jQuery form插件的使⽤--⽤ formData 参数校验表单，验证后提交（简单验证）. </h3><form id="myForm" action="ajax2.jsp" method="post">名称： <input type="text" name="name" id="name" /> <br/>地址： <input type="text" name="address" id="address"/><br/>⾃我介绍： <textarea name="comment" id="comment" ></textarea> <br/><input type="submit" id="test" value="提交" /> <br/><div id="output1" ></div></form></body></html>以上所述是⼩编给⼤家分享的jQuery form插件之formDdata参数校验表单及验证后提交的全部内容，希望对⼤家有所帮助。

jq调用iframe中的某个方法

jq调用iframe中的某个方法在使用jQuery (jq)调用iframe中的方法时，可以采取以下步骤：步骤1：获取到iframe元素首先，通过jQuery选择器获取到你想要调用方法的iframe元素。

可以使用id、class或其他属性选择器来定位到iframe。

```javascriptvar iframeElement = $('#myIframe');```步骤2：获取到iframe的内容通过获取iframe的内容，可以访问到其内部的JavaScript方法。

使用contentWindow属性来获取iframe的window对象，然后使用该对象的contentDocument属性来获取iframe中的文档对象。

```javascriptvar iframeContent = iframeElement[0].contentWindow.contentDocument;```步骤3：调用iframe中的方法一旦你获取了iframe的文档对象，就可以通过普通的JavaScript语法来调用其中的方法。

```javascriptiframeContent.getElementById('myButton').click(); // 假设调用了按钮的点击事件```在上面的例子中，我们假设iframe中包含一个id为"myButton"的按钮，并使用click()方法来模拟用户点击该按钮。

需要注意的是，由于同源策略的限制，当iframe和主页面不在同一个域名下时，将无法直接调用iframe中的方法。

如果存在跨域问题，你需要在iframe和主页面之间通过postMessage方法进行通信。

完成以上步骤后，你就成功地使用jQuery调用了iframe中的特定方法。

记得根据你的实际情况修改选择器和方法名，以适应你的项目需求。

JS组件系列——Form表单验证神器：BootstrapValidator

JS组件系列——Form表单验证神器：BootstrapValidator前⾔：做Web开发的我们，表单验证是再常见不过的需求了。

友好的错误提⽰能增加⽤户体验。

博主搜索bootstrap表单验证，搜到的结果⼤部分都是⽂中的主题：bootstrapvalidator。

今天就来看看它如何使⽤吧。

⼀、源码及API地址介绍它之前，还是给出它的源码以及API的地址吧。

bootstrapvalidator源码：boostrapvalidator api：⼆、代码以及效果展⽰1、初级⽤法来看bootstrapvalidator的描述：A jQuery form validator for Bootstrap 3。

从描述中我们就可以知道它⾄少需要jQuery、bootstrap的⽀持。

我们⾸先引⼊需要的js组件 <script src="~/Scripts/jquery-1.10.2.js"></script><script src="~/Content/bootstrap/js/bootstrap.min.js"></script><link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet"/><script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script><link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet"/>我们知道，既然是表单验证，那么我们在cshtml页⾯就必须要有⼀个Form，并且我们知道Form⾥⾯取元素都是通过name属性去取值的，所以，表单⾥⾯的元素都要有⼀个name的属性值。

jqGrid_api中文文档

* /myproject/js/ o /i18n/
2
Jqgrid 中文文档---整理:沧浪雾月客
+ grid.locale-bg.js
+ list of all language files
+ ….
o Changes.txt
o jquery-1.3.2.min.js
o jquery.jqGrid.min.js
jqGrid 学习之 --------- 皮肤
jqGrid 皮肤从 3.5 版本开始，jqGrid 完全支持 jquery UI 的 theme。我们可以从 /themeroller/下载我们所需要的 theme。当然，你也可以编辑自己的 theme。jqGrid 也并不需要把所有的 css 文件都引入进来，只需导入核心 css 文件 “ui.theme.css ” 以及“ui.core.css”即可，文件位于目录 development-bundle/themes 下。
g="en">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=
utf-8" />
5. <title>My First Grid</title>
6.
7. <link rel="stylesheet" type="text/css" media="screen" href=
jqGrid 学习
jqGrid 学习之 ------------- 安装

：focusjQueryAPI1.12中文文档jQueryAPI在线手册

：focusjQueryAPI1.12中文文档jQueryAPI在线手册返回值:jQuery:focus概述匹配当前获取焦点的元素。

如同其他伪类选择器（那些以":"开始），建议:focus前面用标记名称或其他选择;否则，通用选择("*")是不言而喻的。

换句话说，$(':focus')等同为$('*:focus')。

如果你正在寻找当前的焦点元素，$( document.activeElement )将检索，而不必搜索整个DOM树。

示例描述:添加一个"focused"的类名给那些有focus方法的元素css 代码:.focused {background: #abcdef;}html 代码:<div id="content"><input tabIndex="1"><input tabIndex="2"><select tabIndex="3"><option>select menu</option></select><div tabIndex="4">a div</div></div>jQuery 代码:$( "#content" ).delegate( "*", "focus blur", function( event ) { var elem = $( this );setTimeout(function() {elem.toggleClass( "focused", elem.is( ":focus" ) ); }, 0);});。

jQuery 1.4中文文档

jQuery 1.4中文文档按照惯例，我们提供了两份jQuery的拷贝，一份是最小化的(我们现在采用Google Closure作为默认的压缩工具了)，一份是未压缩的(供纠错或阅读)。

∙jQuery压缩(23kb Gzipped)∙jQuery常规(154kb)另外，Google也在他们的服务器上放置了一份jQuery的拷贝。

这份拷贝会自动的最小化然后压缩–并且放在Google最快的缓存服务器上。

∙/ajax/libs/jquery/1.4/jquery.min.js你可以在你的站点上直接引用上面的URL，这样就可以享受迅速加载jQuery的性能优势了。

就jQuery1.4来说，我们努力的减少大规模升级中的麻烦–通过保持所有public函数的签名。

即使如此，还请通读可能会造成问题的变更列表，这样能够了解哪些变更可能会给你的应用造成问题。

(功能) Features下面的内容概括了jQuery1.4里加入的变更和功能。

另外所有的变更都已经在jQuery 1.4 的文档里记录了。

热门方法经过了性能上的大”检修”不少比较热门的和常用的jQuery方法在1.4里被重写了。

(译注:重写了方法的内部，外部调用没有大幅度改变) 我们分析源码的时候发现我们能够获得大幅的性能提升，通过把jQuery和自己比较: 查看内部函数被调用了多少次，然后努力降低源码的复杂度(译注:计算机算法中的Complexity)View the cropped chart.在1.4版里我们显著的降低了大部分热门jQuery方法的的复杂度。

更易用的设置函数(Easy Setter Functions)算来已经有一阵了，你们已经可以给.attr()传递一个函数，然后这个函数的结果会被用来赋给相应的HTML属性(attribute)上。

这个功能现在被移植到所有的设置函数了: .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .befor e(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass (), .removeClass(), 以及.toggleClass().另外, 对于下面几个方法，当前的值会被作为第2个变量传递给这个函数。

表单验证jquery插件formvalidator使用方法详解手册

第三方手册——jQuery formValidator手册PHPCMS V9中使用的表单验证框架为jQuery formValidator什么是jQuery formValidator？jQuery formValidator表单验证插件是客户端表单验证插件。

在做B/S开发的时候，我们经常涉及到很多表单验证，例如新用户注册，填写个人资料，录入一些常规数据等等。

在这之前，页面开发者（JavaScript开发者）需要编写大量的JavaScript来进行表单元素的校验，而这些校验在平时开发中不停的重复书写。

常见的校验如不能为空，必须满足长度要求，必须为数字，必须为Email等等。

一般要判断的表单元素比较多，开发过程就显得枯燥无味——重复的代码不断重复，而且可能还要兼容多种浏览器，更多的考虑因素使人头疼不已。

由于每个要校验的页面虽然逻辑基本相同，但是在大多数情况下，出于种种原因，开发者宁愿再编写一套JS文件，为了便于管理。

jQuery formValidator表单插件致力于改善这一过程。

你只关心业务逻辑，而无需关系实现过程,只需简单的配置，无需写代码就能实现表单的检验。

它包括常规检验功能和可扩展校验功能。

针对每个表单元素你只需要写一行配置信息就能完成校验。

而这些配置信息无需写入表单元素，实现了js代码和html代码的分离。

这样做的好处，使B/S开发过程中，分工更加明确，页面设计着只需关心他的页面（设计的时候不必担心把脚本弄坏了），javascript开发者只需关心脚本的开发。

而插件本身包含的校验方式可以有无数种，只要你扩展正则表达式和函数。

本插件于同类校验插件最大的区别：校验功能可以扩展；实现了校验代码于html代码的完全分离；你只需写一行配置信息就能完成一个表单元素的所有校验。

插件本身提供了很多回调函数，使调用者能最大限度的发挥自己的想象能力来完成自己的业务需求。

在同一个页面你可以拥有很多个校验组，你只需在提交的按钮那里调用 return jQuery.formValidator.pageIsValid('校验组号') 来完成多个组的校验，互不干扰。

jquery_详细中文说明教学文档

目录部分常用方法速查 (2)选择器 (2)表单选择器 (4)属性 (5)节点匹配 (6)文本处理 (12)Css (13)事件 (15)动画效果 (18)Ajax (20)其他 (24)Ajax (24)1. load( url, [data], [callback] ) (24)2. jQuery.get( url, [data], [callback] ) (25)3. jQuery.post( url, [data], [callback], [type] ) (26)4. jQuery.getScript( url, [callback] ) (27)5. jQuery Ajax 事件 (27)6. jQuery.ajax( options ) (29)7. jQuery.ajaxSetup( options ) (31)8. serialize() 与serializeArray() (31)1部分常用方法速查$()如果()内是css选择器：找到相应的节点包装成JQuery对象DOM对象：直接包装成JQuery对象一段HTML代码：先创建DOM对象，再包装成JQuery对象$("<div></div>").appendTo($(obj))返回jQuery$(#id)根据给定的ID匹配一个元素。

返回jQuery$(element)根据给定的元素名匹配所有元素返回Array<Element(s)>$(.class)根据给定的类匹配元素。

返回Array<Element(s)>$(*)匹配所有元素返回Array<Element(s)>$(selector1,selector2,selectorN)将每一个选择器匹配到的元素合并后一起返回。

返回Array<Element(s)>选择器parent > child取得<div>下的所有<span>子节点$("div > span")返回Array<Element(s)>:first选取所有<div>元素中第一个<div>元素$("div:first")返回jQuery:last选取所有<div>元素中最后一个<div>元素$("div:last")返回jQuery:not(Selector)选取所有class不是mytest的<div>元素$("div:not(.mytest)")返回Array<Element(s)>:even查找表格的偶数行，从0开始计数$("tr:even")返回Array<Element(s)>:odd查找表格的奇数行，从0开始计数$("tr:odd")返回Array<Element(s)>:eq(index)匹配一个给定索引值的元素，从0开始计数$("tr:eq(1)")返回Array<Element(s)>:gt(index)匹配所有大于给定索引值的元素，从0开始计数$("tr:gt(0)")返回Array<Element(s)>:lt(index)匹配所有小于给定索引值的元素，从0开始计数$("tr:lt(2)")返回Array<Element(s)>:animated选取当前正在执行动画的所有元素$(":animated")返回Array<Element(s)>:contains(string)选取所有文本内容包含“关键词”的<div>元素$("div:contains('关键词')")返回Array<Element(s)>:has查找所有含有<p>子元素的<div>父元素$("div:has(p)")返回Array<Element(s)>:empty选取所有空<div></div>的元素$("div:empty")返回Array<Element(s)>:visible查找所有可见元素$("tr:visible")返回Array<Element(s)>[attribute = value]选取文本输入框的input元素$("input[type=text]")返回Array<Element(s)>[attribute != value]选取所有不是hidden的input元素，注意，没有type属性的input也会被选取$("input[type!=hidden]")返回Array<Element(s)>[attribute ^= value]选取开头为mailto:的所有a链接$("a[href^='mailto']")返回Array<Element(s)>[attribute $= value]选取所有结尾为.jpg的img图片$("img[src$='.jpg']")返回Array<Element(s)>表单选择器:input查找所有的input元素（包括input, textarea, select和button）$(":input")返回Array<Element(s)>:password查找所有密码框$(":password")返回Array<Element(s)>:text查找所有单行文本框$(":text")返回Array<Element(s)>:radio查找所有单选按钮$(":radio")返回Array<Element(s)>:checkbox查找所有复选框$(":checkbox")返回Array<Element(s)>:checked查找所有选中的checkbox, radio$("input:checked")返回Array<Element(s)>:selected查找所有选中的选项元素$("select:selected")返回Array<Element(s)>属性attr(key) attr(key,value)设置一个属性的值HTML:<img src="test.jpg"/>jQuery:$("img").attr("src");Result:test.jpg返回jQueryremoveAttr(key)删除一个属性HTML:<img src="test.jpg"/>jQuery:$("img").removeAttr("src");Result:[<img /> ]返回jQueryaddClass(class)追加指定的类名HTML:<p>Hello</p>jQuery:$("p").addClass("selected highlight");Result:[ <p class="selected highlight">Hello</p> ] 如果要替换样式，用attr() 返回jQueryremoveClass()移除样式Html:<p class="red">你最喜欢的是？</p>JQuery:$("p").removeClass("red");Result:<p >你最喜欢的是？</p>可以同时移除多个样式：$("p").removeClass("red bold");或者全部移除样式：$("p").removeClass();返回jQuerytoggleClass()如果节点存在该样式，则移除，不存在，则追加$("p").toggleClass("blue");返回jQueryhasClass(class)判断节点是否存在该样式，返回布尔值$("p").hasClass("blue"); 该方法等价于：$("p").is(".blue"); 返回jQueryhtml()取得或设置文本内容类似innerHTML()仅可用于html文档返回String/jQuerytext()取得或设置文本内容类似innerText()可以用于html和xml文档返回String/jQueryval()取得或设置input文本框的值Html：<input type="text" id="searchbox" value="搜索的内容…" /> JQuery:$("searchbox").focus(function(){if(this.val()=="搜索的内容…"){this.val("")}});$("searchbox").blur(function(){if(this.val()==""){this.val(this.defaultValue)}});this.defaultValue 表示input文本框的默认value通过val()还能做到将表单多选框,checkbox,radio事先选中：$(":checkbox").val(["check2","check3"]);$(":radio").val(["radio2"]);返回String/Array节点匹配each(callback)为每一个匹配的元素执行一个函数迭代两个图像，并设置它们的src 属性注意此处this 指代的是DOM 对象而非jQuery 对象HTML:<img/><img/>jQuery:$("img").each(function(i){this.src = "test" + i + ".jpg";});Result:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]返回jQuerysize()/length获取对象中元素的个数$("img").size();$("img").length;返回Numberindex([subject])匹配的元素，并返回相应元素的索引值，从0开始计数HTML:<ul><li id="foo">foo</li><li id="bar">bar</li><li id="baz">baz</li></ul>jQuery:$('li').index($('#bar')); //1$('li').index($('li:gt(0)')); //1$('#bar').index('li'); //1$('#bar').index(); //1返回Numberget()/get(index)get():以数组形式取得所有匹配的节点集合get(index) :index存在则从中选择某一个DOM节点HTML:<img src="test1.jpg"/><img src="test2.jpg"/>jQuery:$("img").get(0);Reslut:[ <img src="test1.jpg"/> ]返回Array<Element>/ Elementeq(index)以对象形式获取第index个元素，位置从0算起获取匹配的第二个元素HTML:<p> This is just a test.</p><p> So is this</p>jQuery:$("p").eq(1)Result:[ <p> So is this</p> ]补充 .get(index)和.eq(index)的区别.get(index)返回的是一个html数组.eq(index)返回的是一个Jquery对象$("ul li").get(1).css("color", "red");//这个是错误的$("ul li").eq(1).css("color", "red");//这个是正确的同理将JQuery对象转换为DOM对象可以使用get alert一个非JQuery对象，如：var $cr = $("#cr");var cr = $cr.get(0);alert(cr.checked);返回jQueryfirst()获取匹配的第一个元素$('li').first() 等价于$('li:first')返回jQuerylast()获取匹配的最后一个元素$('li').last() 等价于$('li:last')返回jQueryfilter(fn)筛选出与指定函数返回值匹配的元素集合保留子元素中不含有ol的元素。

jquery的api以及用法总结-数据操作事件

jquery的api以及⽤法总结-数据操作事件数据1. .data()在匹配元素上存储任意相关数据或返回匹配的元素集合中的第⼀个元素的给定名称的数据存储的值.data(obj) ⼀个⽤于更新数据的键/值对.data()⽅法允许我们再dom元素上绑定任意类型的数据，避免了循环引⽤的内存的泄露风险从div元素存储然后找回⼀个值此例中可以将#log内存储的数据分别提取到span中<div id="log">the value is<span></span>and<span></span></div>$('#log').data('test', {first: 16,last: 'jianmei',});//将test的first内容添加到#log上$('span:first').text($('#log').data('test').first);$('span:last').text($('#log').data('test').last);2. .removeData()在元素上移除绑定的数据.removeData([name]),要移除的存储数据名.removeData([list]),⼀个数组或者空间分隔的字符串命名要删除的数据块<div id="log">the value is<span></span>and<span></span></div>$('#log').data('test1', {first: 16,});$('#log').data('test2', {last: 'jianmei',});$('span:first').text($('#log').data('test1').first);//移除绑定在#log上的test1数据$('#log').removeData('test2');$('span:last').text($('#log').data('test2').last);操作拷贝.clone 创建⼀个匹配的元素集合的深度拷贝副本.clone()⽅法深度复制所有匹配的元素集合，包括所有匹配元素，元素的下级元素，⽂字节点当和插⼊⽅法联合使⽤的时候，.clone()对于复制页⾯上的元素很⽅便__注意__:当使⽤clone的时候，在将它插⼊到⽂档之前，我们可以修改克隆后的元素或者元素内容复制所有的b元素然后将他们插⼊到所有的段落中<b>hello</b><p>have a good day</p>// prependTo是将元素插⼊到前⾯// $('b').clone().prependTo('p');// appendTo是将元素插⼊到后⾯,就是添加的意思$('b').clone().appendTo('p');DOM插⼊、包裹1. .wrap()在集合中匹配的每⼀个元素周围包裹⼀个html结构在所有的p外⾯包裹⼀层div，此例中会有两个div<p>have a good day</p><p>have a nice day</p>//在p外⾯包裹⼀个class为demo的div$('p').wrap("<div class = 'demo'></div>")2. wrapAll()在集合中所有匹配元素的外⾯包裹⼀个html元素，此例中只有⼀个包裹在两个p元素怒外⾯的div，div的数量只有⼀个 <p>have a good day</p><p>have a nice day</p>// 与wrap不同的是wrap是在匹配符合的每⼀个元素外⾯都要加⼀个div// ⽽wrapAll只在所有匹配的元素外⾯加⼀层div$('p').wrapAll("<div class = 'demo'></div>")3. wrapInner()在匹配元素⾥的内容外包⼀层结构选择所有的段落，包裹每⼀个匹配元素的内容注意:wrap和wrapInner都是包裹每⼀个匹配的元素但是不同的是wrap是在选择的每⼀个元素外包裹⼀层，但是wrapInner是在选择的每个元素的内容外包裹⼀层<p>have a good day</p><p>have a nice day</p>//包裹的是内容have a good day$('p').wrapInner("<div class = 'demo'></div>")DOM插⼊，内部插⼊1. append()在每个匹配元素⾥⾯的末尾处插⼊参数内容// 在div内插⼊p$('div').append($('b'));2. appendTo()将匹配的元素插⼊到⽬标元素的最后⾯<b>hello</b><div class="demo"></div>// 将p插⼊到div内$('b').appendTo($('.demo'));3. html()获取集合中第⼀个匹配元素的html内容或者设置每⼀个匹配元素的html内容<div class="demo">123</div><div class="demo">123</div><div class="demo">123</div>// 如果添加的是空的字符串,则代表清空div内的内容// $('.demo').html('');// 向div内添加内容$('.demo').html('jianmei');4.prepend()将参数内容插⼊到每个匹配元素的前⾯（元素内部）<b>hello</b><div class="demo">123</div>// 在div内插⼊b// b元素的内容会放在原本div内容的前⾯,跟append是相反的$('.demo').prepend($('b'));5. prependTo()将所有元素插⼊到⽬标前⾯（元素内）<b>hello</b><div class="demo">123</div>// 将b插⼊到div内$('b').prependTo($('.demo'));6. text()得到匹配元素集合中每个元素的⽂本内容，包括他们的后代，或者设置匹配元素集合中每⼀个元素的⽂本内容为指定的⽂本内容 <p>have a good day</p><p>have a nice day</p>// 在段落p中添加⽂本$('p').text('jianmeinew text');DOM插⼊、外部插⼊1、after()在匹配元素集合中的每个元素后⾯插⼊参数所指定的内容，作为其兄弟节点<div class="demo">123</div><div class="demo">123</div>// 在demo类之后插⼊p标签// $('.demo').after('<p>jianmei</p>')// 在demo类后插⼊所有的p$('.demo').after($('p'));2、 before和after的理论是⼀样的，根据参数的设定，在匹配的元素前⾯插⼊内容，外部插⼊// 在demo类之前插⼊p标签$('.demo').before('<p>jianmei</p>')3、 insertAfter和after是⼀样的功能，主要是插⼊内容和⽬标的位置不同，//将p插⼊到demo类之后$('p').insertAfter('.demo');4、同理可知insertBefore的原理// 将p插⼊demo类之前$('p').insertBefore('.demo');DOM移除1、 detach(),从DOM中去掉所有匹配的元素detach和remove⽅法⼀样，除了deach保存所有jquery数据和被移⾛的元素相关联当需要移⾛⼀个数据，不久⼜将该元素插⼊DOM时，常⽤此⽅法。

jquery formbuilder用法

jquery formbuilder用法一、前言jQuery Formbuilder是一款功能强大的表单生成器插件，它能够帮助开发者快速构建各种类型的表单，支持多种表单控件和验证方式。

本文将详细介绍jQuery Formbuilder的用法，包括其基本概念、使用方法、常见用法和注意事项。

二、基本概念jQuery Formbuilder是一个基于jQuery的插件，它提供了一系列表单构建工具和API，帮助开发者创建、管理和提交表单。

Formbuilder允许开发者自定义表单的外观和功能，支持各种表单控件和验证方式，如文本框、下拉框、单选框、复选框、文件上传等。

此外，Formbuilder还提供了丰富的表单数据处理和发送功能，方便开发者进行数据收集和发送。

三、使用方法1. 引入插件：在使用jQuery Formbuilder之前，需要将其引入到网页中。

可以通过下载插件文件或使用CDN链接来引入。

2. 创建表单：使用Formbuilder的API创建表单。

可以通过调用相关方法来添加各种表单控件和验证方式。

3. 添加控件：可以使用Formbuilder提供的各种控件类，如text、select、checkbox、radio等，来添加各种类型的表单控件。

还可以使用自定义控件类来创建自定义的表单控件。

4. 添加验证：可以使用Formbuilder提供的验证方法，如required、minlength、email等，来添加各种类型的表单验证。

还可以使用自定义验证方法来创建自定义的表单验证。

5. 处理表单数据：可以使用Formbuilder提供的数据处理方法，如submitForm、validateForm等，来提交表单数据和处理验证结果。

四、常见用法1. 动态生成表单：可以使用Formbuilder的API动态生成表单，根据不同的条件和数据生成不同的表单控件和验证方式。

2. 表单分组：可以将多个表单控件分组，以便于管理和提交数据。

jQuery_EasyUI API 中文帮助手册1.24

jQuery EasyUI中文帮助手册目录jQuery EasyUI中文帮助手册 (1)API版本：1.2.4 ........................................................... 错误！未定义书签。

1. 基本 (4)1.1 语法解析 (4)语法解析 (4)1.2 简单载入器 (4)简单载入器 (4)1.3 一般拖动 (6)可拖动 (6)1.4 拖动至容器 (7)拖动至容器 (7)1.5 缩放 (8)缩放 (8)1.6 分页 (9)分页 (9)1.7 搜索框 (11)搜索框 (11)1.8 进度条 (13)进度条 (13)2. 布局管理器 (14)2.1 控制面板 (14)2.2 选项卡 (20)选项卡切换 (20)2.3 可伸缩面板 (24)可伸缩面板 (24)2.4 布局面板 (27)布局面板 (27)3. 菜单和按钮 (30)3.1 菜单 (30)菜单 (30)3.2 链接按钮 (33)链接按钮 (33)3.3 菜单按钮 (34)菜单按钮 (34)3.4 分隔按钮 (35)分隔按钮 (35)4. 表单 (36)4.1 表单 (36)表单 (36)4.2 表单验证 (38)表单验证 (38)4.3 自定义组合框 (40)自定义组合框 (40)4.4 可装载组合框 (42)可装载组合框 (42)4.5 组合树 (45)组合树 (45)4.6 组合表格 (46)组合表格 (46)4.7 数字验证框 (48)数字验证框 (48)4.8 日期组合框 (49)日期组合框 (49)4.9 日期时间组合框 (51)日期时间组合框 (51)4.10 日历 (53)日历 (53)4.11 调节器 (54)调节器 (54)4.12 数字调节器 (56)数字调节器 (56)4.13 时间调节器 (57)时间调节器 (57)5. 窗口 (58)5.1 窗口 (58)窗口 (58)5.2 对话窗口 (60)对话窗口 (60)5.3 消息窗口 (61)消息窗口 (61)6. 数据表格和树形菜单 (63)6.1 数据表格 (63)数据表格 (63)6.2 属性表格 (73)属性表格 (73)6.3 树形菜单 (74)树形菜单 (74)6.4 树形表格 (80)树形表格 (80)1.基本1.1语法解析语法解析使用方法属性事件方法1.2简单载入器简单载入器使用方法属性名称类型描述默认值modules （模块） object （对象）预定义模块。

jquery表单验证插件（jquery.validate.js）的3种使用方式

jquery表单验证插件（jquery.validate.js）的3种使⽤⽅式jquery 验证⾮常简单，下⾯总结常⽤的三种⽅式：第⼀种⽅式：也是⽐较标准的⽅式：⾸先引⼊jquery 插件和 jquery 验证插件：第⼀步：引⼊插件复制代码代码如下:<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/messages_zh.js"></script>第⼆步：定义表单的错误输出：复制代码代码如下:<style type="text/css">#frm label.error {color: Red;}</style>第三步：添加错误处理⽅法；jquery验证，需要有：1：定义验证⽅法2：添加验证规则下⾯贴出常⽤的验证⼩例⼦，⼀看就明⽩了。

先看效果图：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/javascript" src="js/jquery-1.6.1.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/messages_zh.js"></script><style type="text/css">#frm label.error {color: Red;}</style></head><script type="text/javascript">$(document).ready(function(){$("#clickme").click(function(){alert("Hello World");});$( "#frm" ).validate({rules: {username: {required: true,minlength: 4,maxlength: 20,byteMaxLength:20,valiEnglish:true},postcode: {postcodeVal:true},number: {byteMaxLength:5,numFormat:5},identifier: {sfzhValidate:true}},messages: {username: {required: "请输⼊⽤户名4--20个英⽂字符",minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!")},number: {numFormat: $.format("请输⼊{0}数字")}}});jQuery.validator.addMethod("byteMaxLength", function(value,element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));jQuery.validator.addMethod("numFormat",function(value,element,param){return this.optional(element) || /^\d*$/.test(value);}//,$.validator.format("请输⼊数字{0}位以内"));//number(9,3)jQuery.validator.addMethod("numFormat63",function(value,element){return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);},$.validator.format("请输⼊合法数字,精度格式123456.0"));jQuery.validator.addMethod("postcodeVal",function(value,element){return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);},$.validator.format("请输⼊合法的邮编"));jQuery.validator.addMethod("numberAndLettersVal",function(value,element){ return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);},$.validator.format("请输⼊字母或数字"));jQuery.validator.addMethod("sfzhValidate",function(value,element){return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);},$.validator.format("请输⼊合法⾝份证号"));jQuery.validator.addMethod("valiEnglish",function(value,element){return this.optional(element) || /^[a-zA-Z ]*$/.test(value);},$.validator.format("请输⼊字母或者空格"));});</script><body><form id="frm" name="frm" method="post" action=""><label>⽤户名:<input type="text" name="username" id="username" /></label><p><label>邮编 :<label></label></label><label><input type="text" name="postcode" id="postcode" /><br /></label></p><p><label>数字 :<input type="text" name="number" id="number" /></label><br /><label>⾝份证号：<input type="text" name="identifier" id="identifier" /></label> <label><input type="button" name="clickme" id="clickme" value="click me" /></label></p></form></body></html>这是⼀个完整的验证⽰例，关于引⼊的代码已经上传，可以下⾯讲解其中的重点⽅法：jQuery.validator.addMethod("byteMaxLength", function(value,element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));jQuery.validator.addMethod() ⽅法，有三个参数,第⼀个参数： “byteMaxLength” 是定义⽅法名，必须保证⽅法名唯⼀，是⼀个identifier标志。

使用jquery.upload.js实现异步上传示例代码

使⽤jquery.upload.js实现异步上传⽰例代码相关资源下载：1:jsp代码：导⼊jquery.upload.js和jquery-1.7.2.js添加调⽤js的代码：<a href="javascript:void(0)" rel="external nofollow" onclick="doUpload()">上传</a>在底部写：<iframe style="position:absolute;top:-9999px" src="<%=basePath%>/resources/upload/upload.htm"/></iframe>2：js代码：/*⽂件上传*/function doUpload() {// 上传⽅法$.upload({// 上传地址url:window.basePath+'/reply/imageUpload',// ⽂件域名字fileName: 'uploadfile',// 其他表单数据params: {},// 上传完成后, 返回json, textdataType: 'json',// 上传之前回调,return true表⽰可继续上传onSend: function() {return true;},onSubmit: function(){},// 上传之后回调onComplate: function(data) {if(data.msg){}else{alert("上传图⽚出错！");}}});}3：后台代码：/*** 图⽚上传本地服务器* @param request* @param response* @return*/@RequestMapping(value="imageUpload")@ResponseBodypublic Object imageUpload(HttpServletRequest request,HttpServletResponse response){Map<String, Object> map=new HashMap<String, Object>();UploadUtil uploadUtil = new UploadUtil();try {String url = uploadUtil.excelUpload(request, response);// ⽂件上传} catch (IOException e) {e.printStackTrace();}return map;}。

jqGrid_api中文文档

Jqgrid3.6--中文文档jqGrid学习----------- 原理 (2)jqGrid学习之--------- 皮肤 (2)jqGrid学习 (2)jQuery学习之：jqGrid表格插件——参数配置 (4)jqGrid学习--------------自定义搜索 (14)jqGrid学习-------------- 搜索工具栏 (16)jqGrid学习-------------- 搜索 (17)jqGrid学习-------------- 自定义格式化类型 (19)jqGrid学习-------------- 格式化 (22)jqGrid学习-------------- 自定义按钮 (26)jqGrid学习-------------- 翻页（2） (28)jqGrid学习-------------- 翻页 (33)jqGrid学习-------------- 配置json (36)jqGrid学习-------------- 方法 (38)jqGrid学习----------- 事件 (46)jqGrid学习----------- 数据 (48)jqGrid学习-------------- ColModel API (55)jqGrid学习----------- 参数（2） (57)jqGrid学习------------------ jqGrid参数 (63)jqGrid学习----------------- 第一个实例 (64)使用jqGrid修改数据并检查 (70)jqGrid学习 ----------- 原理jqGrid是典型的B/S架构，服务器端只是提供数据管理，客户端只提供数据显示。

换句话说，jqGrid可以以一种更加简单的方式来展现你数据库的信息，而且也可以把客户端数据传回给服务器端。

对于jqGrid我们所关心的就是：必须有一段代码把一些页面信息保存到数据库中，而且也能够把响应信息返回给客户端。

JQuery插件之Jquery.datatables.js用法及api

JQuery插件之Jquery.datatables.js⽤法及api 1、DataTables的默认配置$(document).ready(function() {$(‘#example’).dataTable();} );⽰例：2、DataTables的⼀些基础属性配置“bPaginate”: true, //翻页功能“bLengthChange”: true, //改变每页显⽰数据数量“bFilter”: true, //过滤功能“bSort”: false, //排序功能“bInfo”: true,//页脚信息“bAutoWidth”: true//⾃动宽度⽰例：3、数据排序$(document).ready(function() {$(‘#example’).dataTable( {“aaSorting”: [[ 4, "desc" ]]} );} );从第0列开始，以第4列倒序排列⽰例：4、多列排序⽰例：5、隐藏某些列$(document).ready(function() {$(‘#example’).dataTable( {“aoColumnDefs”: [{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },{ “bVisible”: false, “aTargets”: [ 3 ] }] } );} );⽰例：6、改变页⾯上元素的位置$(document).ready(function() {$(‘#example’).dataTable( {“sDom”: ‘<”top”fli>rt<”bottom”p><”clear”>’} );} );//l- 每页显⽰数量//f – 过滤输⼊//t – 表单Table//i – 信息//p – 翻页//r – pRocessing//< and > – div elements//<”class” and > – div with a class//Examples: <”wrapper”flipt>, <lf<t>ip>7、状态保存，使⽤了翻页或者改变了每页显⽰数据数量，会保存在cookie中，下回访问时会显⽰上⼀次关闭页⾯时的内容。