完成对输入或者选择内容的获取,以及更改
代码:
<!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: