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 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
vue移动端使用canvas签名的实现
Jan 15 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
js实现秒表计时器
2019/12/16 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
Python sys.path详细介绍
2013/10/17 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
大学生专业个人学习的自我评价
2013/10/26 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
导游词之无锡梅园
2019/11/28 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python