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

选择器 描述 返回
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. HDU 2199 Can you solve this equation（二分答案）

    Can you solve this equation? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...

  2. 如何使用HttpClient来发送带客户端证书的请求，以及如何忽略掉对服务器端证书的校验

    最近要做客户端和服务器端的双向认证,在客户端向服务器端发送带证书的请求这里有一点问题,网上的例子大多都不太好使,于是找了github上httpclient源代码中的例子改造了一下,终于弄明白了 git ...

  3. 【CF913F】Strongly Connected Tournament 概率神题

    [CF913F]Strongly Connected Tournament 题意:有n个人进行如下锦标赛: 1.所有人都和所有其他的人进行一场比赛,其中标号为i的人打赢标号为j的人(i<j)的概 ...

  4. android极光杀掉程序收不到通知

    http://docs.jpush.io/guideline/faq/#android 第三方系统收不到推送的消息 由于第三方 ROM 的管理软件需要用户手动操作 小米[MIUI] 自启动管理:需要把 ...

  5. Java、JavaWeb中单元测试用到的测试方法

    写出的代码做单元测试时,一定要记住从三个方面出发:1.成功  2.异常  3 逻辑错误(即没有异常也可能程序运行出最后结果,可是呢?呵呵).这就是在做测试时我要牢记的三个方面,同时思维要严谨也即做事要 ...

  6. 爬虫之requests详解

    requests Python标准库中提供了:urllib.urllib2.httplib等模块以供Http请求,但是,它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工作, ...

  7. jquery给动态添加的dom元素绑定事件

    $('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后 ...

  8. ceil 和floor

    ceil 天花板 floor 地板 ceil向上取整 foor向下取整

  9. Python之时间模块

    1,怎么打印时间戳 2,怎么打印日期 3,怎么把字符串转换成python认识的日期 把日期转换成字符串 字符串转换成日期格式 time.strptime("2017-5-16",& ...

  10. @log的decorator完美实现（原创）

    # -*- coding: utf-8 -*- from functools import wraps from inspect import isfunction def beforecalled( ...