zoukankan      html  css  js  c++  java
  • jQuery使用之(四)处理页面的表单元素

    表单是一个特殊的页面元素,value的值是最受关注的,jQuery提供了强大的val()方法来处理相关的操作。

    1.获取表单元素的值。
    直接调用val()方法时可以获取选择器的 中的第一个元素的value值。例如:

    $("[name=radioGroup]:checked").val;

    以上代码直接获取属性为radioGroup的表单元素中被选中的value值,十分便捷。对于某些表单元素,例如<option><button>没有value值将获取其显示的文本值。
    如果选择器中的第一个表单元素是多选的(例如下拉菜单),val()将返回由选中项value值组成的数组

    http://www.cnblogs.com/ahthw/p/4221608.html使用过DOM的方式获取了单选和多选情况下的选值,相比jQuery,代码十分长。使用val()可以直接获取表单的元素值,不用考虑下拉菜单是单选还是多选。

    <script type="text/javascript">
                function displayVals() {
                    //直接获取选中项的value值
                    var singleValues = $("#constellation1").val();
                    var multipleValues = $("#constellation2").val() || []; //因为存在不选的情况
                    $("span").html("<b>Single:</b> " + singleValues + "<br><b>Multiple:</b> " + multipleValues.join(", "));
                }
                $(function() {
                    //当修改选中项时调用
                    $("select").change(displayVals);
                    displayVals();
                });
            </script>
    
            <select id="constellation1">
                <option value="Aries">白羊</option>
                <option value="Taurus">金牛</option>
                <option value="Gemini">双子</option>
                <option value="Cancer">巨蟹</option>
                <option value="Leo">狮子</option>
                <option value="Virgo">处女</option>
                <option value="Libra">天秤</option>
                <option value="Scorpio">天蝎</option>
                <option value="Sagittarius">射手</option>
                <option value="Capricorn">摩羯</option>
                <option value="Aquarius">水瓶</option>
                <option value="Pisces">双鱼</option>
            </select>
            <select id="constellation2" multiple="multiple" style="height:120px;">
                <option value="Aries">白羊</option>
                <option value="Taurus">金牛</option>
                <option value="Gemini">双子</option>
                <option value="Cancer">巨蟹</option>
                <option value="Leo">狮子</option>
                <option value="Virgo">处女</option>
                <option value="Libra">天秤</option>
                <option value="Scorpio">天蝎</option>
                <option value="Sagittarius">射手</option>
                <option value="Capricorn">摩羯</option>
                <option value="Aquarius">水瓶</option>
                <option value="Pisces">双鱼</option>
            </select>
    
            <span></span>

    以上代码直接使用val()获取了select的值,jQuery方式大大的缩短了代码的长度。

     2.设置表单元素的值。

    与attr()和css()一样,val()也可以设置value的值,使用方法也大同小异。

        <script type="text/javascript">
                $(function() {
                    $("input[type=button]").click(function() {
                        var sValue = $(this).val(); //先获取按钮的value值
                        $("input[type=text]").val(sValue); //赋给文本框
                    });
    
                });
            </script>
    
            <p>
                <input type="button" value="Feed">
                <input type="button" value="the">
                <input type="button" value="Input">
            </p>
            <p>
                <input type="text" value="click a button">
            </p>

    以上代码使用到了两次val()方法,一次是获取button的value值,另一次是将获取的文本赋值给input文本框里。

  • 相关阅读:
    如何查看openssl支持的所有TLS/SSL版本
    讲故事,学(AHK)设计模式—观察者模式
    React Hooks 详解 【近 1W 字】+ 项目实战
    为什么要在函数组件中使用React.memo?
    js防抖函数
    JS 深度优先遍历与广度优先遍历 实现查找
    你不知道的 requestIdleCallback
    RE:ゼロから始める文化課生活
    开学考小记 & 新生活的开始
    JS中:数组和对象的区别,以及遍历数组和遍历对象的区别
  • 原文地址:https://www.cnblogs.com/ahthw/p/4233283.html
Copyright © 2011-2022 走看看