<!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.eduask.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>
                <option>天津</option>
                <option>广州</option>
                <option>湖北</option>
            </select>

            <textarea rows="" cols=""></textarea>
        </form>
    </body>
</html>

jQuery选择器(表单元素过滤选择器)第八节的更多相关文章

  1. JQuery表单元素过滤选择器

    此选择器主要是对所选择的表单元素进行过滤: 选择器 描述 返回 enabled 选择所有的可用的元素 集合元素 disabled 选择所有的不可用的元素 集合元素 checked 选择所有被选中的元素 ...

  2. jQuery选择器之子元素过滤选择器Demo

    测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  3. jQuery内容过滤选择器与子元素过滤选择器用法实例分析

    jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...

  4. jQuery选取表单元素

    表单元素选择器 选择器                    说明 :button                 <button>元素和type属性值为button的<input& ...

  5. 基于JQuery实现表单元素值的回写

    form.jsp: <%@ page language="java" import="java.util.*" pageEncoding="GB ...

  6. jquery获取表单元素与回显

    一.获取哦表单元素 dcoument表单文本对象的集合 all[] 对所有html元素的访问 forms 返回对文档中所有form对象的引用 forms[1] 对所有form对象引用 <scri ...

  7. 008 jquery过滤选择器-----------（子元素过滤选择器）

    1.介紹 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  8. jQuery 基本选择器 层次选择器 过滤选择器 内容过滤选择器 可见过滤选择器 属性过滤选择器 表单对象属性过滤选择器

  9. jquery 隐藏表单元素

    1.html <label for="lbl" >电压等级:</label> <input class="easyui-combobox&q ...

随机推荐

  1. 接口interface，接口继承implements

    php中,只支持从一个类继承,不支持从两个或者更多的类同时继承.从两个或者两个以上的类继承的能力被称为多重继承.php在设计上是禁止这种功能的.原因在于,避免多个类带来的复杂性.当发现需要从两个或者更 ...

  2. 第6章 Overlapped I/O， 在你身后变戏法 ---被激发的 Event 对象 -4

    以文件 handle 作为激发机制,有一个明显的限制,那就是没办法说出到底是哪一个 overlapped 操作完成了.如果每个文件 handle 只有一个操作等待决定,上述问题其实并不成为问题.但是如 ...

  3. crontab的两大坑：百分号和环境变量

    今天想给服务器加个自动备份mysql数据库的功能(别怪我这么久才加,阿里云每天全盘备份的,不怕丢数据库),本以为只要5分钟就能搞定的,结果入了两个大坑. 我的crontab是这样写的: * * * m ...

  4. C语言定义从URL中获取键值的接口

    环境:centos7下,对客户端http请求进行解析,来获取有效键值(包括汉字). 头文件 /* 这是一份关于从Http请求信息中提取键值的接口声明的头文件 */ #ifndef _HEAD_H_ # ...

  5. CSS div阴影效果

    <div class="image"><img src="default.jpg" /></div> .image{box- ...

  6. 【Spring】浅谈spring推荐构造器注入

    一.前言 ​ Spring框架对Java开发的重要性不言而喻,其核心特性就是IOC(Inversion of Control, 控制反转)和AOP,平时使用最多的就是其中的IOC,我们通过将组件交由S ...

  7. js实现微信朋友圈模糊图片功能

    本人第一次写文章 ,写的不好大家就凑合着看吧. 界面的简单效果. 主要html如下 <div id="content"> <!--模糊图片--> <i ...

  8. 关于Java和JavaScript对字符串截取处理的总结

    在JavaWeb开发中,经常需要对字符串进行处理,包括Java语言和JS语言,总是容易弄混淆,这里简单对比一下两种语言对于字符串截取方法. 一.先看Java public class StringDe ...

  9. 03Vue事件

    Vue提供了事件的绑定,方法写在methods对象中. 绑定dom中有两种方法: 方法一:v-on:click/dblclcick/mouseOver/mouseOut="方法名" ...

  10. JQuerymobile实例源代码

    首页我们先来解释一下下JQuerymobile是什么,jQuery Mobile是JQuery 框架的一个组件(而非jquery的移动版本).jQuery Mobile是一款基于HTML5的用户界面系 ...