位置: 编程技术 - 正文

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

  • 特许权使用费所得包括
  • 增值税一般纳税人和小规模纳税人的区别
  • 收取商标权使用费分录
  • 核定征收一般纳什么税
  • 进口货物如何确认
  • 支付宝商户服务电话
  • 软件工程质保金
  • 外购入库暂估补差单怎么去除
  • 留抵税额账上比申报表多
  • 年未决算的现金利润怎么算
  • 农产品为什么价格低
  • 过路费发票可以抵扣增值税吗
  • 员工缴纳的工会会费可以税前扣除吗
  • 离退休人员再任职的规定
  • 价税合计啥意思
  • 商标转让增值税税目
  • 小规模装饰公司干150万的活开专票需要多少钱
  • 购买礼品赠送客户进项税处理
  • 进口商品的关税计入入账价值吗
  • 支付给业主的赔偿金
  • 注销企业很麻烦
  • 小规模纳税人亏损要交税吗
  • 跨年如何冲减预提费用?
  • win10同步账户
  • 去年收入少做了怎么调账
  • 冲暂估成本会计分录怎么做
  • 高新技术研发的会议有哪些
  • rtx3090 rtx titan
  • 新买的电脑如何激活windows
  • 无形资产的摊销方法
  • 定金签合同能退吗
  • autorun.exe无法运行
  • 转让股权企业所得税怎么计算
  • 金鱼花的养殖方法与注意事项
  • php files
  • 财政补贴是解决什么问题的
  • 2023版最新最全React面试题
  • testdisk安装方法
  • php弹出提示框
  • c语言中有哪些循环结构
  • 未签订劳动合同辞退赔偿金怎么算
  • 库存现金科目的辅助核算项目为日记账
  • 特种设备年检费怎么开具发票
  • 出纳造工资表吗
  • 有形动产租赁属于现代服务业吗
  • 税控盘的作用是什么
  • 数据库SQL中DML
  • 安装sql server 2008提示重新启动计算机
  • 劳务费个税账务处理办法
  • 暂估和开票的差异 erp处理
  • 增值税普通发票查询真伪
  • 工资代发户怎么开
  • 增值税申报表和企业所得税申报表的关系
  • 国税局个人所得税怎么申报
  • 车船税缴纳后有发票吗
  • 待抵扣进项税额
  • 购入汽车属于什么会计科目
  • 分公司账务处理需要注意哪些
  • 企业财务建账应由谁负责
  • sql server怎么分离
  • win10设置不了
  • solaris命令大全
  • linux ldt
  • 怎么解决xp不能安装软件
  • keyword是啥
  • win7彻底删除的文件怎么恢复
  • win10预览版和正式版区别
  • jquery左滑切换
  • sed配合grep
  • unity3d地图定位
  • dos替换文件命令
  • python读json文件和写json文件
  • shell 生成随机数每次运行都不一样
  • 按钮控件有几种类型
  • getelementbyid isnotafunction
  • 税控盘税务数字书驱动找不到应用程序是咋回事
  • 税务执法审批表审批部门
  • 出口退税的管理办法
  • 个税申报表明细怎么打印
  • 河南税务申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设