jquery 遍历数组 each 方法详解


Posted in Javascript onMay 25, 2016

JQuery拿取对象的方式

$(‘#id') :通过元素的id

$(‘tagName') : 通过元素的标签名

$(‘tagName tagName') : 通过元素的标签名,eg: $(‘ul li')

$(‘tagName#id): 通过元素的id和标签名

$(‘:checkbox'):拿取input的 type为checkbox'的所有元素:

Eg:

<input type="checkbox" name="appetizers"

 value="imperial"/>

$('span[price] input[type=text]') :拿取下面的input元素

<span price="3">
<input type="text" name="imperial.quantity"
         disabled="disabled" value="1"/>
</span>

$('div',$(this).parents('div:first')):拿取该div的上(至少都是父节点)的第一个div节点

$('~ span:first',this): locates the first sibling of this that's a <span> element.

延迟加载js文件:

$.getScript

例子:

Html文件:

Java代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>$.getScript Example</title>
  <link rel="stylesheet" type="text/css" href="../common.css">
  <script type="text/javascript"
      src="../scripts/jquery-1.2.1.js"></script>
  <script type="text/javascript">
   $(function(){
    $('#loadButton').click(function(){
     $.getScript(//在Firefox/3.0.1中会出现一个错误(语法错误,定义的变量不起作用,ff2没问题)
      'new.stuff.js'//,function(){$('#inspectButton').click()}
     );
    });
    $('#inspectButton').click(function(){
     someFunction(someVariable);
  test()
    });
   });
  </script>
</head>

<body>
  <button type="button" id="loadButton">Load</button>
  <button type="button" id="inspectButton">Inspect</button>
</body>
</html>

Js文件:

Java代码

alert("I'm inline!"); 

var someVariable = 'Value of someVariable'; 

function someFunction(value) { 
alert(value); 
} 

function test() { 
alert('test'); 
}

alert("I'm inline!");

var someVariable = 'Value of someVariable';

function someFunction(value) {
alert(value);
}

function test() {
alert('test');
}

jquery数组处理:

Java代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Hi!</title>
  <script type="text/javascript" src="../scripts/jquery-1.2.1.js">
  </script>
  <script type="text/javascript">
   var $ = 'Hi!';
   jQuery(function(){
    alert('$ = '+ $);//这里的 $ 为 Hi!,把它变回jquery的符号:jQuery(function($){...}/这样就可以了
  //alert(jQuery)

   });
  jQuery(function($){
  //------------遍历数组 .each的使用-------------
  var anArray = ['one','two','three'];
  $.each(anArray,function(n,value) {
  //do something here
  //alert(n+' '+value);
  });
  var anObject = {one:1, two:2, three:3};
  $.each(anObject,function(name,value) {
  //do something here
  //alert(name+' '+value);
  });

  //-----------过滤数组 .grep的使用------------
  var originalArray =[99,101,103];
 
  var bigNumbers = $.grep(originalArray,'a>100');//第2种写法,还可以用正则表达式来过滤
  $.each(bigNumbers,function(n,value) {
  //do something here
  //alert(n+' '+value);
  });

  //------------转换数组 .map的使用------------
  var strings = ['1','2','3','4','S','K','6'];
  var values = $.map(strings,function(value){
  var result = new Number(value);
  return isNaN(result) ? null : result;//如果result不是数字则返回null(返回null在这里相当于不返回)
  });
  $.each(values,function(n,value) {
  //do something here
  //alert(value);
  });

  var characters = $.map(
  ['this','that','other thing'],
  function(value){return value.split('');}//分离字符串用返回给characters
  );
  //alert(characters.length);

  //------------.inArray(value,array)的使用------------返回value在array下标的位置,如果value不在array中则返回

-1
  var index = $.inArray(2,[1,2,3,4,5]);
  //alert(index);

  //------------makeArray(obj)的使用------------将类数组对象转换为数组对象。
  var arr = jQuery.makeArray(document.getElementsByTagName_r("div"));
  //arr.reverse(); // 使用数组翻转函数
  $.each(arr,function(n,value) {
  //do something here
  //alert(n+' '+value);
  //alert(value.html());
  });
  var arr2 =$.unique(document.getElementsByTagName_r("div")); //获得唯一的对象,看API,说得很模

糊,http://docs.jquery.com/Utilities/jQuery.unique
  alert();
  $.each(arr2,function(n,value) {
  //do something here
  alert(n+' '+value);
  });
  });
  </script>
</head>
<body>
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div><div>Fourth</div>
</body>
</html>

以上这篇jquery 遍历数组 each 方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
深入理解angularjs过滤器
May 25 #Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 #Javascript
jQuery each函数源码分析
May 25 #Javascript
jQuery中的each()详细介绍(推荐)
May 25 #Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 #Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 #Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 #Javascript
You might like
实用函数9
2007/11/08 PHP
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
Maps Javascript
2007/01/22 Javascript
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
python从入门到精通(DAY 3)
2015/12/20 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
python调用自定义函数的实例操作
2019/06/26 Python
Python实现时间序列可视化的方法
2019/08/06 Python
python使用建议与技巧分享(一)
2020/08/17 Python
python 决策树算法的实现
2020/10/09 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
婚礼证婚人证婚词
2014/01/08 职场文书
农村婚礼证婚词
2014/01/10 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
学习心理学心得体会
2016/01/22 职场文书
Python中time标准库的使用教程
2022/04/13 Python