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

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

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

User avatar
ewqolf
PHP Super Member
PHP Super Member
Posts: 472
Joined: 14/11/2022 9:26 am

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

Post by ewqolf »

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

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

Code: Select all

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

Code: Select all

<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 123 times
ซึ่งก็จะเป็นกล่อง 2 กล่อง ที่เป็นสีฟ้าและสีดำ ครับโดยกล่องสีฟ้านั้นจะมี ชื่อก็คือ 01 ID เป็น 01 และ class นั้นเป็น box
และก็เหมือนกับกล่องสีดำ ที่มีชื่อก็คือ 02 ID = 02 และ class = box
จากนั้นผมจะสร้างปุ่มขึ้นมา 1 ปุ่มครับครับโดยผมจะใส่ฟังก์ชั่น Onclick ใส่ลงไปในปุ่มว่า

Code: Select all

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

Code: Select all

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

Code: Select all

$(".box").css("background-color","yellow");
console.log("hi")
เปลี่ยนสีจาก class box
เปลี่ยนสีจาก class box
เปลี่ยนสีจาก class box.gif (10.51 KiB) Viewed 123 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
Last edited by ewqolf on 24/01/2023 1:53 pm, edited 1 time in total.
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 36627
Joined: 22/09/2008 6:18 pm
Contact:

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

Post by 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
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Who is online

Users browsing this forum: Majestic-12 [Bot] and 6 guests