zoukankan      html  css  js  c++  java
  • Jquery | 基础 | jQuery表单对象属性过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<title>使用jQuery表单对象属性过滤选择器 </title>
    	<meta charset="utf-8">
    	<script language="javascript" type="text/javascript" src="jquery-3.3.1.min.js"></script>
    	<style type="text/css">
    		body {
    			font-size: 12px;
    			text-align: center
    		}
    
    		div {
    			display: none
    		}
    
    		select {
    			height: 65px
    		}
    
    		.clsIpt {
    			 100px;
    			padding: 3px
    		}
    
    		.GetFocus {
    			border: solid 1px #666;
    			background-color: #eee
    		}
    
    		#fxm {
    			float: left;
    			margin: 100px
    		}
    	</style>
    	<script type="text/javascript">
    		$(function () {
    
    			$("#btn0").click(function () {
    				window.location.reload();
    			})
    			$("#btn1").click(function () {
    				$("#divA").css("display", "block");
    				$("#form1 input:enabled").addClass("GetFocus");
    			})
    			$("#btn2").click(function () {
    				$("#divA").css("display", "block");
    				$("#form1 input:disabled").addClass("GetFocus");
    			})
    			$("#btn3").click(function () {
    				$("#divB").css("display", "block");
    				$("#form1 input:checked").addClass("GetFocus");
    			})
    			$("#btn4").click(function () {
    				$("#divC").css("display", "block");
    				$("#Span2").html("" + $("select option:selected").text());
    			})
    		})
    	</script>
    </head>
    
    <body>
    	<form id="form1" style="241px">
    		<div id="divA">
    			<input type="text" value="hello" class="clsIpt" />
    			<input type="text" disabled="disabled" value="world " class="clsIpt" />
    		</div>
    		<div id="divB">
    			<input type="checkbox" checked="checked" value="1" />
    			<input type="checkbox" value="0" />
    		</div>
    		<div id="divC">
    			<select multiple="multiple">
    				<option value="0">Item 0</option>
    				<option value="1" selected="selected">Item 1</option>
    				<option value="2">Item 2</option>
    				<option value="3" selected="selected">Item 3</option>
    			</select>
    			<span id="Span2"></span>
    		</div>
    	</form>
    	
    		<button id="btn0">重置</button>
    		<button id="btn1">增加表单中所有属性为可用的元素类别<button>
    				<button id="btn2">增加表单中所有属性为不可用的元素类别</button>
    				<button id="btn3">增加表单中所有被选中的元素类别</button>
    				<button id="btn4">显示表单中所有被选中option的元素内容 </button>
    	
    </body>
    
    </html>
    

      

  • 相关阅读:
    Python开发环境Spyder介绍
    Python干货整理之数据结构篇
    通过Python爬虫按关键词抓取相关的新闻
    疫情后来场说走就走的旅行,Python制作一份可视化的旅行攻略
    详细介绍去一年在 PyPI 上下载次数最多的 Python 包
    Python错误与异常
    python爬虫爬取2020年中国大学排名
    微信史上最短的一行功能代码:拍一拍
    Python爬取某宝商品数据案例:100页的价格、购买人数等数据
    我的SAS菜鸟之路7
  • 原文地址:https://www.cnblogs.com/jj81/p/9703098.html
Copyright © 2011-2022 走看看