Jquery 常见案例

DencyCheng

发布于 2018-11-05 16:07:02

6.7K0

发布于 2018-11-05 16:07:02

文章被收录于专栏：SpringBootSpringBoot

jQuery和jQuery UI常见案例实现

【】引入jQuery UI

【】使用jquery.layout 插件实现布局管理

(1)引入jquery.layout的插件JS：

(2)定义布局区域：

<body>

<div class="ui-layout-north">TOP区域</div>

<div class="ui-layout-south">Footer区域</div>

<!—左部功能选择区域 -->

<a href="javascript:toCategoryMain();">药品类别管理</a>

</div>

</div>

</body>

(3)启用定义的布局：

使用jquery.layout实现布局：

$('body').layout({applyDefaultStyles: true });

【】jQuery UI实现折叠菜单

(1)引入jquery UI插件

<!—引入jquery ui的CSS样式 -->

<!—引入jquery UI JS文件 -->

(2)定义折叠菜单：

使用div定义折叠区域：

<a href="javascript:toCategoryMain();">药品类别管理</a>

</div>

</div>

(3)启用定义的折叠菜单

使用jQuery UI实现折叠菜单：

$('#accordion').accordion();

【】使用jquery UI实现Tab显示

(1)引入jQuery UI

<!—引入jquery ui的CSS样式 -->

<!—引入jquery UI JS文件 -->

(2).定义TAB结构：

<ul>

<li><a href="#tab3">处置项目处方</a>

<li><a href="#tab4">诊断药品处方</a>

<li><a href="#tab5">选择处置项目</a>

<li><a href="#tab6">选择处方药品</a>

</ul>

</div>

<div id="tab3">处置项目处方</div>

<div id="tab4">诊断药品处方</div>

<div id="tab5">选择处置项目</div>

<div id="tab6">选择处方药品</div>

</div>

(3).使用jQuery UI初始化TAB

$('#tabs').tabs();

(4).激活指定的TAB

var tabs=$('#tabs');

tabs.tabs({ active: 1 });

使用option进行激活指定的tab：

$( "#tabs" ).tabs( "option", "active", 1 );

(5).编程增加新的Tab

var tabs=$('#tabs');

$("#tabs").append("<div id='#tab07'></div>");

$("#tabs ul").append('<li><a href="#tab07">\u836F\u54C1\u9009\u62E9</a>');

tabs.tabs('refresh');

(6)设定Tab的样式：

修改Tab的标签样式

li.ui-state-default {

font-size : 12px;

}

修改Tab内容的样式

div.ui-tabs-panel {

font-size : 10px;

}

</style>

【】使用jQuery UI实现按钮效果

1.定义如下可以实现按钮的标记：

<button>A button element</button>

<a href="#">An anchor</a>

2.使用button()方法实现按钮效果：

$( "input[type=submit], a, button" )

.button()

.click(function( event ) {

event.preventDefault();

});

【】jQuery UI实现日期选择器

(1)定义输入日期的文本框：

(2)使用jQuery UI启动日期输入

$('#datep').datepicker();

(3)设定输入的日期的格式：

$('#datep').datepicker({dataFormat:”yy-mm-dd”});

【】使用jquery.validate框架实现FORM验证:

(1)引入jquery.validate框架

(2)定义验证规则

直接在页面表单元素中通过属性实现验证规则:

<s:textfield name="mcv.code" id="mccode" label="编码" minlength="2" cssClass="required" />

<s:textfield name="mcv.name" id="mcname" label="名称" minlength="5" cssClass="required" />

<s:textfield name="mcv.startdate" id="mcdate" label="启用日期" cssClass="required" />

推荐使用在JS中使用验证规则：

表单定义：

<s:form id="categoryaddform" action="add" namespace="/medicinecategory" method="post">

<s:textfield name="mcv.code" id="mccode" label="编码" />

<s:textfield name="mcv.name" id="mcname" label="名称" />

<s:textfield name="mcv.startdate" id="mcdate" label="启用日期" />

<s:textfield name="mcv.age" label="年龄"></s:textfield>

<s:submit value="提交"></s:submit>

</s:form>

启用验证：

