jQuery的幾種屬性數值的區別attr、data、prop複製屬性的時候的區別

時間 2020-02-16

標籤 jquery 幾種屬性數值區別 attr data prop 複製時候欄目 JQuery 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="t"><h1>attr測試</h1></div>
<div id="s" data-s="sss"><h1>html屬性data-s測試</h1></div>
<div id="d"><h1>data測試</h1></div>
<div id="p"><h1>p測試</h1></div>
</body>
<script type="text/javascript" src="../lib/jquery/jquery-1.12.0.min.js"></script>
<script>
    var jqObj = $('#t');
    jqObj.attr('data-a','aaa');//審查元素的時候 div標籤的屬性能夠看到data-a
    console.info('attr賦值 attr 取值',jqObj.attr('data-a'));//能夠取到值
    console.info('attr賦值 data 取值',jqObj.data('a'));//能夠取到值
    console.info('attr賦值 prop 取值',jqObj.prop('data-a'));//取不到值

    var jqSObj = $('#s');
    console.info('html屬性attr 取值',jqSObj.attr('data-s'));//能夠取到值
    console.info('html屬性data 取值',jqSObj.data('s'));//能夠取到值
    console.info('html屬性prop 取值',jqSObj.prop('data-s'));//取不到值


    var jqDObj = $('#d');
    jqDObj.data('a','ddd');//審查元素的時候 div標籤的屬性不能夠看到data-a
    console.info('data賦值 attr 取值',jqDObj.attr('data-a'));//取不到值
    console.info('data賦值 data 取值',jqDObj.data('a'));//能夠取到值
    console.info('data賦值 prop 取值',jqDObj.prop('data-a'));//取不到值

    var jqPObj = $('#p');
    jqPObj.prop('data-a','ppp');//審查元素的時候 div標籤的屬性不能夠看到data-a
    console.info('prop賦值 attr 取值',jqPObj.attr('data-a'));//取不到值
    console.info('prop賦值 data 取值',jqPObj.data('a'));//取不到值
    console.info('prop賦值 prop 取值',jqPObj.prop('data-a'));//能夠取到值
</script>
</html>

總結以下：javascript

attr和prop和data賦值的區別

	attr 賦值	prop 賦值	data 賦值
attr 取值	審查元素的時候能夠看到attr賦值的屬性;html 能夠取到值；java	不能取到值	不能取到值
prop 取值	不能取到值；jquery	審查元素的時候不能夠看到attr賦值的屬性;測試能夠取到值；spa	不能取到值
data 取值	能夠取到值；	不能取到值	審查元素的時候不能夠看到attr賦值的屬性;code 能夠取到值；htm

attr 賦值

prop 賦值

data 賦值

attr 取值

審查元素的時候能夠看到attr賦值的屬性;html

能夠取到值；java

不能取到值

prop 取值

不能取到值；jquery

審查元素的時候不能夠看到attr賦值的屬性;測試

能夠取到值；spa

不能取到值