javascript代码实例教程-jQuery简单入门(四) - maikec陈

发布时间:2019-01-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery简单入门(四) - maikec陈脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 jQuery简单入门(四)

4.表单应用

表单是HTML重要组成部分,在采集、提交用户输入的信息和显示列表数据等需求中有重要作用


 

表单应用

  一个简单的表单HTML示例:

  


 

  Aa. 单行文本框应用

  示例:

  1.需求:当单行文本框获取和失去焦点改变样式

  2.示例代码

  $(function() {

  $(“:input”).focus(function() {//$(“:input”)伪标签选择器

  $(this).addClass(“focus”);

  }).blur(function() {

  $(this).removeClass(“focus”);

  });

  });


 

  Ab. 多行文本框应用()

  1.高度变化

  $(function() {

  VAR $comment = $(“#comment”);//获取多行文本框

  $(“.BiggerClass”).click(function() {

  if(!$comment.is(“:aniMATEd”)) {//判断是否处于动画状态

    if($comment.height() < 500) {

    $comment.animate({height : “+=50”}, 1000);//在原有高度上每秒增加50

    }

    }

  });

  });

  2.滚动条变化(控制scrollTop属性)

  $(function() {

  var $comment = $(“#comment”);//获取多行文本框

  $(“.upClass”).click(function() {

    if(!$comment.is(“:animated”)) {//判断是否处于动画状态

    $comment.animate({scrollTop: “+=50”}, 1000);

    }

  });

  });


 

  Ac. 复选框应用

  1.全选和全不选

  $(function() {

   $(“#checkedAll”).click(function() {

  alert(“全选”);

  $(“[name = ITems] : checkbox”).attr(“checked”, true);

  });

  $(“#checkedNo”).click(function() {

  alert(“全选”);

  $(“[name = items] : checkbox”).attr(“checked”, false);

  });

  });

  2.反选

  $(function() {

  $(“#checkedrev”).click(function() {

   $(“[name = items] : checkbox”).each(function() {

   $(this).attr(“checked”, !$(this).attr(“checked”));

//this.checked = !this.checked;

});

});

});


 

  Ad. 表单验证

  1.必填

  $(function() {

  $(“form : input.required”).each(function() {

  $(this).next(“.high”).remove();//如果已有必填提醒,则删除

   var $html = $(“*”);

    $(this).parent().apPEnd($required);

  });

  });

  2.验证数据格式合法性

  $(function() {

  $(“form :input”).blur(function() {

    var $parent = $(this).parent();

    //删除已有提示

    $parent.find(“.formtips”).remove();

 

    //验证用户名

    if($(this).is(“#username”)) {

    if(this.value == “”|| this.value.length < 6) {

    var errorMsg = “请输入至少6位的用户名”;

    $parent.append(“”+errorMsg+””);

    } else {

    var okMsg = ”输入正确”;

    $parent.append(“”+okrMsg+””);

    }

    }

    //验证邮箱

    if($(this).is(“#email”)) {

    if(this.value == “”|| (this.value != “”&& !/.+@.+.[a-zA-Z]{2,4}$/.test(this.value))){

      var erromsg = “请输入正确的E-Mail地址”;

      $parent.append(“”++”);

    } else {

      var okMsg = “输入正确”;

      $parent.append(“”+okMsg+””);

    }

    }

  });

  });

(未完...)

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery简单入门(四) - maikec陈全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery简单入门(四) - maikec陈所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。