【前端每日一问002】jquery中each与data方法的用法与概念

简介: 【前端每日一问002】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

cd1f9b83b3f642e0b81077f9e5165b5e.png

🌙二、.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() 方法从中读取了这些数据,并输出到控制台中。

相关文章
|
7天前
|
前端开发 Java
【前端学java】全网最通俗易懂的JAVA抽象概念(07)
【8月更文挑战第9天】全网最通俗易懂的JAVA抽象概念
17 2
|
29天前
|
前端开发 Java 项目管理
List.of 问题之使用List.of方法为什么会引发前端解析失败的问题,如何解决
List.of 问题之使用List.of方法为什么会引发前端解析失败的问题,如何解决
|
10天前
|
缓存 JavaScript 前端开发
前端10种火火火火的优化代码性能方法!避免代码跑起来像蜗牛!
前端10种火火火火的优化代码性能方法!避免代码跑起来像蜗牛!
|
1月前
|
前端开发 JavaScript
Vue前端渲染blob二进制对象图片的方法
Vue前端渲染blob二进制对象图片的方法
40 0
|
1月前
|
JavaScript 前端开发 网络架构
文本,展现到文章的面前,Vue结合v-for实现传参的方法,好的资料,Vue实现动态绑定,数据放到前端页面上
文本,展现到文章的面前,Vue结合v-for实现传参的方法,好的资料,Vue实现动态绑定,数据放到前端页面上
|
1月前
|
前端开发 JavaScript 测试技术
突破前端瓶颈的方法
突破前端瓶颈的方法
33 0
|
1月前
|
前端开发 JavaScript C++
前端 JS 经典:判断数组的准确方法
前端 JS 经典:判断数组的准确方法
18 0
|
2月前
|
前端开发 JavaScript API
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
41 0
|
7天前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
10 0
|
2月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
55 2