การใช้งาน JQuery HTML Get Content จะมีหลักอยู่ 3 แบบ คือ text(), html(), and val()
โดยที่การ Get Content นั้นเป็นส่วนที่สำคัญส่วนหนึ่งของ JQuery ที่ใช้ในการจัดการและเข้าถึง element และ attributes ต่างๆได้ง่ายขึ้น
text() : จัดการค่าหรือว่ามีการ return ค่าที่เป็น Text ของเนื้อหา ของ element ที่เลือก
html() : จัดการค่าหรือว่ามีการ return ค่าที่เป็น Text ของเนื้อหา ของ element ที่เลือก รวมไปถึงแสดง Tag HTML ด้วย
val() : จัดการค่าหรือว่ามีการ return ค่า จากฟิลด์ต่างในฟอร์ม
มาดูตัวอย่างการใช้งาน
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
$("#btn_val").click(function(){
alert("Get Value Textbox : " + $("#test_val").val());
});
$("#btn1").click(function(){
alert("Get Text : " + $("#test").text());
});
$("#btn2").click(function(){
alert("Get Text with HTML Tag : " + $("#test").html());
});
});
</script>
</head>
<title></title>
<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<p>Value: <input type="text" id="test_val" value="Minpphp"></p>
<button id="btn1">Show Text from Paragraph</button>
<button id="btn2">Show HTML from Paragraph</button>
<button id="btn_val">Show Value from Textbox</button>
</body>
</html>
จากตัวอยย่างการใช้งาน ด้านบน จะทำงานอยู่ในลักษณะ ที่มี ข้อความสั้นๆ 1 ข้อความ ที่มี tag HTML อยู่ภายในข้อความ และมี textbox 1 ช่อง
โดยจะมีปุ่ม 3 ปุ่ม ให้เลือกใช้งานทำงาน ว่าต้องการ แสดงค่าเฉพาะ text ภายในข้อความ, แสดง text ในรูปแบบของ html, หรือว่า แสดงข้อความที่อยู่ใน textbox
ข้อมูลอ้างอิง
http://www.w3schools.com