jQuery GET And SET

1.jQuery GET

method หรือวิธีการพื้นฐานในการใช้งาน jQuery สำหรับการจัดการ DOM มีดังนี้
– text() กำหนดและคืนค่าข้อความหรือ element ที่เลือก
– html() กำหนดและคืนค่าข้อความหรือ element ที่เลือก รวมทั้งแท็ก HTML
– val() กำหนดและคืนค่าของฟอร์ม

ตัวอย่างที่ 1 การใช้งาน text()

<html>
 <head>
  <script src="jquery-3.5.1.min.js"></script>
  <script>
   $(document).ready(function(){
    $("#txt1").click(function(){
    alert('Text is : '+ $("#txt1").text());
    });
   });
  </script>
 </head>
 <body>
  <div id="txt1"><p>Hello World!</p></div>
 </body>
</html>

ไฟล์ที่ 1 text.php

 

ตัวอย่างที่ 2 การใช้งาน html()

<html>
 <head>
  <script src="jquery-3.5.1.min.js"></script>
  <script>
   $(document).ready(function(){
    $("#txt1").click(function(){
    alert('HTML is : '+ $("#txt1").text());
    });
   });
  </script>
 </head>
 <body>
  <div id="txt1"><p>Hello World!</p></div>
 </body>
</html>

ไฟล์ที่ 2 jqr_html.php

ตัวอย่างที่ 3 การใช้งาน val()

<html>
 <head>
  <script src="jquery-3.5.1.min.js"></script>
  <script>
   $(document).ready(function(){
    $("button").click(function(){
    alert('Text is : '+ $("#txt1").val());
    });
   });
  </script>
 </head>
 <body>
  <div id="txt1"><p>Hello World!</p></div>
  <input type="text" name="txt1" id="txt1">
  <button>Click</button>
 </body>
</html>

ไฟล์ที่ 3 jqr_val.php

 

2.jQuery SET

jQuery SET เป็นการกำหนดค่า ซึ่งมีการใช้งานพื้นฐาน 3 วิธีเหใอนกันกับ GET ซึ่งประกอบไปด้วย

  • text()
  • html()
  • val()

ตัวอย่างที่ 4 การ SET text(),html(), และ val()

<html>
 <head>
  <script src="jquery-3.5.1.min.js"></script>
  <script>
   $(document).ready(function(){
    $("button").click(function(){
    $("#txt1").text("My name is World.");
    $("#txt2").html("<b>Hello World!</b>");
    $("#txt3").val("Finish");
    });
   });
  </script>
 </head>
 <body>
  <p id="txt1">Hello World!</p>
  <p id="txt2">This text ...</p>
  <input type="text" name="txt3" id="txt3">
  <button>Click</button>
 </body>
</html>

ไฟล์ที่ 4 jqr_set.php