jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected

时间：2023-02-28 07:46:54
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>表单对象属性过滤选择器</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>

    <style type="text/css">

    	body{

    		font-family: "Microsoft YaHei"

    	}

    	.cGreen{background-color: #4CA902}

    	.cPink{background-color: #ED4A9F}

    	.cBlue{background-color: #0092E7}

    	.cCyan{background-color: #01A6A2}

    	.cYellow{background-color: #DCA112}

    	.cRed{background-color: #B7103B}

    	.cPurple{background-color: #792F7C}

    	.cBlack{background-color: #110F10}

    	.hide{display: none;}

    </style>

    <script type="text/javascript">

    	/*

    		所谓表单对象属性过滤选择器：

    		就是过滤表单对象的属性，例如：

    		:enabled：选取所有可用元素。

    		<input name="id">一类的普通input标签；

    		就是可用的。

    		:disabled：选取所有不可用的元素。

    		 <input name="email" disabled="disabled" />

    		被强制声明为不可用的input标签。

    		:checked：选取所有被选中的元素框。

    		input:checked：

    		input所有type为type="checkbox"；

    		并且已经被选中：checked="checked"

    		:selected：选取所有被选中的选项列表。

    		<select>

    		  <option value="1">Flowers</option>

    		  <option value="2" selected="selected">Gardens</option>

    		  <option value="3">Trees</option>

    		</select>

    		|

    		<option value="2" selected="selected">Gardens</option>

    	*/

    	$(document).ready(function() {

    		// <input type="button" id="btn1" value=":enabled选取所有可用的单行文本input元素">

	    	/*

	    	注意这里是过滤两次，才行！

	    	先从所有中过滤出text纯文本的单行框:text；

	    	再从其中过滤出所有的可用的enabled的元素。

	    	*/

    		$("#btn1").click(function() {

    			// 首先通过表单过滤选择，选择出type为text的input标签

				console.log($(":text:enabled"));

				$(":text:enabled").addClass("cBlack");

			});

	    	// <input type="button" id="btn2" value=":disabled选取所有不可用的单行文本input元素">

	        /*

	    	注意这里是过滤两次，才行！

	    	先从所有中过滤出text纯文本的单行框:text；

	    	再从其中过滤出所有的可用的disabled的元素。

	    	disabled其实很像readonly的元素。

	    	*/

	    	$("#btn2").click(function() {

	    		// 首先通过表单过滤选择，选择出type为text的input标签

				console.log($(":text:disabled"));

				$(":text:disabled").addClass("cBlack");

			});

	        // <input type="button" id="btn3" value=":checked请先选择，然后选取所有被选中的单选、多选元素">

	        $("#btn3").click(function() {

				// 选中全篇所有checked。

	        	// console.log($(":checked"));

				// $(":checked").addClass("cBlack");

				// 通过基本选择出input然后通过表单对象属性过滤，只选中为input的checked。

				$("input:checked").each(function(index, obj) {

					// obj为DOM对象

					console.log("index = "+index+", 值为："+$(obj).val());

				});

			});

	        // <input type="button" id="btn4" value="设置 中国 被选中">

	        /*

		         怎么设置一个值被选中呢？

		         如果是radio(单选框)，则

		         只需要把radio的值设置为，

		         我们需要选中的属性就行了！

	        */

	        $("#btn4").click(function() {

	        	/*

	        	注意：这里的值要设置为[]数组的形式；

	        	但是因为是radio单选框的原因，只能放

	        	一个值。

	        	$(":radio[name='country']").val(["chn", "usa"]);

	        	如果设置多个的话，单选框会选中数组中的

	        	最后一个值。

	        	<

	        	因为这里只有一个radio，所以可以使用:radio

	        	全篇查询。但是如果当前页面有多个单选框的话，

	        	可能就要用div来分块，通过#div1:radio来获得了！

	        	>

	        	*/

	        	// 首先通过表单对象属性过滤选择出radio

				$(":radio[name='country']").val(["chn"]);

			});

	        // <input type="button" id="btn5" value="设置第一个select选中  编译原理">

	       	/*

	       	总结一下html中的三种选中框：

	       	标准单选框：input type="radio" name="" value="" 同一组name相同

	       	标准复选框：input type="checkbox" name="" value="" 同一组name相同

	       	select框：

	       	单选形式

	       	<select>

	       		<option></option>

	       		<option></option>

	       			... ...

	       	</select>

      		复选形式

   	       	<select multiple="multiple">

   	       		<option></option>

   	       		<option></option>

   	       			... ...

   	       	</select>

	       	select框没有特殊声明：multiple="multiple"的时候，

	       	都是单选框，特殊声明了之后才是复选框。

	       	选择都是[]，但是select因为可以声明多选，单选。有区别

	       	所以其中单选的时候，[]可以省略，但是建议保留[]方便记忆。

	       	标准单选框，复选框都是选中都是：checked。

	       	select框选中是：selected。

	       	*/

	        $("#btn5").click(function() {

				// 首先先获取第一个select，因为整篇有多个select。

				// $("select:first").val("编译原理");

				// 首先通过基本选择出select

	        	$("select:first").val(["编译原理"]);

			});

	        // <input type="button" id="btn6" value="设置第二个select选中  软件工程和数据库原理">

	        $("#btn6").click(function() {

				// 整篇只有两个select，选择最后一个select

				// 首先通过基本选择出select

				$("select:last").val(["软件工程", "数据库原理"]);

			});

	        // <input type="button" id="btn7" value="选取所有没有被选中的单选、多选元素">

	        $("#btn7").click(function() {

				// 获取没有被选中的单选、多选选项

				// 首先通过表单对象属性过滤选择出radio，通过表单对象属性过滤选择出checkbox

				$(":radio:not(:checked), :checkbox:not(:checked)").each(function(i, obj) {

					console.log($(this).val());

				});

			});

	        // <input type="button" id="btn8" value=":selected选取所有被选中的select下拉列表的option选项元素">

	        $("#btn8").click(function() {

	        	// 因为是select下嵌套option，所以要后代选择或者使用子元素选择！

	        	// 首先通过基本选择出select，再通过层级选择出option，再通过基本过滤选择not()，再通过表单对象属性过滤选择出:checked

	        	$("select option:not(:selected)").each(function(i, obj) {

					console.log($(obj).val());

				});

			});

    	});

    </script>

  </head>

  <body>

    <input type="text" name="text1" value="可用单行文本输入框">

    <input type="text" name="text2" value="不可用单行文本输入框" disabled="disabled">

    <select>

    	<option>软件工程</option>

    	<option>编译原理</option>

    	<option>数据库原理</option>

    </select>

    <select multiple="multiple">

    	<option>软件工程</option>

    	<option>编译原理</option>

    	<option>数据库原理</option>

    </select>

    <br><br>

    <input type="radio" name="country" value="chn">中国

    <input type="radio" name="country" value="usa">美国

    &nbsp;&nbsp;

    <input type="checkbox" name="language" value="Java">Java

    <input type="checkbox" name="language" value="IOS">IOS

    <input type="checkbox" name="language" value="Android">Android

    <br><br>

    <hr>

    <input type="button" id="btn1" value=":enabled选取所有可用的单行文本input元素">

    <input type="button" id="btn2" value=":disabled选取所有不可用的单行文本input元素">

    <input type="button" id="btn3" value=":checked请先选择，然后选取所有被选中的单选、多选元素">

    <input type="button" id="btn4" value="设置 中国 被选中">

    <input type="button" id="btn5" value="设置第一个select选中  编译原理">

    <input type="button" id="btn6" value="设置第二个select选中  软件工程和数据库原理">

    <input type="button" id="btn7" value="选取所有没有被选中的单选、多选元素">

    <input type="button" id="btn8" value=":selected选取所有被选中的select下拉列表的option选项元素">

  </body>

</html>

jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected的更多相关文章

  1. jQuery选择器之表单对象属性过滤选择器Demo

    测试代码: 08-表单对象属性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quot ...

  2. jQuery表单对象属性过滤选择器

    jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"> <input type="text" ...

  3. Jquery &vert; 基础 &vert; jQuery表单对象属性过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...

  4. 009 jquery过滤选择器-----------（表单对象属性过滤选择器 与 表单选择器）

    1.表单对象属性选择器 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  5. jQuery选择器之表单对象属性筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  6. jQuery 基本选择器 层次选择器 过滤选择器 内容过滤选择器 可见过滤选择器 属性过滤选择器 表单对象属性过滤选择器

  7. jquery 表单对象属性筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  8. jQuery中的内容、可见性过滤选择器（四、四）：&colon;contains&lpar;&rpar;、&colon;empty、&colon;has&lpar;&rpar;、&colon;parent、&colon;hidden、&colon;visible

    <!DOCTYPE html> <html> <head> <title>内容.可见性过滤选择器</title> <meta http ...

  9. jQuery选择器&lpar;表单元素过滤选择器&rpar;第八节

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. Python遇到字符编码出问题的一个相对万能的办法

    在使用Python做爬虫的过程中,经常遇到字符编码出问题的情况. UnicodeEncodeError: 'ascii' codec can't encode character u'\u6211' ...

  2. 使用Mysql Workbench 画E-R图

    MySQL Workbench 是一款专为MySQL设计的ER/数据库建模工具.你可以用MySQL Workbench设计和创建新的数据库图示,建立数据库文档,以及进行复杂的MySQL 迁移.这里介绍 ...

  3. 安卓手机 虚拟键盘输入用 position：fixed解决 ！！！

    下面 主要代码 方便看. 样式 <style> *{ margin:0; padding:0; } html{ height:100%;/*关键代码*/ } body{ height:10 ...

  4. 配置tomcat的虚拟路径

    配置tomcat的虚拟路径有两个地方需要配置,以eclipse为例: ①在tomcat的server.xml中的host节点内添加 <Context path="/meims/user ...

  5. 深入浅出设计模式——享元模式（Flyweight Pattern）

    模式动机 面向对象技术可以很好地解决一些灵活性或可扩展性问题,但在很多情况下需要在系统中增加类和对象的个数.当对象数量太多时,将导致运行代价过高,带来性能下降等问题.享元模式正是为解决这一类问题而诞生 ...

  6. 广州Uber优步司机奖励政策（1月18日~1月24日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  7. &lbrack;MSSQL&rsqb;最小公约数

    [摘要]一个朋友在展BOM的时候有这种需求,两列字段(数值):A ,B   A=用量,B=底数,组成用量=用量/底数.A/B,若能被整除,显示整除的结果,若不能整除显示分数形式A/B(分数形式要是约分 ...

  8. WPF DataGrid Drag

    自己实现的功能.代码比较简单的DataGrid的Drag处理,着重处理DataGrid里的拖动排序. using System; using System.Collections.Generic; u ...

  9. 面试经验And总结

    作为一个实习生,我大二即将读完,因为自己是大专的和本科没法比,没有他们的 知识基础,没有他们的充裕的时间,没有那个本科毕业证,没有学位证书.作为一个大专生我在找工作的时候总是充满了自卑,可自己有事那种 ...

  10. springboot启动关闭脚本

    springboot项目jar包启动,application.properties.jar包.shell脚本.static目录(静态页面和jar包分离)在同一目录下 [start.sh] #!/bin ...