`

JQ 表单对象属性过滤选择器

 
阅读更多 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2-11</title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
	//重置表单元素
	$(":reset").click(function(){
		setTimeout(function() {
			countChecked();
			$("select").change();
		},0);
	});
	//对表单内 可用input 赋值操作.
	$('#btn1').click(function(){
		$("#form1 input:enabled").val("这里变化了！");  
		return false;
	})
	//对表单内 不可用input 赋值操作.
	$('#btn2').click(function(){
		$("#form1 input:disabled").val("这里变化了！");
		return false;
	})
	//使用:checked选择器，来操作多选框.
	$(":checkbox").click(countChecked);
	function countChecked() {
		var n = $("input:checked").length;
		$("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>");
	}
	countChecked();//进入页面就调用.
	//使用:selected选择器，来操作下拉列表.
	$("select").change(function () {
		var str = "";
		$("select :selected").each(function () {
			str += $(this).text() + ",";
		});
		$("div").eq(1).html("<strong>你选中的是："+str+"</strong>");
	}).trigger('change');
	// trigger('change') 在这里的意思是：
	// select加载后，马上执行onchange.
	// 也可以用.change()代替.
});
//]]>
</script>
</head>
<body>
<h3> 表单对象属性过滤选择器.</h3>
<form id="form1" action="#">
    <button type="reset">重置所有表单元素</button>
    <br />
    <br />
    <button id="btn1">对表单内 可用input 赋值操作.</button>
    <button id="btn2">对表单内 不可用input 赋值操作.</button>
    <br />
    <br />
    可用元素：
    <input name="add" value="可用文本框"/>
    <br/>
    不可用元素：
    <input name="email" disabled="disabled" value="不可用文本框"/>
    <br/>
    可用元素：
    <input name="che" value="可用文本框" />
    <br/>
    不可用元素：
    <input name="name" disabled="disabled"  value="不可用文本框"/>
    <br/>
    <br/>
    多选框：<br/>
    <input type="checkbox" name="newsletter" checked="checked" value="test1" />
    test1
    <input type="checkbox" name="newsletter" value="test2" />
    test2
    <input type="checkbox" name="newsletter" value="test3" />
    test3
    <input type="checkbox" name="newsletter" checked="checked" value="test4" />
    test4
    <input type="checkbox" name="newsletter" value="test5" />
    test5
    <div></div>
    <br/>
    <br/>
    下拉列表1：<br/>
    <select name="test" multiple="multiple" style="height:100px">
        <option>浙江</option>
        <option selected="selected">湖南</option>
        <option>北京</option>
        <option selected="selected">天津</option>
        <option>广东</option>
        <option>湖北</option>
    </select>
    <br/>
    <br/>
    下拉列表2：<br/>
    <select name="test2" >
        <option>浙江</option>
        <option>湖南</option>
        <option selected="selected">北京</option>
        <option>天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>
    <br/>
    <br/>
    <div></div>
</form>
</body>
</html>

 

效果图：

 

 

 

 

 

  • 大小: 63.1 KB
分享到：
| JQ 内容过滤选择器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery表单对象属性过滤选择器实例分析

    本文实例讲述了jquery表单对象属性过滤选择器用法。分享给大家供大家参考。具体分析如下： &lt;!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...&lt;...表单对

    jQuery基础选择器练习题

    过滤选择器则帮助我们进一步细化选取结果，例如： 1. **`:first`和`:last`**: 选取第一个或最后一个元素。 2. **`:even`和`:odd`**: 选取索引偶数或奇数的元素。 3. **`:not(selector)`**: 排除匹配指定选择器的...

    jQuery基本选择器选择元素使用介绍

    其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种 –&gt; &lt;title&gt;&lt;/title&gt; &lt;!–使用jQ

    jquerydemo

    8. 属性过滤选择器 9. 子元素过滤选择器 10. 表单元素过滤选择器 11. 小结1 12. 选择器练习 13. 创建和插入节点 14. 重写 JS 实验之分类添加内容 15. 删除及清空节点 16. 重写 JS 实验之员工管理 17. 克隆和替换...

    JQ+CSS3过滤动画效果代码.zip

    CSS3是CSS的最新版本，提供了许多新的选择器、属性和模块，极大地扩展了网页样式设计的可能性。在过滤动画效果中，CSS3的过渡（Transition）和动画（Animation）功能至关重要。过渡可以平滑地改变一个元素从一种样式...

    举例讲解jQuery中可见性过滤选择器的使用

    在jQuery中，可见性过滤选择器是用于根据元素的可见状态来选取元素的重要工具。这些选择器分为两类：`:hidden` 和 `:visible`。它们允许开发者高效地操作页面上那些用户当前可以看到或无法看到的元素。 `:hidden` ...

    jq基础笔记.docx

    - 过滤选择器：`$:first` 选取第一个元素，`:last` 选取最后一个元素，`:eq(index)` 选取索引为index的元素，`:lt(index)` 选取索引小于index的元素，`:gt(index)` 选取索引大于index的元素，`:not(selector)` 选取...

    Java基础学习53.pdf

    JQ选择器：JQ选择器与CSS选择器类似，包括基本选择器、层次选择器、过滤选择器、表单选择器等。这些选择器可以帮助你精确地查找和操作HTML元素。 JQ的事件：包括js事件和JQ事件。JQ事件主要包括$("#div1").click...

    Jquery框架

    - **表单对象属性过滤选择器**: 例如`$(":input")`选取所有输入类型元素，`$(":text")`选取所有文本输入框。 - **属性过滤选择器**: 如`$("[href]")`选取所有具有`href`属性的元素。 #### 1.2 DOM对象获取 - **$...

    15天学会JQ

    2. **选择器**：学习jQuery的选择器语法，如ID选择器、类选择器、元素选择器等，以及更高级的选择器如后代选择器、兄弟选择器和属性选择器，用于精确选取DOM元素。 3. **DOM操作**：掌握如何使用jQuery来添加、删除...

    jquery写的颜色器

    颜色选择器是Web开发中常见的一种交互元素，它允许用户通过图形界面挑选颜色，广泛应用于各种网页设计和表单输入场景。 在jQuery中，创建颜色选择器通常涉及到以下关键知识点： 1. **jQuery基础**：首先，需要对...

    【JavaScript源代码】一篇文章带你入门和了解Jquery的基础操作.docx

    【JavaScript源代码】这篇文章主要介绍了JavaScript的库——jQuery的基础操作，包括如何引入jQuery库、jQuery对象与JavaScript对象的转换、jQuery的基本选择器、层级选择器、过滤选择器、属性选择器以及文档处理方法...

    jquery基本选择器匹配多个元素的实现方法

    jQuery提供了多种选择器，如基本选择器、层次选择器、过滤选择器、表单选择器和表单对象属性选择器等。在这些选择器中，基本选择器是最常用和最基础的类型。 基本选择器主要包括如下几种： 1. 元素选择器：比如div...

    JQ LigerUI

    LigerUI提供了丰富的组件和控件，包括表格、表单、按钮、对话框、菜单、日期选择器等，使得开发者能够快速构建用户界面，提升用户体验。 LigerUI的核心特点在于其易用性和灵活性。它通过简洁的API和CSS样式，允许...

    JQ_EASY_附带帮助手册

    1. **基于 jQuery**：EasyUI 是在 jQuery 基础上构建的，利用 jQuery 的强大选择器和事件处理能力，使得操作 DOM 元素更加便捷。 2. **组件丰富**：提供了大量的 UI 组件，包括布局（Layout）、表格（Grid）、下拉树...

    jQuery contains过滤器实现精确匹配使用方法

    为了解决这个问题，让“contains”选择器更加精确，一种常用的方法是结合其他属性进行过滤，比如利用HTML元素的“innerHTML”属性。通过这样的技巧，我们可以进一步确保选中的元素的文本内容完全匹配我们的查询字符...

    jquery文档

    - jQuery选择器非常强大，支持多种类型的选择，例如元素选择器、ID选择器、类选择器、属性选择器、过滤选择器等。 ##### 3.2 事件 - jQuery对事件进行了封装，简化了事件处理。常见的事件包括点击、双击、鼠标进入...

    jQuery常用技术点

    3. **过滤选择器** - `$("tr:even")`：选择所有偶数行的 `&lt;tr&gt;` 元素。 - `$("tr:odd")`：选择所有奇数行的 `&lt;tr&gt;` 元素。 - `$("ulli:eq(3)")`：选择列表中的第四个 `&lt;li&gt;` 元素（索引从 0 开始）。 - `$("ulli...

Magicbox
Global site tag (gtag.js) - Google Analytics