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 在光标定位的地方插入文字的插件
May 10 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
微信小程序入门教程
Nov 18 Javascript
js实现抽奖效果
Mar 27 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
js 实现验证码输入框示例详解
Sep 23 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
set_include_path在win和linux下的区别
2008/01/10 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
python基于ID3思想的决策树
2018/01/03 Python
Python日志模块logging基本用法分析
2018/08/23 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
机械专业毕业生推荐信范文
2013/11/25 职场文书
股东协议书
2014/04/14 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
公司地址变更通知
2015/04/25 职场文书
2019 入党申请书范文
2019/07/10 职场文书