网站框架策划,华夏名网网站建设,沧州制作网站,奉化首页的关键词优化js/jQuery 的一些常用操作#xff08;js/jQuery获取表单元素值 以及 清空元素值的各种实现方式#xff09;——附测试例子#xff0c;拿来即能实现效果 1. 前言2. 获取表单元素的值2.1 简单获取元素中的值2.1.1 根据 id 简单取值2.2.2 根据name 简单取值2.1.3 获取单选按钮的… js/jQuery 的一些常用操作js/jQuery获取表单元素值 以及 清空元素值的各种实现方式——附测试例子拿来即能实现效果 1. 前言2. 获取表单元素的值2.1 简单获取元素中的值2.1.1 根据 id 简单取值2.2.2 根据name 简单取值2.1.3 获取单选按钮的值2.1.4 获取复选框的值2.1.5 获取下拉选项的值下拉单选2.1.6 获取下拉选项的值下拉多选2.1.6.1 实现效果2.1.6.2 使用trigger自动触发 使用onchange事件触发2.1.6.3 使用trigger自动触发使用onload事件处理加载 2.1.7 附代码 2.2 获取元素节点的子节点2.1 简单例子12.2 简单例子2--table例子 3. js/jQuery清空清空元素3.1 js/jQuery清空一般输入框3.2 js/jQuery清空单选按钮3.3 js/jQuery清空复选框3.4 js/jQuery清空下拉框3.5 统一设置class属性 清空3.6 注意3.7 附完整代码 1. 前言
再忙也不让写作停下简单分享一下供需要的童鞋使用如需了解更多可去去官网查看推荐部分网址如下https://jquery.com/.https://developer.mozilla.org/zh-CN/.
2. 获取表单元素的值
2.1 简单获取元素中的值
2.1.1 根据 id 简单取值 实现代码如下 function getValueById(){ 1. js // 1.1 对于输入框的var city document.getElementById(city_id).value;alert(city);// 1.2 对于div的等innerText 或 innerHTMLvar test document.getElementById(aa_test).innerText;alert(test);var test2 document.getElementById(aa_test).innerHTML;alert(test2); 2. jQuery // 2.1 对于输入框的var name_1 $(#cn_name_1).val();alert(name_1);// 2.2 对于div的等itext() 或 html()// 2.2.1 使用text()方法获取纯文本内容alert( $(#aa_test).text() );// 2.2.2 使用html()方法获取包含HTML标签的内容alert( $(#aa_test).html() );
}2.2.2 根据name 简单取值 实现代码如下 function getValueByName(){ 1. js //1.1 直接获取一个var age_1 document.getElementsByName(age)[0].value;alert(age_1);// 1.2 js循环获取var my_names document.getElementsByName(cn_name);for(var i0; i my_names.length ; i){alert(my_names[i].value);}// 1.3 forEach 循环document.getElementsByName(cn_name).forEach((item{alert(item.value);})); 2. jQuery // 2.1 只有一个 name是age 的输入框注意.val() .value var age $(input[nameage]).val();var age2 $(input[nameage])[0].value;alert(age);alert(age2);// 2.2 多个name属性值是cn_name的alert($(input[namecn_name])[0].value);alert($(input[namecn_name])[1].value);alert($(input[namecn_name]).get(0).value); alert($(input[namecn_name]).get(1).value);// 2.3 jQuery循环获取多个name属性值是cn_name的$(input[namecn_name]).each(function(){alert($(this).val());});
}2.1.3 获取单选按钮的值 实现代码如下 sex: input typeradio namesex valueman/ 男input typeradio namesex valuewoman checkedtrue/ 女function getRadioCheckedValue(){ 1. js // 1.1 普通方法var data document.getElementsByName(sex);var checkedValue ;for(var i0; i data.length ; i){if(data[i].checked){checkedValue data[i].value;break;}}alert(checkedValue);// 1.2 使用 querySelectorvar checkedValue_2 document.querySelector(input[namesex]:checked).value;alert(checkedValue_2); 2. jQuery // 2.1 通过循环找到var jQuery_checked_1 ;$(input[namesex]).each(function(){if($(this).is(:checked)){jQuery_checked_1 $(this).val();return false; // 结束each()循环}});alert(jQuery_checked_1);// 2.2 简单获取法var radioValue_2 $(input[namesex]:checked).val();alert(radioValue_2);
}2.1.4 获取复选框的值
代码实现如下funs: 篮球input typecheckbox namefuns value篮球/、排球input typecheckbox namefuns value排球/、乒乓input typecheckbox namefuns value乒乓/function getCheckBoxValues(){ 1. js var datas document.getElementsByName(funs); var checkedVals []; //存储选中的值for(var i0; idatas.length; i){if(datas[i].checked){checkedVals.push(datas[i].value);}}alert(checkedVals); 2. jQuery var checkedVals_2 []; //存储选中的值$(input[namefuns]:checked).each(function(){checkedVals_2.push($(this).val());});alert(checkedVals_2);
}2.1.5 获取下拉选项的值下拉单选
实现代码如下school: select classform_data idschool_idoption--请选择--/optionoption value河南大学 selectedtrue河南大学/optionoption value南开大学南开大学/option/selectfunction getSelectValue(){ 1. js var data document.getElementById(school_id);// 1.1 方式一直接.valuealert(1- data.value);// 1.2 方式2var selectSchool data.options[data.selectedIndex].value;alert(2- selectSchool); 2. jQuery // 2.1 获取下拉列表选定的值var jquery_selectedValue $(#school_id).val();alert(3- jquery_selectedValue);// 2.2 获取下拉列表选定的文本var jquery_selectedText $(#school_id option:selected).val();alert(4- jquery_selectedText);// 2.3 jQuery获取的 方式3var jquery_selectedSchool ;$(#school_id option:selected).each(function() {jquery_selectedSchool $(this).text();});alert(5- jquery_selectedSchool);
}2.1.6 获取下拉选项的值下拉多选
2.1.6.1 实现效果
先看效果如下
2.1.6.2 使用trigger自动触发 使用onchange事件触发
实现代码如下下拉选多个的情况 brselect idcolor_id namecolor stylewidth: 60px; multiplemultiple onchangechangeData()!-- select idcolor_id namecolor stylewidth: 60px; multiplemultiple --option黑色/optionoption selectedselected白色/optionoption红色/optionoption selectedselected蓝色/optionoption绿色/optionoption粉色/optionoption天蓝色/optionoption海蓝色/option/selectdiv idcolor_div stylecolor: rgb(255, 0, 128)/divscript// 备注1使用 trigger 自动触发的话js代码应该写在 form表单的下面否则不生效因为加载问题// 将js代码编写到页面的下部就是为了可以在页面加载完毕以后再执行js代码$( #color_id ).on( change, function() {var str ;$(#color_id option:selected ).each(function() {str $( this ).text() ;});$(#color_div).text( str );} ).trigger(change);// 备注2: 对于change 事件触发的代码放哪里都可以function changeData(){var str ;$( #color_id option:selected ).each(function() {str $(this).text() ;} );$(#color_div).text( str );}
/script2.1.6.3 使用trigger自动触发使用onload事件处理加载 当然上面使用trigger自动触发的代码如果不想写在form表单的下面非要写在head里的话也不是不可以只需使用onload事件即可解决如下 // onload事件会在整个页面加载完成之后才触发
window.onload function(){// alert(这个触发时间是整个页面都加载完成之后才触发);$( #color_id ).on( change, function() {var str ;$(#color_id option:selected ).each(function() {str $( this ).text() ;});$(#color_div).text( str );} ).trigger(change);
}2.1.7 附代码 页面效果如下 页面以及js完整代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscriptfunction getValueById(){ 1. js // 1.1 对于输入框的var city document.getElementById(city_id).value;alert(city);// 1.2 对于div的等innerText 或 innerHTMLvar test document.getElementById(aa_test).innerText;alert(test);var test2 document.getElementById(aa_test).innerHTML;alert(test2); 2. jQuery // 2.1 对于输入框的var name_1 $(#cn_name_1).val();alert(name_1);// 2.2 对于div的等itext() 或 html()// 2.2.1 使用text()方法获取纯文本内容alert( $(#aa_test).text() );// 2.2.2 使用html()方法获取包含HTML标签的内容alert( $(#aa_test).html() );}function getValueByName(){ 1. js //1.1 直接获取一个var age_1 document.getElementsByName(age)[0].value;alert(age_1);// 1.2 js循环获取var my_names document.getElementsByName(cn_name);for(var i0; i my_names.length ; i){alert(my_names[i].value);}// 1.3 forEach 循环document.getElementsByName(cn_name).forEach((item{alert(item.value);})); 2. jQuery // 2.1 只有一个 name是age 的输入框注意.val() .value var age $(input[nameage]).val();var age2 $(input[nameage])[0].value;alert(age);alert(age2);// 2.2 多个name属性值是cn_name的alert($(input[namecn_name])[0].value);alert($(input[namecn_name])[1].value);alert($(input[namecn_name]).get(0).value); alert($(input[namecn_name]).get(1).value);// 2.3 jQuery循环获取多个name属性值是cn_name的$(input[namecn_name]).each(function(){alert($(this).val());});}function getRadioCheckedValue(){ 1. js // 1.1 普通方法var data document.getElementsByName(sex);var checkedValue ;for(var i0; i data.length ; i){if(data[i].checked){checkedValue data[i].value;break;}}alert(checkedValue);// 1.2 使用 querySelectorvar checkedValue_2 document.querySelector(input[namesex]:checked).value;alert(checkedValue_2); 2. jQuery // 2.1 通过循环找到var jQuery_checked_1 ;$(input[namesex]).each(function(){if($(this).is(:checked)){jQuery_checked_1 $(this).val();return false; // 结束each()循环}});alert(jQuery_checked_1);// 2.2 简单获取法var radioValue_2 $(input[namesex]:checked).val();alert(radioValue_2);}function getCheckBoxValues(){ 1. js var datas document.getElementsByName(funs); var checkedVals []; //存储选中的值for(var i0; idatas.length; i){if(datas[i].checked){checkedVals.push(datas[i].value);}}alert(checkedVals); 2. jQuery var checkedVals_2 []; //存储选中的值$(input[namefuns]:checked).each(function(){checkedVals_2.push($(this).val());});alert(checkedVals_2);}function getSelectValue(){ 1. js var data document.getElementById(school_id);// 1.1 方式一直接.valuealert(1- data.value);// 1.2 方式2var selectSchool data.options[data.selectedIndex].value;alert(2- selectSchool); 2. jQuery // 2.1 获取下拉列表选定的值var jquery_selectedValue $(#school_id).val();alert(3- jquery_selectedValue);// 2.2 获取下拉列表选定的文本var jquery_selectedText $(#school_id option:selected).val();alert(4- jquery_selectedText);// 2.3 jQuery获取的 方式3var jquery_selectedSchool ;$(#school_id option:selected).each(function() {jquery_selectedSchool $(this).text();});alert(5- jquery_selectedSchool);}/script
/head
bodyformdiv idaa_testaaa/divcity: input idcity_id typetext namecity value北京 br/name1: input id cn_name_1 typetext namecn_name br/name2: input typetext namecn_name br/age: input idage typetext nameage/ br/sex: input typeradio namesex valueman/ 男input typeradio namesex valuewoman checkedtrue/ 女br/funs: 篮球input typecheckbox namefuns value篮球/、排球input typecheckbox namefuns value排球/、乒乓input typecheckbox namefuns value乒乓/brschool: select classform_data idschool_idoption--请选择--/optionoption value河南大学 selectedtrue河南大学/optionoption value南开大学南开大学/option/selectbr/brbr!-- 用button标签 点击会刷新 --!-- button οnclickgetValueById()根据id取值/buttonbutton οnclickgetValueByName()根据name取值/button --input typebutton value根据id取值 onclickgetValueById()/input typebutton value根据name取值 onclickgetValueByName()/input typebutton value获取单选按钮的值 onclickgetRadioCheckedValue()/input typebutton value获取复选框的值 onclickgetCheckBoxValues()/input typebutton value获取下拉选项的值 onclickgetSelectValue()/hrbrbr下拉选多个的情况 brselect idcolor_id namecolor stylewidth: 60px; multiplemultiple onchangechangeData()!-- select idcolor_id namecolor stylewidth: 60px; multiplemultiple --option黑色/optionoption selectedselected白色/optionoption红色/optionoption selectedselected蓝色/optionoption绿色/optionoption粉色/optionoption天蓝色/optionoption海蓝色/option/selectdiv idcolor_div stylecolor: rgb(255, 0, 128)/div/formscript// 备注1使用 trigger 自动触发的话js代码应该写在 form表单的下面否则不生效$( #color_id ).on( change, function() {var str ;$(#color_id option:selected ).each(function() {str $( this ).text() ;});$(#color_div).text( str );} ).trigger(change);// 备注2: 对于change 事件触发的代码放哪里都可以function changeData(){var str ;$( #color_id option:selected ).each(function() {str $(this).text() ;} );$(#color_div).text( str );}/script/body
/html2.2 获取元素节点的子节点
2.1 简单例子1
实现代码如下!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescriptfunction getUlChilds_1(){//1. 获取id为dogKinds的元素var dogKinds document.getElementById(dogKinds);//查找 #dogKinds下的所有li节点 getElementsByTagName-返回当前节点的指定标签名后代节点var li_datas dogKinds.getElementsByTagName(li);console.log(dogKinds);console.log(li_datas);for(var i0; ili_datas.length; i){console.log(li_datas[i].innerHTML);}}function getUlChilds_2(){var dogKinds document.getElementById(dogKinds);//获取dogKinds下的所有子元素var children dogKinds.children;console.log(children);for(var i0;ichildren.length;i){console.log(children[i].innerHTML);}}/script/headbodyul iddogKindsli idkind_1麦兜/lili贝塔/lili泡泡/lili可乐/lili大豆/li/ulbrinput typebutton value获取子节点-1 onclickgetUlChilds_1()input typebutton value获取子节点-2 onclickgetUlChilds_2()/body
/html效果如下
2.2 简单例子2–table例子
这个可以看下面的文章里面有用到如下 CSS解决div行变块 ➕ CSS解决“table中的td文字溢出控制显示字数显示省略号”的问题.
3. js/jQuery清空清空元素
3.1 js/jQuery清空一般输入框
实现代码如下
3.2 js/jQuery清空单选按钮
实现代码如下 function clearData_radio(){// 3. 针对 单选注意下面写法均可以实现需要注意的是 attr使用于JQuery1.5及以下prop适用于JQuery1.5以上的版本$(input[typeradio]).removeAttr(checked);$(input[namesex]:checked).removeAttr(checked);$(input[namesex]:checked).attr(checked,false);$(input[typeradio]).prop(checked, false);
}3.3 js/jQuery清空复选框
实现代码如下 function clearData_checkbox(){// 4. 针对复选框// 4.1 方式1——js实现var box document.getElementsByName(funs);
for(var i 0;ibox.length;i){box[i].checked false;}// 4.2 方式2——jQuery使用 attr 或 prop 实现// 4.2.1 使用 attr() 实现 注意jQuery 1.5.x 及以下// 4.2.1.1 所有的复选框$(:checkbox).removeAttr(checked);// 4.2.1.2 指定复选框// removeAttr 或 attr 都可以$(input[namefuns]:checked).removeAttr(checked);$(input[namefuns]:checked).attr(checked,false);// 4.2.1.3 循环处理$(input[namefuns]:checked).each(function(){// 下面 3种写法 均可以实现$(this).removeAttr(checked);$(this).attr(checked,false);this.checked false;});// 4.2.2 方式2——jQuery使用 prop()实现注意jQuery 1.5以上的版本$(input[typecheckbox]).prop(checked,false); // 所有的复选框$(input[namefuns]:checked).prop(checked,false); // 指定 funs 的复选框}3.4 js/jQuery清空下拉框
实现代码如下先贴图后面有完整代码
3.5 统一设置class属性 清空
代码及细节如下 总结 如果要用class属性的话class的值最好统一方便管理比如代码可以简化成$(.clear_data).val();// 对于一般输入框 和 下拉$(.clear_data).prop(checked, false);//对于单选 和 复选但是个人认为对于单选 和 复选 的还是使用上面的方便更简单如下$(input[typeradio]).prop(checked, false);
$(:radio).removeAttr(checked);$(:checkbox).removeAttr(checked);
……3.6 注意
removeAttr() 有时候高版本不可用有时候可用比如 $(:radio).removeAttr(checked); 在3.7的版本里可以使用而 $(:checkbox).removeAttr(checked); 在3.7的版本里不可使用所以使用时还需看具体情况
3.7 附完整代码
如下!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title!-- script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/script --script srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.3.2/jquery.min.js/scriptscriptwindow.onload function(){// alert(这个触发时间是整个页面都加载完成之后才触发);$( #color_id ).on( change, function() {var str ;$(#color_id option:selected ).each(function() {str $( this ).text() ;});$(#color_div).text( str );} ).trigger(change);}function clearData_simple_input(){// 1. 根据 id 清空 (输入框)$(#city_id).val();document.getElementById(cn_name_1).value ;// 2. 根据 name 清空 (输入框)document.getElementsByName(cn_name)[1].value ;}function clearData_radio(){// 3. 针对 单选注意下面写法均可以实现需要注意的是 attr使用于JQuery1.5及以下prop适用于JQuery1.5以上的版本$(input[typeradio]).removeAttr(checked);$(input[namesex]:checked).removeAttr(checked);$(input[namesex]:checked).attr(checked,false);$(input[typeradio]).prop(checked, false);}function clearData_checkbox(){// 4. 针对复选框// 4.1 方式1——js实现var box document.getElementsByName(funs);for(var i 0;ibox.length;i){box[i].checked false;}// 4.2 方式2——jQuery使用 attr 或 prop 实现// 4.2.1 使用 attr() 实现 注意jQuery 1.5.x 及以下// 4.2.1.1 所有的复选框$(:checkbox).removeAttr(checked);// 4.2.1.2 指定复选框// removeAttr 或 attr 都可以$(input[namefuns]:checked).removeAttr(checked);$(input[namefuns]:checked).attr(checked,false);// 4.2.1.3 循环处理$(input[namefuns]:checked).each(function(){// 下面 3种写法 均可以实现$(this).removeAttr(checked);$(this).attr(checked,false);this.checked false;});// 4.2.2 方式2——jQuery使用 prop()实现注意jQuery 1.5以上的版本$(input[typecheckbox]).prop(checked,false); // 所有的复选框$(input[namefuns]:checked).prop(checked,false); // 指定 funs 的复选框}function clearData_select(){// 5. 针对下拉// 5.1 js实现下拉取消选中// 5.1.1 设置value注意这种方式要把“请选择”这一项的value设置成“” 即option value--请选择--/optiondocument.getElementById(school_id).value ;// 5.1.2// 获取下拉列表元素var select document.getElementById(school_id);// 取消选中select.selectedIndex 0; // 设置0下拉里的第一个被选中比如“请选择”设置-1没有一个被选中// 5.2 jQuery实现下拉取消选中// 5.2.1 使用 attr下面写法均可以实现 (需要注意的是jQuery版本1.5及以下)$(#school_id).find(option:selected).attr(selected, false);$(#school_id).children(option:selected).attr(selected, false);$(#color_id).children(option:selected).each(function(){// 注意这里用的是children不是getElementsByTagNamechildren获取到的是所有子元素子元素$(this).attr(selected, false);});// 5.2.2 使用 prop下面写法均可以实现 (需要注意的是jQuery版本1.5以上)// 取消所有选中项下拉写法均可实现$(#school_id option).prop(selected, false);$(#school_id).find(option:selected).prop(selected, false);$(#school_id).children(option:selected).prop(selected, false);// 取消指定选中项$(#school_id option[value河南大学]).prop(selected, false);// 循环处理$(#school_id).find(option).each(function(){$(this).prop(selected, false)});$(#color_id).find(option:selected).each(function(){if($(this).val()白色){$(this).prop(selected, false)}});}function clearDataByClass(){$(.clear_data_div).text();// 对于div$(.clear_data_input).val();// 对于一般输入框$(.clear_data_select).val();// 对于下拉但是需要将请选择的value设置为“”// 对于单选 和 复选的 要用attr 或者 prop具体用哪个根据jQuery的版本而使用$(.clear_data_radio_checkbox).removeAttr(checked);$(.clear_data_radio_checkbox).attr(checked,false);$(.clear_data_radio_checkbox).prop(checked, false);// $(input[typeradio]).prop(checked, false);// $(:radio).removeAttr(checked);// $(:checkbox).removeAttr(checked);}/script
/head
bodyformdiv classclear_data_div idaa_testaaa/divcity: input classclear_data_input idcity_id typetext namecity value北京 br/name1: input id cn_name_1 typetext namecn_name br/name2: input typetext namecn_name br/age: input idage typetext nameage/ br/sex: input classclear_data_radio typeradio namesex valueman/ 男input classclear_data_radio typeradio namesex valuewoman checkedtrue/ 女br/funs: 篮球input classclear_data_radio_checkbox typecheckbox namefuns value篮球/、排球input classclear_data_radio_checkbox typecheckbox namefuns value排球/、乒乓input classclear_data_radio_checkbox typecheckbox namefuns value乒乓/brschool: select classclear_data_select idschool_idoption value--请选择--/optionoption value河南大学河南大学/optionoption value南开大学南开大学/option/selectbr/brbrinput typebutton value置 空-简单输入框 onclickclearData_simple_input()/input typebutton value置 空-单选 onclickclearData_radio()/input typebutton value置 空-复选框 onclickclearData_checkbox()/input typebutton value置 空-下拉 onclickclearData_select()/br/input typebutton value置 空-根据class onclickclearDataByClass()/hrbrbr下拉选多个的情况 brselect idcolor_id namecolor stylewidth: 60px; multiplemultiple onchangechangeData()!-- select idcolor_id namecolor stylewidth: 60px; multiplemultiple --option黑色/optionoption selectedselected白色/optionoption红色/optionoption selectedselected蓝色/optionoption绿色/optionoption粉色/optionoption天蓝色/optionoption海蓝色/option/selectdiv idcolor_div stylecolor: rgb(255, 0, 128)/div/form/body
/html
