<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. [转载]CodeIgniter配置之URL

    应该有很多项目中会有这样的情况,通过 http://pc.local 可以访问,若通过 http://localhost/pc/public 则会出现一些图片.样式显示不到,超链接出错的情况,项目的移 ...

  2. 读写锁(pthread)

    读写锁: 用于对于某个给定资源的共享访问,而不是像互斥锁那样,将所有试图进入临界区的线程都阻塞住 相关内容: 线程互斥锁 分配规则:(写独占,读共享) 1.只要没有线程持有某个给定的读写锁用于写,那么 ...

  3. 编译 Deedle

    编译 Deedle Deedle 中含有 RProvider. 要编译 Deedle.须要先下载 R.地址: http://cran.cnr.berkeley.edu/bin/windows/base ...

  4. ubuntu 系统启动时找不到根文件系统

    报出的错误大概为: Alert! /dev/disk/by-uuid/ ....... does not exist 最后进入了 initramdiskfs 的命令行终端 . 输入 blkid 命令却 ...

  5. WPF代码注意事项,开发常见问题，知识总结

    代码注意事项: 1.代码实现的样式赋值 XXX.Style = TryFindResource("StyleName") as Style; 2.WPF中FindName方法的使用 ...

  6. 无节操cocos2d-js游戏

    1.  <看谁抽得快> 2.   <拍苍蝇> 3.   <月饼达人> 4.   <亲吻小游戏> 下面这些是本人做的,需要源代码的可以回复我 ps:全部采 ...

  7. mongodb的安装、配置、常见问题

    一.MongoDB下载 mongodb可以在官网找到下载链接,找到合适的版本进行下载.下载地址->https://www.mongodb.com/download-center?jmp=nav# ...

  8. 搭建java运行环境

    安装IDE 集成开发环境(IDE,Integrated Development Environment ) 1.安装jdk,jre(jdk自带jre),记住他们的安装位置. 2.配置环境变量.(JAV ...

  9. FAT和FAT32文件系统的原理

    [转自] http://www.sjhf.net/Article/sjhfdoc/200404/1.html 一.硬盘的物理结构:     硬盘存储数据是根据电.磁转换原理实现的.硬盘由一个或几个表面 ...

  10. vue2-editor富文本基础使用方法

    vue2-editor的入门使用准备工作: 使用 npm install vue2-editor --save 安装到项目中去: 使用 在需要的单文件内引入 import { VueEditor } ...