jQuery对表单元素的取值和赋值操作代码
jquery】常用的jquery获取表单对象的属性与值
jquery】常⽤的jquery获取表单对象的属性与值1【jquery】常⽤的jquery获取表单对象的属性与值234 1、JQuery的概念56789 JQuery是⼀个JavaScript的类库，这个类库集合了很多功能⽅法，利⽤类库你可以⽤⼀些简单的代码实现⼀些复杂的JS效果。
101112 2、JQuery实现了代码的分离1314不⽤再⽹页中加⼊如：onclick之类的事件来调⽤函数了，直接引⼊JQuery类库和⾃⼰编写的JQuery代码就可以了；15如：16 $(function(){17 $("Element").click{function(){18 alert("点击我哦！");19 }20 }21 })；22上⾯的代码中只要定义了Element 这个元素后⾯的click是动作2324 alert("点击我哦！");这个是要执⾏的代码，当然你可以有很多的操作在这个函数中；25这⾥⾯的$这个号代表JQuery的意思，就是引⽤类库。
2627 3、JQuery的核⼼的⼀些⽅法28 each(callback) '就像循环29 $("Element").length; ‘元素的个数，是个属性30 $("Element").size(); ’也是元素的个数，不过带括号是个⽅法31 $("Element").get(); ‘某个元素在页⾯中的集合，以数组的形式存储32 $("Element").get(index); ’功能和上⾯的相同，index表⽰第⼏个元素，数组的下标33 $("Element").get().reverse(); ‘把得到的数组⽅向34 ("Element1").index(("Element1").index(("Element2")); ’元素2在元素1中的索引值是。
jqueryselect（列表）的操作（取值赋值）
jqueryselect（ 列 表 ） 的 操 作 （ 取 值 赋 值 ）
jquery的使用方法，看了jquery_api帮助文档和官方的文档，基本所有的用法都可以找到。 但却没有找到对<select>列表的操作。 jquery对<select>的操作比较麻烦，我把常用的收集如下： 1.获取选中值：$("select[@id='pagesize_slt'] option[@selected]").val();//-----pagesize_slt是<select>的id 2.设置选中项：$("select[@id='pagesize_slt']")[0].selectedIndex = 1;//-----<select>的index从0开始，所以1是第二项 很奇怪的是，我是用id来获取的，应该是唯一值，但$("select[@id='pagesize_slt']").selectedIndex = 1;是不对的。必须加[0]。 也就是说，$("select[@id='pagesize_slt']")返回的其实是一个数组。这点需要注意。
jquery 使用方法
jQuery是目前使用最广泛的javascript函数库。
据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。
微软公司甚至把jQuery作为他们的官方库。
对于网页开发者来说，学会jQuery是必要的。
因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。
一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。
这是它区别于其他函数库的根本特点。
使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。
选择表达式可以是CSS选择器：1 $(document)//选择整个文档对象2 $('#myId')//选择ID为myId的网页元素3 $('div.myClass')//选择class为myClass的div元素4 $('input[name=first]')//选择name属性等于first的input元素也可以是jQuery特有的表达式：1 $('a:first')//选择网页中第一个a元素2 $('tr:odd')//选择表格的奇数行3 $('#myForm :input')//选择表单中的input元素4 $('div:visible') //选择可见的div元素5 $('div:gt(2)')//选择所有的div元素，除了前三个6 $('div:animated')//选择当前处于动画状态的div元素二、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩小结果集：1 $('div').has('p'); //选择包含p元素的div元素2 $('div').not('.myClass'); //选择class不等于myClass的div元素3 $('div').filter('.myClass'); //选择class等于myClass的div元素4 $('div').first(); //选择第1个div元素5 $('div').eq(5); //选择第6个div元素有一些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：1 $('div').next('p'); //选择div元素后面的第一个p元素2 $('div').parent(); //选择div元素的父元素3 $('div').closest('form'); //选择离div最近的那个form父元素4 $('div').children(); //选择div的所有子元素5 $('div').siblings(); //选择div的同级元素三、链式操作选中网页元素以后，就可以对它进行某种操作。
Jquery取form表单中的所有参数
Jquery取form表单中的所有参数转载⾃：https:///qq_15204179/article/details/82144522表单：1.<form class="" id="handle-form">2.<input type="text" name="id" id="id" value="">3.<input type="text" id="operator" name="operator" >4.</form>第⼀种获取form中数据的⽅法：new FormData（$('#uploadForm')[0]）⽤法与$("#handle-form").serialize()差不多，就是可以上传⽂件但是对于jquery的要求是，版本1.8及其以上⽅可⽀持；注意：按钮type⾮submit，⽽是buttern,Action 为空或⽆；var handle-form = $("#handle-form").serialize();1.$.ajax({2.url: "",3.type: "post",4.contentType: "application/json; charset=utf-8",5.data: $("#handle-form").serialize();,6.dataType: "json",7.success: function (data) {8.9.}第⼆种获取form中数据的⽅法：注意：按钮type⾮submit，⽽是buttern,Action 为空或⽆；1.var formSerial = {};2.$($("#handle-form").serializeArray()).each(function(){3.formSerial[] = this.value;4.});5.6.var fromValue = JSON.stringify(formSerial)1.$.ajax({2.url: "",3.type: "post",4.contentType: "application/json; charset=utf-8",5.data: JSON.stringify(formSerial),6.dataType: "json",7.success: function (data) {8.9.}form表单提交的⼏种⽅法：⼀.表单提交1.<form action=’/login’ method=’post’ id = "loginForm">2.3.<input type=’text’ name=’username’ />4.5.<input type=’password’ name=’password’/>6.7.<input type=’submit’ value=’登陆'/>8.9.</form>⼆.Ajax提交form表单1.$('#loginForm').submitForm({2.url: "/login",3.dataType: "text",4.callback: function (data) {5.6.}7.},8.before: function () {9.10.}11.}).submit();三.form表单提交附件需要设定form的enctype="multipart/form-data"并且添加<input type=’file’> 1.//jQuery提交2.$("#jqueryBtn").click(function(){3.$("#loginForm").submit();4.})1.//js提交2.$("#jsBtn").click(function(){3.document.loginForm.action="RegisterAction.action";4.document.loginForm.submit();5.6.})7.8.//js提交9.$("#jsBtn").click(function(){10.document.getElementById('').submit();11.})12.1.//ajax提交2.$("#ajaxBtn").click(function() {3.var params = $("#loginForm").serialize();4.$.ajax( {5.type : "POST",6.url : "RegisterAction.action",7.data : params,8.success : function(msg) {9.alert("success: " + msg);10.}11.});12.})。
jQuery元素属性操作实例（设置、获取及删除元素属性）
jQuery元素属性操作实例（设置、获取及删除元素属性）本⽂实例讲述了jQuery元素属性操作的⽅法。
分享给⼤家供⼤家参考，具体如下：<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="js/jquery-1.10.1.min.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[$(function(){//设置<p>元素的属性'title'$("input:eq(0)").click(function(){$("p").attr("title","选择你最喜欢的⽔果.");});//获取<p>元素的属性'title'$("input:eq(1)").click(function(){alert( $("p").attr("title") );});//删除<p>元素的属性'title'$("input:eq(2)").click(function(){$("p").removeAttr("title");});});//]]></script></head><body><input type="button" value="设置<p>元素的属性'title'"/><input type="button" value="获取<p>元素的属性'title'"/><input type="button" value="删除<p>元素的属性'title'"/><p title="T选择你最喜欢的⽔果." >你最喜欢的⽔果是?</p><ul><li title='苹果'>苹果</li><li title='橘⼦'>橘⼦</li><li title='菠萝'>菠萝</li></ul></body></html>效果图：更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。
jQueryForm表单取值的方法
jQueryForm表单取值的⽅法之前js取form表单的值都是⼀个⼀个的取，数量⼀多之后容易出错⽽且烦透了。
感谢那些愿意分享的⼈。
页⾯定义form，并给form指定id值，⾥⾯的元素只要是需要键值对应的都赋予name属性，并且name值等于后台能识别的参数名。
<form method='post' id="punishformID"><input hidden="hidden" name="Stu" value=@Model.Stu><input hidden="hidden" name="StuRuleIDs" value=@Model.StuRuleIDs></form></div><div style="margin-top:20px; padding-left:300px;"><button type="button" class="w-button w-button-submit" onclick="isagree();">确定</button></button></div>function isagree() {var obj = $('#punishformID').serialize();$.ajax({type: "POST",url: "/Discipline/IsAgree",data: obj,// 要提交的表单success: function (msg) {easyuiAlert(msg);},error: function (error) {easyuiAlert(error);}});}$('#punishformID').serialize();就是取上⾯form的值，得到的是object，可以直接传递给后台。
Jquery给easyui的表单元素赋值，获取值总结
Jquery给easyui的表单元素赋值，获取值总结1.Inputa. validatebox定义：<input type="text" name="APPLYDEPTNAME" id="APPLYDEPTNAME" style="width: 99%"maxlength="50"class="easyui-validatebox" data-options="required:true" />赋值：$("#APPLYDEPTNAME").val('1212'),取值：$("#APPLYDEPTNAME").val()boBox定义：<td colspan="5">城市:<input id="city" style="width: 80px"class="easyui-combobox" data-options=" valueField: 'CityAreaCode', textField: 'CityAreaName', url: '../../Ajax/InforService.ashx?Method=GetCity', onSelect: function(rec){var url = '../../Ajax/InforService.ashx?Method=GetArea&CityAreaCode='+rec.CityAreaCode;$('#area').combobox('reload', url);$('#area').combobox('setValues', '');}" />区县:<input id="area"class="easyui-combobox" data-options="valueField:'CityAreaCode',textField:'CityAreaName'" />街道:<input type="text" value="" onchange="doValue(this.value)" style="width: 45%" name="SC001_APPLYDEPTADDRESS"maxlength="23"class="easyui-validatebox" id="SC001_APPLYDEPTADDRESS" data-options="required:true" />取值：$("#city2").combobox("getValues")$("#city").combobox("getValues") + "," + $("#area").combobox("getValues") + "," + $("#SC001_APPLYDEPTADDRESS").val(),赋值：$('#city').combobox('setValue', ‘北京’);回显：//公司地址var str4 = result.APPLYDEPTADDRESS;if (str4 != null) {var strs4 = new Array();strs4 = str4.split(",");$('#city').combobox('setValue', strs4[0]);var url = '../../Ajax/InforService.ashx?Method=GetArea&CityAreaCode=' + strs4[0];$('#area').combobox('reload', url);$('#area').combobox('setValue', strs4[1]);$("#APPLYDEPTADDRESS").val(strs4[2]);}还有这种写法： <input class="easyui-combobox" id="maxAge" name="maxAge" style="width:100px" data-options="valueField:'value',textField:'lable',data:[{lable:'不限',value:'-1',selected:true},{lable:'1',value:'1'},{lable:'10',value:'10'},{lable:'20',value:'20'},{lable:'30',value:'30'},{lable:'40',value:'40'},{lable:'50',value:'50'},{lable:'60',value:'60'},{lable:'70',value:'70'},{lable:'80',value:'80'},{lable:'90',value:'90'},{lable:'100',value:'100'},{lable:'200',value:'200'},{lable:'300',value:'300'}]"/>c.NumberBox定义：<input type="text"class="easyui-numberbox" maxlength="20" name="nn" id="nn" />赋值：$('#nn').numberbox('setValue', 206.12);取值：var v = $('#nn').numberbox('getValue');d.DateBox定义：<input type="text" name="nn" id="nn"class="easyui-datebox"data-options="formatter:myDate.InitDateBox.formatter,parser:myDate.InitDateBox. parser" />赋值：$("#SC001_CERTIFICATEVALID").datebox('setValue', '2014-9-12');取值：$('#nn').datebox('getValue'),e.NumberSpinner定义：<input id="ss"class="easyui-numberspinner" style="width:80px;"required="required" data-options="min:10,max:100,editable:false">赋值：$('#ss').numberspinner('setValue', 8234725);取值：var v = $('#ss').numberspinner('getValue');f.menubutton定义：<a href="javascript:void(0)" id="mb" name="mb" disabled="true"class="easyui-menubutton"data-options="menu:'#mm',iconCls:'icon-edit' ">确认</a><div id="mm" name="mm"style="width:150px;"><div data-options="iconCls:'icon-undo'" onclick="initTool.Check('确认通过')">确认通过</div><div data-options="iconCls:'icon-redo'" onclick="initTool.Check('确认不通过')">确认不通过</div></div>另附单选按钮Radio定义<td height="30" colspan="5"><input type="radio" name="APPLYDEPTTYPE" value="事业法⼈"checked="checked" />事业法⼈ <input type="radio" name="APPLYDEPTTYPE" value="企业法⼈" />企业法⼈<input type="radio" name="APPLYDEPTTYPE" value="社团法⼈" />社团法⼈<input type="radio" name="APPLYDEPTTYPE" value="其他" />其他</td>赋值：var str = result.APPLYDEPTTYPE;$("[value='" + str + "']").attr("checked", true);取值：$('input[name="APPLYDEPTTYPE"]:checked').val()另附多选框checkbox定义：<td height="60" colspan="5">         <input type="checkbox" name="BUSINESSSCOPE" value="⽔" />⽔         <input type="checkbox" name="BUSINESSSCOPE" value="空⽓" />空⽓          <input type="checkbox" name="BUSINESSSCOPE" value="⼟壤" />⼟壤</br>         <input type="checkbox" name="BUSINESSSCOPE" value="噪声" />噪声          <input type="checkbox" name="BUSINESSSCOPE" value="⽣物" />⽣物</td>赋值：var str3 = result.BUSINESSSCOPE;if (str3 != null) {var strs = new Array();strs = str3.split(",");for (i = 0; i < strs.length; i++){ $("[value='" + strs[i] + "']").attr("checked", true) };}取值：var isc = "";$("input[name='BUSINESSSCOPE']:checked").each(function () { //遍历table⾥的全部checkboxisc += $(this).val() + ","; //获取被选中的值});if (isc.length > 0) //如果获取到isc = isc.substring(0, isc.length - 1); //把最后⼀个逗号去掉string isc就是值2.TextArea定义：<textarea cols="25" rows="3" name="BUSINESSALLOW" id="BUSINESSALLOW" onpropertychange="if(this.value.length>100){this.value=this.value.substr(0,100)}" class="easyui-validatebox" style="width: 99%; height: 99%" data-options="req 赋值和取值与Input标签相同。
jquery中 html()、text() 、val() + 常用表单元素
1..html()用为读取和修改元素的HTML标签2..text()用来读取或修改元素的纯文本内容3..val()用来读取或修改表单元素的value值。
这三个方法功能上的对比1..html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的HTML内容（包括其Html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。
其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
【text也是只能读取第一个选中元素的文本】2..html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
3..html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
例子：<div id="div"><p>here is a paragram</p><div>here is a big DIV</div></div>function showVal(){var div = $("#div");alert("showVal(): "+div.val());显示为空}function showHtml(){var div = $("#div");alert("showHtml(): "+div.html());显示为：<p>here is a paragram</p><div>here is a big DIV</div>}function showText(){var div = $("#div");alert("showText(): "+div.text());显示为：here is a paragramhere is a big DIV}总结：val()---一般用在input上，而不用在其他元素，用来获取input 或者是select的值html()和text()可用在多种元素上，但是html()相当于依据源代码返回，也就是在返回的内容中会包含各种tag，而text()则相当于是依据页面显示返回，返回的内容是出去各种tag之间的内容html属性中有两个方法，一个有参，一个无参1. 无参html（）：取得第一个匹配元素的html内容。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
使用常规的思路：$(“#keyword”).value 取值是取不到的，因为此时$(‘#keydord’)已经不是个element，而是个jquery对象，所以应该使用：$(“#keyword”).val()$("#keyword")[0].value = "";/*获得TEXT.AREATEXT的值*/var textval = $("#text_id").attr("value");//或者var textval = $("#text_id").val();/*获取单选按钮的值*/var valradio = $("input[type=radio]:checked").val();/*获取一组名为(items)的radio被选中项的值*/var item = $('input[name=items]:checked').val();/*获取复选框的值*/var checkboxval = $("#checkbox_id").attr("value")；/*获取下拉列表的值*/var selectval = $('#select_id').val();/*文本框，文本区域*/$("#text_id").attr("value",");//清空内容$("#text_id").attr("value",'test');//填充内容/*多选框checkbox*/$("#chk_id").attr("checked",");//使其未勾选$("#chk_id").attr("checked",true);//勾选if($("#chk_id").attr('checked')==true) //判断是否已经选中/*单选组radio*/$("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项/*下拉框select*/$("#select_id").attr("value",'test');//设置value=test的项目为当前选中项$("testtest2").appendTo("#select_id")//添加下拉框的option$("#select_id").empty()；//清空下拉框/*获取一组名为(items)的radio被选中项的值*/var item = $('input[name=items]:checked').val(); //若未被选中则val() = undefined/*获取select被选中项的文本*/var item = $("select[name=items] option:selected").text();/*select下拉框的第二个元素为当前选中值*/$('#select_id')[0].selectedIndex = 1;/*radio单选组的第二个元素为当前选中值*/$('input[name=items]').get(1).checked = true;/*重置表单*/$("form").each(function(){.reset();});jQuery对html元素取值与赋值Jquery给基本控件的取值、赋值TEXTBOX: var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框，文本区域：$("#text_id").attr("value",'');//清空内容$("#text_id").attr("value",'test');// 填充内容Jquery给基本控件的取值、赋值TEXTBOX:var str = $('#txt').val();$('#txt').val("Set Lbl Value");//文本框，文本区域：$("#text_id").attr("value",'');//清空内容$("#text_id").attr("value",'test');// 填充内容LABLE:var str = $('#lbl').text();$('#lbl').text("Set Lbl Value");var valradio = $("input[@type=radio][@checked]").val();var item = $('input[@name=items][@checked]').val();var checkboxval = $("#checkbox_id").attr("value")；var selectval = $('#select_id').val();//多选框checkbox：$("#chk_id").attr("checked",'');//使其未勾选$("#chk_id").attr("checked",true);// 勾选if($("#chk_id").attr('checked')==true) //判断是否已经选中单选组radio：$("input[@type=radio]").attr("checked",'2'); //设置value=2的项目为当前选中项//下拉框select：$("#select_id").attr("value",'test');// 设置value=test的项目为当前选中项$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")//添加下拉框的option$("#select_id").empty()；//清空下拉框获取一组名为(items)的radio被选中项的值var item = $('input[@name=items][@checked]').val();//若未被选中则val() = undefined获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();select下拉框的第二个元素为当前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[@name=items]').get(1).checked = true;//重置表单$("form").each(function(){.reset();});摘要：Jquery给基本控件的取值、赋值TEXTBOX: var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框，文本区域：$("#text_id").attr("value",'');//清空内容$("#text_id").attr("value",'test');// 填充内容Jquery给基本控件的取值、赋值TEXTBOX:var str = $('#txt').val();$('#txt').val("Set Lbl Value");//文本框，文本区域：$("#text_id").attr("value",'');//清空内容$("#text_id").attr("value",'test');// 填充内容LABLE:var str = $('#lbl').text();$('#lbl').text("Set Lbl Value");var valradio = $("input[@type=radio][@checked]").val();var item = $('input[@name=items][@checked]').val();var checkboxval = $("#checkbox_id").attr("value")；var selectval = $('#select_id').val();//多选框checkbox：$("#chk_id").attr("checked",'');//使其未勾选$("#chk_id").attr("checked",true);// 勾选if($("#chk_id").attr('checked')==true) //判断是否已经选中单选组radio：$("input[@type=radio]").attr("checked",'2'); //设置value=2的项目为当前选中项//下拉框select：$("#select_id").attr("value",'test');// 设置value=test的项目为当前选中项$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")//添加下拉框的option$("#select_id").empty()；//清空下拉框获取一组名为(items)的radio被选中项的值var item = $('input[@name=items][@checked]').val();//若未被选中则val() = undefined获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();select下拉框的第二个元素为当前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[@name=items]').get(1).checked = true;//重置表单$("form").each(function(){.reset();});。