本文将介绍如何使用 jquery 获取不同元素的特定属性值，并提供两种实现方法。第一种方法是在点击事件处理程序中获取当前点击元素的属性值，第二种方法则通过预先加载 jsON 数据并将其存储在元素的 data 属性中，从而优化性能。 通过学习本文，你将能够灵活地使用 jQuery 获取元素的属性值，并根据实际需求选择合适的实现方式。
在 Web 开发中，经常需要根据用户的交互行为动态地获取元素的属性值，并根据这些值执行相应的操作。例如，点击一个链接时，需要获取该链接的 href 属性值，然后跳转到相应的页面。本文将以一个实际的例子，介绍如何使用 jQuery 获取不同元素的特定属性值，并提供两种实现方法。
方法一：在点击事件处理程序中获取属性值
第一种方法是在点击事件处理程序中获取当前点击元素的属性值。这种方法比较简单直接，适用于属性值不经常变化的情况。
示例代码：
<!DOCTYPE html> <html> <head> <title>jQuery 获取属性值示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $("a").click(function(Event) { event.preventDefault(); // 阻止默认的链接跳转行为 var $a = $(this); // 获取当前点击的 a 元素 $.getjson("knowls.json", function(json) { var title = $a.attr("knowl"); // 获取当前点击元素的 knowl 属性值 var knowl = json[title]; // 根据 knowl 属性值从 JSON 数据中获取对应的内容 $("div.knowlbody").html(knowl); // 将内容填充到 div.knowlbody 中 $("div.knowlbody").toggle(); // 切换 div.knowlbody 的显示状态 }); }); }); </script> </head> <body> <p> 点击以下链接查看内容： </p> <p class="knowlink"> 点击这个 <a knowl="example" href="#">示例</a>. 或者这个 <a knowl="secondary" href="#">另一个示例</a>. </p> <div class="knowlbody" style="display: none"> </div> </body> </html>
knowls.json 文件内容：
{ "example": "这是第一个示例的内容。", "secondary": "这是第二个示例的内容。" }
代码解释：
- 首先，使用 $(“a”).click(function(event) { … }); 为所有的 <a> 元素绑定点击事件处理程序。
- 在事件处理程序中，使用 event.preventDefault(); 阻止默认的链接跳转行为。
- 使用 var $a = $(this); 获取当前点击的 <a> 元素，并将其存储在变量 $a 中。
- 使用 $a.attr(“knowl”); 获取当前点击元素的 knowl 属性值，并将其存储在变量 title 中。
- 使用 json[title]; 根据 title 属性值从 JSON 数据中获取对应的内容，并将其存储在变量 knowl 中。
- 使用 $(“div.knowlbody”).html(knowl); 将 knowl 变量中的内容填充到 div.knowlbody 元素中。
- 使用 $(“div.knowlbody”).toggle(); 切换 div.knowlbody 元素的显示状态。
注意事项：
- 确保 knowls.json 文件与 HTML 文件位于同一目录下，或者提供正确的文件路径。
- event.preventDefault(); 用于阻止默认的链接跳转行为，如果不需要阻止跳转，可以省略此行代码。
- $(this) 指向的是当前点击的 <a> 元素。
方法二：预先加载 JSON 数据并存储在 data 属性中
第二种方法是预先加载 JSON 数据，并将其存储在元素的 data 属性中。这种方法可以避免每次点击都重新加载 JSON 数据，从而提高性能。
示例代码：
<!DOCTYPE html> <html> <head> <title>jQuery 获取属性值示例 (优化版)</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $.getJSON("knowls.json", function(json) { $('a').each(function() { var $a = $(this); var title = $a.attr("knowl"); var knowl = json[title]; $a.data('knowlbody', knowl); // 将 JSON 数据存储在 data 属性中 }); }); $("a").click(function(event) { event.preventDefault(); var knowl = $(this).data('knowlbody'); // 从 data 属性中获取 JSON 数据 $("div.knowlbody").html(knowl); $("div.knowlbody").toggle(); }); }); </script> </head> <body> <p> 点击以下链接查看内容： </p> <p class="knowlink"> 点击这个 <a knowl="example" href="#">示例</a>. 或者这个 <a knowl="secondary" href="#">另一个示例</a>. </p> <div class="knowlbody" style="display: none"> </div> </body> </html>
knowls.json 文件内容：
{ "example": "这是第一个示例的内容。", "secondary": "这是第二个示例的内容。" }
代码解释：
- 首先，使用 $.getJSON(“knowls.json”, function(json) { … }); 加载 JSON 数据。
- 在 JSON 数据加载完成后，使用 $(‘a’).each(function() { … }); 遍历所有的 <a> 元素。
- 在循环中，使用 var $a = $(this); 获取当前遍历的 <a> 元素，并将其存储在变量 $a 中。
- 使用 $a.attr(“knowl”); 获取当前元素的 knowl 属性值，并将其存储在变量 title 中。
- 使用 json[title]; 根据 title 属性值从 JSON 数据中获取对应的内容，并将其存储在变量 knowl 中。
- 使用 $a.data(‘knowlbody’, knowl); 将 knowl 变量中的内容存储在当前元素的 data 属性中，键名为 knowlbody。
- 然后，使用 $(“a”).click(function(event) { … }); 为所有的 <a> 元素绑定点击事件处理程序。
- 在事件处理程序中，使用 $(this).data(‘knowlbody’); 从当前点击元素的 data 属性中获取键名为 knowlbody 的值，并将其存储在变量 knowl 中。
- 使用 $(“div.knowlbody”).html(knowl); 将 knowl 变量中的内容填充到 div.knowlbody 元素中。
- 使用 $(“div.knowlbody”).toggle(); 切换 div.knowlbody 元素的显示状态。
注意事项：
- $a.data(‘knowlbody’, knowl); 将数据存储在元素的 data 属性中，可以通过 $a.data(‘knowlbody’); 来获取。
- 这种方法适用于需要频繁访问相同属性值的情况，可以提高性能。
总结
本文介绍了两种使用 jQuery 获取不同元素的特定属性值的方法。第一种方法是在点击事件处理程序中获取属性值，简单直接，适用于属性值不经常变化的情况。第二种方法是预先加载 JSON 数据并存储在元素的 data 属性中，可以避免每次点击都重新加载 JSON 数据，从而提高性能。在实际开发中，可以根据具体的需求选择合适的实现方式。