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

　　

Jquery | 基础 | jQuery表单对象属性过滤选择器的更多相关文章

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

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

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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

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

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

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

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

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

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

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

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

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

  8. jQuery选择器(表单元素过滤选择器)第八节

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

  9. JQuery表单元素过滤选择器

    此选择器主要是对所选择的表单元素进行过滤: 选择器 描述 返回 enabled 选择所有的可用的元素 集合元素 disabled 选择所有的不可用的元素 集合元素 checked 选择所有被选中的元素 ...

随机推荐

  1. 怎样更改Linux中默认的openjdk为自己安装的JDK

    (1)/etc/profileexport JAVA_HOME=/usr/java/jdk1.7.0_67-cloudera/export PATH=$PATH:$JAVA_HOME/binexpor ...

  2. JAVA BigDecimal 高精度运算

    文章参考一位博友,由于时间太久忘了链接,见谅! public class BigDecimalUtils { private static final int DIV_SCALE = 10;// 除法 ...

  3. iOS清理WebView的缓存

    NSHTTPCookie *cookie; NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage]; ...

  4. Why there are no job running on hadoop

    Using hadoop1.3.0. I ran the example WordCount correctly in eclipse. But when I enter localhost:5003 ...

  5. date 命令 时间戳到标准格式转换

    1. 知道时间戳看标准时间, 时间戳到 秒: Wed Apr :: CST 2. 看到前时间时间戳格式 date +%s 3. 知道某个标准时间, 看时间戳 date -d "Wed Apr ...

  6. CodeForces - 55D Beautiful numbers —— 数位DP

    题目链接:https://vjudge.net/problem/CodeForces-55D D. Beautiful numbers time limit per test 4 seconds me ...

  7. Android中的ProgressBar的android:indeterminate

    不明确(false)就是滚动条的当前值自动在最小到最大值之间来回移动,形成这样一个动画效果,这个只是告诉别人“我正在工作”,但不能提示工作进度到哪个阶段.主要是在进行一些无法确定操作时间的任务时作为提 ...

  8. Python实现的一个简单LRU cache

    起因:我的同事需要一个固定大小的cache,如果记录在cache中,直接从cache中读取,否则从数据库中读取.python的dict 是一个非常简单的cache,但是由于数据量很大,内存很可能增长的 ...

  9. Bootstrap-CL：下拉菜单

    ylbtech-Bootstrap-CL:下拉菜单 1.返回顶部 1. Bootstrap 下拉菜单(Dropdowns) 本章将重点介绍 Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格 ...

  10. Start Developing Mac Apps -- Design Patterns 设计模式

    Design Patterns A design pattern solves a common software engineering problem. Patterns are abstract ...