文档章节

jquery的选择器之-表单对象属性过滤选择器

architect刘源源
 architect刘源源
发布于 05/23 11:28
字数 528
阅读 12
收藏 0
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单对象属性过滤选择器</title>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				//1.对表单内 可用input 赋值操作
				$("#btn1").click(function(){
					$ss = $("input:enabled").val("New Value");
				});
				//2.对表单内 不可用input 赋值操作
				$("#btn2").click(function(){
					$("input:disabled").val("New Value Too");
				});
				//3.获取多选框选中的个数
				$("#btn3").click(function(){
					var $cc = $(":checkbox:checked");
					alert($cc.length);
				});
				//4.获取多选框选中的内容
				$("#btn4").click(function(){
					var $cc = $(":checkbox:checked");
					//使用$.each()迭代数组
					$cc.each(function(){
						alert($(this).val());						
// 						alert(this.value);						
					});
// 					for(var i=0;i<$cc.length;i++){
// 						alert($cc[i].value);
// 					}
				});
				//5.获取下拉框选中的内容
				$("#btn5").click(function(){
					var $ss = $("select option:selected");
					$ss.each(function(){
						//DOM对象:this jQuery对象:$(this)
						alert(this.value);
					});
				});
			});
		</script>
	</head>
	<body>
		<h3>表单对象属性过滤选择器</h3>
		 <button id="btn1">对表单内 可用input 赋值操作.</button>
  		 <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
		 <button id="btn3">获取多选框选中的个数.</button>
		 <button id="btn4">获取多选框选中的内容.</button><br /><br />
         <button id="btn5">获取下拉框选中的内容.</button><br /><br />
		 
		<form id="form1" action="#">			
			可用元素: <input name="add" value="可用文本框1"/><br>
			不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
			可用元素: <input name="che" value="可用文本框2"/><br>
			不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
			<br>
			
			多选框: <br>
			<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
			<input type="checkbox" name="newsletter" value="test2" />test2
			<input type="checkbox" name="newsletter" value="test3" />test3
			<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
			<input type="checkbox" name="newsletter" value="test5" />test5
			<br><br>
			下拉列表1: <br>
			<select name="test" multiple="multiple" size="5">
				<option>浙江</option>
				<option selected="selected">辽宁</option>
				<option>北京</option>
				<option selected="selected">天津</option>
				<option>广州</option>
				<option>湖北</option>
			</select>
			
			<br><br>
			下拉列表2: <br>
			<select name="test2">
				<option>浙江</option>
				<option>辽宁</option>
				<option selected="selected">北京</option>
				<option>天津</option>
				<option>广州</option>
				<option>湖北</option>
			</select>
		</form>		
	</body>
</html>

仔细观察发现

© 著作权归作者所有

architect刘源源

architect刘源源

粉丝 164
博文 518
码字总数 922746
作品 0
浦东
程序员
私信 提问
jQuery基础与JavaScript与CSS交互-第五章

目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight Flex 什么是框架? 框架是程序员将一个又...

达叔小生
2018/08/03
0
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
2018/05/10
0
0
jQuery学习笔记之JavaScript脚本库和元素选择器研究[图]

jQuery学习笔记之JavaScript脚本库和元素选择器研究[图] jQuery是一套JavaScript脚本库,相当于Java的类库,将一些工具方法或者对象方法封装在类库中,方便用户使用。 工厂函数指的是这些内建...

原创小博客
2018/08/06
0
0
提升效率 jQuery选择器大全

提升效率 jQuery选择器大全 在jQuery 中,jQuery 为编写代码者提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本文主要对常用的jQuery 选择器进...

daniel-john
2014/04/21
0
0
转-JQuery选择器及radio,checkbox,select取值和反选

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元...

huntering
2015/08/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用lombok配置数据

导入lombok后,便可省略entity中繁琐的get,set方法,并且在xml文件中也应写的更加简洁 1.在pom中添加依赖 <lombok.version>1.16.20</lombok.version> <!-- https://mvnrepository.com/arti......

沉迷于编程的小菜菜
6分钟前
0
0
Linux awk使用案例教程

awk脚本   awk脚本通常由以下3部分构成:  BEGIN{ 这里面放的是执行前的语句 }  END {这里面放的是处理完所有的行后要执行的语句 }  {这里面放的是处理每一行时要执行的...

Linux就该这么学
13分钟前
0
0
Hive(四)——Hive的其他配置

一、

ittzg
15分钟前
0
0
iOS 倒计时

1、SGLCountDown

_____1____
16分钟前
0
0
[算法]图的最短路径算法

Dijkstra算法(单源最短路径,时间复杂度O(n^2),堆优化后O((m+n)logn),贪心算法) Floyd算法(Floyd-Warshall,插点法)(多源最短路径,时间复杂度O(n^3),空间复杂度O(n^2),动态规划算法) ...

Danni3
27分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部