完成对输入或者选择内容的获取,以及更改

代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>属性操作_值val</title>
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <script>
            /**
             * 需求:
             *  1.点击按钮获得文本框、下拉框、单选框选中的value
             *  2.点击按钮设置用户名的默认值为“老王”
             */

            /**
             * 方法分析
             *     1.val()方法用于读取元素value属性
             *     2.val(val)方法用于设置元素value属性
             */
            
            /**
             *代码实现 
             */
            
            $(function(){
                //1.点击按钮获得文本框、下拉框、单选框选中的value
                $("#btn1").click(function(){
                    alert($("#username").val());//id选择器,获取其内容
                    alert($("input[type='radio']:checked").val());//input里满足type=radio条件的已被选择的值 
                    alert($("#city").val());//获取选择的城市的值
                });
                    
                //2.点击按钮设置用户名的默认值为“老王”
                $("#btn2").click(function(){
                    $("#username").val("老王");
                });
            })
        </script>
    </head>

    <body>
        用户名 <input type="text" id="username" /> <br/> 
        性别 <input type="radio" name="gender" value="男" /><input type="radio" name="gender" value="女" checked="checked"/><br/> 
        城市
            <select id="city">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
            </select> <br/>
            <input type="button" value="获取val" id="btn1" />
            <input type="button" value="设置val" id="btn2" />
    </body>

</html>

运行结果:

初始界面:

 

 

 

点击获取val:

 

 

 

 

 

 点击设置val: