1.单行文本框应用
获得和失去焦点改变样式
添加样式：
<style type="text/css">
.focus {
border: 1px solid #f00;
background: #fcc;
}
</style>
具体实现：
<body>
<form action="#" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="userName">名称：</label>
<input type="text" id="userName" />
</div>
<div>
<label for="password">密码：</label>
<input type="password" id="pass" />
</div>
</fieldset>
</form>
<script type="text/javascript">
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
</script>
</body>
2.多行文本框应用
● 高度变化
<body>
<form>
<div class="msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<div>
<textarea id="comment" rows="8" cols="30">jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写的更少,做的更多)。</textarea>
</div>
</div>
</form>
<script type="text/javascript">
var $comment = $("#comment");
$(".bigger").click(function(){
if($comment.height()<500){//如果高度小于500，每次点击高度增加50
$comment.height($comment.height()+50);
}
});
$(".smaller").click(function(){
if($comment.height()>50){//如果高度大于50，每次点击高度减少50
$comment.height($comment.height()-50);
}
});
</script>
</body>
● 滚动条高度变化
3.复选框应用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../script/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//全选
$("#checkedAll").click(function(){
$("[name=items]:checkbox").attr("checked",true);
});
//全不选
$("#checkedNo").click(function(){
$("[name=items]:checkbox").attr("checked",false);
});
//反选
$("#checkedRev").click(function(){
$("[name=items]:checkbox").each(function(){//each()
$(this).attr("checked",!$(this).attr("checked"));
});
});
});
</script>
<title>复选框应用</title>
</head>
<body>
<form>
你爱好的运动是：<br />
<input type="checkbox" name="items" value="篮球">篮球<br />
<input type="checkbox" name="items" value="足球">足球<br />
<input type="checkbox" name="items" value="羽毛球">羽毛球<br />
<input type="checkbox" name="items" value="乒乓球">乒乓球<br />
<input type="button" id="checkedAll" value="全选" />
<input type="button" id="checkedNo" value="全不选" />
<input type="button" id="checkedRev" value="反选" />
<input type="button" id="send" value="提交" /><br />
</form>
</body>
</html>
如上的代码，我刚开始在IE9上执行的时候，全选、全不选，第一次点击的时候是能够正确执行的，但是第二次再点的时候就没有反应了。在IE8上就是完全正确的。哎，不得不感叹：IE不同版本间的差异真大啊。
使用复选框取代全选、全不选按钮并根据复选框是否全选更新该复选框checkedAll状态
思路：对复选框组绑定单击事件；定义一个变量flag，初始化为true；检查复选框组中的复选框是否全部选中，如果有没有被选中的，flag赋为false；根据flag的值来更新“checkedAll"的状态。
<body>
<form>
你爱好的运动是：<br />
<input type="checkbox" name="items" value="篮球">篮球<br />
<input type="checkbox" name="items" value="足球">足球<br />
<input type="checkbox" name="items" value="羽毛球">羽毛球<br />
<input type="checkbox" name="items" value="乒乓球">乒乓球<br />
<input type="checkbox" id="checkedAll" value="全选/全不选">全选/全不选<br />
<input type="button" id="checkedRev" value="反选" />
<input type="button" id="send" value="提交" /><br />
</form>
<script type="text/javascript">
//全选或者全不选
$("#checkedAll").click(function(){
if(this.checked){
$("[name=items]:checkbox").attr("checked",true);
}else{
$("[name=items]:checkbox").attr("checked",false);
}
});
//反选
$("#checkedRev").click(function(){
$("[name=items]:checkbox").each(function(){//each()
$(this).attr("checked",!$(this).attr("checked"));
});
});
//检查是否全选以更新checkedAll状态
$("[name=items]:checkbox").click(function(){
var flag = true;
$("[name=items]:checkbox").each(function(){
if(!this.checked){
flag = false;
}
});
$("#checkedAll").attr("checked",flag);
});
</script>
</body>
4.下拉列表框应用
选中添加到右边、全部添加到右边、双击添加到右边
<body>
<div class="content">
<select multiple id="select_01" style="width:100px;height:160px">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
</select>
<div>
<span id="add">选中添加到右边>></span>
<span id="add_all">全部添加到右边>></span>
</div>
</div>
<div class="content">
<select multiple id="select_02" style="width:100px;height:160px">
</select>
<div>
<span id="remove">选中删除到左边>></span>
<span id="add_all">全部删除到左边>></span>
</div>
</div>
<script type="text/javascript">
//选中添加到右边
$("#add").click(function(){
var $options = $("#select_01 option:selected");
$options.appendTo("#select_02");
});
//全部添加到右边
$("#add_all").click(function(){
var $options = $("#select_01 option");
$options.each(function(){
$(this).appendTo("#select_02");
});
});
//通过双击添加到右边
$("#select_01").dblclick(function(){
var $options = $("option:selected",this);//获得选中的选项
$options.appendTo("#select_02");
});
</script>
</body>
我不明白为什么“var $options = $("option:selected",this);”这一句的“this”是个什么意思？没有功能是一样能够实现的。是不是jQuery选择器？
5.表单验证
用户名长度必须大于6；邮箱格式要正确；正则表达式。
<body>
<form>
<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 class="int">
<label for="info">资料：</label>
<input type="text" id="info" />
</div>
<div class="sub">
<input type="submit" id="send" value="提交" />
<input type="reset" id="res" value="重置" />
</div>
</form>
<script type="text/javascript">
//alert($("form :input.required").length);
//在必填选项后追加”*”
$("form :input.required").each(function(){//"form :input.required":form后面必须有个空格，否则找不到
//$(this).parent().append("<strong class='high'>*</strong>");
var $required = $("<strong class='high'>*</strong>");
$(this).parent().append($required);
});
$("form :input.required").blur(function(){
var $parent = $(this).parent();
$parent.find(".formtips").remove();//删除以前的提示
if($(this).is("#username")){//验证姓名
var username = this.value;//此处如果不另外声明一个变量，会使#username被赋值true或false
if(username="" || username.length<6){
var msg = "用户名不能为空并且长度要大于6个字符";
$parent.append("<strong class='formtips onError'>"+msg+"</strong>");
}else{
var msg = "输入正确";
$parent.append("<strong class='formtips onSuccess'>"+msg+"</strong>");
}
}
if($(this).is("#email")){//验证邮箱
var email = this.value;
if(email="" || (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(email))){
var msg = "请填写正确的邮箱";
$parent.append("<strong class='formtips onError'>"+msg+"</strong>");
}else{
var msg = "输入正确";
$parent.append("<strong class='formtips onSuccess'>"+msg+"</strong>");
}
}
});
//当点击提交时，校验必填项是否已经填写。如果没有，则阻止提交
$("#send").click(function(){
$("form :input.required").trigger("blur");
var errorLength = $("strong.onError").length;
if(errorLength == 0){
alert("注册成功");
}else{
alert("你填写的信息有误");
return false;
}
});
</script>
</body>
相关推荐
Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write.html、end.html、style.css。 1...
通过学习和理解这些案例，你可以更好地掌握jQuery在实际表单操作中的应用，提高网页交互的用户体验。 总结，jQuery提供了一套强大且易用的API来处理HTML表单元素，无论是在获取、设置值，还是在处理复选框和单选...
在Web开发中，jQuery作为一个非常流行的JavaScript库，简化了许多复杂的DOM操作，特别是对于表单数据的获取与处理方面提供了极大的便利。本文将详细讲解如何使用jQuery来获取不同类型的表单控件（如文本框、文本域、...
### jQuery表单验证插件详解 #### 一、概述 jQuery表单验证插件是一种用于简化Web表单处理过程的强大工具。它不仅能够帮助开发者轻松地实现表单数据的Ajax提交，还支持文件上传等功能，极大地提升了用户体验并降低...
jquery常用的表单操作很全很详细.rtf
**jQuery** 是一个轻量级、功能丰富的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery UI则是jQuery的一个扩展，提供了各种可重用的UI组件和交互效果，如对话框、滑块、排序列表、日期选择...
简洁的语法和跨平台的兼容性，极大的简化了javascript开发人员遍历HTML文档、操作DOM、处理事伯、执行动画操作AJAX的操作。...屏蔽浏览器差异，对DOM的操作提供了方便的扩展，易用的事件处理API和动画API数据接口。
1. **选择器与DOM操作**：利用JQuery的选择器，如`$("#myForm")`，选取表单元素，然后使用`.find()`或直接使用类名、ID等选择表单字段，如`$("#username"), $("#email")`等。 2. **事件绑定**：使用`.on()`方法绑定...
确保引入了最新的jQuery版本，以便利用其强大的DOM操作和事件处理能力。 其次，`myvalidate.js`可能是你自定义的验证规则或扩展，它允许你根据项目需求定制验证逻辑。例如，你可以创建新的验证方法，或者修改已有的...
本篇文章将详细讲解如何利用jQuery实现一个表单填写的分步步骤进度条样式代码，这在创建多步骤注册或购物车流程时非常有用。 首先，我们需要了解进度条的基本概念。进度条是一种可视化元素，用于表示任务或过程的...
"jQuery聚焦表单高亮"这个主题关注的就是如何利用jQuery库来优化表单元素的交互体验，尤其是当用户焦点切换到表单字段时，通过视觉上的高亮提示，提升用户的感知度和操作效率。jQuery是一个强大的JavaScript库，它...
下面，我们将详细讨论如何利用jQuery实现动态表单的各种操作。 1. **动态添加表单元素**： 使用jQuery，可以方便地通过`append()`或`insertAfter()`等方法将新的表单元素插入到已存在的HTML结构中。例如，如果要...
jQuery Validation Engine 是一个功能强大的表单验证插件，以其简单易用和丰富的自定义选项而受到开发者的青睐。 ## 1. jQuery Validation Engine 插件简介 jQuery Validation Engine 是一款基于 jQuery 库的验证...
jQuery表单验证插件** jQuery有许多优秀的表单验证插件，例如jQuery Validation Plugin。这个插件提供了丰富的验证规则和自定义错误消息功能。通过简单的配置，可以实现各种复杂的验证需求。 **4. 验证规则** - **...
jQuery作为一个强大的JavaScript库，提供了丰富的API和插件，可以方便地对表单元素进行美化和交互增强。本实例主要关注使用jQuery来美化form表单，包括input输入框、select下拉框、复选框和单选框等常见的表单元素。...
"jquery表单验证特效"这个主题涉及到使用jQuery进行表单验证，这是一种提高用户体验的有效方式，通过实时验证用户输入的数据，确保其正确性和完整性，避免提交无效或错误的信息。 表单验证通常是网页应用程序不可或...
首先，我们来看一下**jQuery**，这是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互。jQuery Form 验证插件充分利用了jQuery的优势，使得开发者可以通过简单的API调用来实现复杂的...
5. **回调函数**：在表单提交的各个阶段，如开始、成功、错误等，都可以设置回调函数进行特定操作。 6. **自动重试**：当网络问题导致请求失败时，可以设置自动重试机制，确保数据成功发送到服务器。 7. **兼容性**...
在IT行业中，前端开发是至关重要的一环，而jQuery作为一个强大的JavaScript库，极大地简化了DOM操作、事件处理以及动画效果的创建。今天我们将深入探讨的是一个关于jQuery的实用工具——"jquery form表单美化插件"。...