jQuery复习:第五章

一、表单应用

1.表单验证:

首先创建一个表单:

<form method="post" action="">
    <div class="int">
        <label for="username">用户名:</label>
        <input type="text" id="username" class="required"/>
    </div>
    <div class="int">
        <label for="email">邮箱:</label>
        <input type="text" id="email" class="required"/>
    </div>
    <div>
        <label for="personinfo">个人资料:</label>
        <input type="text" id="personinfo"/>
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send"/>
        <input type="reset" id="res" />
    </div>
</form>

验证表单元素步骤如下:

  (1)判断当前失去焦点的元素是"用户名"还是"邮箱",然后分别处理。

  (2)如果是"用户名",判断元素的值的长度是否小于6,如果小于6,则用红色提醒用户输入不正确,反之,则用绿色提醒用户输入正确。

  (3)如果是"邮箱",判断元素的值是否符合邮箱的格式,如果不符合,则用红色提醒用户输入不正确,反之,则用绿色提醒用户输入正确。

  (4)将提醒信息追加到当前元素的父元素的最后。

jQuery代码如下:

$("form : input").blur(function(){
    var $parent=$(this).parent();
    if($(this).is("#username")){
        if(this.value==""||this.value.length<6){
            var errorMsg="请输入至少6位的用户名.";
            $parent.append("<span class="formtips onError">"+error Msg+'</span>');
        }else{
              var okMsg='输入正确.';
              $parent.append('<span class="formtips onSuccess">'+ok Msg+'</span>');
          }
    } 
    //验证邮箱正确
     if($(this).is("#email")){
         if(this.value==""||(this.value!==""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)){
               var errorMsg="请输入正确的E-mail地址.";
               $parent.append('<span class="formtips onError">'+error Msg+'</span>');
         }else{
               var okMsg='请输入正确.';
               $parent.append('<span>'+ok Msg+'</span>');
           }
     }
})  

二、contains选择器:

  contains选择器可以根据<td>元素的内容来选择当前<td>元素。例如: 

<table>
    <tr>
        <td>王五</td>
        <td>李四</td>
        <td>张三</td>
    </tr>
</table>

如果要选择王五那一行,为它添加一个select类名,代码如下:

$("tr:contains('王五')").addClass("selected");

posted @ 2016-03-24 22:00  -cyber  阅读(271)  评论(0编辑  收藏  举报