首页 > PHP资讯 > HTML5培训技术 > jQuery中使用each方法遍历数组

jQuery中使用each方法遍历数组

HTML5培训技术

JQuery拿取对象的方式
$(‘#id’) :通过元素的id
$(‘tagName’) : 通过元素的标签名
$(‘tagName tagName’) : 通过元素的标签名,eg: $(‘ul li’)

$(‘tagName#id): 通过元素的id和标签名
$(‘:checkbox’):拿取input的 type为checkbox’的所有元素:
Eg:                 value="imperial"/>


$('span[price] input[type=text]') :拿取下面的input元素



                disabled="disabled" value="1"/>

$('div',$(this).parents('div:first')):拿取该div的上(至少都是父节点)的第一个div节点

$('~ span:first',this): locates the first sibling of this that’sa element.


延迟加载js文件:
$.getScript


例子:
Html文件:
Java代码
  
  
  
    $.getScriptExample  
      
    <scripttype="text/javascript"
          src="http://upload.server110.com/image/20140301/220K43M2-0.jpg">《script》  
    <scripttype="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》  
  

  
      
      
  




    $.getScriptExample
   
    <scripttype="text/javascript"
          src="http://upload.server110.com/image/20140301/220K43M2-0.jpg">《script》
    <scripttype="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》


   
   


Js文件:
Java代码
alert("I'm inline!");  


var someVariable = 'Value ofsomeVariable';  

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代码
  
  
  
   Hi!  
    <script type="text/javascript"src="http://upload.server110.com/image/20140301/220K43M2-0.jpg">  
   《script》  
    <scripttype="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){returnvalue.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》  
  
  
   

First
Second
Third
Fourth
Fourth
  
  




   Hi!
    <script type="text/javascript"src="http://upload.server110.com/image/20140301/220K43M2-0.jpg">
    《script》
    <scripttype="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 = newNumber(value);
    return isNaN(result) ? null :result;//如果result不是数字则 返回null(返回null在这里相当于不返回)
   });
   $.each(values,function(n,value) {
    //do something here
    //alert(value);
   });

   var characters = $.map(
    ['this','that','otherthing'],
   function(value){returnvalue.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》


First
Second
Third
Fourth
Fourth


HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持21不支持0