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 权威指南(第四版) 读书笔记
Aug 11 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 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
XHProf报告字段含义的解析
2016/05/17 PHP
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
pygame实现非图片按钮效果
2019/10/29 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
音乐教学案例
2014/01/30 职场文书
自荐信如何制作?
2014/02/21 职场文书
校庆接待方案
2014/03/18 职场文书
商务经理岗位职责
2014/07/30 职场文书
小学班主任事迹材料
2014/12/17 职场文书
2015年父亲节寄语
2015/03/23 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
交通事故被告代理词
2015/05/23 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
delete in子查询不走索引问题分析
2022/07/07 MySQL