jQuery技术

60个很实用的jQuery代码开发技巧收集【站长博客网】(3)

字号+ 作者:H5之家 来源:H5之家 2017-05-12 14:02 我要评论( )

可能针对不同的表单形式,你需要调用不同类型的清楚方法,不过使用下面这个现成方法,绝对能让你省不少功夫。 function clearForm(form) { // iterate over all of the inputs for the form // element that was pa

可能针对不同的表单形式,你需要调用不同类型的清楚方法,不过使用下面这个现成方法,绝对能让你省不少功夫。

function clearForm(form) { // iterate over all of the inputs for the form // element that was passed in $(':input', form).each(function() { var type = this.type; var tag = this.tagName.toLowerCase(); // normalize case // it's ok to reset the value attr of text inputs, // password inputs, and textareas if (type == 'text' || type == 'password' || tag == 'textarea') this.value = ""; // checkboxes and radios need to have their checked state cleared // but should *not* have their 'value' changed else if (type == 'checkbox' || type == 'radio') this.checked = false; // select elements need to have their 'selectedIndex' property set to -1 // (this works for both single and multiple select elements) else if (tag == 'select') this.selectedIndex = -1; }); }; 53: 将表单中的按钮禁用

下面的代码对于ajax操作非常有用,你可以有效的避免用户多次提交数据,个人也经常使用:

禁用按钮:

$("#somebutton").attr("disabled", true);

启动按钮:

$("#submit-button").removeAttr("disabled");

可能大家往往会使用.attr(‘disabled',false);,不过这是不正确的调用。

54: 输入内容后启用递交按钮

这个代码和上面类似,都属于帮助用户控制表单递交按钮。使用这段代码后,递交按钮只有在用户输入指定内容后才可以启动。

$('#username').keyup(function() { $('#submit').attr('disabled', !$('#username').val()); }); 55: 禁止多次递交表单

多次递交表单对于web应用来说是个比较头疼的问题,下面的代码能够很好的帮助你解决这个问题:

$(document).ready(function() { $('form').submit(function() { if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') { jQuery.data(this, "disabledOnSubmit", { submited: true }); $('input[type=submit], input[type=button]', this).each(function() { $(this).attr("disabled", "disabled"); }); return true; } else { return false; } }); }); 56: 高亮显示目前聚焦的输入框标示

有时候你需要提示用户目前操作的输入框,你可以使用下面代码高亮显示标示:

$("form :input").focus(function() { $("label[for='" + this.id + "']").addClass("labelfocus"); }).blur(function() { $("label").removeClass("labelfocus"); }); 57: 动态方式添加表单元素

这个方法可以帮助你动态的添加表单中的元素,比如,input等:

//change event on password1 field to prompt new input $('#password1').change(function() { //dynamically create new input and insert after password1 $("#password1").append("<input type='text' />"); }); 58: 自动将数据导入selectbox中

下面代码能够使用ajax数据自动生成选择框的内容

$(function(){ $("select#ctlJob").change(function(){ $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'; } $("select#ctlPerson").html(options); }) }) }) 59: 判断一个复选框是否被选中

代码很简单,如下:

$('#checkBox').attr('checked'); 60: 使用代码来递交表单

代码很简单,如下:

$("#myform").submit();

Tag标签:  jQuery  代码开发  

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jquery hide(),show()方法用法详解

    jquery hide(),show()方法用法详解

    2017-05-13 14:02

  • 下拉列表框

    下拉列表框

    2017-05-11 15:00

  • jQuery File Upload done函数没有返回

    jQuery File Upload done函数没有返回

    2017-05-11 14:06

  • jquery判断是否为数字的方法

    jquery判断是否为数字的方法

    2017-05-11 11:02

网友点评
=