การใช้งาน JQUERY ในการแก้ไข Element ต่างๆโดยการเรียกด้วย method jquery

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
ewqolf
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 621
ลงทะเบียนเมื่อ: 14/11/2022 9:26 am

การใช้งาน JQUERY ในการแก้ไข Element ต่างๆโดยการเรียกด้วย method jquery

โพสต์ที่ยังไม่ได้อ่าน โดย ewqolf »

Jquery เป็น framework อีก 1 ตัวที่ใช้งานร่วมกับตัว javascript ซึ่งเป็น framework ที่ทำให้โค้ดของเรานั้นสะอาดตาขึ้นและไม่จำเป็ฯจะต้องเขียนเยอะซึ่งในกระทู้ก่อนหน้านี้อาจจะเห็นผมได้ใช้ตัว Jquery บ่อยๆแต่ว่าทุกท่านอาจจะยังไม่รู้แต่ว่าการที่เราใช้ jquery เรียก element นั้นเราสามารถเรียกได้หลายวิธี ครับซึ่งเราจะเรียกใช้ผ่าน Class หรือผ่าน name หรือ ผ่าน ID ซึ่งถ้าหากว่าเรานั้นมีชื่อ class ซ้ำๆกันอยู่หลาย element มันจะเรียกใช้งานทั้งหมดที่ใช้ชื่อ Class นั้นๆมาทั้งหมดซึ่งจะไม่เหมือนกันกับการเรียกแบบ javascript ซึ่งโค้ดของตัว jquery นั้นจะสั่นกว่าอ่านง่ายและสะอาดตามากกว่า ซึ่งในกระทู้นี้ผมจะสอนการเรียก Element มาเพื่อทำอะไรต่างๆได้

ซึ่งการที่เรานั้นจะใช้งาน Jquery นั้นเราจะต้องทำการโหลดตัว framework jquery มาใช้ที่หัวก่อน

โค้ด: เลือกทั้งหมด

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
จากนั้นเราจะทำการสร้าง Element มา 1 ตัวซึ่งเรานั้นสามารถใช้งานการเรียกได้หลากหลายแบบ ไม่ว่าจะเป็นชื่อ หรือว่า ID หรือ Class ซึ่งวิธีการเรียกใช้นั้นก็จะแตกต่างกันไปซึ่งผมจะสร้าง Element ขึ้นมา 2 ตัว ซึ่งจะตั้งชื่อ id และ class ดังนี้

โค้ด: เลือกทั้งหมด

<div name="01" id="01" class="box" style="float:left; background-color: #1b95e0; width: 200px; height: 200px;"></div>
<div name="02" id="02" class="box"style="float:left; background-color: #000; width: 200px; height: 200px;"></div>
element 2 ชิ้น
element 2 ชิ้น
element 2 ชิ้น.png (2.08 KiB) Viewed 856 times
ซึ่งก็จะเป็นกล่อง 2 กล่อง ที่เป็นสีฟ้าและสีดำ ครับโดยกล่องสีฟ้านั้นจะมี ชื่อก็คือ 01 ID เป็น 01 และ class นั้นเป็น box
และก็เหมือนกับกล่องสีดำ ที่มีชื่อก็คือ 02 ID = 02 และ class = box
จากนั้นผมจะสร้างปุ่มขึ้นมา 1 ปุ่มครับครับโดยผมจะใส่ฟังก์ชั่น Onclick ใส่ลงไปในปุ่มว่า

โค้ด: เลือกทั้งหมด

$("#01").css("background-color","yellow");
console.log("hi")
ซึ่งในโค้ดนั้นจะเห็นได้ว่าจะใช้งานเครื่องหมาย # ซึ่ง # นั้นเป็นการบอกว่าสิ่งที่เราเรียกนั้นเราจะใช้การเรียกด้วย ID ซึ่งถ้าหากว่าเราทำการกดปุ่มแล้ว element ที่ใช้ ID เป็น 01 ให้เปลี่ยน BG เป็นสีเหลือง
เปลี่ยนสีจาก ID 01
เปลี่ยนสีจาก ID 01
เปลี่ยนสีจาก ID 01.gif (8.79 KiB) Viewed 856 times
และถ้าหากเราต้องการจาก name ก็จะไม่มีการใส่สัญลักษณ์ดังนี้

โค้ด: เลือกทั้งหมด

$("01").css("background-color","yellow");
console.log("hi")
และถ้าหากว่าเป็น class ก็จะใช้ . ในการบอกว่าเราใช้ class ซึ่งถ้าหากว่าเราใช้งานตัวของ class นั้นมันจะเอาทุกอันที่ ใช้ชื่อ class นั้นๆมาทุกอัน

โค้ด: เลือกทั้งหมด

$(".box").css("background-color","yellow");
console.log("hi")
เปลี่ยนสีจาก class box
เปลี่ยนสีจาก class box
เปลี่ยนสีจาก class box.gif (10.51 KiB) Viewed 856 times
ซึ่งก็จะเห็นได้ว่า กล่อง 4 เหลี่ยม ทั้ง 2 อันนั้นได้เปลี่ยนเป็นสีเหลืองเพราะว่าเราใช้งานตัวของ class box ซึ่ง ทั้ง 2 ตัวนั้นใช้ชื่อ class เป็น box ทั้ง 2 อัน

ซึ่งการเรียกใช้งานด้วย jquery นั้นเราสามารถใช้งานตัวที่เราเลือกได้ด้วยถ้าหากว่าเราทำการ select element ด้วย javascript ซึ่งถ้าหากเรามีการ getelement มาแล้วเราสามารถใช้ตัวแปรที่เรา get มาในการบอกได้ แต่เราจะไม่ต้องใส่ ""เข้าไปด้วยครับ ซึ่งการใช้งานแบบนี้จะทำให้โค้่ดในการ get element นั้นสั้นลงเมื่อเทียบกับโค้ดของฝั่ง javascript

อ้างอิงค์
https://api.jquery.com/click/
https://www.w3schools.com/jquery/jquery_css.asp
https://www.w3schools.com/jquery/jquery_selectors.asp
แก้ไขล่าสุดโดย ewqolf เมื่อ 24/01/2023 1:53 pm, แก้ไขไปแล้ว 1 ครั้ง.
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: การใช้งาน JQUERY ในการแก้ไข Element ต่างๆโดยการเรียกใช้งานผ่านชื่อ Class

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

ตัวอย่างกับหัวข้อ ขัดแย้งกันนะครับ
ตามตัวอย่างเป็นการเปลี่ยน property ของ element ด้วย method css ไม่ใช่เปลี่ยน class ทั้ง class ของ selector ที่เลือกมา

ลองดู ที่นี่
viewtopic.php?p=296285#p296285
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 60