`

尚硅谷:jQuery的表单对象属性过滤选择器

阅读更多

1、jQuery的表单对象属性过滤选择器

 

2、代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery的表单对象属性过滤选择器</title>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				//1.对表单内可用input赋值操作
				$("#btn1").click(function(){
					//使所有的可用的单行文本框的value值变为尚硅谷
					//alert($(":text:enabled").val());
					$(":text:enabled").val("尚硅谷");
				});
				//2.对表单内不可用input赋值操作
				$("#btn2").click(function(){
					$(":text:disabled").val("www.atguigu.com");
				});
				//3.获取多选框选中的个数
				$("#btn3").click(function(){
					var num = 
						$(":checkbox[name='newsletter']:checked").length;
					alert(num);
				});
				//4.获取多选框选中的内容
				$("#btn4").click(function(){
					var cont = "";
					$(":checkbox[name='newsletter']:checked").each(function(){
						cont += this.value + " ";
					});
					alert(cont);
				});
				//5.获取下拉框选中的内容
				$("#btn5").click(function(){
					//实际被选择的不是 select, 而是 select 的 option 子节点
					//所以要加一个 空格. 
					//var len = $("select :selected").length
					//alert(len);
					//因为 $("select :selected") 选择的是一个数组
					//当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了. 
					//alert($("select :selected").val());
					//jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在
					//得到的 DOM 对象, 而不是一个 jQuery 对象
					var cont = "";
					$("select :selected").each(function(){
						cont += this.value + " ";
					});
					alert(cont);
				});
				
			})
		</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="true" value="不可用文本框"/><br>
			可用元素: <input name="che" value="可用文本框2"/><br>
			不可用元素: <input name="name" disabled="true" 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" style="height: 100px">
				<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><br>
			<textarea rows="" cols=""></textarea>
		</form>		
	</body>
</html>

 

3、原始页面

 

4、案例1

 

5、案例2

 

6、案例3

 

7、案例4

 

8、案例5

 

 

  • 大小: 25 KB
  • 大小: 26.1 KB
  • 大小: 30.3 KB
  • 大小: 31.5 KB
  • 大小: 29.9 KB
  • 大小: 157.8 KB
  • 大小: 22.1 KB
分享到:
评论

相关推荐

    jquery表单对象属性过滤选择器实例分析

    主要介绍了jquery表单对象属性过滤选择器,实例分析了jQuery选择器的相关使用技巧,需要的朋友可以参考下

    尚硅谷jQuery视频教程(25集)

    尚硅谷_佟刚_jQuery_表单元素过滤选择器【】11.尚硅谷_佟刚_jQuery_第一天小结【】12.尚硅谷_佟刚_jQuery_选择器的练习【】13.尚硅谷_佟刚_jQuery_创建节点及插入节点【】14.尚硅谷_ 资源太大,传百度网盘了,链接在...

    jQuery表单对象属性过滤选择器实例详解

    本文实例讲述了jQuery表单对象属性过滤选择器。分享给大家供大家参考,具体如下: &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;2-11&lt...

    日期选择器:jquery datepicker的使用

    日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用

    尚硅谷_教学课件_jQuery

    尚硅谷关于jQuery学习的教学课件,有需要的可以下载参考(*^▽^*)

    尚硅谷JQuery视频教程

    尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程

    jQuery表单域属性过滤器用法分析

    本文实例讲述了jQuery表单域属性过滤器用法。分享给大家供大家参考。具体分析如下: 表单内包含各种各样的表单域,使用表单域属性选择器可以很好的获取已被选中的单选按钮,复选框以及列表项,也可以根据是否可用从...

    最全面的jQuery基础知识

    看完“最全面的jQuery基础知识”文件包,你就能详细了解jQuery的代码规则。 文件包更是你进行jQuery开发的参考手册。 ... ...6、表单对象属性过滤选择器 //不用加双引号的选择器 $(document) $(this)

    jquery表单验证框架:jquery.validate.zip

    jquery表单验证框架:jquery.validate.zip 附:中文API 文档

    jQuery选择器之基本过滤选择器用法实例分析

    按照过滤规则的不同,我们通常把jQuery过滤选择器分为:基本过滤、属性过滤、内容过滤、子元素过滤、表单对象属性过滤、可见性过滤等。今天我们主要学习一下其中的“基本过滤选择器”。 一、:first 选

    【推荐】高清jquery视频教程下载

    jquery缩写 4:基本选择器1 5:基本选择器2 6:基本选择器3 7:基本选择器4 8:层次选择器1 9:层次选择器2 10:层次选择器3 11:层次选择器4 12:过滤选择器1 13:过滤选择器2 14:过滤选择器3 15:过滤选择器4 16:过滤选择器5 ...

    jQuery教程学习

    第十节:jQuery速成 - 表单对象的获取 第十一节:jQuery速成 - 元素属性的设置与移除 第二章:进阶篇 - 对象的筛选 第十二节:jQuery速成 - 过滤 第十三节:jQuery速成 - 查找 第十四节:jQuery速成 - 串联 第三章:...

    JQuery表单过滤器

    简单的JQuery表单过滤器演示,对初学者应该有帮组!

    尚硅谷_jQuery

    jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多....强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax 出色的浏览器兼容性 链式操作方式 ……

    jQuery基本过滤选择器使用介绍

    其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种 –&gt; &lt;title&gt;使用jQuery基本过滤选择器&lt;/title&gt; &...

    JQuery中属性过滤选择器用法实例分析

    主要介绍了JQuery中属性过滤选择器用法,实例分析了jQuery属性过滤选择器的相关使用技巧,需要的朋友可以参考下

    jQuery第4天知识点:jQuery节点操作、jQuery特殊属性操作、jQuery事件机制.zip

    jQuery第4天知识点:jQuery节点操作、jQuery特殊属性操作、jQuery事件机制.zip

    jQuery 3.1 标准课程第二章 选择器表单对象属性

    jQuery 3.1 标准课程第二章 选择器表单对象属性选择器

Global site tag (gtag.js) - Google Analytics