HTML与JS交换值

最新推荐文章于 2022-04-06 10:34:27 发布

思维小刀

最新推荐文章于 2022-04-06 10:34:27 发布

阅读量335

点赞数

分类专栏： HTML JavaScript 文章标签： HTML JS

本文链接：https://blog.csdn.net/fujian9544/article/details/90410551

版权

JavaScript 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

1.data-*

1.1说明

本质：JS与HTML交换数据的直接方法----data-*

data-* 属性用于存储私有页面后应用的自定义数据。

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。

data-* 属性由以下两部分组成：

属性名不要包含大写字母，在 data- 后必须至少有一个字符。
该属性可以是任何字符串
注意： 自定义属性前缀 "data-" 会被客户端忽略。

1.2JS获取方法

animal.getAttribute("data-animal-type");

1.3JS例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script>
function showDetails(animal)
{
	var animalType = animal.getAttribute("data-animal-type");
	alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>

<h1>物种</h1>
<p>点击一个物种，看看它是什么类型：</p>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>

1.4 JQUERY写法

    var type = $("#owl").attr("data-animal-type");

1.5 JQUERY例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
</head>
<body>
<p>点击一个物种，看看它是什么类型：</p>
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
function showDetails(animal){
	var type = $("#owl").attr("data-animal-type");
	console.log(type);
}
</script>

思维小刀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML与JS交换值

1.data-*1.1说明本质：JS与HTML交换数据的直接方法----data-*data-* 属性用于存储私有页面后应用的自定义数据。data-* 属性可以在所有的 HTML 元素中嵌入数据。自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。data-* 属性由以下两部分组成：属性名不要包含大写字母，在 data- 后必须至少有...
复制链接

扫一扫

专栏目录