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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: การใช้ method text(), html()และ val() ใน jQuery

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

by Parichat » 11/01/2018 11:14 am

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

Code: Select all

<!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) Viewed 1257 times
อ้างอิง : https://www.w3schools.com/jquery/jquery_dom_set.asp
https://www.w3schools.com/jquery/tryit. ... m_html_set

Top