HTML与JS交换值
生活随笔
收集整理的這篇文章主要介紹了
HTML与JS交换值
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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>?
總結
以上是生活随笔為你收集整理的HTML与JS交换值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery的var that=this
- 下一篇： 前端组件：layui