jquery 遍历数组 each 方法详解

前端技术 2023/09/09 JavaScript

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 方法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/23808

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案