【随笔记录】很有用的Jquery代码片段(转)

代码片段1: 在表单中禁用“回车键”

大家可能在表单的操作中需要防止用户意外的提交表单,那么下面这段代码肯定非常有帮助:

在线调试

在线演示

$("#form").keypress(function(e) {  if (e.which == 13) {    return false;  }});

代码片段2: 清除所有的表单数据

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

在线调试

在线演示

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;  });};

代码片段3: 将表单中的按钮禁用

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

在线调试

在线演示

禁用按钮:

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

启动按钮:

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

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

代码片段4: 输入内容后启用递交按钮

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

在线调试

在线演示

$(‘#username‘).keyup(function() {    $(‘#submit‘).attr(‘disabled‘, !$(‘#username‘).val()); });

代码片段5: 禁止多次递交表单

多次递交表单对于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;    }  });});

代码片段6: 高亮显示目前聚焦的输入框标示

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

在线调试

在线演示

$("form :input").focus(function() {  $("label[for=‘" + this.id + "‘]").addClass("labelfocus");}).blur(function() {  $("label").removeClass("labelfocus");});

代码片段7: 动态方式添加表单元素

这个方法可以帮助你动态的添加表单中的元素,比如,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‘ name=‘password2‘ id=‘password2‘ />");});

代码片段8: 自动将数据导入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);    })  })})

代码片段9: 判断一个复选框是否被选中

代码很简单,如下:

在线调试

在线演示

$(‘#checkBox‘).attr(‘checked‘);

代码片段10: 使用代码来递交表单

代码很简单,如下:

在线调试

在线演示

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

希望大家觉得这些jQuery代码会对你的开发有帮助,如果你也有类似的代码,请和我们分享!

来源:不可错过的10个超棒jQuery表单操作代码片段

时间: 2024-10-25 07:31:38

【随笔记录】很有用的Jquery代码片段(转)的相关文章

7个有用的jQuery代码片段分享

7个有用的jQuery代码片段分享 jQuery是一款轻量级的JavaScript库,是最流行的客户端HTML脚本之一,它在WEB设计师和开发者中非常的有名,并且有非常多有用的插件和技术帮助WEB开发人员开发出有创意和漂亮的WEB页面. 今天我们为jQuery用户分享一些小技巧,这些技巧将帮助你提示你网站布局和应用的创意性和功能性. 一.在新窗口打开链接 用下面的代码,你点击链接即可在新窗口打开: //author http://www.lai18.com $(document).ready(f

[收藏]7个有用的jQuery代码片段分享

7个有用的jQuery代码片段分享 jQuery是一款轻量级的JavaScript库,是最流行的客户端HTML脚本之一,它在WEB设计师和开发者中非常的有名,并且有非常多有用的插件和技术帮助WEB开发人员开发出有创意和漂亮的WEB页面. 今天我们为jQuery用户分享一些小技巧,这些技巧将帮助你提示你网站布局和应用的创意性和功能性. 一.在新窗口打开链接 用下面的代码,你点击链接即可在新窗口打开: //author http://www.lai18.com $(document).ready(f

很实用的JQuery代码片段(转)

1 元素屏幕居中 jQuery.fn.center = function () { this.css("position","absolute"); this.css("top",($(window).height()-this.height())/2+$(window).scrollTop()+"px"); this.css("left",($(window).width()-this.width())/

【转】7个有用的jQuery代码片段

一.在新窗口打开链接 用下面的代码,你点击链接即可在新窗口打开: $(document).ready(function() { $("a[href^='http']").attr('target','_blank'); }); 二.设置等高的列 应用下面的代码,可以使得你的WEB应用每一列高度都想等: <div class="equalHeight" style="border:1px solid"> <p>First L

一些实用的JQuery代码片段收集

本文将展示50个非常实用的JQuery代码片段,这些代码能够给你的JavaScript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.好好仔细看一遍,你肯定会有收获.嫩江县海洋局 如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ ajaxSettings:{ contentType:"application/x-www-form-urlencoded;c

50个jquery代码片段(转)

本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中! 1. 如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ ajaxSettings:{ contentType:"application/x-www-form

50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段

50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段 本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中! 1. 如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ ajaxSetti

高效Web开发的10个jQuery代码片段

源代码:http://www.codeceo.com/article/10-jquery-snippets-web-dev.html 在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库.今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来. 1.检测Internet Explorer版本 当涉及到CSS设计时,对开发者和设计者而言Internet Explorer一直是个问题.尽管IE6的黑暗时代已经过去,IE也越来越不流行,它始

10个常用的JQUERY代码片段

jQuery被用在无数个网站的页面上,它是使用最为广泛的javascript库之一.jQuery的受欢迎程度的部分是它的简单性.它能够通过简单的语句完成大部分复杂的工作.有许多jQuery片段我们在每天不断重复的使用,这里总结了10条你必须知道的jQuery代码片段. 返回顶部 <a class="top" href="#">Back to top</a> // Back To Top $('a.top').click(function(){