你的位置:首页 > Java教程

[Java教程]jQuery简单入门(四)


4.表单应用

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


 

  1. 表单应用

  一个简单的表单HTML示例:

  <form action=”url” method=”POST” >

    <input type=”text” /><p/>”

    <input type=”submit” />

  </form>


 

  Aa. 单行文本框应用

  示例:

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

  2.示例代码

  $(function() {

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

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

    }).blur(function() {

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

    });

  });


 

  Ab. 多行文本框应用(<textarea></textarea>)

  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;<!--采用javascript方式-->

        });

     });

  });


 

  Ad. 表单验证

  1.必填

  $(function() {

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

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

   var $html = $(“<strong class=’high’>*</strong>”);

     $(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(“<span class=’formtips onError’>”+errorMsg+”</span>”);

      } else {

        var okMsg = ”输入正确”;

       $parent.append(“<span class=’formtips onSuccess’>”+okrMsg+”</span>”);

      }

    }

    //验证邮箱

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

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

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

        $parent.append(“<span class=’formtips onError’>”++”);

    } else {

        var okMsg = “输入正确”;

        $parent.append(“<span class=’formtips onSuccess’>”+okMsg+”</span>”);

     }

    }

    });

  });

(未完...)