位置: 编程技术 - 正文

巧用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购物网站)

  • 免交的附加税需要计提吗
  • 基本账户可以转移吗
  • 认缴出资怎么填财务报表
  • 小企业会计制度科目表
  • 售后回购涉税处理
  • 不动产进项税额分两年抵扣
  • 商业承兑汇票风险大吗
  • 固定资产出售增值税税率
  • 行政单位办公室主任必须是党员吗
  • 咨询服务费是否可以税前扣除
  • 预收物业费是否必须开具发票
  • 金税三期有什么功能
  • 6%税率的项目(不含金融商品转让)免税么
  • 哪些违约金可以退回
  • 怎么打印事业单位准考证
  • 企业所得税多交了必须退税吗
  • 软件企业所得税两免三减半
  • 委托代销中受托方账务处理
  • 1697508432
  • 暑假工需要什么条件
  • 合伙制创投企业与合伙制创投基金
  • 公司与客户合作协议范本
  • 无偿赠送的原材料怎么处理
  • 汇率调整怎么做分录
  • 如何用腾讯电脑管家删除文件
  • c++ 库文件
  • 招待费如何列支
  • 购入股票佣金会减少吗
  • 微软商店 低价区
  • php中defined什么意思
  • php imagettftext
  • 非货币性资产对外捐赠企业所得税处理
  • vue的安装命令
  • 十大网页游戏
  • 未核定税种是谁的责任
  • php获取表单数据的方法和区别
  • 移动端适配方案面试题
  • 微信小程序设计规范(官方)文档
  • 金税盘维护费抵税会计分录
  • js轮播图实现思路
  • php类和对象的关系
  • handsome主题破解
  • 发票违法行为的认定
  • 关联方计提坏账吗
  • 运费计入什么会计分录
  • okr开源软件
  • 织梦小说采集
  • 固定制造费用属于固定成本吗
  • mysql数据库的设计与实现
  • 未税金额怎么算税费
  • 材料采购的流程
  • 委托代销确认销售收入
  • 企业所得税留抵税额
  • 销售方开具的红字专票购买方在税控盘要怎么操作
  • 税局关于企业费用报销
  • 生产型企业加计扣除10%
  • 企业会计制度怎么写
  • sql server 2012r2
  • sqlyog语句
  • windows没有无线网络
  • 右键菜单管理 win10
  • 没有vcd怎么放光盘
  • win10多屏设置方法
  • centos 操作日志
  • mac如何备份到icloud
  • linux充当虚拟内存的是哪个分区
  • javascript字符串操作函数
  • cmd for /f
  • 快速备份mysql数据库
  • nodejs抓取网页内容
  • shell 读取
  • [置顶]公主大人接下来是拷问时间31
  • javascript学习指南
  • django返回json数据
  • js面向对象写法
  • 安卓自定义app
  • js如何判断输入输出
  • 政府补贴 收入
  • 社保在线审核
  • 成都个税证明
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设