JQuery:各种操作表单元素方法小结

来源:http://www.ido321.com/1220.html

表单元素无处不在。已然成了Web应用不可或缺的一个部分。

对表单最最最常见的操作就是获取表单元素的值或者更改表单元素的值。那在JQuery和JavaScript中怎么操作表单元素的值?

JQuery操作表单总结:

1、文本框、password框、隐藏域、文本域(id换成相应的,value属性存在,才干利用attr(‘value’) 获取值,否则返回undefined):

1.1 获取—>$(“#text”).val()或者$(“#text”).attr(‘value’)

1.2 设置—>$(“#text”).val(‘test’)或者$(“#text”).attr(‘value’,’test’)

2、button:普通button、重置button和提交button(id换成相应的,value属性存在,才干利用attr(‘value’) 或者val()获取值,否则attr返回undefined,val返回空)

2.1 获取—>$(“#btn”).val()或者$(“#btn”).attr(‘value’)

2.2 设置—>$(“#btn”).val(‘test’)或者$(“#btn”).attr(‘value’,’test’)

3、复选框、单选框:(id换成相应的,value属性存在,才干利用attr(‘value’) 或者val()获取值。否则attr返回undefined,val返回on(无论是否存在checked属性))

3.1 获取—>$(“#check”).val()或者$(“#check”).attr(‘value’)

3.1 设置—>$(“#check”).val(‘test’)或者$(“#check”).attr(‘value’,’test’)

3.3 获取选中的复选框的值:$(“input[type=checkbox][checked]“).attr(‘value’)或者$(“input[type=checkbox][checked]“).val()【ps:仅仅会返回第一个被选中的值】

//获取所有选中的复选框的值

$(“input[type=checkbox][checked]“).each(function(){

alert($(this).val());

})

//若要将全选中的值传递给后台。则将复选框的name属性命名为namevalue[]形式

3.4 全选、取消全选和反选(单选框不能全选,能够反选)

//全选,checked的值能够是true或者checked,后者是w3c给出的值

$(“[name=‘test1‘]“).attr(“checked”,‘checked’);

//取消全选

$(“[name=‘test1‘]“).removeAttr(“checked”)//反选

$(“[name=‘test1‘]“).each(function()

{

if($(this).attr(“checked”))

{

$(this).removeAttr(“checked”);

}

else

{

$(this).attr(“checked”,’true’);

}

});

3.5 推断选中状态:$(“#test1″).attr(“checked”) :未选中返回undefined,选中返回checked。所以,$(“#test1″).attr(“checked”) == true不能作为是否选中的推断,$(“#test1″).attr(“checked”) == undefined能够作为未选中的推断。

3.6
取消选择—>$(“#test1″).attr(“checked”,false)或者$(“#test1″).removeAttr(“checked”)(ps:$(“#test1″).attr(“checked”,””)在FireFox中有效,在Google中无效)

3.7 选中某个复选框(单选框)–>$(“#test2″).attr(“checked”,true)或者$(“#test2″).attr(“checked”,”checked”)

4、下拉框:

4.1 获取选中选项的值—>$(“#slt”).val()(ps:$(“#slt”).attr(‘value’)会返回undefined)

4.2 设置—>$(“#slt”).val(‘audi’)(ps:假设select中有值为audi的选项,该选项就会被选中,假设不存在,则select不做不论什么变动)

4.3 获取选中选项的文本—>$(“#slt option:selected”).text()或者$(“#slt”).find(“option:selected”).text()

4.4 设置选中选项的文本—>$(“#slt”).find(“option:selected”).text(‘test’)或者$(“#slt option:selected”).text(‘test’);

4.5 获取选中项的索引—>$(“#slt”).get(0).selectedIndex

4.6 设置索引—>$(“#slt”).get(0).selectedIndex = index(ps:索引从0開始,index的最大值不能超过option的最大索引。否则$(“#slt”).get(0).selectedIndex 返回-1)

4.7 清空select—>$(“#slt”).html(”) 或者$(“#slt”).empty()

4.8 加入option—>$(‘<option value=”1″>1</option>’).appendTo($(“#slt”))  或者  $(“#slt”).append(‘<option value=”3″>2</option>’);

4.9 删除option—>$(“#slt option[value=‘opel‘]“).remove():删除值是opel的option(value属性要存在。相同能够依据存在的text/index属性删除option)

5、元素的可用性(disabled的官方值是disabled)

5.1 禁用元素—>$(“#text”).attr(“disabled”,true)或者$(“#text”).attr(“disabled”,”disabled”);

5.2 启用元素—>$(“#text”).attr(“disabled”,false) 或者$(“#text”).removeAttr(“disabled”);

5.3 是否可用—>$(“#text”).attr(“disabled”) 返回disabled则不可用,返回undefined则可用(ps:能够依据$(“#text”).attr(“disabled”) ==undefined的返回值推断)

下一篇:XAMPP:訪问phpmyadmin出错的解决方式

时间: 2024-10-13 23:29:51

JQuery:各种操作表单元素方法小结的相关文章

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

form.jsp: <%@ page language="java" import="java.util.*" pageEncoding="GB2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html &

jquery设置表单元素为不可用代码实例

jquery设置表单元素为不可用代码实例:本章节通过简单的实例代码介绍一下如何将表单元素设置为不可用状态.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</t

用jquery获取表单元素

表单验证需要获得表单元素,下面是获取表单元素的方法 例子: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <script src="js/jquery-1.6.min.js" type="text/javascript"></script

jQuery选取表单元素

表单元素选择器 选择器                    说明 :button                 <button>元素和type属性值为button的<input>元素. :checkbox             type属性值为checkbox的<input>元素.使用$([type="checkbox"])能获得更高的性能. :checked               选中的单选按钮和复选框元素. :disabled    

Jquery常用表单元素操作总结

页面当中经常要做一些checkbox,radio,select,input等表单元素的操作.做为我这样的懒人早就该总结以下,免去用到的时候,不想从头写,又不得不去以前的代码中翻.下面的代码来自实际项目中,亲测可用.呵呵-- 一.checkbox 对checkbox的判断往往是checkbox有没有被勾选.也经常有一个复选框控制其它全部复选框的选中和取消选中.如下图: 页面左上角的复选框的选中控制表格中所有的复选框.代码如下: 为了操作方便,给控制全选的复选框增加一个id叫checkAll 下面的

jquery的表单验证方法,一个function能不能同时捕捉点击事件和按键事件?能不能再优化下,有代码。

// 该jquery扩展引自 http://www.ghostsf.com/tools/389.html 方法名是作者博客的命名 $.fn.ghostsf_serialize = function () { var a = this.serializeArray(); var $radio = $('input[type=radio],input[type=checkbox]', this); var temp = {}; $.each($radio, function () { if (!te

用jquery获取表单元素(二)

获取input的checked值是否为true: 第一种: if($("input[name=item][value='val']").attr('checked')==true)  //判断是否已经打勾    --注:name即控件name属性,value即控件value属性 第二种: 可以不指定属性值,因一组checkbox的value值都会保存其在数据库中对应的id,最好写成如下方式: if($("input[name=row_checkbox]").attr

Jquery 获得服务器控件值的方法小结(转)

由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法. <!--服务器控件代码:--> <asp:TextBox ID="txtUserID" runat="server"></asp:TextBox> 1 //jquery方法. 2 1. $("#<%=txtUserID.ClientID%>").val(); 3 4

js jQuery取消添加超链接的方法小结

今天在工作中需要将某个链接给取消实现只触发事件的目的,后来发现批量取消链接等,脚本之家简单的给整理了下,希望对需要的朋友有所帮助. 单个链接取消链接并触发js事件 <a href="javascript:void(0);" onclick="alert('ok')">测试</a> 批量将网页中的链接取消或重新设置链接的代码: 1 2 <A href="http://www.baidu.com" >百度</