敌敌畏开盖赢大奖敌敌畏开盖赢大奖04-16 09:22

jQuery中的表单过滤选择器(四、七)::input、:text、:password、:radio、:checkbox、:file等

<!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">
    	$(document).ready(function() {
    		// <input type="button" id="btn1" value=":input选取所有input元素">
    		/*
    			这里的input包括所有的input标签;
    			不管type是button、checkbox、
    			file、hidden、image、password、
    			radio、reset、submit、text。
    			以及几个特殊的:
    			<select><option></option></select>、
    			<textarea></textarea>、
    			<button></button>
    		*/
    		$("#btn1").click(function() {
				console.log($(":input"));
				$(":input").addClass("cBlack");
			});
    	    
    		// <input type="button" id="btn2" value=":text选取单行文本框">
    		/* 
    		所谓单行文本框,目前已知的是<input type="text">;
    		type为text的input文本框。
    		*/
    	    $("#btn2").click(function() {
				console.log($(":text"));
				$(":text").addClass("cBlack");
			});
    	    
    		// <input type="button" id="btn3" value=":password选取密码框">
    	    /* 
    		所谓单行文本框,目前已知的是<input type="password">;
    		type为password的input文本框。
    		*/
    		$("#btn3").click(function() {
				console.log($(":password"));
				$(":password").addClass("cBlack");
			});
    		
    		// <input type="button" id="btn4" value=":radio选取单选radio元素">
    	    /* 
    		type为radio的input文本框。
    		*/
    		$("#btn4").click(function() {
				console.log($(":radio"));
				$(":radio").addClass("cBlack");
			});
    	    
    		// <input type="button" id="btn5" value=":checkbox选取复选checkbox元素">
    		/* 
    		type为checkbox的input文本框。
    		*/
    	    $("#btn5").click(function() {
				console.log($(":checkbox"));
				$(":checkbox").addClass("cBlack");
			});
			
    	    // <input type="button" id="btn6" value=":submit选取提交按钮submit元素">
			/* 
    		type为submit的input文本框。
    		*/
    	    $("#btn6").click(function() {
				console.log($(":submit"));
				$(":submit").addClass("cBlack");
			});
    	    
    		// <input type="button" id="btn7" value=":image选取图片image元素">
    		/* 
    		只能是type为image的input文本框。
    		*/
    	    $("#btn7").click(function() {
				console.log($(":image"));
				$(":image").addClass("cBlack");
			});
    	    
    		// <input type="button" id="btn8" value=":reset选取重置按钮reset元素">
    	    /* 
    		只能是type为reset的input文本框。
    		*/
    		$("#btn8").click(function() {
				console.log($(":reset"));
				$(":reset").addClass("cBlack");
			});
    	    
    		// <input type="button" id="btn9" value=":button选取按钮元素">
    	    /* 
    		可以是type为button的input文本框,也可以是<button></button>
    		*/
    		$("#btn9").click(function() {
				console.log($(":button"));
				$(":button").addClass("cBlack");
			});
    		
    		// <input type="button" id="btn10" value=":file选取文件元素">
    		/* 
    		type为file的input文本框。
    		*/
    	    $("#btn10").click(function() {
				console.log($(":file"));
				$(":file").addClass("cBlack");
			});
    		
    		// <input type="button" id="btn11" value=":hidden选取隐藏input元素,将隐藏div显示">
    		/*
    		这里的这个hidden其实和可见性选择器相同;
    		所以这里的hidden不仅可以显示隐藏的input标签,所有隐藏的标签,都能被选择出来!
    		*/
    		$("#btn11").click(function() {
				/*
    			// 注意这个隐藏的值:
    			// 这个hidden会选择出所有没有在页面上显示出来的div元素。
				console.log($(":hidden"));
				$(":hidden").addClass("cBlack");
				*/
				//将隐藏div显示出来
    			$("div:hidden").show();//将隐藏显示出来
    			console.log($(":input:hidden").val());//selector连着使用表示是并且的过滤条件
			});
		});
    </script>
  </head>
  
  <body>
    <input type="text" name="text1" value="单行文本输入框">
    <input type="password" value="密码输入框">
    <textarea rows="3" cols="10">多行文本输入区域textarea</textarea>
    <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>
    <input type="submit" value="提交按钮">
    <input type="image" src="logo.png">
    <img alt="图片" src="logo.png">
    <input type="reset" value="重置按钮">
    <input type="file" name="file">
    <button>button按钮</button>
    <input type="hidden" name="hideInput" value="you found it">
    <div style="display:none">隐藏div</div>
    <br><br>
    <hr>
    <input type="button" id="btn1" value=":input选取所有input元素">
    <input type="button" id="btn2" value=":text选取单行文本框">
    <input type="button" id="btn3" value=":password选取密码框">
    <input type="button" id="btn4" value=":radio选取单选radio元素">
    <input type="button" id="btn5" value=":checkbox选取复选checkbox元素">
    <input type="button" id="btn6" value=":submit选取提交按钮submit元素">
    <input type="button" id="btn7" value=":image选取图片image元素">
    <input type="button" id="btn8" value=":reset选取重置按钮reset元素">
    <input type="button" id="btn9" value=":button选取按钮元素">
    <input type="button" id="btn10" value=":file选取文件元素">
    <input type="button" id="btn11" value=":hidden选取隐藏input元素,将隐藏div显示">
  </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

聊骚我们

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