jQuery通用的全局遍历方法$.each()用法实例


Posted in Javascript onJuly 04, 2016

本文实例讲述了jQuery通用的全局遍历方法$.each()用法。分享给大家供大家参考,具体如下:

1.test.json文件代码:

[
 {
  "username": "张三",
  "content": "沙发."
 },
 {
  "username": "李四",
  "content": "板凳."
 },
 {
  "username": "王五",
  "content": "地板."
 }
]

2.html代码:

<p>
<input type="button" id="send" value="加载"/>
</p>
<div class="comment">已有评论:</div>
<div id="resText" ></div>

3.jQuery代码:

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
1.$.each()是jquery的一个通用的遍历方法,可用于遍历对象和数组
2.$.each()函数不同于jquery对象的each()方法,它是一个全局函数,不操作jquery对象,而是以一个数组或者对象作为第一个参数,以一个回调函数作为第二个参数。回调函数拥有两个参数:第一个参数为对象的成员或数组的索引,第二个参数为对应变量或内容
*/
$(function(){
    $('#send').click(function() {
       $.getJSON('test.json', function(data) {
         $('#resText').empty();
         var html = '';
         $.each( data , function(commentIndex, comment) {
           html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
         })
         $('#resText').html(html);
      })
    })
})
</script>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
js实现简单进度条效果
Mar 25 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
JS构造函数与原型prototype的区别介绍
Jul 04 #Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 #Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 #Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 #Javascript
全面了解js中的script标签
Jul 04 #Javascript
jQuery基础_入门必看知识点
Jul 04 #Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 #Javascript
You might like
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
深入解析php中的foreach问题
2013/06/30 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
pytorch梯度剪裁方式
2020/02/04 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
教师个人读书活动总结
2014/07/08 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
百年孤独读书笔记
2015/06/29 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL