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(视频与PPT)
Dec 27 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
thinkphp模板继承实例简述
2014/11/26 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
一些常用的Javascript函数
2006/12/22 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
python脚本实现查找webshell的方法
2014/07/31 Python
python邮件发送smtplib使用详解
2020/06/16 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
python 5个实用的技巧
2020/09/27 Python
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
土木工程毕业生推荐信
2013/10/28 职场文书
道路交通安全实施方案
2014/03/12 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
就业协议书怎么填
2014/09/15 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
Vue.Draggable实现交换位置
2022/04/07 Vue.js