位置: 编程技术 - 正文

巧用jQuery选择器提高写表单效率的方法(jquery选择器总结)

编辑:rootadmin

推荐整理分享巧用jQuery选择器提高写表单效率的方法(jquery选择器总结),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery选择器的基本语法,jquery的选择器有哪些举例说明,jquery选择器的基本语法,jquery选择器总结,jquery选择器总结,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。

巧用jQuery选择器提高写表单效率的方法(jquery选择器总结)

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

全部代码

Radio和Checkbox

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

显示数据

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

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

处理radio和checkbox的一些方法

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

代码

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

标签: jquery选择器总结

本文链接地址:https://www.jiuchutong.com/biancheng/383093.html 转载请保留说明!

上一篇:jQuery Validate插件实现表单验证(jquery validator)

下一篇:jQuery购物网页经典制作案例(html购物网站)

  • 租赁类发票可以不写单价数量
  • 年末计提坏账准备金额怎么算
  • 个人所得税申报方式选哪个比较好
  • 什么时候做计提的会计分录
  • 非盈利组织的银行是什么
  • 支付境外特许权所得需要交什么税
  • 一般纳税人销售旧货
  • 抵扣认证发票时间
  • 发票大头小尾什么意思
  • 开立基本账户所需资料
  • 小额贷款业务涉及哪些法律
  • 存在上期留抵税额怎么计算即征即退
  • 委托加工农产品的扣除率
  • 事业单位发生管理费用
  • 税种申报表样表
  • 应付工会经费 实际支付
  • 怎么查询公司有没有开社保户
  • 补提以前年度无形资产摊销税务处理
  • 公允价值上升是收益还是损失
  • 租赁厂房水电费怎么算
  • 企业在运行过程中会遇到哪些法律问题
  • PHP中使用全局变量来接受表单中提交的数据
  • php bcsub
  • 计划成本法和实际成本法区别
  • 加利福尼亚湾在哪
  • yii2组件的理解
  • phpstudy配置
  • 政府会计计提折旧会计分录2022
  • devtools安装mac
  • repo命令详解
  • 产品检测费计入现金流量表什么项目
  • 建筑劳保费返还政策
  • 包装物为什么是无菌的
  • 年初结转增值税怎么算
  • phpcms生成html
  • 个人所得税其他扣除300一个月
  • 业务员奖金
  • 财政借钱给预算单位的会计处理
  • 公司缴纳的残保金是什么
  • 结转生产成本是不是成品入库
  • 计提工资是计提哪个月的
  • 车船税每年都是一样的吗
  • 普通发票的进项票怎么做分录
  • 公司两年未给员工申报个税违法吗
  • 开销项负数的流程
  • 工程款结清确认书
  • 商品储存的基本要求是什么?
  • 公司怎么变更公司名称
  • 无发票 入账
  • 商业企业购进商品的分录
  • ms17010补丁怎么安装
  • xampp3.2.4安装教程与配置
  • windowsxp怎么用
  • 从几个方面论述
  • freebsd服务器搭建
  • win8.1怎么升级成win7
  • xp开机后蓝屏
  • mac怎么更换用户名和密码
  • centos如何删除用户
  • 苹果mac最新的系统
  • logd是什么进程
  • linux备份恢复
  • win8启动后的初始界面
  • win7系统连不了网络
  • nginx react
  • bootstrap 图表插件
  • windows更新
  • opengl基本图形绘制
  • css中显示
  • jquery的加载事件
  • 批处理计数
  • python自定义模块并调用
  • javascript基础笔记
  • Windows下python2.7.8安装图文教程
  • python函数参数的传递方法
  • 标箭头的手机软件
  • 无锡梁溪区在哪
  • 贵州省税务网上缴费平台
  • 2018建筑材料考试试题及答案河南卷
  • 业务竞赛经验分享
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设