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

选择器 描述 返回
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. mariadb修改root密码的方法

    mariadb安装好后,root密码为空,可以先使用HeidiSQL链接到数据库,执行以下sql,就可以修改root的密码了 update mysql.user set password=passwo ...

  2. javah 错误: 无法访问android.app.Activity问题解决

    cd /Users/musictom/Documents/source/ky/app/build/intermediates/classes/debug javah -jni -classpath / ...

  3. LeetCode 48 Rotate Image（2D图像旋转问题）

    题目链接: https://leetcode.com/problems/rotate-image/?tab=Description   Problem:给定一个n*n的二维图片,将这个二维图片按照顺时 ...

  4. 阿里云ubuntu14.4上部署gogs

    以前曾经在centos上部署了gitlab,但因为买的配置比较低,实际效果并不理想,经常卡机.而且,gitlab配置相当麻烦,需要依赖很多被墙包支持.最近在用golang搞开发,顺道发现了gogs这款 ...

  5. 23种设计模式之观察者模式（Observer）

    观察者模式又称为发布—订阅模式.模型—视图模式.源-监听器模式或从属者(dependents)模式,是一种对象的行为型模式.它定义了对象之间的一种一对多的依赖关系,使得每当一个对象状态发生改变时,其相 ...

  6. linux逻辑卷管理 (LVM)(转)

    1.什么是 LVM LVM 是逻辑盘卷管理(Logical Volume Manager)的简称,它是 Linux 环境下对磁盘分区进行管理的一种机制,LVM 是建立在硬盘和分区之上的一个逻辑层,来为 ...

  7. ElasticSearch 安装 elasticsearch-analysis-ik分词器

    IK version ES version master 5.x -> master 5.6.1 5.6.1 5.5.3 5.5.3 5.4.3 5.4.3 5.3.3 5.3.3 5.2.2 ...

  8. 第一次php之旅

    话说起来,我也是刚接触php不久,刚开始是因为想自己做一个从前端到后台完整的网站,所以去学后台技术,在各种语言的选择中,由于php语言的简单,易学,功能强大,开发速度快等原因,最终我选择了php! 一 ...

  9. Java--static、final、static final的区别

    一.final final修饰类:表示该类不能被继承:final类中的方法默认是final的: final修饰方法:表示该方法无法被重写: final修饰方法参数:表示在变量的生存期中它的值不能被改变 ...

  10. 牛客网多校赛第九场A-circulant matrix【数论】

    链接:https://www.nowcoder.com/acm/contest/147/A 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524 ...