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

转载于:https://www.cnblogs.com/koto/p/5314836.html

jQuery复习：第五章相关推荐

算法复习第五章贪心法
算法复习第五章贪心法概述 TSP 最近邻点策略最短连接策略图着色问题最小生成树(Prim算法.Kruskal) 0-1bag问题活动安排问题多机调度概述 TSP 最近邻点策略最短连接策 ...
通信网络基础期末复习-第五章-路由算法
写在前面:本文主要依据为<通信网络基础>李建东,盛敏编著,如有侵权,请联系作者删除.本文仅用于个人期末复习与知识结构的搭建. 文章目录第五章路由算法 5.1 路由算法概述 5.1.1路 ...
jQuery系列第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
《计算机组成原理》复习第五章—中央处理器
第五章中央处理器 5.1 CPU功能和组成 5.1.1 CPU的基本功能 CPU主要包括了运算器和控制器两大部分,运算器的功能实现第二章已经学过了,这里我们中点讨论一下控制器的内容. 当一条指令进入 ...
软件工程经济学期末复习第五章
软件工程经济学期末复习总结第5章软件生产过程经济分析软件生产过程: 规划.需求分析.概要设计.详细设计.编码.系统集成.测试.交付本章研究主要内容: 生产过程的规模效应投入要素与产出关联变动 ...
操作系统考研复习——第四章（文件管理）
操作系统考研复习--第四章(文件管理) 4. 文件管理 4.1 文件管理基础 4.1.1 文件的概念 1. 数据项.记录和文件 2. 文件属性 3. 文件系统的接口 4. 文件的基本操作 5. 文件的 ...
jQuery实战读书笔记（第五章）
第五章用动画和特效装扮页面 1. 显示和隐藏元素 1.1 可折叠的模块 $('div.caption img').click(function(){ var body$ = $(this).clos ...
NLP复习资料(2)-三~五章：形式语言、语料库、语言模型
NLP复习资料-三~五章 1.第三章:形式语言 2.第四章:语料库 3.第五章:语言模型国科大,宗老师<自然语言处理>课程复习笔记,个人整理,仅供参考. 1.第三章:形式语言 1.语言描 ...
软件工程复习提纲——第五章
软件工程复习提纲,期末.考研的学霸笔记第五章--详细设计第五章详细设计详细设计阶段的根本目标:确定应该怎样具体地实现所要求的系统. 结构程序设计: 1)如果一个程序的代码块仅仅通过顺序.选择和循 ...
软件工程导论第五章复习总结附思维导图及部分习题答案
软件工程导论第五章复习总结附思维导图及部分习题答案总体设计一.设计过程 1.设想提供选择的方案 2.选取合理的方案 3.推荐最佳方案 4.功能分解 5.设计软件结构 6.设计数据库 7.制定测试计 ...

jQuery复习：第五章

jQuery复习：第五章相关推荐

最新文章

热门文章