位置: 编程技术 - 正文

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

  • 取得的证券投资业绩
  • 银行开具的票据怎么查询
  • 运输发票税率是9
  • 新成立的销售公司有哪些
  • 测试费用
  • 注册公司工贸和商贸哪个更好一些
  • 房屋租赁需要交税吗?
  • 金税盘维护费减免政策代码
  • 预提利息属于费用吗
  • 存货呆滞是什么意思
  • 全额收取员工的社保的会计分录怎么写?
  • 施工企业实验用具费用计入什么科目
  • 甲供材的范围
  • 公司账户转个人账户限额
  • 农民专业合作社属于什么企业类型
  • 企业资产损失会计处理
  • 手撕发票流程
  • 法人一证通年费缴费
  • 对公直接转私人卡会怎么样
  • 长期股权投资采用成本法核算,被投资单位实现的净利润
  • 发票抬头写个人税号怎么写
  • 总公司人员可以在分公司报销费用吗
  • 固定资产无偿移交怎么做账
  • 研发过程中材料费计入
  • win 7怎么办
  • 暂估人工成本分录怎么写
  • 定额发票属于什么会计
  • 免税不能开专票
  • 该内存不能为read是怎么回事
  • 计提工资大于实际工资
  • php做
  • 外商投资合伙企业有哪些
  • 森林抗锯齿
  • 国税一证通
  • 深度学习:图像去雨网络实现Pytorch (二)一个简单实用的基准模型(PreNet)实现
  • php的输出语句
  • php标准数据类型共有四种
  • 减免税款月末怎么结转
  • 网络销售平台优势和劣势
  • ps闪退是什么原因win11
  • 预提费用核算内容有哪些
  • python unittest和pytest
  • 事业单位以固定工资为准
  • 租单位的房子怎么办营业执照
  • 专项应付款的核算
  • 开发成本怎么做分录
  • 个体工商户实收资本可以填0吗
  • 材料成本差异会计处理
  • 预付款什么时候开发票
  • 税审报告需要什么资料
  • 未交增值税账务处理
  • 购买会计软件如何入账
  • 上个月结转的流量下个月能用吗
  • 在建工程进项税额转出会计分录
  • 车辆使用费报销制度
  • 开发成本贷方负数表示什么
  • 销售固定资产怎么做账务处理
  • sql server 数据库介绍
  • win7盘符不见了
  • win8老是自动安装软件
  • win7视频播放不了
  • font system
  • Linux安装anaconda
  • win10预览设置
  • 90后的毕业照
  • unity3d应用开发
  • unity控制相机
  • opengl粒子系统烟花
  • c/s模式的例子
  • 局域网扫描器
  • html怎么用javascript
  • nodejs 异步io底层原理
  • js实现计算器代码
  • javascript含义
  • android基于
  • 怎样查询退休审核表
  • 2021年河南省企业退休职工丧葬抚恤金标准
  • 四川省地方税务局
  • 安徽省建筑施工企业排名
  • portal
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设