位置: 编程技术 - 正文

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

  • 增量留底退税基数是多少?
  • 委托加工发出材料成本会计分录
  • 无形资产减值损失一经确认在以后期间不得转回
  • 公司购买的货架入哪个科目
  • 固定资产与累计折旧有对应关系吗
  • 存在问题的具体表现和产生问题的原因分析
  • 未投入使用房屋怎么处理
  • 资产负债表应交税费从哪取数
  • 挂靠被查出来后挂靠费怎么处理?
  • 律师事务所的会计账务处理
  • 公司缴纳的社保离职后自己可以缴纳社保
  • 四川中级会计报名需要上传哪些资料
  • 计提本月城市维护建设税,教育费附加500元
  • 土地增值税的税率和速算扣除数
  • 新公司开办费用包括哪些
  • 一般纳税人销售二手车增值税税率
  • 如何更换电脑开机动画
  • 怎么激活win10专业版
  • 智能路由器哪个牌子好
  • 外购固定资产的税率
  • 工业企业汽车发生费用处理
  • 公司买发票的费用怎么做账
  • php完整教程
  • 银行罚息计入什么会计科目
  • service的启动方式及生命周期
  • 存货的采购成本包括
  • 一般纳税人向小规模纳税人开专票
  • php的介绍
  • 负数发票怎么做账务处理
  • 结转,结余
  • 前端解决跨域问题的代理
  • php 抓取别的网站的内容
  • python进行数学建模
  • smarty模板引擎
  • Android AsyncTack 异步任务实例详解
  • 劳动仲裁要出钱吗
  • 进项大于销项附加税怎么处理
  • mongodb 分组计数
  • mongodb数据库中间创建自己名字首字母的数据库
  • 设备购入后又退出怎么办
  • 生产企业出口自产应税消费品实行什么方法
  • 净值是原值减去折旧吗?
  • spark sql add jar
  • 企业筹建期间是什么
  • 企业所得税的税基是什么
  • 房租预付款会计分录
  • 为什么一般纳税人税率高
  • 公司交社保有什么用处
  • 固定资产多少钱算固定资产
  • 多栏式日记账核算组织程序优缺点
  • 小规模公司一般开什么发票
  • 普通发票作废要去税局吗
  • 企业如何计算增值税
  • 结账前要做哪些准备工作
  • sql server的主数据库是( )
  • 批量替换多个wps文档的内容
  • CentOS7 64位安装mysql图文教程
  • docker安装使用
  • 操作系统安装日期查看
  • Ubuntu安装VMware tools
  • linux 定时运行
  • win7系统显卡驱动怎么安装
  • freebsd连接wifi
  • BootStrap TreeView使用实例详解
  • 举例讲解水生花卉栽培管理
  • jquery 动态绑定
  • 完美解决gvim的菜单乱码问题
  • 实用的批处理
  • unity入门教学
  • python如何查看
  • java项目怎么变成web项目
  • EditText 点击事件小问题
  • javascript要学哪些
  • jquery按钮点击事件
  • javascript模块化与非模块化开发区别
  • 税务局投诉怎么投诉
  • 政务服务网怎么打印电子资格证书
  • 江西国家税务局官网
  • 交17000办的保险是什么保险
  • 学校经费审批流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设