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中Object和Function的关系的三段简单代码
Jun 27 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
javascript中scrollTop详解
Apr 13 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
你或许不知道的一些npm实用技巧
Jul 04 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 email邮箱正则
2008/10/08 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
详解php的socket通信
2015/08/11 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
php7下的filesize函数
2019/09/30 PHP
javascript preload&amp;lazy load
2010/05/13 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
Python读写Excel文件的实例
2013/11/01 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
自动化专业个人求职信范文
2013/12/30 职场文书
销售辞职报告范文
2014/01/12 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
计算机软件专业求职信
2014/06/10 职场文书
北大自主招生自荐信
2015/03/04 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js