一个Jquery操纵节点的小练习
来源:互联网 发布:linux系统无法启动 编辑:程序博客网 时间:2024/06/05 00:31
这个练习是我在学习Jquery时,遇到的一个很经典的例子,在这里记录下来,以免以后忘记。
例子出自廖雪峰老师写的javascript教程:查找和过滤-廖雪峰的官方网站
廖老师的这个教程写的很详细很超前,有需要的推荐去学习一下。
以下是该例的题目及我的答案:
练习对于下面的表单:
<form id="test-form" action="#0" onsubmit="return false;"> <p><label>Name: <input name="name"></label></p> <p><label>Email: <input name="email"></label></p> <p><label>Password: <input name="password" type="password"></label></p> <p>Gender: <label><input name="gender" type="radio" value="m" checked> Male</label> <label><input name="gender" type="radio" value="f"> Female</label></p> <p><label>City: <select name="city"> <option value="BJ" selected>Beijing</option> <option value="SH">Shanghai</option> <option value="CD">Chengdu</option> <option value="XM">Xiamen</option> </select></label></p> <p><button type="submit">Submit</button></p></form>
在以下表单中输入值后,用jQuery获取表单的JSON字符串,key和value分别对应每个输入的name和相应的value,例如:{"name":"Michael","email":...}
我的JS代码:
<script> 'use strict'; var json = null; var obj = {}; //声明一个空对象 var input = $('#test-form input'); //获取所有的input节点 var select = $('select'); //获取select节点 input.map(function(){ //用map()方法将每个input的属性、属性值添加到obj中 if(this.type === 'radio'){ if(this.checked){ //只将选中的radio节点添加进obj中 obj[this.name] = this.value; } }else{ obj[this.name] = this.value; } }); select.find('option').map(function(){ //原理同上 if(this.selected){ obj[select.name] = this.value; } }); json = JSON.stringify(obj); //将obj转为JSON的string格式 // 显示结果: if (typeof(json) === 'string') { alert(json); } else { alert('json变量不是string!'); }</script>
阅读全文
0 0
- 一个Jquery操纵节点的小练习
- Jquery css函数实现动态操纵DOM节点的样式
- jquery 小练习-获得一个文本框的值
- 简单的DOM,操纵节点
- 节点操作小练习
- jQuery节点操作练习
- 一个Brew的小练习
- 一个SQL的小练习
- 一个jQuery的小控件
- 一个jquery的小例子
- JQuery小练习
- JQuery小练习
- JQuery小练习
- JQuery小练习
- jQuery小练习
- JQuery小练习
- jQuery小练习1
- jQuery小练习3
- 深入理解 Ruby 中的 instance_eval 和 class_eval
- JNI NDK (AndroidStudio+CMake )环境集成详解
- java 加密解密
- 如何打造丰富、充满呼吸感的网页设计布局
- Redis 列表(List)
- 一个Jquery操纵节点的小练习
- 字符串的创建与存储机制
- PriorityQueue详解
- 浅谈CSS3文本超出长度显示省略号
- jQuery选择器,匹配某个包含有特殊内容的下一个元素
- 实现JDK动态代理和cglib动态代理
- java.sql.SQLException: Io 异常: Connection refused(DESCRIPTION=(TMP=)(VSNNUM=186646784)(ERR=12505)(ERR
- wex5插件追加下载文件预览文件微信微博QQ分享
- c++ 子线程里面调用 Android 代码