มาดูกันว่า Jquery ทั้ง3คำส่งนี้

text, html, val ทำอะไรได้บ้าง ใช้งานยังไง

jQuery กับคำสั่งพื้นฐาน text - html - val

 

text();    = ดึงค่า และ แก้ไขค่าต่างๆจากเป้าหมาย ที่เป็นข้อความตัวอักษรเท่านั้น (text) ไม่รวมแท็ก html

เช่น ต้องการจะดึงข้อความที่ อยู่ใน id="text" เข้ามาใช้งาน ก็ใช้คำสั่งนี้ครับ

$("#text").text();

ยกตัวอย่างการใช้งาน

<div id="text">เว็บอินดี้ ดอทคอม WWW.WEB-INDY.COM</div>

<div id="get_text"></div>

<script>

$(document).ready(function(){

var str = $("#text").text();    // สั่งให้ ตัวแปร "str" เก็บค่า text จาก id="text" เข้ามาเก็บใว้

$("#get_text").text(str);      // ใส่ตัวแปร "str" เข้าไปใน id="get_text" ด้วยคำสั่ง .text();

});

</script>


เท่านี้ครับ อธิบายคือ <div id="get_text"></div> ไม่มีค่าใดๆ
แต่เมื่อรันสคริปนี้ id="get_text" จะไปดึงค่า จาก id="text" มาแสดงที่ตัวเองครับ ลักษณะเหมือน Copy ข้อความมา

 

html(); =  ดึงค่า และ แก้ไขค่าต่างๆจากเป้าหมาย ทั้งที่เป็น html และข้อความ

เช่น หากเราต้องการดึง html ที่อยู่ภายใต้ id="product" เข้ามาแสดงที่ id="copy_html" ก็ใช้คำสั่งดังนี้ครับ

$("#product").html();

ยกตัวอย่างการใช้งาน

<div id="produc">
<img src="/image/product001.jpg" />
<p>กระเป๋าแบรนด์เนม ยี่ห้อ WEB-INDY</p>
<p>ราคา: 1900บาท</p>
</div>

<div id="copy_html"></div>

<script>

$(document).ready(function(){

var str = $("#produc").html();    // สั่งให้ ตัวแปร "str" เก็บค่า html จาก id="produc" เข้ามาเก็บใว้

$("#copy_html").text(str);      // ใส่ตัวแปร "str" เข้าไปใน id="copy_html" ด้วยคำสั่ง .html();

});

</script>

 
เรียบร้อยครับ อธิบายคือ <div id="copy_html"></div> มีค่าว่างเปล่า แต่เมื่อรันสคริปนี้

<div id="copy_html"></div> จะไปดึงค่า html ทั้งหมดที่อยู่ภายใต้ <div id="produc"> มาแสดงที่ตัวมันเองครับ

นำไปประยุกต์ใช้ได้หลายแบบ

 

val(); = ดึงค่าหรือแก้ไขค่าใน <input> เช่น <input> ที่อยู่ใน <form> ต่างๆ

เช่นเราต้องการให้ผู้ใช้ กรอกฟอร์ม แต่เราต้องการให้ เมื่อกด Submit แล้วแสดง Alert ค่าที่อยู่ใน <input> นั้นสามารถทำได้ดังนี้ (จำเป็นต้องเพิ่ม even .click เพิ่มเข้ามา เพื่อแสดงตัวอย่าง ผู้อ่านอย่าสับสนนะครับ)

$("#target").val();

ยกตัวอย่างการใช้งาน

<form method="post" action="">

<input id="target" type="text" value="" />

<input id="btn_sm" type="submit" value="SUBMIT" />

</form>

<script>

$("#btn_sm").click(function(){     // สร้างอีเว้น .click ทำให้เหตุการณ์ เกิดขึ้นเมื่อ Click
var target = $("#target").val();     // สร้างตัวแปร target เก็บค่าภายใน id="target" ใว้
alert(target);      // ทำให้เกิดหน้าต่างแจ้งเตอน(alert) ด้วยตัวแปร target ที่ได้เก็บค่าใว้
});

</script>


จากตัวอย่างเมื่อเรากรอกฟอร์มลงไป เช่นกรอกชื่อ "เว็บอินดี้"

จากนั้นเมื่อเราคลิ๊กปุ่ม SUBMIT จะแสดงหน้าต่างแจ้งเตือนเด้งขึ้นมาว่า "เว็บอินดี้"

คำสั่งเหล่านี้ค่อนค่างจำเป็นต้องใช้ในการเขียนเว็บครับ ประยุกต์ใช้ได้หลากหลาย