巧用jQuery选择器提高写表单效率的方法

jQuery 前端之家
前端之家收集整理的这篇文章主要介绍了巧用jQuery选择器提高写表单效率的方法，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

相信很多小伙伴都会遇到需要做表单的需求，就像我现在做的医院项目，茫茫多的表单无穷无尽。一开始做表单使用最笨的方法：一个个span去定义ID，每个数据都用ajax获取后赋值显示，然后在表单提交前一个个用jQuery根据ID获取元素的value，组成一个model来提交给服务器。 后来发现使用jQuery可以大大简化这个过程。于是我修改了工作方法，总结了我的一些提高写表单效率的方法。

需求

表单中存在最多的无非就是文本、文本框、单选框、多选框。而一些表单中会有几十个甚至几百个选项。我们的目标就是以最高的效率来完成这些表单的数据获取和数据提交。 注意：如果元素ID和服务器上获取的json字段的名字是一样的，那么这篇文章或许能对你提高工作效率有所帮助。

文本和文本框

对于文本和文本框，我们通常需要为元素添加ID来绑定和获取数据。

将数据显示到界面中 •用for循环遍历解析成功的JSON数据 •通过if判断过滤数据是span的还是input的。 •将数据传给和数据名同名的ID元素。

快速获取数据对象用于提交服务器 •定义空model对象。 •通过jQuery选择器获取目标元素的value。 •将数据传入model中，对象元素的字段就是HTML元素的ID。

按照如下方法，我们只需要照着后端提供的数据字段给HTML定义id，而JS就不需要写太多代码就可以完成表单了。再也不怕表单字段太多了。

全部代码

<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>
<html lang="en">

<Meta charset="UTF-8"> Title

Radio和CheckBox

另外一种经常出现于表单中的就是radio、checkBox这些单选多选的元素了。这些元素通常用name命名一组选项。下面我同样用jQuery简化数据的显示和提交。

显示数据

和之前的文本一样，用for循环遍历json数据，然后通过if过滤后显示到界面。不同之处是这边是通过name来显示和绑定数据的。 注：对radio和checkBox处理的方法写在了后面，所以复制粘贴的同学们请注意别漏了~

dio') { showRadioValue(key,json[key]); } if ($('input[name=' + key + ']').attr('type') == 'checkBox') { showCheckBoxValue(key,json[key]); } }

获取数据model的方法 •定义空model对象。 •定义name避免重复添加。 •遍历所有radio获取结果传给model •遍历所有checkBox获取结果传给model

dioName = ''; var checkBoxName = ''; $("input[type='radio']").each(function () { if($(this).attr('name') != radioName){ radioName = $(this).attr('name'); model[radioName] = getRadioValue(radioName); } }); $("input[type='checkBox']").each(function () { if($(this).attr('name') != checkBoxName){ checkBoxName = $(this).attr('name'); model[checkBoxName] = getCheckBoxValue(checkBoxName); } }); console.log(model); }

处理radio和checkBox的一些方法

这里我对radio和checkBox的显示和获取结果写了几个方法。

dioValue(name,value) { $('input[name=' + name + ']').each(function () { if(value == $(this).val()){ $(this).attr('checked','true'); } }); } 
function getRa<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>Value(name) {
  var value = 0;
  var i = 0;
  $('input[name=' + name + ']' ).each(function () {
    if ($('input[name=' + name + ']').eq(i).is( ':checked')) {
      value = $('input[name=' + name + ']').eq(i).val();
      return;
    }
    i++;
  });
  return value;
}

function showCheck<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Value (name,value) {
  var values = value.split(',' );
  var row = 1;
  $('input[name="' + name + '"]').each( function () {
    if (values[row] == 1) {
      $(this).attr("checked",'true');
    }
    row++;
  });
}

function getCheck<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Value (name) {
  var text = "" ;
  $('input[name="' + name + '"]').each( function () {
    var t = '' ;
    if ($(this ).is(':checked')) {
      t = "1";
    } else {
      t = "0";
    }
    text += "," + t;
  });
  return text;
}

代码

<Meta charset="UTF-8"> Title

Tips

•如果有一些特殊处理的内容（如时间格式文本），可以先遍历后在遍历之后单独进行赋值。 •以上方法可以用于所有以ID定义的用于显示和获取数据的HTML元素。 •用好jQuery的选择器可以获取到任何所需的元素、元素集合。 •在each()方法中$(this)表示当前元素。 •获取所选ID的元素标签：$('#' + key).prop('tagName') == 'SPAN'，注意：标签结果'SPAN'都是大写的,可以打log验证。 •不断找规律、总结提炼，找出最好的偷懒方法，尽量避免体力劳动。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/jquery/46450.html
jquery表单表单选择器选择器选择器

猜你在找的jQuery相关文章

《锋利的jQuery》笔记：插件的使用和写法
jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来，用于对通过选择器获取的...
jQuery插件开发入门
扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。 入门 编写一个jQuery...
jquery.roundabout.js实现3D图片层叠旋转木马切换
最近项目中需要实现3D图片层叠旋转木马切换的效果，于是用到了jquery.roundabout.js。 兼容...
jQuery效果之jQuery实现图片的依次加载图片
css代码： js代码：
jQuery之deferred对象详解
一、什么是deferred对象？ 开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。...
jQuery插件开发进阶
jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能...
jQuery 实现邮箱输入自动提示功能：（一）
记得去年做某个项目的时候，用到了邮箱输入自动提示功能，于是网上搜了一下，发现了这个写...
jQuery插件之上传文件ajaxfileupload.js源码与使用
在网页应用中，一般会用到上传文件或者图片什么的到服务器，那么可以用ajaxfileupload.js，...
jQuery效果之封装一个文章图片弹出放大效果
首先先搭写一个基本的格式： 然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递...
《从零开始学习jQuery》：用jQuery操作元素的属性与样式
元素属性和Dom属性简介 对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作