- 浏览: 1429761 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (363)
- oracle (43)
- 缓存策略 (4)
- 数据库设计 (7)
- IntelliJ IDEA (8)
- freemarker (3)
- JSP (12)
- java基础 (75)
- tomcat (14)
- 服务器 (10)
- maven (3)
- linux (21)
- e-learning (2)
- 手机开发 (1)
- 设计模式 (6)
- 技术之外 (2)
- 工具的使用 (8)
- HTML 5 (5)
- 网站前台 (38)
- 网站后台 (11)
- 项目管理 (12)
- 面试题 (5)
- 幽默 (0)
- 系统架构 (8)
- 创业 (10)
- div-css (5)
- 诗词歌赋 (1)
- 网络课堂组知识库 (4)
- 杂家 (3)
- android (12)
- 框架 (14)
- 读书笔记 (1)
- 孙子兵法 (1)
- mysql (3)
- 小人书 (0)
- Jquery (6)
- eclipse (2)
- 正则表达式 (1)
最新评论
-
a98709474:
写的很详细,看完了,明白了这种概念了
数据库水平切分(拆库拆表)的实现原理解析(转) -
a98709474:
MYSQL分库分表总结 -
CatchU:
7年前的招聘要求,厉害厉害
面试要求 -
luozhixiong:
<table class="bbcode&qu ...
MYSQL分库分表总结 -
沈寅麟:
好用
freemarker格式化
一. 重置表单
二. 文本框,文本区域
1:得到值:
或者:
2:清空内容
3:填充内容
三. 单选框
1:回填赋值
2:获取单选按钮的值:
3:获取一组名为(items)的radio被选中项的值*/
4:设置value=2的项目为当前选中项:
5:获取一组名为(items)的radio被选中项的值(若未被选中 则val() = undefined ):
6:radio单选组的第二个元素为当前选中值:
四. 多选框checkbox
1:得到多选框的值
2:使其未勾选
勾选
3:判断是否已经选中
五. 下拉框
1:获取下拉列表的值
2:回填赋值
方案2:
3:设置value=test的项目为当前选中项:
4:添加下拉框的option:
5:清空下拉框:
6:获取select被选中项的文本
7:select下拉框的第二个元素为当前选中值:
例子1
例子2
例子3:
例子4 : 防止重复提交
方案1 : 加在 按钮上
特点: 点击按钮就执行,发生在 表单验证逻辑之前
方案2:加在 form 上
特点: 发生在 表单验证逻辑之后 ,表单验证不通过,不会触发。推荐采用
方案 3:
如果上面方法都不灵就用这个:
$("form").each(function(){ .reset(); });
二. 文本框,文本区域
1:得到值:
var textval = $("#text_id").attr("value");
或者:
var textval = $("#text_id").val();
2:清空内容
$("#text_id").attr("value",'');
3:填充内容
$("#text_id").attr("value",'test');
三. 单选框
1:回填赋值
<span>性别:</span> <input id="sex" name="sex" type="radio" value="1"/> 男 <input id="sex" name="sex" type="radio" value="0"/> 女
<script language=javascript> $(document).ready(function() { $('[name="sex"]:radio').each(function() { if (this.value == 0) { this.checked = true; } }); }); </script>
2:获取单选按钮的值:
var valradio = $("input[@type=radio][@checked]").val();
3:获取一组名为(items)的radio被选中项的值*/
var item = $('input[@name=items][@checked]').val();
4:设置value=2的项目为当前选中项:
$("input[@type=radio]").attr("checked",'2');
5:获取一组名为(items)的radio被选中项的值(若未被选中 则val() = undefined ):
var item = $('input[@name=items][@checked]').val();
6:radio单选组的第二个元素为当前选中值:
$('input[@name=items]').get(1).checked = true;
四. 多选框checkbox
1:得到多选框的值
var checkboxval = $("#checkbox_id").attr("value");
2:使其未勾选
$("#chk_id").attr("checked",'');
勾选
$("#chk_id").attr("checked",true);
3:判断是否已经选中
if($("#chk_id").attr('checked')==true) { ... }
五. 下拉框
1:获取下拉列表的值
var selectval = $('#select_id').val();
2:回填赋值
<select name="sex" id="sex"> <option value="">请选择</option> <option value="0">男</option> <option value="1">女</option> </select>
$(document).ready(function() { $("#sex").attr("value", ${filter.sex}); });
方案2:
<select id="prStatCd" name="prStatCd"> <option value="">--请选择--</option> <option value="10">新建</option> <option value="20">确认</option> <option value="91">否决</option> </select>
$("select[@name=prStatCd] option").each(function(k,v) { if ($(this).val() == "${param.prStatCd}") { $('#prStatCd')[0].selectedIndex = k; return false; } });
3:设置value=test的项目为当前选中项:
$("#select_id").attr("value",'test');
4:添加下拉框的option:
$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")
5:清空下拉框:
$("#select_id").empty();
6:获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
7:select下拉框的第二个元素为当前选中值:
$('#select_id')[0].selectedIndex = 1;
例子1
$(function() { $("#isStu").click(function() { if ($(this).attr("checked")) { $(".ct7").show(); $(".ct7 *[required]").attr("required", true); } else { $(".ct7").hide(); $(".ct7 *[required]").attr("required", false); } }) $("#isStu").attr("checked", true); $(".level").click(function() { var typeValue = $(".level").index(this); if (typeValue == 0) { $("#classType").empty(); $("<option value=''>请选择班型</option>").appendTo("#classType"); $("<option>大学英语四级VIP全程班</option>").appendTo("#classType"); } else { $("#classType").empty(); $("<option value=''>请选择班型</option>").appendTo("#classType"); $("<option>大学英语六级VIP全程班</option>").appendTo("#classType"); } }); $(".level").click(); });
例子2
考试级别: <select id="type" class="cet" name="type"> <option value="0">全部</option> <option value="1">四级</option> <option value="2">六级</option> </select> <br> 所选班型: <select id="classType" class="cet" name="classType"></select> <script type="text/javascript"> $(document).ready(function() { $("#type").change(function() { $("#classType").empty(); var value = $(this).val(); if (value == 1) { $("<option value=''>请选择班型</option>").appendTo("#classType"); $("<option>大学英语四级VIP全程班</option>").appendTo("#classType"); $("<option>大学英语四级精品全程班</option>").appendTo("#classType"); } else if (value == 2) { $("<option value=''>请选择班型</option>").appendTo("#classType"); $("<option>大学英语六级VIP全程班</option>").appendTo("#classType"); $("<option>大学英语六级精品全程班</option>").appendTo("#classType"); } }) }); </script>
例子3:
<script type="text/javascript"> function del() { if(confirm("确定删除吗?")){ window.location = "/shaifenUserServletMaintain/-1?_method=updateStatus&ids=" + getIds(); } } function shtg() { window.location = "/shaifenUserServletMaintain/1?_method=updateStatus&ids=" + getIds(); } function cxsh() { window.location = "/shaifenUserServletMaintain/2?_method=updateStatus&ids=" + getIds(); } function getIds() { var ids = ""; $("input[name='id']").each(function() { if (this.checked) { if (ids != "") { ids += ","; } ids += this.value; } }); return ids; } $("document").ready(function() { $("#all").click(function() { if (this.checked) { $("input[name='id']").each(function() { this.checked = true; }); $("#qx").text("反选"); } else { $("input[name='id']").each(function() { this.checked = false; }); $("#qx").text("全选"); } }); }) </script> <div class="m1"> <a href="javascript:del()">批量删除</a> <a href="javascript:shtg()">批量审核通过</a> <a href="javascript:cxsh()">批量审核不通过</a> </div> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="tab1 m1" id="tab2"> <tr> <th width="40"> <span id="qx">全选</span> <input type="checkbox" id="all" name="all"> </th> <th width="60" align="center">ID</th> <th width="60" align="center">userId</th> <th width="120" align="center">姓名</th> <th width="100" align="center">级别</th> </tr> <c:forEach var="item" items="${list}" varStatus="status"> <tr> <td align="center"><input type="checkbox" id="id" value="${item.id}" name="id"/></td> <td align="center">${item.id}</td> <td>${item.userId}</td> <td><c:out value="${item.realName}" escapeXml="true"/></td> </tr> </c:forEach> </table>
例子4 : 防止重复提交
方案1 : 加在 按钮上
$("document").ready(function() { $("input:submit").each(function() { $(this).click(function() { setdisabled(this,true); return true; }); }); function setdisabled(obj) { setTimeout(function() { obj.disabled = true; }, 100); } })
特点: 点击按钮就执行,发生在 表单验证逻辑之前
方案2:加在 form 上
$("document").ready(function() { $("#form1").submit(function(){ setdisabled($("#tj")); }); function setdisabled(obj) { setTimeout(function() { obj.disabled = true; }, 100); } })
特点: 发生在 表单验证逻辑之后 ,表单验证不通过,不会触发。推荐采用
方案 3:
$("document").ready(function() { $("#form1").submit(function() { $("#tj").attr("disabled","true"); }); })
如果上面方法都不灵就用这个:
<script type="text/javascript"> var flag_submit = false; $(document).ready(function() { $("#form1").submit(function() { if(flag_submit){ return false; } flag_submit = true; }); }) </script>
发表评论
-
jquery tab切换
2015-01-13 12:32 1219<div class="log ... -
jquery 与 css相关
2014-12-17 12:52 6821: 遍历css 相关dom的值 <script typ ... -
table 合并行合并列
2014-12-15 10:51 2742跨多行、多列的表元(Table Span) 跨多列的表元 ... -
js 5秒之内禁止重复提交代码
2014-09-07 21:35 3641<script language="javas ... -
点按钮连接到新界面
2013-12-18 15:45 881<input type="button&quo ... -
开源编辑器
2013-05-02 10:33 1050http://xheditor.com/ -
子窗口向父窗口传值
2013-04-28 17:32 5236方案1: parent01.html <!doctyp ... -
“回到顶端”按钮实现
2013-04-28 16:40 1072<html> <head> ... -
用jquery实现输入框消失文字
2013-04-28 16:12 2059<html> <head> ... -
http 错误代码表
2013-04-01 11:35 1109所有 HTTP 状态代码及其定义。 代码 指示 2x ... -
美化alert
2013-03-08 12:58 2223<input type="button ... -
文本框只能输入数字
2013-02-19 12:17 1078只允许输入数字(不带小数点的) <input type= ... -
li float left
2012-10-11 09:11 1016<style> .tags { width ... -
同步表格异步表格
2012-09-13 13:05 1158<%@ page contentType="t ... -
js 保留2位小数
2012-09-07 16:09 873costVat.toFixed(2) -
控制文本框只能输入数字
2012-08-27 11:08 891... -
jquery ajax 提交表单大数据
2012-07-31 15:44 1819<input type="button ... -
js 刷新界面
2012-07-27 13:38 1055刷新当前页 location.reload() 如何刷新包含 ... -
前台面试题
2012-05-09 19:41 1507面试官:做一个图片轮播的脚本。 答题者:blablabla(总 ... -
javascript 闭包
2012-04-18 14:22 1009一、变量的作用域 要理解闭包,首先必须理解Javascrip ...
相关推荐
本文将深入探讨“jquery操作表单案例”中的关键知识点,包括输入元素(input)、文本区域(textarea)、单选按钮(radio)、复选框(checkbox)以及选择列表(select)的操作,特别是如何根据选择列表的文本值(text)来选定选项...
jQuery是一个流行的JavaScript库,可用于在网页上进行各种操作,包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分:FrontPage.html、write.html、end.html、style.css。 1、硬件要求:计算机一台 2...
在Web开发中,jQuery作为一个非常流行的JavaScript库,简化了许多复杂的DOM操作,特别是对于表单数据的获取与处理方面提供了极大的便利。本文将详细讲解如何使用jQuery来获取不同类型的表单控件(如文本框、文本域、...
本文实例总结了jQuery操作表单常用控件方法。分享给大家供大家参考。具体如下: 下面的JS代码列出了jQuery操作表单常用控件(包括select,radiobox,checkbox)的常用方法,相信一定有你需要的 操作radio的html代码 ...
实用jquery操作表单元素代码 /* 假设在一个表单中有一个按钮id="save" $(document).ready(function(){ $("#save").click(function(){ $("#save").attr("disabled",true);//设为不可用 $("#form1")[0].submit();/...
### jQuery表单验证插件详解 #### 一、概述 jQuery表单验证插件是一种用于简化Web表单处理过程的强大工具。它不仅能够帮助开发者轻松地实现表单数据的Ajax提交,还支持文件上传等功能,极大地提升了用户体验并降低...
**jQuery** 是一个轻量级、功能丰富的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery UI则是jQuery的一个扩展,提供了各种可重用的UI组件和交互效果,如对话框、滑块、排序列表、日期选择...
1. **选择器与DOM操作**:利用JQuery的选择器,如`$("#myForm")`,选取表单元素,然后使用`.find()`或直接使用类名、ID等选择表单字段,如`$("#username"), $("#email")`等。 2. **事件绑定**:使用`.on()`方法绑定...
本篇文章将详细讲解如何利用jQuery实现一个表单填写的分步步骤进度条样式代码,这在创建多步骤注册或购物车流程时非常有用。 首先,我们需要了解进度条的基本概念。进度条是一种可视化元素,用于表示任务或过程的...
确保引入了最新的jQuery版本,以便利用其强大的DOM操作和事件处理能力。 其次,`myvalidate.js`可能是你自定义的验证规则或扩展,它允许你根据项目需求定制验证逻辑。例如,你可以创建新的验证方法,或者修改已有的...
下面,我们将详细讨论如何利用jQuery实现动态表单的各种操作。 1. **动态添加表单元素**: 使用jQuery,可以方便地通过`append()`或`insertAfter()`等方法将新的表单元素插入到已存在的HTML结构中。例如,如果要...
"jQuery聚焦表单高亮"这个主题关注的就是如何利用jQuery库来优化表单元素的交互体验,尤其是当用户焦点切换到表单字段时,通过视觉上的高亮提示,提升用户的感知度和操作效率。jQuery是一个强大的JavaScript库,它...
jquery常用的表单操作很全很详细.rtf
jQuery Validation Engine 是一个功能强大的表单验证插件,以其简单易用和丰富的自定义选项而受到开发者的青睐。 ## 1. jQuery Validation Engine 插件简介 jQuery Validation Engine 是一款基于 jQuery 库的验证...
jQuery通过选择器(如$("#id")或$(".class"))选取HTML元素,并提供了丰富的API来进行操作。例如,`.html()`用于获取或设置元素的HTML内容,`.click()`用于绑定点击事件,`.val()`则用于获取或设置表单字段的值。 *...
通过添加特定的class或者ID,我们可以用jQuery选择这些元素并进行后续的美化操作。 接下来,`css`目录下的文件通常包含CSS样式表,这是实现表单美化的主要手段。我们可以定义自定义的样式规则,例如改变表单元素的...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的使用,尤其是在处理DOM操作、事件处理和动画效果方面。"jquery表单验证特效"这个主题涉及到使用jQuery进行表单验证,这是一种提高...
在IT行业中,前端开发是至关重要的一环,而jQuery作为一个强大的JavaScript库,极大地简化了DOM操作、事件处理以及动画效果的创建。今天我们将深入探讨的是一个关于jQuery的实用工具——"jquery form表单美化插件"。...
通过学习和理解这个项目,开发者可以更好地掌握jQuery在网页表单动态操作中的应用,提升前端开发技能。在实际开发中,可以根据具体需求进行调整和扩展,实现更复杂的功能,如表单验证、数据保存等。