jquery 遍历数组 each 方法详解-js教程-PHP中文网

首页

web前端

js教程

jquery 遍历数组 each 方法详解

高洛峰

Dec 29, 2016 am 10:57 AM

JQuery拿取对象的方式

$(‘#id') ：通过元素的id

$(‘tagName') : 通过元素的标签名

$(‘tagName tagName') : 通过元素的标签名,eg: $(‘ul li')

$(‘tagName#id): 通过元素的id和标签名

$(‘:checkbox'):拿取input的 type为checkbox'的所有元素:

Eg：

<input type="checkbox" name="appetizers"
 
 value="imperial"/>
 
$(&#39;span[price] input[type=text]&#39;) ：拿取下面的input元素
 
<span price="3">
<input type="text" name="imperial.quantity"
         disabled="disabled" value="1"/>
</span>
 
$(&#39;div&#39;,$(this).parents(&#39;div:first&#39;))：拿取该div的上（至少都是父节点）的第一个div节点
 
$(&#39;~ span:first&#39;,this)： locates the first sibling of this that&#39;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(){
    $(&#39;#loadButton&#39;).click(function(){
     $.getScript(//在Firefox/3.0.1中会出现一个错误(语法错误,定义的变量不起作用,ff2没问题)
      &#39;new.stuff.js&#39;//,function(){$(&#39;#inspectButton&#39;).click()}
     );
    });
    $(&#39;#inspectButton&#39;).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&#39;m inline!"); 
 
var someVariable = &#39;Value of someVariable&#39;; 
 
function someFunction(value) { 
alert(value); 
} 
 
function test() { 
alert(&#39;test&#39;); 
}
 
alert("I&#39;m inline!");
 
var someVariable = &#39;Value of someVariable&#39;;
 
function someFunction(value) {
alert(value);
}
 
function test() {
alert(&#39;test&#39;);
}

登录后复制

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 $ = &#39;Hi!&#39;;
   jQuery(function(){
    alert(&#39;$ = &#39;+ $);//这里的 $ 为 Hi!,把它变回jquery的符号:jQuery(function($){...}/这样就可以了
  //alert(jQuery)
 
   });
  jQuery(function($){
  //------------遍历数组 .each的使用-------------
  var anArray = [&#39;one&#39;,&#39;two&#39;,&#39;three&#39;];
  $.each(anArray,function(n,value) {
  //do something here
  //alert(n+&#39; &#39;+value);
  });
  var anObject = {one:1, two:2, three:3};
  $.each(anObject,function(name,value) {
  //do something here
  //alert(name+&#39; &#39;+value);
  });
 
  //-----------过滤数组 .grep的使用------------
  var originalArray =[99,101,103];
  
  var bigNumbers = $.grep(originalArray,&#39;a>100&#39;);//第2种写法,还可以用正则表达式来过滤
  $.each(bigNumbers,function(n,value) {
  //do something here
  //alert(n+&#39; &#39;+value);
  });
 
  //------------转换数组 .map的使用------------
  var strings = [&#39;1&#39;,&#39;2&#39;,&#39;3&#39;,&#39;4&#39;,&#39;S&#39;,&#39;K&#39;,&#39;6&#39;];
  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(
  [&#39;this&#39;,&#39;that&#39;,&#39;other thing&#39;],
  function(value){return value.split(&#39;&#39;);}//分离字符串用返回给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+&#39; &#39;+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+&#39; &#39;+value);
  });
  });
  </script>
</head>
<body>
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div><div>Fourth</div>
</body>
</html>

登录后复制

以上这篇jquery 遍历数组 each 方法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多 jquery 遍历数组 each 方法详解相关文章请关注PHP中文网！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7504

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何创建和发布自己的JavaScript库？ Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能？ Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

如何使用浏览器开发人员工具有效调试JavaScript代码？ Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。

如何使用源地图调试缩小JavaScript代码？ Mar 18, 2025 pm 03:17 PM

本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。

谁得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

开始使用Chart.js：PIE，DONUT和BUBBLE图表 Mar 15, 2025 am 09:19 AM

本教程将介绍如何使用 Chart.js 创建饼图、环形图和气泡图。此前，我们已学习了 Chart.js 的四种图表类型：折线图和条形图（教程二），以及雷达图和极地区域图（教程三）。创建饼图和环形图饼图和环形图非常适合展示某个整体被划分为不同部分的比例。例如，可以使用饼图展示野生动物园中雄狮、雌狮和幼狮的百分比，或不同候选人在选举中获得的投票百分比。饼图仅适用于比较单个参数或数据集。需要注意的是，饼图无法绘制值为零的实体，因为饼图中扇形的角度取决于数据点的数值大小。这意味着任何占比为零的实体