jquery 选择对象随心所欲,遍历数组更是易如反掌
jquery只要研究总结透彻了,那选择对象就会随心所欲,遍历数组更是易如反掌。选对对象,才能“娶妻生子”,才能有后续的数据处理。呵呵遍历对很关键。
怕只怕,学东西浅尝辄止一知半解。本篇特别研究总结jquery的遍历。
一、最大的遍历就是树遍历,还有就是遍历数组。树遍历主要有以下函数:
1、向上遍历 parent() parents() parentsUntil()
2、向下遍历 children() find()
3、同级遍历 siblings() next() nextAll()nextUntil() prev()prevAll()prevUntil()
4、遍历的检索与筛选,缩写搜索元素的范围
三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
另外:触发遍历通常结合click等绑定事件,通过某个ID来遍历。绑定事件有 .live() .delegate() .bind() .on()
$("a").live("click",function(){alert("ok");});
delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数
$("#container").delegate("a","click",function(){alert("ok");})
on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
具体差别:
.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理,性能优于.live()
.on()则是最新的1.7版本整合了之前的三种方式的新事件绑定机制
2.live,或者 delegate 是事件代理模式,在动态生成的将来元素中用bind 需要恰当的时机,而用代理则避免这个模式。还有代理会更高效。
bind()只能对已有的元素绑定事件,而.live()能对未来插入的元素绑定事件。live使用了冒泡方式来判断当前触发事件的对象,用的场景会少很多,相比bind有性能问题!
同样unbind(),die()和undelegate()方法也合并成了off()方法
二、数组遍历,使用最多的主要用each函数,或使用foreach ,for 来实现。
解析json串时要注意,是转成对象,还是数组。
//json串中全是{}罗列的,所以只能按对象来解析,[]这样可以按数组解析。
$json='{"return":"OK","questions":{"4":{"qid":"4","title":"\u95ee\u989844444","answers":{"14":{"cid":"14","title":"A","cont":"\u7b54\u68484-1","iscorrect":"1","qid":"4"},"15":{"cid":"15","title":"B","cont":"\u7b54\u68484-2","iscorrect":"0","qid":"4"},"16":{"cid":"16","title":"C","cont":"\u7b54\u68484-3","iscorrect":"0","qid":"4"}}},"2":{"qid":"2","title":"\u95ee\u98982222","answers":{"5":{"cid":"5","title":"A","cont":"\u7b54\u68482-1","iscorrect":"1","qid":"2"},"6":{"cid":"6","title":"B","cont":"\u7b54\u68482-2","iscorrect":"0","qid":"2"},"7":{"cid":"7","title":"A","cont":"aa","iscorrect":"0","qid":"2"},"8":{"cid":"8","title":"D","cont":"\u7b54\u68482-4","iscorrect":"0","qid":"2"}}}}}';
//php中一定要注意true的使用,When true, returned objects will be converted into associative arrays.
$arr=json_decode($json,true);
在js脚本中是这个样子的
var jn=jQuery.parseJSON(data,true);
例子1:each处理一维数组
var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
alert(i);
alert(val);
});
alert(i)将输出0,1,2
alert(val)将输出aaa,bbb,ccc
例子2:each处理二维数组
var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr2, function(i, item){
alert(i);
alert(item);
});
arr2为一个二维数组,item相当于取这二维数组中的每一个数组。
item[0]相对于取每一个一维数组里的第一个值
alert(i)将输出为0,1,2,因为这二维数组含有3个数组元素
alert(item)将输出为 ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']
例子3:遍历对象数组
$("#ID")返回的是一个对象,因为ID唯一
$(".className"),Find()等返回一般是个集合,或者说是个JQ对象数组
html中数据
<dl id="menu_title">
<dt>人</dt> <dd> 一种高级动物</dd>
<dt>狗</dt> <dd> 人类的朋友</dd>
<dt>猫</dt> <dd> 猫科动物的祖先</dd>
</dl>
//js取对象集合并遍历
var jqArr = $("#menu_title").find("dt");
jqArr.each(function (i, o) {
console.log("第" + i + "号元素的内容是:" + $(o).html());
});
$.each(function(i,o){});
方法中的i表示JQ数组的索引值,而o表示JQ数组的值,而o加上$()变成JQ对象之后,使用html()这个方法可以输出o这个对象里的内容;JQ产生的数组的索引也是从0开始的。
例子4:遍历复杂的json串
(1)、json串不规范的{}大括号连环套的要解析成object ,也就是var jn=jQuery.parseJSON(data,true);
data='{"return":"OK","questions":{"4":{"qid":"4","title":"\u95ee\u989844444","answers":{"14":{"cid":"14","title":"A","cont":"\u7b54\u68484-1","iscorrect":"0","qid":"4"},"15":{"cid":"15","title":"B","cont":"\u7b54\u68484-2","iscorrect":"1","qid":"4"},"16":{"cid":"16","title":"C","cont":"\u7b54\u68484-3","iscorrect":"0","qid":"4"}}},"2":{"qid":"2","title":"\u95ee\u98982222","answers":{"5":{"cid":"5","title":"A","cont":"\u7b54\u68482-1","iscorrect":"0","qid":"2"},"6":{"cid":"6","title":"B","cont":"\u7b54\u68482-2","iscorrect":"0","qid":"2"},"7":{"cid":"7","title":"A","cont":"aa","iscorrect":"0","qid":"2"},"8":{"cid":"8","title":"D","cont":"\u7b54\u68482-4","iscorrect":"0","qid":"2"}}}}}'; var jn=jQuery.parseJSON(data,true);
var qs=jn.questions;
if(jn.return!=null&&jn.return=='OK'){
$.each( qs , function(property1,value1){
// console.log("属性名1=" + property1 + "; 属性值1=" + value1);
$.each( value1 , function(property2, value2){
//console.log("--属性名2=" + property2 + "; 属性值2=" + value2);
if(property2=="qid") qid=value2;
if(property2=="title") qtitle=value2;
if(property2=="title") {
//console.log("--属性名2=" + property2 + "; 属性值2=" + value2+" qid:"+qid +" qtitle:"+ qtitle );
$("#datalist").append(
"<div class='a32 str'>"+ qid+" "+qtitle+"</div>"+
"<div class='a33'><input type='hidden' name='t"+qid+"' id='t"+qid+"' value='"+qid+"_0'>"+
"<div>"
);
}
if(property2=='answers'){
$.each( value2, function(property3, value3){
$.each( value3, function(property4, value4){
//console.log("------属性名4=" + property4 + "; 属性值4=" + value4);
if(property4=="cid") cid=value4;
if(property4=="title") ctitle=value4;
if(property4=="cont") cont=value4;
} );
// console.log("----属性名3=" + property3 + "; 属性值3=" + value3+" cid:"+cid +" ctitle:"+ ctitle +" cont:"+cont);
$("#datalist").append( "<div class='a331 t"+qid+"' id='"+qid+"_"+cid+"'><span class='radio"+qid+"'></span></div>"+
"<div class='a332 str'>"+" cid:"+cid +" "+ ctitle +" "+cont+"</div>"+
"<div class='cls'></div></div>"); } );
$("#datalist").append("</div>");
};
// $("#datalist").append("</div>");
} ); } ); }else{
//alert("失败!");
}
(2)、json串规范的是[]中括号就直接遍历,var jn=jQuery.parseJSON(data);//不用加true
var jn=jQuery.parseJSON(data);
//jn.userlist 就是[]列表数据
$.each(jn.userlist, function(i, item) {
$("#datalist").append(
"<div class='a53'>"+
"<div class='a531 fl str'>"+(i+1)+"</div>"+
"<div class='a532 fl str'>"+item.unick+"</div>"+
"<div class='a533 fl str'>"+item.speed+"s</div>"+
"<div class='a534 fl str'>"+item.corrects+"/"+jn.total+"</div>"+
"<div class='cls'></div>"+
"</div>"
);
}
);
jquery 选择对象随心所欲,遍历数组更是易如反掌的更多相关文章
- 原生js使用forEach()与jquery使用each遍历数组,return false 的区别
原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...
- jQuery中使用$.each()遍历数组时要注意的地方
使用jQuery中 $.each()遍历数组,要遍历的数组不能为空(arry!="") 例如: $.each(arry, function (i, item) ...
- jquery 遍历 数组1
使用了jquery有段时间了,整理下jquery中的遍历问题. 1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tr ...
- jquery中each遍历对象和数组示例
通用遍历方法,可用于遍历对象和数组.$().each(),回调函数拥有两个参数: 第一个为对象的成员或数组的索引,第二个为对应变量或内容.如需退出each循环可使回调函数返回false 现有如下两个s ...
- Jquery遍历数组之$().each()方法和$.each()方法
前几天面试碰到了一个笔试问题:用jquery变了数组. 总结一下用jquery遍历数组的两种方法: 一.$().each()方法 <head><meta http-equiv=&qu ...
- js和jquery中的遍历对象和数组(forEach,map,each)
arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项,index当前项的索引,array原始数组: ...
- jquery (内置遍历数组的函数,事件)
内置遍历数组的函数: 1. $.map(array, function() { }); 取到数组或者对象array中每一项进行遍历 然后在function中处理: var attr = [1,2,3 ...
- jquery中each遍历各种标签方法
这写天用到的遍历jquery each方法比较频繁 刚好有时间,就在这里记录一下 jquery用的是bootstrap的线上文件 不需要导入 <!DOCTYPE html><html ...
- Java基础(6):foreach 方法遍历数组
foreach 并不是 Java 中的关键字,是 for 语句的特殊简化版本,在遍历数组.集合时, foreach 更简单便捷.从英文字面意思理解 foreach 也就是“ for 每一个”的意思,那 ...
随机推荐
- 潭州课堂25班:Ph201805201 第三课:序列类型的方法 (课堂笔记)
列表的方法: li = [] 添加: li.append( 'a' ) 追加元素进入列表 li.insert( 1, 'b' ) 插入元素到指定索引位置 ----->>> li.i ...
- Unity脚本-Rotate旋转相关知识点
1,Transform旋转 transform.Rotate(X, Y, Z);//分别绕X,Y,Z轴旋转,可写为绕某个轴旋转,栗子transform.Rotate(0, 90, 0); tr ...
- 响应式 Web 设计指南「基础篇」
Web 是普遍存在的,也是无处不在的,Web可以适应任何尺寸的屏幕以及任何使用环境,因为Web有其固有的灵活性和可塑性. Web 再也不是某一平台独有的矿藏,而是真正成为了一张名副其实的大网,并将各种 ...
- 目标(web前端)
在学习web前端开发技术之前,对该课程的了解并不多,目标就是好好认真学习该课程的每一点知识,并好好掌握它.老师说该课程的内容比较多而且繁杂,那我希望我可以在今后的学习中有耐心的学好该门课程.
- C# 数据结构基础-实现循环队列
队列 队列的概念是先进先出,这个应该不用多说了.看下面那个从网上找的现成图片. 循环队列 循环队列在逻辑上将队列中的数据摆成环形,如下图: 下面直接上代码. 队列 队列的概念是先进先出 ...
- Android Studio下加入百度地图的使用(二)——定位服务
上一章(http://www.cnblogs.com/jerehedu/p/4891216.html)中我们已经完成了环境的搭建,这一章我们来研究一下如何使用. 第一步:在xml文件中加入以下权限 & ...
- cmake mac 安装
Cmake 在mac上的安装 cmake 官网:https://cmake.org/ 以源码方式安装 1. 下载源码:https://cmake.org/files/v3.9/cmake-3.9.0- ...
- Gradle Build Tool
转自知乎: nonesuccess 通俗的说:gradle是打包用的. 你觉得解决你的问题了吗?如果没解决,那是你的问题提得不够好.比如我猜你应该提:为什么要打包发布,打包发布有几种常见方法,为什么这 ...
- Spark GraphX实例(2)
5. 图的转换操作 图的转换操作主要有以下的方法: (1) Graph.mapVertices():对图的顶点进行转换,返回一张新图: (2) Graph.mapEdges():对图的边进行转换,返回 ...
- 迁移ORACLE_HOME引发的登录sqlplus无法加载类库错误
在10g以后,一般情况下环境变量中没有必要设置LD_LIBRARY_PATH,但是一旦将ORACLE_HOME迁移到其他目录,则环境变量中还需要添加这个变量. Linux和Unix支持TAR方式迁移O ...