文档章节

第5章 jQuery对表单、表格的操作及更多应用

hey--老妖
 hey--老妖
发布于 2017/03/14 15:44
字数 349
阅读 5
收藏 0

表单聚焦改变颜色 切换

<form action="#">
		<fieldset>
			<legend>个人基本信息</legend>
			<div>
				<lable>名称:</lable>
				<input type="text">
			</div><br>
			<div>
				<lable>密码:</lable>
				<input type="password">
			</div><br>
			<div>
				<lable>详情信息:</lable>
				<textarea name="" id="" cols="30" rows="10"></textarea>
			</div>
			<input type="button" value="提交">
			<input type="reset" value="重置">
		</fieldset>
	</form> 
$(function(){
		$(":input").focus(function(){
				$(this).addClass("focus")
		}).blur(function(){
				$(this).removeClass("focus")
		})
})

复选框应用

	<form action="#">
		你爱好的运动是?<br>	
		<input type="checkbox" name="item" id="">足球
		<input type="checkbox" name="item" id="">篮球
		<input type="checkbox" name="item" id="">羽毛球
		<input type="checkbox" name="item" id="">跳绳<br>
		<input type="button" value="全选" id="CheckedAll">
		<input type="button" value="全不选" id="CheckedNo">
		<input type="button" value="反选" id="CheckedRev">
		<input type="button" value="提交" id="send">
	</form>
$(function(){
	$("#CheckedAll").click(function(){
		$('[name=item]:checkbox').attr('checked',true)  //全选
	})
	$("#CheckedNo").click(function(){
		$('[name=item]:checkbox').attr('checked',false)  //全不选
	})
	$("#CheckedRev").click(function(){
		$("[name=item]:checkbox").each(function(){
			this.checked=!this.checked                   //反选
		})
	})
	$("#send").click(function(){
		var str="你选中的是:\r\n";
		$("[name=item]:checkbox:checked").each(function(){   //提交
			str+=$(this).val()+"\r\n"
		})
		alert(str)
	})
})

全选、反选的另一种方式
<form action="#">
		你爱好的运动是?<br>
		<input type="checkbox" name="item" id="CheckedAll" value="全选/全不选">全选/全不选	
		<input type="checkbox" name="item" id="" value="足球">足球
		<input type="checkbox" name="item" id="" value="篮球">篮球
		<input type="checkbox" name="item" id="" value="羽毛球">羽毛球
		<input type="checkbox" name="item" id="" value="跳绳">跳绳<br>
		
		<input type="button" value="提交" id="send">
	</form>


$("#CheckedAll").click(function(){
	$('[name=item]:checkbox').attr("checked",this.checked)
})

 

© 著作权归作者所有

共有 人打赏支持
上一篇: SVG
hey--老妖
粉丝 3
博文 38
码字总数 21133
作品 0
潮州
前端工程师
私信 提问
jQuery对表单、表格的操作及更多的应用

jQuery对表单、表格的操作及更多的应用 1 表单应用 一个表单有3个基本组成部分。 (1) 表单标签:包含处理表单数据所用的服务器端应用程序URL以及数据提交到服务器的方法 (2) 表单域:包含文本...

zhangda89
2011/10/07
0
0
小长假过后的程序员学习书籍

[+]查看原图 小长假刚刚过去,朋友们要赶紧从休假的状态中走出来,拿起书本,开始长假后的新征程。本月@图灵教育给大家带来了很多重点图书,受众面很广。希望你们能喜欢。 Head First系列经典...

生气的散人
2013/10/09
861
4
Web前端开发必备:《Jquery实战》第3版 介绍

目标读者 本书适合想深入学习jQuery的Web开发人员、全栈工程师、架构师。jQuery是互联网上最流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了...

frankxulei
2018/06/26
0
0
使用 jQTouch 增强您的下一个移动 web 应用程序

简介: 对 web 开发的兴趣,包括移动 web 应用程序,从未像现在这般高涨。一些开发桌面或者服务器端应用的开发人员也开始对移动 web 感兴趣。然而,许多人想要将他们目前的 web 开发技巧应用...

IBMdW
2011/11/14
3.5K
3
2009 年度最佳 jQuery 插件

jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。本文是 webdesig...

红薯
2009/12/12
2.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Netty如何实现Reactor模式

在前面的文章中(Reactor模型详解),我们讲解了Reactor模式的各种演变形式,本文主要讲解的则是Netty是如何实现Reactor模式的。这里关于Netty实现的Reactor模式,需要说明的是,其实现的模式...

爱宝贝丶
6分钟前
0
0
前端面试:谈谈 JS 垃圾回收机制

摘要: 不是每个人都回答的出来... 原文:前端面试:谈谈 JS 垃圾回收机制 作者:前端小智 最近看到一些面试的回顾,不少有被面试官问到谈谈JS 垃圾回收机制,说实话,面试官会问这个问题,说...

Fundebug
7分钟前
0
0
修改django中的querydict

修改django中的querydict 在正常的请求/响应周期中访问时,request.POST和request.GET上的QueryDicts将是不可变的.要获得可变版本,您需要使用QueryDict.copy().或者,使用一个小技巧 # da...

_Change_
16分钟前
0
0
php简易缓存函数

不需要特别复杂的缓存的时候可以采用简易缓存,设置缓存有效期,有效返回数据,无效返回无效.然后每日清空一下所有缓存.毕竟缓存太多了也占地方 /** * 缓存 * @param $key 缓存名 * @p...

xiaogg
19分钟前
0
0
linux 使用文件增加虚拟内存 swap

之前买了个云服务器玩,不过是最低配置的1核1G,后来发现这个内存太小了,随便装几个软件就不行了,内存消耗较大的像 redis 运行起来很多问题。 这些时间了解了下 docker 容器,去尝试了下发...

非摩尔根
23分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部