位置: 编程技术 - 正文

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

  • 计税工资和实发工资不一样所得税
  • 工业企业结转成本表格模板
  • 统一企业员工
  • 其他应收款要做账吗
  • 存款利息单需要缴纳个人所得税吗
  • 银行存款没有期初余额的总账怎么填
  • 非正常损失会计利润调整
  • 非财政拨款结余是什么科目
  • 生产企业出口货物可享受免税并退税
  • 小规模纳税人开普票免税
  • 销售退回的会计分录金额怎么写
  • 提取法定盈余公积会计分录
  • 长期债券是指偿还期限超过几个月的债券
  • 二手设备进口海关
  • 代付电费开具发票账务处理
  • 开店卖蔬菜
  • 企业不能抵扣的专票有哪些
  • 收购全资子公司的账务处理
  • 税收筹划也要有风险意识
  • 企业残疾人保障金
  • 开专票需要备注吗
  • win11如何设置开机自启动软件
  • win10声音设置面板在哪
  • 预付账款退款怎么做会计分录
  • 销售送礼品
  • 虚假财务报表的案例
  • win11dev预览版可以升级正式版吗
  • 公司向职工借款利息需要交税吗
  • 成本法的优点是计算较为简便,缺点是
  • 房地产开发公式
  • 提取法定盈余公积会计科目
  • pytorch中的数据类型
  • 数据库读写异常
  • 路径规划原理
  • 用jsp实现用户登录验证
  • 命令grep
  • 年度总产值等于营业收入
  • python中 =是什么意思
  • 房地产开发企业资质证书
  • 没进项票
  • 出租车计入什么费
  • 非流动资产基金 新会计制度 对应
  • 合作卖东西怎么分成
  • RabbitMQ个人实践
  • 怎么连接php
  • 开发票明目
  • 年末已经结账了怎么入账
  • 企业亏损所得税处理
  • 实际已缴纳所得税额大于初始化金额
  • 红字转账凭证怎样录入
  • 应付账款尾款怎么处理
  • 一般纳税人抵扣进项税流程
  • 免税收入怎么做分录
  • 固定资产怎么计算折旧额
  • 建账的要点及应注意的问题
  • mysql通过my.cnf修改默认字符集为utf-8的方法和注意事项
  • win8.1重置电脑
  • freebsd wifi设置
  • linux中mail命令
  • linux分割分区
  • win10系统收不到wifi信号
  • 怎么更改window
  • win10无法
  • mainwindow是什么程序
  • 蓝屏错误疑难解答win7
  • efs加密解除
  • Win7安装VPN软件后无法上网是什么原因如何解决
  • win10使用入门教程
  • win7系统如何查看隐藏文件夹
  • 原生js实现节日变化
  • python网络爬虫总结
  • python中import导入模块的方法
  • 2020年陕西省国税局局长
  • 浙江银行上班时间查询
  • 如何开通税务系统
  • 北京市税务协会领导
  • 香港pcc价格
  • 季度申报表如何填写
  • 建筑装饰业发票怎么开
  • 审计如何配合教师工作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设