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 相关文章推荐
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
深入理解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
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
python实现统计代码行数的方法
2015/05/22 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
浅谈python对象数据的读写权限
2016/09/12 Python
Python制作刷网页流量工具
2017/04/23 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
奥地利网上书店:Weltbild
2017/07/14 全球购物
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
新闻记者实习自我鉴定
2013/09/19 职场文书
硕士研究生自我鉴定
2013/11/08 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
颁奖典礼主持词
2014/03/25 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书