jquery常用遍历工具函数

遍历在这里 http://my.oschina.net/u/2352644/blog/508397

废话不多说,一个句话告诉你jq的遍历工具

我们对数组的循环一般是用for或者for in,这是原生js支持,同样既然用jq的了,咱jq也提供了对数组的遍历方法,也就是对原生js循环的封装

一、$.each()和for循环等不得不说的秘密

我们循环一个数组一般是下面的处理,利用for循环

 var arr=[0,1,2];
 for(var i=0;i<arr.length;i++){
  alert("第"+i+"项"+arr[i])
 };

会弹出第几项是几,这是我们最习惯的写法,我们下面看jq提供的方法,

 var arr=[0,1,2]; 
 $.each( arr, function(i, n){
  alert("第"+i+"项"+n)
 });

效果一样,这个就是jq提供的遍历方法,如果仅仅是对普通数组可以,那就没必要了,既然封装,肯定功能比较多的,我们还可以遍历对象类型数据({})的,看下面

var obj={"aa":1,"bb":2,"cc":3}; 
 $.each( obj, function(i, n){
  alert("第"+i+"项"+n)
 });

--觉醒了

我们突然醒悟,我们在上篇博客知道有for in循环,这个不就可以实现数组和对象类型的循环吗,既然已经醒悟,我们自己封装一个each方法吧!

 function each(obj,callback){
  for(var i in obj){
   callback(i,obj[i]);
  };
 };
 var obj={"aa":1,"bb":2,"cc":3}; 
 each( obj, function(i, n){  
  alert("第"+i+"项"+n) 
 });

万能的主已经靠近我们,在测试循环数组

 function each(obj,callback){
  for(var i in obj){
   callback(i,obj[i]);
  };
 };
 var arr=[0,1,2];
 each( arr, function(i, n){  
  alert("第"+i+"项"+n) 
 });

再不用jq的时候我们只要写了这个函数也就各种遍历了

二、$.extend()

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var newobj=$.extend(settings, options);
alert(newobj[‘validate‘])

函数会获取前后对象的所有属性(下表),出现相同下表后替换前原则,我们在一片jq插件很详细介绍过这个的使用原理,除了合成新的对象还可以做工具扩展

http://my.oschina.net/u/2352644/blog/487688

三、$.grep()

var aa=$.grep( [0,1,2], function(n,i){
   return n > 0;
 });
 alert(aa)

迭代方法,过滤出我们需要的内容

--模拟实现

 function grep(arr,callback){
  var temp=[];
  for(var i=0;i<arr.length;i++){
   if(callback(arr[i],i)){
    temp.push(arr[i]);
   }else{
    
   }   
  };
  return temp;
 };
 var aa=grep( [0,1,2], function(n,i){
   return n > 0;
 });
 alert(aa)

四、$.inArray()

var arr = [ 4, "Pete", 8, "John" ];
alert($.inArray("John", arr));

返回参数值在数组的位置,不存在返回-1

--模拟实现

 function inArray(rel,arr){
  var index=-1;
  for(var i=0;i<arr.length;i++){
   if(arr[i]==rel){
    index=i;
   }else{}
  }
  return index;
 };
 var arr = [ 4, "Pete", 8, "John" ];
 alert(inArray("John", arr));
 alert(inArray("aa", arr));

 五、$.merge()

alert($.merge( [0,1,2], [2,3,4] ));

把参数2数组和参数1数组拼接

--模拟实现

 function merge(arr1,arr2){
  return arr1.concat(arr2)
 };
 alert(merge( [0,1,2], [2,3,4] ));
时间: 2024-10-12 10:17:18

jquery常用遍历工具函数的相关文章

JQuery中的工具函数总结

前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 工具方法 ①获取浏览器的名称与版本信息 在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome为true,表示当前为Chrome浏览器,$.browser.

JQuery实践--实用工具函数

实用工具函数,$命名空间的一系列函数,但不操作包装集.它要么操作除DOM元素以外的Javascript对象,要么执行一些非对象相关的操作. JQuery的浏览器检测标志可在任何就绪处理程序执行之前使用这些标志.$.browser :msie,mozilla,safari,opera,version(引擎的版本)$.boxModel: 方框模型,true/false. 决定了元素的内容大小$.styleFloat: float样式的名称,值为字符串,供属性名称使用   element.style[

jQuery常用 遍历函数

jQuery 遍历函数包括了用于筛选.查找和串联元素的方法.本文主要介绍日常工作中常用的JQ遍历,帮助一下初学者快速的接触遍历函数,提高自己的代码编写速度,写出更简洁更实用的代码,祝前端的同学们,在前端这条没有尽头的路上渐行渐远.如果有什么不对的地方 大家多提意见 互相学习 相互参考!!! 1.each() 语法:$(selector).each(function(index,element)) 实例:$('li').each( $(this).css(color,#c10000); ) 拆分一

JQuery常用动画实现函数

1.上拉.下拉和切换 slideup().slidedown().slideToggle() 2.淡入淡出 fadeIn()   fadeOut()    fadeToggle()   fadeTo("时间多少毫秒","透明度0~1") 3.自定义动画效果 animate() 4.JQuery的动画是一种排队机制 要想停止动画就要在动画函数之前加入一个stop函数,例如:$(this).children("ul").stop().slideTog

jQuery 常用的效果函数(一)

方法 描述 animate() 对被选元素应用"自定义"的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数(仍未运行)设置延迟 dequeue() 运行被选元素的下一个排队函数 fadeIn() 逐渐改变被选元素的不透明度,从隐藏到可见 fadeOut() 逐渐改变被选元素的不透明度,从可见到隐藏 fadeTo() 把被选元素逐渐改变至给定的不透明度 hide() 隐藏被选的元素 queue() 显示被选元素的排队函数

jquery常用遍历循环处理

??一.基本数组和for循环?? 最基本的遍历输出: $(function(){ var arr=[111,222,333,444,555,666]; for(var i=0;i<arr.length;i++){ $("#tab").append("<tr><td>"+arr[i]+"</td></tr>"); }; }); html结构:    <div class="box

一些自定义的Lua常用的工具函数

sk = sk or {} local xmtool = {} --[[ @brief Defined some commonly used functions @by xiaoming ]] local countCode = [[ local i = 0 return function() i = i + 1 return i end ]] ---自定义计数器 xmtool.xmCounter = assert(loadstring(countCode)) -----------------

常用的工具函数

得到两个数组的并集, 两个数组的元素为数值或字符串 //tools.js export const getUnion = (arr1, arr2) => { return Array.from(new Set([...arr1, ...arr2])) } //调用页面 import { getUnion } from '@/libs/tools' // 示例 this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByAc

Js常用的工具函数

1.获取uuid:这个是通过随机数生成 let getUuid = () => { var i, random; var uuid = ''; for (i = 0; i < 32; i++) { random = Math.random() * 16 | 0; if (i === 8 || i === 12 || i === 16 || i === 20) { uuid += '-'; } uuid += (i === 12 ? 4 : (i === 16 ? (random & 3