如何用jQuery检索div元素的存储值

在这篇文章中，我们将学习如何使用jQuery从任何分部元素中获取存储值。这可以用在需要对分部元素的值进行操作或按要求使用的情况下。

方法1：我们将使用jQuery的data(), first(), last()和text()方法。我们使用data()方法附加或存储分部元素的数据，其中包含两个参数。第一个参数是分部元素的数据名称，第二个参数是由两个键值对组成的对象字样。第一个键的值是 “Geeks“，最后一个键的值是 “GFG“。

现在，在分部元素中定义了两个跨度元素，它们将存储检索到的值。我们使用first()方法选择第一个span元素，使用last()方法选择最后一个span元素。我们使用text()方法设置它们的值，该方法由一个参数组成。对于第一个跨度元素，其值被设置为在分部元素的数据方法中真正定义的对象的第一个键的值。同样地，对于第二个跨度元素，其值被设置为对象字面的第二个键的值。

示例:

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
  
    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
            font-size: 40px;
        }
  
        div,
        p {
            font-size: 20px;
            font-weight: bold;
        }
  
        span {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksForGeeks</h1>
  
    <p>
        jQuery - Retrieve the stored value 
        from a division element
    </p>
  
    <!-- The division element -->
    <div>The values which were stored were
        <span></span> and <span></span>
    </div>
  
    <script type="text/javascript">
  
        // Set the value to be stored
        ("div").data("GeeksForGeeks", {
            firstKey: "Geeks",
            lastKey: "GFG"
        });
  
        // Get the stored value
        ("span").first().text(("div")
            .data("GeeksForGeeks").firstKey);
  
        ("span").last().text($("div")
            .data("GeeksForGeeks").lastKey);
    </script>
</body>
  
</html>

输出:

如何用jQuery检索div元素的存储值？

方法2：我们将使用jQuery data() 和 html() 方法。这种方法与之前的方法很相似，但不同的是，使用html()方法而不是text()方法。这两种方法都返回或设置所选元素的内容，但html()方法比text()方法快近2倍。另外，没有两个跨度元素，只有一个跨度元素有存储的值。因此，data()方法的第二个参数在这里不是一个对象字面，而是一个简单的数字。

示例:

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
  
    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
            font-size: 40px;
        }
  
        div,
        p {
            font-size: 20px;
            font-weight: bold;
        }
  
        span {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksForGeeks</h1>
  
    <p>
        jQuery - Retrieve the stored value 
        from a division element
    </p>
  
    <!-- The division element -->
    <div>The value which was stored was <span></span></div>
  
    <script type="text/javascript">
      
        // Set the value to be stored
        ("div").data("gfgValue", 1234);
          
        // Get the stored value
        ("span").html($("div").data("gfgValue"));
    </script>
</body>
  
</html>