位置: 编程技术 - 正文

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

  • 固定资产入股交什么税
  • 出售交易性金融资产的交易费用计入
  • 年折旧额怎么计算公式直线法
  • 车辆购置税发票电子版怎么查
  • 外购存货的成本不包括
  • 开票与实际收款不一致有什么风险
  • 淘宝电商会计交税怎么交?
  • 应交税费应交增值税的三级科目有哪些
  • 金税盘怎么开红字发票流程
  • 房地产土地成本计算公式
  • 退役士兵创业就业政策
  • 哪些情形可以补胎
  • 清算汇缴报表填写模板
  • 银行代发工资当月没发下个月发没事儿吧
  • 优惠购房差价收益是否缴纳个人所得税?
  • 小规模纳税人如何计算增值税
  • 自然人税收系统怎么添加人员
  • 电子发票跨月怎么开红字发票
  • 劳务费的现金流量是什么
  • 个税退手续费要多久到账
  • 可转债溢价率多高为好
  • 公司基本户注销流程
  • smss.exe是干嘛的
  • 为什么WIN10系统打在画面进不去
  • 极易一键重装系统怎么用
  • 公司向股东还款的会计分录
  • 电脑关机了wifi还能检测到在线
  • 职工福利费会计账务处理
  • 房地产开发企业土地增值税怎么计算
  • 凯恩kane
  • 自然人股东是
  • 企业所得税合理方法包括
  • 在暴风雪中求生
  • php功能模块
  • php中自定义函数的语法格式
  • 中秋快乐的祝福语怎么说
  • 三维点云识别
  • 企业所得税预缴纳税申报表
  • 个人所得税专项扣除新标准一览表最新
  • 资金托管账户的钱能查到吗
  • 非货币性资产交换和债务重组的区别
  • java的基本类型的区别
  • 社保个税申报是什么意思
  • 一般纳税人固定资产处置税率
  • 支付到期承兑汇票属于什么现金流量项目
  • 货物丢失怎么做分录
  • 加油预付卡销售 IC卡充值
  • 工程款开票数量和单价要填吗
  • 应交税费月底怎么结账
  • 工资费用核算的原始记录有
  • 收购票票样
  • 新成立的企业可以申请一般纳税人吗
  • 计提盈余公积比例
  • Suse Linux 10中MySql安装与配置步骤
  • sql server复制数据库的方法
  • iis w3svc
  • u极速u盘启动官网
  • wupdated.exe - wupdated是什么进程
  • mac触控板设置在哪
  • 如何手动修复模糊图片
  • fp3是什么文件格式
  • windows7电脑怎么变快
  • win8.1新建桌面
  • win7图标随便移动
  • [置顶]津鱼.我爱你
  • node.js使用教程
  • bat删除所有文件
  • perl and
  • 什么叫真游戏
  • 基于jquery的框架有哪些
  • jquery操作样式的方法
  • unity游戏加密
  • js教程 chm
  • python数据类型有
  • xmpp client
  • python模拟ajax
  • 办理税务迁移的流程
  • 建筑业小规模纳税人工程结算增值税
  • 税务局电子化
  • 贵州省税务网上缴费平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设