趣图妹妹趣图妹妹04-16 09:22

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

<!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>

官场书屋二维码

000
评论
欢迎投稿

热搜标签

神评线程池RStudioPyinstallerNavicatMATLABEclipseARMR语言C语言FCNIpynbplustokenTensorflowword2vecRNNFasterRCNNHTTPrequestsCDNHadoopwget元字符DubboOSSDBAurllibRAC子网掩码子网划分朴素贝叶斯达观杯opencv蓝桥杯多线程IPv4IPv6VLSMOSIIP地址堆栈溢出二分查找哈希表哈希算法线程假死MYSQLJNI分布式中间件热更新同步调用异步调用异步执行JSONThinkPHPplus币scratchHystrixMQ消息队列RabbitMQ消息中间件AOPsqlserverInnoDBMODDLLTomcatAPIReactReduxOAuthStreamWebFluxNSObjecthashcodeHaproxyhttpclienthybridappSpringBoot大数据变现并行计算TeamviewerwebstormPycharmIDEAJetBrainsAjaxXpathbeautifulsoupJDK爬虫华为阿里巴巴腾讯百度滴滴美团字节跳动今日头条抖音SQL360一致性UMLReadWriteLock读写锁HTML数据解析bs4deepinGPUreactnativeRedis小米京东fiddler抓包numpy搜索引擎推荐引擎Scrapy网易搜狐负载均衡新浪ndarrayAndroid安卓iOS苹果亚马逊谷歌Chrome微软区块链软件测试架构师ACMHDU校赛单片机CNN卷积神经网络Dialog建造者模式反向代理量子编程BuildergolangJavaBeanAndroidSutido知识库知识图谱sublimeemmetVim微服务Brackets测序平台IonTorrent数据分析Unix基因检测链表单链表GradlepluginsynchronizedDialogFragmentmybatis算法一元运算符并行接口串行接口串口serial以太口以太币Csharp线性表存储结构数据结构GitLabPackageControl面试题ParallelPATReact割韭菜VueVuejsmui编程函数数据挖掘视频教程层次聚类PandasAtom文本检索少儿编程检索系统MCUProcessing数据结构RFIDARouter强引用软引用弱引用生成器人工智能创建型模式KotlinDSLA星算法A*算法强化学习马氏过程ndarrayleetcode阿里云捡尸云计算chardet抖音jupyterpysparkOpenStackhotfix蚂蚁金服继承变量构造函数scp命令程序员ShadowrocketutilsDbutils耦合vmtoolsThreadPoolsocket中台textareaACE正则表达式TokenSolr布隆过滤器布隆996马云马化腾李彦宏刘强东周鸿祎小程序雷军张一鸣王兴程维任正非李笑来源码资本红杉资本LogicmonitorSaaS高可用目标检测CIO阿博茨科技东皇太一每日优鲜用友裁员神评局编程猫记忆承载5GGA-RPN苏明哲堆栈队列董明珠torrent渡边太太余额宝gc算法B站分布式前端面试戴卫国thinkeyANR计算机编程儿童编程木易杨快手神回复最毒神评论Nodejs蔡徐坤edge方舟支付宝AWS乔布斯比尔盖茨贝索斯扎克伯格公众号敏捷开发Bittorrent三表龙门阵商务范邓潍倪大红DOSDDOS科创板纪源资本GGV源代码Lambda表达式抖音小程序元器件PCB摩尔定律IPO融资CVSIBMHDFSMapReduce川口耕介Flutter产品经理码农程序猿PMCTOCEO套接字UDP编程语言csvJVMjsondemo字符串chartjsDevOps持续交付运维HiveFlinkApache物联网DataSetNetflix数据交互JSPAPP虚函数AIOpsLDAPTkinterseleniumICOPUAListViewNotification戴卫国GridViewDataGridPopupWindowContentProvider贪心算法动态规划算法周志华比特币监督学习吴恩达半监督学习无监督学习训练样本没有免费午餐定理迁移学习概念学习归纳偏好假设空间线性模型贝叶斯六边形架构自然语言处理MinGWPthreadUIButtonCLion黑客菜鸟小白BIOCVPR合鲸资本霍中彦赵胜工业40AzureERP软件工程Web应用OpenMVG软件架构linuxbisectlsofRPCsonar代码质量管理持续集成项目管理虚拟化Mahout推荐算法hibernate搜索算法性能指标POSA视频中间件NVRPACJVM调优web性能优化DB性能优化InfluxDBzookeeper 数据库调优海思芯片何庭波CPU半导体inteloracle商汤科技代码编辑器聂云宸CSS高通开源iSCSI数组排序二叉树以太网ARPOSI分层模型TopKelasticsearch三次握手四次挥手客户端服务器希尔排序冒泡排序TensorBoard近邻传播算法APAP聚类算法JavaScript聚类算法算法JuliaIEEEregex正则小说编程ROS散列树kali散列算法Metaspace推荐系统回溯算法遍历集合迭代器全局函数锁死H5ServletWindowsequals互斥锁条件变量数据流转工业相机高效编程抓包丘成桐哈佛信号量python控制输出QtBATCAMVTChain通证公链以太坊私有链联盟链Jquery公有链无人驾驶bugArduino旋转矩阵存储引擎自学引擎引擎LayaAir开发者社区session问答社区MFC免费教程安装教程测试教程pdf电子书USB装饰器单例模式cookiemakefileluceneMyISAM存储sqldatasourcePartition分区降序索引索引数据库索引聚簇索引matlab单向HttpRunner微信微博网红内存模型JMM底层实现原理io同步异步调用机器学习异步阻塞注入攻击游戏编程小游戏手游桌游B站OpenJDK谷子帝嵌入式王志会神点评SPOSEOSGC垃圾回收代码重构代码LambdaSVG比特币pcc教程cdn局域网依赖注入类加载机制排序算法序列化构建工具闭包FPGA外包私活网站MapReduceHTML5接口接口回调解耦anchornms操作系统非极大值抑制gcc编译器静态库动态库yumcmakerpmLVM安装命令Ubuntu监控告警ELK部署软件仓库仓库软件TeamTalk二次开发devtoolsetGNUVuex桌面环境deepfakes换脸RedditMIDIH2数据库BugkuCTF代码审计源码回文数ArchLinux数素数华为软件精英挑战赛虚拟机虚拟化管理虚拟化反向传播反向传播算法ZabbixkuduimpalaVMware分区表文本情感分析意见挖掘倾向性分析kerasMaskRCNN图像增强DeepMaskSharpMaskMultiPathNetredhat全栈工程师全栈yoloSSD可视化pytorch相似度算法矩阵分解svd奇异值分解mavenALS徐刚博士热修复插件化SSMRecyclerViewcheckBox购物车ijkplayerionicDagger2junitOkhttpRecyclerRecyclerView生成式对抗网络天猫精灵语音控制语音识别知乎Win10杀毒软件Docker杀毒深度学习LaTeXcaffejmeterSDKchmodRWX面试JoomlaCMSTinyOSGitGitHubCentOSXshellgormWebSocketRaft神评论共识算法vectorJAVAOOObeliskUTXOGo语言POWPaxosPBFTSpark

聊骚我们

神评微信公众号 关注神评公众号