简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

jQuery中使用attr(), prop(), val()获取value的异同详解

小云云
Lepaskan： 2018-01-17 11:26:30
asal
1889 orang telah melayarinya

本文主要为大家带来一篇详谈jQuery中使用attr(), prop(), val()获取value的异同。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

jQuery中有3个获取元素value值的函数比较相似：attr(), prop(), val()；拿来比较一下。 　

示例代码：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery-2.1.4.js"></script>

</head>
<body>
<input type="text" value="123"/>
<button id="btn">click</button>
<script>

  $("#btn").click(function(){
    var attr=$("input").attr("value");
    var prop=$("input").prop("value");
    var val=$("input").val();
    console.log(attr);
    console.log(prop);
    console.log(val);
  })
</script>
</body>
Salin selepas log masuk

代码如上所示，为输入框设定了初始值：123，此时点击按钮，控制台输出为： 


123
123
123
Salin selepas log masuk

改变输入框的值，此时控制台输出： 　　　


123
123thgf
123thgf
Salin selepas log masuk

如果我们没有为文本框设定初始值，即删除value=”123”后，依旧使用如上js代码，则相应输出如下：

undefined

attr()输出为undefined，而prop()和val()输出为“空”。

输入value值后：控制台输出为： 


undefined
asdasd
asdasd
Salin selepas log masuk

attr()输出依然为undefined，而prop()和val()则输出实际值。

可见，prop()和val()都能获取到文本框的实际value值，而attr()获取的则始终为文档结构中的value的属性值，与文本框实际值无关，并不会变化。

相关推荐：

jQuery中.attr()和.data()的区别

jQuery的attr()与prop()的区别

jQuery .attr()和.removeAttr()方法操作元素属性示例_jquery

Atas ialah kandungan terperinci jQuery中使用attr(), prop(), val()获取value的异同详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
jquery prop
sumber：php.cn
Artikel sebelumnya：jQuery实现鼠标滑过预览大图效果 Artikel seterusnya：最全JavaScript知识点总结
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Langkah-langkah untuk memasang jQuery dalam Nuxt.js Walaupun saya cuba menambah jQuery dalam projek saya, saya mendapat ralat mengatakan ia ti...
daripada 2023-11-06 16:41:50
0
1
225
jQuery mendapat nilai yang salah apabila mendapat atribut data Saya mempunyai div dengan atribut data <divclass='p1'data-location='1'></div> ...
daripada 2023-11-01 23:01:19
0
1
209
Sokong Pemindahan-Pengekodan jQuery:chunked Saya seorang pembangun web. Dalam skrip saya, saya menggunakan header() untuk menetapkan &...
daripada 2023-10-25 23:44:37
0
1
230
Bagaimana untuk mendapatkan dimensi semula jadi imej menggunakan JavaScript atau jQuery? Setakat ini saya mempunyai kod ini: varimg=document.getElementById('draggable'); varwidth=...
daripada 2023-10-21 13:53:08
0
2
275
Kembangkan kawasan teks secara automatik Saya cuba membuat kawasan teks pengembangan automatik yang mudah. Ini kod saya: textarea.o...
daripada 2023-10-21 08:49:23
0
2
225
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！