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 - 425E Sereja and Sets 题解
题目大意: 我们有一个集合 S,其中包含了 m 个不完全相同的区间[l1,r1],[l2,r2]…[lm,rm] (1≤li≤ri≤n,li,ri 都为整数). 定义 f(S)=k,表示集合 S 中能 ...
- [luoguP1041] 传染病控制（DFS）
传送门 n <= 300 结果裸的dfs就直接过了.. 枚举每一层,枚举删除每一层的边,然后把删除的边所连接的子树全部删去 代码 #include <vector> #include ...
- Flask（1）：基本示例、配置文件、路由、请求和响应、模板渲染
Flask的特点: - pip install flask - 短小精悍.可扩展性强的 web框架 注意:上下文管理机制 - 依赖 wsgi:werkzeug Flask的简单示例: from fla ...
- Django：（5）分页器 & forms组件
Django组件:分页器 目录结构: urls.py from django.contrib import admin from django.urls import path from app01 ...
- 好用的window命令
Nslookup-------IP地址侦测器 chkdsk-----Chkdsk磁盘检查 regedt32-------注册表编辑器 regedit----注册表 perfmon----计算机性能监测 ...
- Linux下汇编语言学习笔记0 --- 前期准备工作
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- Thinkphp5.0 的Model模型
Thinkphp5.0 的Model模型 新建user模型User.php: <?php namespace app\index\model; use think\Model; class Us ...
- 选择器(E:hover/E:active/E:focus的使用)
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
- Ubuntu 16.04开机自动挂载硬盘分区（转）
说明:如果挂载以前旧硬盘分区时不需要第2.3步! 1.查看Linux硬盘信息: sudo fdisk -l 2.格式化新硬盘(很危险,注意操作时确定硬盘分区的位置): sudo mkfs.ext4 / ...
- [52ABP系列] - 001、SPA免费项目模版搭建教程
前言 这个项目是基于 ABP ASPNetCore 免费版,整合 NG-Alian 和 NG-Zorro 的项目,所以比较适合熟悉 ABP 和 Angular2+ 的开发人员, 如果你是新手,学习的话 ...