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 相关文章推荐
IE无法设置短域名下Cookie
Sep 23 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
Vue开发中整合axios的文件整理
Apr 29 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
js获取地址栏参数的两种方法
Jun 27 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 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下实现农历日历的代码
2007/03/07 PHP
PHP 实用代码收集
2010/01/22 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
js运动应用实例解析
2015/12/28 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
javascript的BOM
2016/05/03 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
微信小程序开发探究
2016/12/27 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
图解Python变量与赋值
2018/04/03 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
大课间体育活动方案
2014/03/12 职场文书
学生自我评语大全
2014/04/18 职场文书
水利水电专业自荐信
2014/07/08 职场文书
财务负责人岗位职责
2015/02/03 职场文书