ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

การใช้งาน 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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - เมื่อมีการคืนเงินระบบบังคับคิดภาษีแยกนอกครับ [2018-06][013]
โดย Rujikon จ 25 มิ.ย. 2018 5:10 pm บอร์ด Hachanna - Testter
0
1
จ 25 มิ.ย. 2018 5:10 pm โดย Rujikon
การใช้ and ใน where ในกรณีมี 2 เงื่อนไข
โดย Parichat จ 25 มิ.ย. 2018 12:34 pm บอร์ด Joomla Developing Knowledge
0
8
จ 25 มิ.ย. 2018 12:34 pm โดย Parichat
งานประจำวันที่ 25 มิถุนายน 2561
โดย taemmynatchapon จ 25 มิ.ย. 2018 10:27 am บอร์ด M063 - ณัชพล ชัยวุฒิ
0
4
จ 25 มิ.ย. 2018 10:27 am โดย taemmynatchapon
งานประจำวันที่ 25 มิถุนายน 2561
โดย Rujikon จ 25 มิ.ย. 2018 10:15 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
1
6
จ 25 มิ.ย. 2018 6:21 pm โดย Rujikon
งานประจำวันที่ 25 มิถุนายน 2561
โดย wilawan จ 25 มิ.ย. 2018 9:39 am บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
1
9
จ 25 มิ.ย. 2018 2:10 pm โดย wilawan
งานประจำวันที่ 25 มิถุนายน 2561
โดย Parichat จ 25 มิ.ย. 2018 9:31 am บอร์ด M061 - ปาริชาติ รัตโณภาส
0
3
จ 25 มิ.ย. 2018 9:31 am โดย Parichat
สรุปงานalloy
โดย taemmynatchapon อ 24 มิ.ย. 2018 5:38 pm บอร์ด M063 - ณัชพล ชัยวุฒิ
3
14
จ 25 มิ.ย. 2018 10:51 am โดย taemmynatchapon
B - com_MJUpgrade ไม่สามารถติดตั้งได้ใน Joomla เวอร์ชัน 3.x
โดย Parichat ส 23 มิ.ย. 2018 5:27 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
0
1
ส 23 มิ.ย. 2018 5:27 pm โดย Parichat
B - ไม่สามารถ Copy สินค้าได้ [2018-05][030]
โดย Rujikon ส 23 มิ.ย. 2018 4:52 pm บอร์ด Hachanna - Testter
1
11
จ 25 มิ.ย. 2018 2:28 pm โดย Rujikon
การดูคำสั่ง sql ใน joomla
โดย Parichat ส 23 มิ.ย. 2018 3:31 pm บอร์ด Joomla Developing Knowledge
0
23
ส 23 มิ.ย. 2018 3:31 pm โดย Parichat
ปัญหา key ข้อมูลแล้ว error
โดย wilawan ส 23 มิ.ย. 2018 1:35 pm บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
1
8
ส 23 มิ.ย. 2018 1:58 pm โดย mindphp
Alloy - Product ที่ยังไม่มีในระบบ
โดย wilawan ส 23 มิ.ย. 2018 12:18 pm บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
0
5
ส 23 มิ.ย. 2018 12:18 pm โดย wilawan
ตรวจสอบ BPMN Zenith Workflow
โดย wilawan ส 23 มิ.ย. 2018 11:52 am บอร์ด Mindphp Task (ทดลองงาน)
0
3
ส 23 มิ.ย. 2018 11:52 am โดย wilawan
Google sheet ถ้าอยู่ที่ไฟล์ แล้วจะย้อนกลับมาหน้าแสดงรายละเอียดใน folder อย่างไร
โดย blackskulla ส 23 มิ.ย. 2018 11:10 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
37
ส 23 มิ.ย. 2018 11:14 am โดย thatsawan
ฺB - ไม่สามารถคืนสินค้าเข้าคลังของเสียหายได้ [2018-06][011]
โดย Rujikon ส 23 มิ.ย. 2018 11:10 am บอร์ด Hachanna - Testter
0
1
ส 23 มิ.ย. 2018 11:10 am โดย Rujikon
Q - ถ้ามีการให้ลูกค้ายืมสินค้าจะต้องดำเนินการอย่างไร [2018-06][012]
โดย Rujikon ส 23 มิ.ย. 2018 10:53 am บอร์ด Hachanna - Testter
0
4
ส 23 มิ.ย. 2018 10:53 am โดย Rujikon
B - เข้าดูข้อมูลการนัดคนเข้ามาสัมภาษณ์งานใน Application ไม่ได้
โดย watcharin ส 23 มิ.ย. 2018 10:25 am บอร์ด M.D.Soft Co.,Ltd. - Tester
1
2
ส 23 มิ.ย. 2018 10:29 am โดย watcharin
งานประจำวันที่ 23 มิถุนายน 2561
โดย Rujikon ส 23 มิ.ย. 2018 9:52 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
2
26
ส 23 มิ.ย. 2018 7:23 pm โดย Rujikon
งานประจำวันที่ 23 มิถุนายน 2561
โดย wilawan ส 23 มิ.ย. 2018 9:46 am บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
3
13
จ 25 มิ.ย. 2018 9:39 am โดย wilawan
งานประจำวันที่ 23 มิถุนายน 2561
โดย Parichat ส 23 มิ.ย. 2018 9:34 am บอร์ด M061 - ปาริชาติ รัตโณภาส
1
5
ส 23 มิ.ย. 2018 7:06 pm โดย Parichat