在 jQuery 中    
    
    
    
，.each() 方法和 .data() 方法都是常用的工具    
    
    
    
。这两个方法的用法和概念如下：

🌙一   
    
    
    
  、.each() 方法：

.each() 方法是 jQuery 对象的方法    


     


     


     


  ，用于遍历匹配元素集合中的所有元素




 




 




 




 
，并对每个元素执行一个回>调函数    


     


     


     


  。该方法的语法如下：

$(selector).each(function(index, element){ // 回调函数 });

其中   

   

   

   

，selector 是用于匹配元素的选择器     

     

     

     

 ，可以是任何 jQuery 选择器；index 是当前元素在集合中的索引；element 是当前元素的 DOM 对象




 




 




 




 
。

下面是一个使用 .each() 方法的例子




  




  




  




  ，假设有如下 HTML 代码：

<ul id="list"> <li>Apple</li> <li>Banana</li> <li>Cherry</li> </ul>

我们可以使用如下代码遍历上述列表中的每个 <li> 元素
  


  


  


  


，并在控制台输出其文本内容：

$(#list li).each(function(index, element) { console.log(index + : + $(element).text()); });

输出结果如下：

0: Apple 1: Banana 2: Cherry

🌙二


     


     


     


     
、.data()方法：

.data() 方法是 jQuery 对象的方法     
     
     
     
，用于在元素上存储数据 




   




   




   




   ，或从元素上读取数据   

   

   

   

。该方法的语法如下：

存储数据： $(selector).data(key, value);

其中

 



 



 



 


，selector 是用于匹配元素的选择器                    ，可以是任何 jQuery 选择器；key 是数据的键名  




    




    




    




   ，value >是数据的键值     

     

     

     

 。

读取数据： $(selector).data(key);

其中




















，selector 是用于匹配元素的选择器                    ，可以是任何 jQuery 选择器；key 是要读取的数据的键名




  




  




  




  。

下面是一个使用 .data() 方法的例子   



     



     



     



   ，假设有如下 HTML 代码：

<div id="myDiv">Hello, world!</div>

我们可以使用如下代码向 <div> 元素存储一些数据




















，并从中读取数据：

// 存储数据 $(#myDiv).data(name, zhou); $(#myDiv).data(age, 3); // 读取数据 console.log($(#myDiv).data(name)); // 输出 "zhou" console.log($(#myDiv).data(age)); // 输出 3

在上面的例子中    
    
    
    
，我们使用 .data() 方法向 <div> 元素存储了两个数据    


     


     


     


  ，分别是名字和年龄
  


  


  


  


。然后我>们使用 .data() 方法从中读取了这些数据




 




 




 




 
，并输出到控制台中     
     
     
     
。