jQuery——表单应用（1）
实现结果：聚焦表单的input部分时，input格式变更为CSS样式（获取和失去焦点改变样式）
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link type="text/css" href="01.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<form action="#" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称：</label>
<input id="username" type="text"/>
</div>
<div>
<label for="password">密码：</label>
<input id="password" type="password"/>
</div>
<div>
<label for="msg">详细信息：</label>
<textarea id="msg"></textarea>
</div>
</fieldset>
</form>
<script type="text/javascript">
$(function(){
$("input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
})
})
</script>
</body>
</html>
CSS：
.focus{
border: 1px solid red;
background: red;
}
jQuery——表单应用（1）的更多相关文章
- Jquery表单提交后获取返回Json值
1.给form添加id值: <form action="/News/SaveMessage" method="post" accept-charset=& ...
- Jquery表单序列化和AJAX全局事件
Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...
- 【jquery】Validform，一款不错的 jquery 表单验证插件
关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- jquery表单验证使用插件formValidator
JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...
- jQuery打造用户注册时获取焦点文本框出现提示jquery表单特效
jQuery打造用户注册时获取焦点文本框出现提示效果的jquery表单特效 当获取焦点时,会分别的弹出相应的信息提示框,失去焦点就会隐藏提示信息. 效果兼容性很高,适用浏览器:IE6.IE7.IE8. ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- jQuery表单验证以及将表单序列化为json对象小练习
jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...
- JQuery 表单验证--jquery validation
jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...
随机推荐
- Codeforces Round #259 (Div. 2) D
D. Little Pony and Harmony Chest time limit per test 4 seconds memory limit per test 256 megabytes i ...
- [SCOI2008]奖励关 - 状压动规 - 概率与期望
Description 你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关.在这个奖励关里,系统将依次随机抛出k次宝物,每次你都可以选择吃或者不吃(必须在抛出下一个宝物之前做出选择,且现在决定不吃的宝 ...
- EasyUI单击行数据时动态编写editor
$.extend($.fn.treegrid.methods, { addEditor: function (jq, param) { if (param instanceof Array) { $. ...
- idea使用之maven中央仓库索引更新
接着上篇,上篇是更新本地已有的索引,这样在编写pom文件的时候,可以自动提示,但如果我们能够把整个中央仓库的索引更新下来,那不是更方便啦. 打开settings-->Build,Executio ...
- 牛客网 中南林业科技大学第十一届程序设计大赛J题 二分+线段树
https://www.nowcoder.com/acm/contest/124#question 题意 找第一个不小于K的数的下标,然后对它前一个数加一 解析 我们可以维护一个最大值数组 1 ...
- TCP/IP学习笔记（3）----IP，ARP，RARP协议
把这三个协议放到一起学习是因为这三个协议处于同一层(网络层协议),ARP协议用来找到目标主机的Ethernet网卡Mac地址,IP则承载要发送的消息.数据链路层可以从ARP得到数据的传送信息,而从IP ...
- Cookie对象的特点
1.存储少量不重要的数据2.存储在客户端的文本文件中(必须设置有效期,否则不被存储)3.安全性差4.存储的数据类型--字符串5.浏览器窗口无关,但与访问的站点相关6.具体特定的过期时间和日期7.在客户 ...
- 七夕节 看到很多停止更新的blog 莫名有点淡淡的忧桑
又是一年七夕.又是一年单身.看到很多停止更新的blog, 仿佛看到了一茬一茬的程序猿 进入it 圈 又离开it圈,就有莫名的忧桑
- SpringMVC之application-context.xml，了解数据库相关配置
上一篇SpringMVC之web.xml让我们了解到配置一个web项目的时候,怎样做基础的DispatcherServlet相关配置.作为SpringMVC上手的第一步.而application-co ...
- Python3 读取和写入excel
https://blog.csdn.net/weixin_43094965/article/details/82226263一.Excel 1.Excel文件三个对象 workbook: 工作簿,一个 ...