jquery 遍歷數組 each 方法詳解
來源:易賢網 閱讀:1135 次 日期:2016-06-23 11:33:55
溫馨提示:易賢網小編為您整理了“jquery 遍歷數組 each 方法詳解”,方便廣大網友查閱!

下面小編就為大家?guī)硪黄猨query 遍歷數組 each 方法詳解。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。

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的上(至少都是父節(jié)點)的第一個div節(jié)點

$('~ 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 方法詳解就是小編分享給大家的全部內容了,希望能給大家一個參考

更多信息請查看網絡編程
易賢網手機網站地址:jquery 遍歷數組 each 方法詳解

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網