一.使用“原生”HTML DOM获取input的输入值并显示
1.对于"button","reset","submit"类型 —— 定义按钮上的文字;
2.对于"text","password","hidden"类型 ——定义输入字段的初始(默认)值;
3.对于"checkbox","radio","image"类型 ——定义与input元素相关的值,当提交表单时该值会发送到表单的action URL。
最需要注意的是 ,value属性对于<input type="checkbox">和<input type="radio">是必需的。而对于<input type="file"> value属性是不适用的。
<body> <form class="benTigerKinForm" action="hello.action" name="benTiderKin"> <table class="benTigerKinClass" > <tr> <th>姓名:</th> <td> <input type="text" id="userNameId" name="username" value=""/> </td> </tr> </table> <input type="button" value="登录" οnclick="login()"/> </form> </body> <script> function login() { var user = document.getElementById("userNameId").value; alert(user);var userName = benTigerKin.userNameId.value; alert(userName);}</script>
ps:jquery引入路径解释:jquery/jquery-1.8.3.min.js以当前页面helloWorld.jsp为坐标在当前文件夹中查找,由于helloWorld.jsp和jquery文件夹都在同一个目录下所以不需要
'/',如果加'/'意思是从项目根目录查找
方法N
$("#test").val()
$("input[name='test']").val()
$("input[type='text']").val()
$("input[type='text']").attr("value")$("input[name='test']").val()
function login() { var user = $("#userNameId").val(); alert(user); }【注意要是有两个input name 都是userName,取第一个,且不报错】
var username = $("input[name='userName']").val(); alert(username);
var username = $("input[type='text']").val(); alert(username);【注意要是有两个input name 都是userName,取第一个,且不报错】
var username = $("input[name='userName']").attr("value"); alert(username);注意要是有两个input type 都是text,取第一个,且不报错】
var username = $("input[type='text']").attr("value"); alert(username);
<tr> <th>性别:</th> <td> <input type="checkbox" id="male" name="checkbox" value="male">男</input> <input type="checkbox" id="female" name="checkbox" value="female">女</input> </td> </tr>
checkbox的第二个元素被打勾:$("input[name='checkbox']").get(1).checked = true; //打勾
checkbox的value='female'的元素打勾:$("input[name='checkbox'][value='female']").attr("checked",true);
或$("input[name='checkbox'][value='female']").attr("checked","checked");
判断checkbox是否已经打勾:if($("input[name='checkbox'][value='female']").attr('checked')){}
jQuery获取CheckBox选择的Value值:
//选择被选中CheckBox元素的集合 如果你想得到Value值你需要遍历这个集合
$('input:checkbox').each(function() { if ($(this).attr('checked')) { alert($(this).val()); } });
function login() { var ids = ''; $("input[name='checkbox']:checkbox").each(function() { if ($(this).attr("checked")) { ids += $(this).attr('value')+',';//遍历被选中CheckBox元素的集合 得到Value值 } }); alert(ids); }
checkbox的checked属性:
$("#checkbox_id").attr("checked"); //获取一个CheckBox的状态(有没有被选中,返回true/false)
$("#checkbox_id").attr("checked",true); //设置一个CheckBox的状态为选中(checked=true)
$("#checkbox_id").attr("checked",false); //设置一个CheckBox的状态为不选中(checked=false)
<th>性别:</th> <td> <input type="radio" id="male" name="radio" value="male" checked="checked">男</input> <input type="radio" id="female" name="radio" value="female">女</input> </td>默认取值用checked="checked"
获取一组radio被选中项的值:var item = $('input[name=items][checked]').val(); --注:name即控件name属性(百度所得,我自己测试不行)
radio单选组的第二个元素为当前选中项 :$('input[‘name=items]').get(1).checked = true;
或 $('input[name=items]').attr("checked", '1′);
radio的value = 'val'的元素为当前选中项:$('input[name=items] [value='val']').attr("checked","checked");
radio设置value=2的元素为当前选中项:$("input[type=radio]").attr("checked",'2′);
radio被选中项的value值:$("input[name='radio_name'][checked]").val();
根据Value值设置Radio为选中状态:$("input[name='radio_name'][value='要选中Radio的Value值'").attr("checked",true);
$("input[name='radio']:radio").each(function() { if ($(this).attr("checked")) { alert($(this).attr('value')); // alert($(this).val());这两种都是可以的 } });
获取select被选中项的文本:var item = $("select[@name=items] option[@selected]").text();
或 var item = $("select[name=items]").find("option:selected").text();
select下拉框的第二个元素为当前选中值:$('#select_id')[0].selectedIndex = 1; --注:select_id'即控件的id属性
select下拉框value = 'val'的元素为当前选中项:$("select[name=items] option[value='val']").attr("selected","selected");
select设置value=-sel3的项目为当前选中项:$("#sel").attr("value",'-sel3′); --注:sel即select控件的id属性
添加下拉框的option:$("<option value='1′>1111</option><option value='2′>2222</option>").appendTo("#sel");
select清空:$("#sel").empty();
获取值:
文本框,文本区域:$("#txt").attr("value");
多选框checkbox:$("input[name='checkbox':checked]").each(function(){
var val = $(this).val();
});
单选组radio:$("input[type=radio][checked]").val();
下拉框select的value值:$('select').val();
下拉框select选中的text 值:$("select").find("option:selected").text();
文本框,文本区域:$("#txt").attr("value","); //清空内容
$("#txt").attr("value",'11′); //填充内容
事件:
当对象text_id获取焦点时触发:$("#text_id").focus(function(){//code...});
当对象text_id失去焦点时触发:$("#text_id").blur(function(){//code...});
其他:
使文本框的Vlaue值成选中状态:$("#text_id").select();
$("#text_id").val().split(","); //将Text的Value值以','分隔返回一个数组