การใช้ method text(), html()และ val() ใน jQuery

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 2443
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

การใช้ method text(), html()และ val() ใน jQuery

โพสต์โดย Parichat » 11/01/2018 11:14 am

text () - ตั้งค่าหรือส่งกลับเนื้อหาข้อความขององค์ประกอบที่เลือก
html () - ตั้งค่าหรือส่งกลับเนื้อหาขององค์ประกอบที่เลือก (ตลอดจนรูปแบบของ HTML)
val () - ตั้งค่าหรือส่งคืนค่าของข้อมูลที่อยู่ใน text ฟอร์ม
ตัวอย่าง

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--link button-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!--script button-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#test1").text("Hello MindPHP!");
    });
    $("#btn2").click(function(){
        $("#test2").html("<b>Hello MindPHP!</b>");
    });
    $("#btn3").click(function(){
        $("#test3").val("สวัสดี");
    });
});
</script>
</head>
<body>

<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>

<p>เพิ่ม field: <input type="text" id="test3" value="ยินดีต้อนรับ"></p>

<button id="btn1" class="btn btn-info">Set แบบ  Text</button>
<button id="btn2" class="btn btn-success">Set แบบ  HTML</button>
<button id="btn3" class="btn btn-danger">Set แบบ  Value</button>

</body>
</html>

ผลลัพธ์เมื่อกดปุ่มเปลี่ยนทั้ง text(), html()และ val()แล้ว
fdr.JPG
fdr.JPG (17.22 KiB) เปิดดู 677 ครั้ง


อ้างอิง : https://www.w3schools.com/jquery/jquery_dom_set.asp
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_set
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน