028_jQuery数据

最新推荐文章于 2022-08-12 23:13:48 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-08-12 23:13:48 发布

阅读量103

点赞数

分类专栏： jQuery学习文章标签： jquery

本文链接：https://blog.csdn.net/aihiao/article/details/120639894

版权

jQuery学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1. data(name,value)方法

1.1. $(selector).data(name,value)方法向元素附加数据。

1.2. 语法

$(selector).data(name,value)

1.3. 参数

2. data(object)方法

2.1. $(selector).data(object)方法使用带有名称/值对的对象向被选元素添加数据。

2.2. 语法

$(selector).data(object)

3. data(name)方法

3.1. $(selector).data(name)方法从被选元素中返回附加的数据。

3.2. 语法

$(selector).data(name)

3.3. 参数

3.4. $(selector).data()方法从被选元素中返回所有的附加数据, 是一个对象。

3.5. 语法

$(selector).data()

4. removeData(name)方法

4.1. $(selector).removeData(name)方法删除之前通过data()方法设置的数据。

4.2. 语法

$(selector).removeData(name)

4.3. 参数

4.4. $(selector).removeData()方法删除之前通过data()方法设置的所有数据。

4.5. 语法

$(selector).removeData()

5. $.data(selector,name,value)方法

5.1. $.data(selector,name,value)方法向元素附加数据。

5.2. 语法

$.data(selector,name,value)

5.3. 参数

6. $.data(selector,object)方法

6.1. $.data(selector,object)方法使用带有名称/值对的对象向被选元素添加数据。

6.2. 语法

$.data(selector,object)

7. $.(selector,name)方法

7.1. $.data(selector,name)方法从被选元素中返回附加的数据。

7.2. 语法

$.data(selector,name)

7.3. 参数

7.4. $.data(selector)方法从被选元素中返回所有的附加数据, 是一个对象。

7.5. 语法

$.data(selector)

8. $.removeData(selector,name)方法

8.1. $.removeData(selector,name)方法删除之前通过data()方法设置的数据。

8.2. 语法

$.removeData(selector,name)

8.3. 参数

8.4. $.removeData(selector)方法删除之前通过data()方法设置的所有数据。

8.5. 语法

$.removeData(selector)

9. $.hasData(element)方法

9.1. $.hasData(element)方法检测元素是否拥有与之相关的任何jQuery数据。

9.2. 语法

$.hasData(element)

9.3. 参数

9.4. $.hasData()方法检测元素当前是否拥有通过使用$.data()设置的任何值。如果没有数据与元素相关(根本不存在数据对象或者数据对象为空), 则该方法返回false; 否则返回true。

9.5. $.hasData(element)的主要优势是, 在不存在数据对象的情况下, 不会创建并将数据对象与元素进行关联。相反地, $.data(element)总是向调用者返回数据对象, 如果之前数据对象不存在, 则会创建它。

10. 例子

10.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery数据方法</title>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){	
				var myDiv = $('#myDiv');
				
				myDiv.data('id', 10001);
				myDiv.data({'name': '张三', 'sex': '男'});
				var obj = myDiv.data();
				for(let key in obj){
					$('p').append(key + ': ' + obj[key] + '<br />');
				}

				myDiv.removeData('sex');
				if(myDiv.data('id') != undefined){
					myDiv.append('id: ' + myDiv.data('id'));
				}
				if(myDiv.data('name') != undefined){
					myDiv.append(', name: ' + myDiv.data('name'));
				}
				if(myDiv.data('sex') != undefined){
					myDiv.append(', sex: ' + myDiv.data('sex'));
				}


				$.data(myDiv, 'id', 10002);
				$.data(myDiv, {'name': '李四', 'sex': '男'});
				obj = $.data(myDiv);
				for(let key in obj){
					$('p').append(key + ': ' + obj[key] + '<br />');
				}

				$.removeData(myDiv, 'sex');
				if($.hasData(myDiv) && $.data(myDiv, 'id') !== undefined){
					myDiv.append(', id: ' + $.data(myDiv, 'id'));
				}
				if($.hasData(myDiv) && $.data(myDiv, 'name') !== undefined){
					myDiv.append(', name: ' + $.data(myDiv, 'name'));
				}
				if($.hasData(myDiv) && $.data(myDiv, 'sex') !== undefined){
					myDiv.append(', sex: ' + $.data(myDiv, 'sex'));
				}

				myDiv.removeData();
				$.removeData(myDiv);
				obj = myDiv.data();
				for(let key in obj){
					$('p').append(key + ': ' + obj[key] + '<br />');
				}
				obj = $.data(myDiv);
				for(let key in obj){
					$('p').append(key + ': ' + obj[key] + '<br />');
				}
			});
		</script>
	</head>
	<body> 
  		<div id="myDiv"></div>
  		<p style="color: red;"></p>
	</body>
</html>

10.2. 效果图