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

　　　　}

　　　　}

　　 });

　　});

（未完...）