$("#categoryaddform").validate({

rules:{

"mcv.code":{

required: true,

minlength: 4,

maxlength: 6

"mcv.name":{

required: true,

minlength: 3,

maxlength: 7

"mcv.startdate":{

required: true

}

});

(3)启动验证：

$('form').validate();

Jquery.validate框架提供的验证器类型：

(4)jquery.validate验证框架提供的验证规则：

(1)required:true 必输字段

(2)remote:"check.php" 使用ajax方法调用check.php验证输入值

(3)email:true 必须输入正确格式的电子邮件

(4)url:true 必须输入正确格式的网址

(5)date:true 必须输入正确格式的日期日期校验ie6出错，慎用

(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性

(7)number:true 必须输入合法的数字(负数，小数)

(8)digits:true 必须输入整数

(9)creditcard: 必须输入合法的信用卡号

(10)equalTo:"#field" 输入值必须和#field相同

(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）

(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)

(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)

(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)

(15)range:[5,10] 输入值必须介于 5 和 10 之间

(16)max:5 输入值不能大于5

(17)min:10 输入值不能小于10

【】使用jqyery.form插件实现表单AJAX提交

1.引入jquery.form

2.定义form表单

</div>

</div>

<div id="buttonDiv"><button type="submit">Place Order</button></div>

</form>

3.定义表单提交：

$('form').ajaxForm(function(data) {

console.log(JSON.stringify(data))

});

【】jquery.form的简介

Form Plugin API

Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程。

ajaxForm

预处理将要使用AJAX方式提交的表单，将所有需要用到的事件监听器添加到其中。它不是提交这个表单。在页面的ready函数里使用ajaxForm来给你页面上的表单做这些AJAX提交的准备工作。 ajaxForm 需要零个或一个参数。这唯一的一个参数可以是一个回调函数或者是一个可选参数对象。

是否可以连环调用: 是。

例子:

$('#myFormId').ajaxForm();

ajaxSubmit

立即通过AJAX方式提交表单。最常见的用法是对用户提交表单的动作进行响应时调用它。 ajaxForm 需要零个或一个参数。唯一的一个参数可以是一个回调函数或者是一个可选参数对象。

是否可以连环调用: 是。

例子:

// attach handler to form's submit event

$('#myFormId').submit(function() {

// submit the form

$(this).ajaxSubmit();

// return false，这样可以阻止正常的浏览器表单提交和页面转向

return false;

});

formSerialize

将表单序列化成查询串。这个方法将返回一个形如： name1=value1&name2=value2的字符串。

是否可以连环调用: 否, 这个方法返回的是一个字符串。

例子:

var queryString = $('#myFormId').formSerialize();

// the data could now be submitted using $.get, $.post, $.ajax, etc

$.post('myscript.php', queryString);

fieldSerialize

将表单里的元素序列化成字符串。当你只需要将表单的部分元素序列化时可以用到这个方法。这个方法将返回一个形如： name1=value1&name2=value2的字符串。

是否可以连环调用: 否, 这个方法返回的是一个字符串。

例子:

var queryString = $('#myFormId .specialFields').fieldSerialize();

fieldValue

取出所有匹配要求的域的值，以数组形式返回。从 0.91 版本开始, 这个方法始终返回一个数组。如果没有符合条件的域，这个数组将会是个空数组，否则它将会包含至少一个值。

是否可以连环调用: 否, 这个方法返回的是一个数组。

例子:

// get the value of the password input

var value = $('#myFormId :password').fieldValue();

alert('The password is: ' + value[0]);

resetForm

通过调用表单元素的内在的DOM 上的方法把表单重置成最初的状态。

是否可以连环调用: 是

例子:

$('#myFormId').resetForm();

clearForm

清空表单所有元素的值。这个方法将会清空所有的文本框，密码框，文本域里的值，去掉下拉列表所有被选中的项，让所有复选框和单选框里被选中的项不再选中。

是否可以连环调用: 否

$('#myFormId').clearForm();

clearFields

清空某个表单域的值。这个可以用在只需要清空表单里部分元素的值的情况。

是否可以连环调用: 否

$('#myFormId .specialFields').clearFields();

可选参数项对象

ajaxForm 和 ajaxSubmit 都支持大量的可选参数，它们通过可选参数项对象传入。可选参数项对象只是一个简单的 JavaScript对象，里边包含了一些属性和一些值:

target

用server端返回的内容更换指定的页面元素的内容。这个值可以用jQuery 选择器来表示, 或者是一个jQuery 对象，一个 DOM 元素。

缺省值： null

url

表单提交的地址。

缺省值：表单的action的值

type

表单提交的方式，'GET' 或 'POST'.

缺省值：表单的 method 的值 (如果没有指明则认为是 'GET')

beforeSubmit:

beforeSubmit

Callback function to be invoked before the form is submitted. The 'beforeSubmit' callback can be provided as a hook for running pre-submit logic or for validating the form data. If the 'beforeSubmit' callback returns false then the form will not be submitted. The 'beforeSubmit' callback is invoked with three arguments: the form data in array format, the jQuery object for the form, and the Options Object passed into ajaxForm/ajaxSubmit.

beforeSubmit: function(arr, $form, options) {

// The array of form data takes the following form:

// [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

执行数据验证的代码

// return false to cancel submit

}

Default value: null

Jquery.form选项的使用案例：

// prepare Options Object

var options = {

target: '#divToUpdate',

url: 'comment.php',

beforeSubmit: function(arr, $form, options) {

// The array of form data takes the following form:

// [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

执行数据验证的代码

// return false to cancel submit

}

success: function() {

alert('Thanks for your comment!');

}

};

// pass options to ajaxForm

$('#myForm').ajaxForm(options);

表单提交前执行的方法。这个可以用在表单提交前的预处理，或表单校验。如果'beforeSubmit'指定的函数返回false，则表单不会被提交。 'beforeSubmit'函数调用时需要3个参数：数组形式的表单数据，jQuery 对象形式的表单对象，可选的用来传递给ajaxForm/ajaxSubmit 的对象。数组形式的表单数据是下面这样的格式：

[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

缺省值： null

success

当表单提交后执行的函数。如果'success' 回调函数被指定，当server端返回对表单提交的响应后，这个方法就会被执行。 responseText 和 responseXML 的值会被传进这个参数 (这个要依赖于dataType的类型).

缺省值： null

dataType

指定服务器响应返回的数据类型。其中之一: null, 'xml', 'script', 或者 'json'. 这个 dataType 选项用来指示你如何去处理server端返回的数据。这个和 jQuery.httpData 方法直接相对应。下面就是可以用的选项：

'xml': 如果 dataType == 'xml' 则 server 端返回的数据被当作是 XML 来处理，这种情况下'success'指定的回调函数会被传进去 responseXML 数据

'json': 如果 dataType == 'json' 则server端返回的数据将会被执行，并传进'success'回调函数

'script': 如果 dataType == 'script' 则server端返回的数据将会在上下文的环境中被执行

缺省值： null

semantic

一个布尔值，用来指示表单里提交的数据的顺序是否需要严格按照语义的顺序。一般表单的数据都是按语义顺序序列化的，除非表单里有一个type="image"元素. 所以只有当表单里必须要求有严格顺序并且表单里有type="image"时才需要指定这个。

缺省值： false

resetForm

布尔值，指示表单提交成功后是否需要重置。

缺省值： null

clearForm

布尔值，指示表单提交成功后是否需要清空。

缺省值： null

iframe

布尔值，用来指示表单是否需要提交到一个iframe里。这个用在表单里有file域要上传文件时。更多信息请参考代码示例页面里的File Uploads 文档。

缺省值： false

例子:

// prepare Options Object

var options = {

target: '#divToUpdate',

url: 'comment.php',

success: function() {

alert('Thanks for your comment!');

}

};

// pass options to ajaxForm

$('#myForm').ajaxForm(options);

注意，这个参数对象也可以当作 jQuery's $.ajax方法的参数。如果你对 $.ajax 方法的参数使用很熟悉，你也可以把它当作ajaxForm 和 ajaxSubmit 的参数使用。

【】清除下拉框的原有选项，并增加新的选项：

$('#mySelect')

.find('option')

.remove()

.end()

.append('<option value="whatever">text</option>')

.val('whatever')

【】下拉框的常见操作：

$("#selectId").append("<option value='"+value+"'>"+text+"</option>");

jQuery获取Select选择的Text和Value:

1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发

2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text

3. var checkValue=$("#select_id").val(); //获取Select选择的Value

4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值

5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值

$("#ddlRegType ").empty(); //清空 Select:

jQuery添加/删除Select的Option项：

1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)

2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)

3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)

4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)

5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option

5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option

设置select:

设置select 选中的索引：

$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值

设置select 选中的value：

$("#ddlRegType ").attr("value","Normal“);

$("#ddlRegType ").val("Normal");

$("#ddlRegType ").get(0).value = value;

设置select 选中的text:

var count=$("#ddlRegType option").length;

for(var i=0;i<count;i++)

{ if($("#ddlRegType ").get(0).options[i].text == text)

{

$("#ddlRegType ").get(0).options[i].selected = true;

break;

}

【】表单元素的常用操作

1．单选按钮的操作

选中浮选和单选按钮：

$('input:checkbox,input:radio').attr('checked', 'checked');

清除选中状态

$('input').removeAttr('checked');

$('input').attr('checked', '');

2.复选框操作

3.检查单选或复选框是否选中：

$('input:checkbox').is(':checked')

$('input:checkbox:checked').length

$('input:radio').is(':checked')

$('input:radio:checked').length

4.文本框操作：

(1)设置文本框的值：

$('input:button').val('I am a button')

$('input:checkbox').val('I am a checkbox')

$('input:hidden').val('I am a hidden input')

$('input:image').val('I am a image')

$('input:password').val('I am a password')

$('input:radio').val('I am a radio')

$('input:reset').val('I am a reset')

$('input:submit').val('I am a submit')

$('input:text').val('I am a text')

(2)取得文本框的值：

alert($('input:button').val());

alert($('input:checkbox').val());

alert($('input:hidden').val());

alert($('input:image').val());

alert($('input:password').val());

alert($('input:radio').val());

alert($('input:reset').val());

alert($('input:submit').val());

alert($('input:text').val());

5.下拉框的操作

(1)设置下拉框的选中选项：

$('select').val('option two');

(2)取得下拉框的选择项：

alert($('select').val());

【】联动下拉框的案例：

1.页面放置双下拉框：

药品类别:<span><s:select id="categorySelection" list="categoryList" listKey="no" listValue="name"></s:select></span>

药品:<span id="medicineSelectionarea"><s:select id="medicineSelection" list="medicineList" listKey="no" listValue="name"></s:select></span>

</div>

2.前分发Action准备下拉框需要的列表：

public String tomain() throws Exception

{

categoryList=mcb.getList();

if(categoryList!=null&&categoryList.size()>0)

{

categoryNo= ((MedicineCategoryValue)categoryList.get(0)).getNo();

System.out.println(categoryNo);

medicineList=mb.getListByCategory(categoryNo);

}

return "tomain";

}

3.第一个下拉框的选择项更改事件：

$("#categorySelection").change(function(){

categoryNo=parseInt($(this).val());

//载入第2个下拉框及其选项，使用Struts2嵌入方式，直接替换原有下拉框

$("#medicineSelectionarea").load("../case/toGetMidicineSelect.action",{categoryNo:categoryNo},function(){

$("#medicineSelection").chosen();

$("#medicineSelection").change(function(){

medicineNo=$(this).val();

alert(medicineNo);

});

/* 使用JS编程方式填充下拉框，请求的Action返回列表的JSON方式，取得JSON的列表后，编程遍历每个元素，并填充到原有下拉框的选项中。但要先清空原有下拉框的选项。

$.getJSON("../case/toGetMidicineSelectJSON.action",{categoryNo:categoryNo},function(data){

//取得JSON格式的药品列表

var list=data.medicineList;

//清空下拉框

$("#medicineSelection").empty();

//遍历每个药品，填充下拉框的选项

if(list.length>0)

{

$.each(list,function(index,info){

$("#medicineSelection").append("<option value='"+info.no+"'>"+info.name+"</option>");

});

}

});

4.直接显示第2个下拉框的JSP页面：

<%@ taglib uri="/struts-tags" prefix="s" %>

<span>

<s:select id="medicineSelection" list="medicineList" listKey="no" listValue="name"></s:select>

</span>

5.第2个下拉框的前分发Action：

public String toGetMidicineSelect() throws Exception

{

medicineList=mb.getListByCategory(categoryNo);

return "toGetMidicineSelect";

}

6.配置返回JSON结果列表的Action：

<param name="contentType">text/json;charset=UTF-8</param>

<param name="excludeProperties">mcb,mb,categoryList,categoryNo</param>

</result>

</action>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017年02月08日，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

Jquery 常见案例

Jquery 常见案例

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