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

选择器 描述 返回
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. jQuery mobile 初始化页面的过程

  2. js ==和===以及！= 和 ！==的区别

    一.js == 与 === 的区别[转] 1. 对于string,number等基础类型,==和===是有区别的 1)不同类型间比较,==之比较“转化成同一类型后的值”看“值”是否相等,===如果类型 ...

  3. cocos2d-x-lua如何导出自定义类到lua脚本环境

      这篇教程是基于你的工程是cocos2d-x-lua的项目,我假设你已经完全驾驭cocos-x/samples/Lua/HelloLua工程,基本明白lua和c++互调的一些原理. 我们的目的是要在 ...

  4. dhroid - Dhdb orm简化sqlite数据库操作

    android数据库其实使用的不多,dhroid框架中的网络缓存使用了数据库我就写了也写了一个数据库操作工具 dhroid 数据库基本还是单表操作多,为了简单我只做了单表,那些级联,懒加载,什么的分两 ...

  5. C++ vs Python向量运算速度评测

    本文的起源来自最近一个让我非常不爽的事. 我最近在改一个开源RNN工具包currennt(http://sourceforge.net/projects/currennt/),想用它实现RNNLM功能 ...

  6. gzip: stdin:unexpected end of file

    原因是文件下载的不完整,重新下载就好了,

  7. UVM/OVM中的factory【zz】

    原文地址:http://bbs.eetop.cn/viewthread.php?tid=452518&extra=&authorid=828160&page=1 在新的项目中再 ...

  8. 记一次Castle报错

    CJXX.ServiceTest.PersonRelationMgeSvrTest.GetPersonRelation:SetUp : Castle.MicroKernel.ComponentActi ...

  9. HOJ 1438 The Tower of Babylon（线性DP）

    The Tower of Babylon My Tags Cancel - Seperate tags with commas. Source : University of Ulm Internal ...

  10. C++基础知识之动态库静态库

    一. 静态库与动态库 库(library),一般是一种可执行的二进制格式,被操作系统载入内存执行. 我们通常把一些公用函数制作成函数库,供其它程序使用.函数库分为静态库和动态库 静态库和动态库区别: ...