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上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
angularJS提交表单(form)
Feb 09 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
深入理解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压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
基于node.js实现微信支付退款功能
2017/12/19 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python实现二分查找与bisect模块详解
2017/01/13 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
pandas 时间格式转换的实现
2019/07/06 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
python 负数取模运算实例
2020/06/03 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
python调用win32接口进行截图的示例
2020/11/11 Python
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
JSP&Servlet技术面试题
2015/05/21 面试题
入党积极分子思想汇报
2014/01/02 职场文书
护士思想汇报
2014/01/12 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
农村党支部承诺书
2015/04/30 职场文书
Python if else条件语句形式详解
2022/03/24 Python