jquery 数据缓存 data方法使用-优快云博客

本文链接：https://blog.youkuaiyun.com/hqmln/article/details/84040255

本文介绍如何使用jQuery缓存数据方法，并通过已缓存的数据执行自定义函数，展示了一个简单实用的前端数据管理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>data方法带函数</TITLE>
  <script type="text/javascript" src="../jquery-1.4.1.js"></script>
  <script type="text/javascript">
		
		
		function getDivData(){
			var t = document.getElementById("testId");
			//取缓存数据
			var state = $.data(t,'test');
			var fn = state.hanshu ; 
			//执行函数
			fn();
		}

		function getDivData1(){
			var t = document.getElementById("testId");
			//取缓存数据
			var state = $.data(t,'test1');
			var fn = state.hanshu ; 
			alert(fn);
		}



		//改变一个数据
		function changeDivData(){
			alert(111111111111);
			return "函数返回值";
		}

		$(function(){
			var t = document.getElementById("testId"); //此处必须用document.getElementById("testId")用$("#testId")没有效果
			$.data(t,'test',{
				name:'hqm',
				age:27,
				hanshu:changeDivData //此处hanshu为一个函数
			});



			$.data(t,'test1',{
				name:'hqm',
				age:27,
				hanshu:changeDivData()//此处hanshu为值函数返回值，因为执行了该函数
			});
		});
  </script>
 </HEAD>

 <BODY>
	<div id="testId">在这个div上存些数据</div>
	<input type="button" value="getDivData" onclick="getDivData()"/>
	<input type="button" value="getDivData1" onclick="getDivData1()"/>
	
 </BODY>
</HTML>