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 {
			width: 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="width: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>

  

posted @ 2018-09-25 20:04  听说这是最长的名字了  阅读(144)  评论(0编辑  收藏  举报