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 相关文章推荐
Prototype Number对象 学习
Jul 19 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
AngularJS手动表单验证
Feb 01 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
JavaScript简易计算器制作
Jan 17 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
PHP 中的类
2006/10/09 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
python简单文本处理的方法
2015/07/10 Python
python3编码问题汇总
2016/09/06 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
python编写俄罗斯方块
2020/03/13 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
法学毕业生自荐信
2013/11/13 职场文书
搞笑创意广告语
2014/03/17 职场文书
十佳护士先进事迹
2014/05/08 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android