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 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
JavaScript事件委托实例分析
May 26 Javascript
Vue.js快速入门教程
Sep 07 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 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
初品cakephp 入门基础
2012/02/16 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php-msf源码详解
2017/12/25 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
Python中的Descriptor描述符学习教程
2016/06/02 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
python使用建议技巧分享(三)
2020/08/18 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
员工考核管理制度
2014/02/02 职场文书
服装设计专业求职信
2014/06/16 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
拾金不昧表扬信
2015/01/16 职场文书
学期个人自我总结
2015/02/13 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
礼貌问候语大全
2015/11/10 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
JavaScript实现优先级队列
2021/12/06 Javascript
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers