此选择器主要是对所选择的表单元素进行过滤：

选择器 描述 返回
enabled 选择所有的可用的元素 集合元素
disabled 选择所有的不可用的元素 集合元素
checked 选择所有被选中的元素（单选框，复选框） 集合元素
selected 选择所有被选中选项元素（下拉列表） 集合元素 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Untitled Document</title>

        <script type="text/javascript" src="jquery-1.7.2.js"></script>

        <script type="text/javascript">

            $(function(){

                $("#btn1").click(function(){

                    //使所有的可用的单行文本框的 value 值变为 尚硅谷

                    alert($(":text:enabled").val());

                    $(":text:enabled").val("西游记");

                });

                $("#btn2").click(function(){

                    $(":text:disabled").val("www.xiyouji.com");

                });

                $("#btn3").click(function(){

                    var num =

                        $(":checkbox[name='newsletter']:checked").length;

                    alert(num);

                });

                $("#btn5").click(function(){

                    //实际被选择的不是 select, 而是 select 的 option 子节点

                    //所以要加一个 空格.

                    //var len = $("select :selected").length

                    //alert(len);

                    //因为 $("select :selected") 选择的是一个数组

                    //当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了.

                    //alert($("select :selected").val());

                    //jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在

                    //得到的 DOM 对象, 而不是一个 jQuery 对象

                    $("select :selected").each(function(){

                        alert(this.value);

                    });

                });

                $("#btn4").click(function(){

                    $(":checkbox[name='newsletter']:checked").each(function(){

                        alert(this.value);

                    });

                });

            })

        </script>

    </head>

    <body>

        <h3>表单对象属性过滤选择器</h3>

         <button id="btn1">对表单内 可用input 赋值操作.</button>

           <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />

         <button id="btn3">获取多选框选中的个数.</button>

         <button id="btn4">获取多选框选中的内容.</button><br /><br />

         <button id="btn5">获取下拉框选中的内容.</button><br /><br />

        <form id="form1" action="#">

            可用元素: <input name="add" value="可用文本框1"/><br>

            不可用元素: <input name="email" disabled="true" value="不可用文本框"/><br>

            可用元素: <input name="che" value="可用文本框2"/><br>

            不可用元素: <input name="name" disabled="true" 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

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

            </select>

            <textarea rows="" cols=""></textarea>

        </form>

    </body>

</html>

　　表单选择器：

JQuery表单元素过滤选择器的更多相关文章

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

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

  2. Jquery | 基础 | jQuery表单对象属性过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...

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

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

  4. jQuery 表单元素取值与赋值方法总结

    一.普通文本框的赋值与取值 1.1.1赋值 <h2>jQuery 表单元素取值与赋值方法总结</h2> <input type="text" clas ...

  5. jQuery 表单域选中选择器

    复选框.单选按钮.下拉列表 /***********************************************/ <script type="text/javascrip ...

  6. jquery 表单元素选择器

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

  7. jquery表单内容过滤

    效果:    输入筛选字段后显示效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http ...

  8. jQuery表单元素非空验证

    <script type="text/javascript">                $(function(){          /************* ...

  9. Jquery | 基础 | 使用 jQuery 表单过滤选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. NC 的简单使用

    netcat被誉为网络安全界的’瑞士军刀’,相信没有什么人不认识它吧……一个简单而有用的工具,透过使用TCP或UDP协议的网络连接去读写数据.它被设计成一个稳定的后门工具,能够直接由其它程序和脚本轻松 ...

  2. Elasticsearch学习之基本核心概念

    在Elasticsearch中有许多术语和概念 1. 核心概念 Elasticsearch集群可以包含多个索引(indices)(数据库),每一个索引可以包含多个类型(types)(表),每一个类型包 ...

  3. Big Spatio temporal Data(R-tree Index and NN & RNN & Skyline)

    一.简单介绍大数据技术产物 “大数据”一词首先出现在2008年9月<Nature>杂志发表的一篇名为“Big Data: Wikiomics”的文章上(Mitch,2008).“大数据科学 ...

  4. C语言中scanf函数的实现

    接上一篇C语言中可变参数函数实现原理,从理论上详细介绍了C语言中可变参数函数的实现,这一篇从minix内核源码中的scanf函数入手,学习C语言经典可变参数函数的实现过程 在scanf.c文件中,可以 ...

  5. Docker监控：google/cadvisor

    Docker自带了容器监控功能,可以对容器进行相关的性能监控,指标查看 主要包括: 主机的CPU情况和使用量 主机的内存情况和使用量 主机的本地镜像情况 主机的容器运行情况 常规使用docker ps ...

  6. iOS - 开发一套代码多个app展示不同图标和名称

    引言 公司项目重构之后,有了相对比较完善的开发体系,首先git分支分为日常.预发.生产三个主要分支,开发阶段都在日常(daily)分支下开相应功能的feature分支,开发完再合并. 我的iOS工程需 ...

  7. Elasticsearch 索引、更新、删除文档

    一.Elasticsearch 索引(新建)一个文档的命令: curl XPUT ' http://localhost:9200/test_es_order_index/test_es_order_t ...

  8. ubuntu16.04下安装pangolin

    安装教程,具体可以参考github上pangolin的安装文档 https://github.com/stevenlovegrove/Pangolin 首先要安装pangolin的各种依赖项 Glew ...

  9. POJ_2019_Cornfields

    Cornfields Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 7444   Accepted: 3609 Descri ...

  10. Oracle HA 之 Server Pool 实战

    --创建server pool的两种方式:    图形界面:console和dbca       演示-略    命令行工具:srvctl和crsctl --srvctl和crsctl创建server ...