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

选择器 描述 返回
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. laravel读取memcached缓存并做条件查询

    public function onlineplayersource() { $res = $_POST['aoData']; $sEcho = 0; $iDisplayStart = 0; // 起 ...

  2. sql management studio正则替换sql

    需要把create proc xxx替换为 drop proc xxx go create proc xxx 方法,使用正则查找替换 create procedure {\[dbo\]\.[^\(]+ ...

  3. dpkg安装deb缺少依赖包的解决方法

    [先贴出解决方案(基于Ubuntu)]: 使用dpkg -i   *.deb 的时候出现依赖没有安装 使用apt-get -f -y install  解决依赖问题后再执行dpkg安装deb包 === ...

  4. vue-resource使用 (vue仿百度搜索)

    1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...

  5. CentOS 安装apache

    yum 安装apache yum –y install httpd 设置开机启动 chkconfig --levels 235 httpd on 启动 /etc/init.d/httpd start ...

  6. ES6 阮一峰阅读学习

    参考: ECMAScript6入门 就是随便看看,了解一下. 一.ECMAScript6简介 1. 什么是ECMAScript6? JavaScript语言的下一代标准.2015年6月发布,正式名称是 ...

  7. 使用COSBench工具对ceph s3接口进行压力测试--续

    之前写的使用COSBench工具对ceph s3接口进行压力测试是入门,在实际使用是,配置内容各不一样,下面列出 压力脚本是xml格式的,套用UserGuide文档说明,如下 有很多模板的例子,在co ...

  8. nodejs事件的监听与事件的触发

    nodejs事件(Events) 一.事件机制的实现 Node.js中大部分的模块,都继承自Event模块(http://nodejs.org/docs/latest/api/events.html  ...

  9. iOS - 网址、链接、网页地址、下载链接等正则表达式匹配(解决url包含中文不能编码的问题)

    DNS规定,域名中的标号都由英文字母和数字组成,每一个标号不超过63个字符,也不区分大小写字母.标号中除连字符(-)外不能使用其他的标点符号.级别最低的域名写在最左边,而级别最高的域名写在最右边.由多 ...

  10. iOS 截屏分享（包含状态栏与不包含状态栏）

    iOS8以上的新方法PhotoKit 监听截图相册变化,取最后一张图片:http://www.hangge.com/blog/cache/detail_1515.html PhotoKit 获取本机相 ...