ความแตกต่างในการใช้ class selector ระหว่าง jquery และ javascript

[ewqolf]

ความแตกต่างในการใช้ class selector ระหว่าง jquery และ javascript การใช้งาน class selector นั้นทั้ง 2 วิธีผมนั้นได้ผมทำการเขียนกระทู้สอนไปแล้วครับสำหรับฝั่งของ jquery นั้นจะมีความแตกต่างกันอยู่ระหว่าง jquery javascript นั้นค่อนข้างชัดเจน ซึ่งการใช้งานทั้ง 2 วิธีนั้นเราสามารถเอามาใช้งานร่วมกันได้ครับ โดยปกติแล้วเรานั้นสามารถเอาตัวแปรที่ได้มาจากการ selector มาใช้สำหรับการ selector ต่อมาจาก javascript ได้ซึ่งเราจะมาเปรียบเทียบกันว่าแต่ละแบบนั้นจะดีแตกต่างกันอย่างไร

เริ่มจากการฝั่งของ javascript ก่อนเลยนะครับ
ตัว selector ของ javscript นั้นจะมี format ประมาณ

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

document.getelementbyID("ID")

ซึ่งมันจะยาวหน่อยๆและการที่เรานั้นอยากจะเปลี่ยนไม่ selector ด้วย ID แต่เราอยากจะ select ด้วย name เราก็จะต้องเปลี่ยนเป็น

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

document.getElementsByName("name")

ซึ่งถ้าหากว่าเราจะ select จาก class เราก็จะต้องใช้

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

document.getElementsByClassName("classname")

ซึ่งบางทีนั้นเราอาจจะอยากเอาตัว selector มาใช้งานต่อได้นั้่นเราจะใช้งานเอาตัว selector มาใส่ในตัวแปรเราก็จะได้ตัวแปรที่เป็น selector ครับ

และต่อมาก็เป็นตัว selector ของ jquery ครับ
ถ้าเป็นตัวของ jquery นั้นการ selector นั้นจะแตกต่างกับของ javascript อย่างชัด ซึ่งผมจะบอกก่อนว่าการใช้งานของ jquery นั้นไม่ว่าเราจะ select ด้วยอะไรก็ตามก็จะใช้ format เดิมตลอดครับแต่เปลี่ยนแปลงตรงสัญลักษณ์ข้างหน้าเท่านั้นครับ เช่น ถ้าเป็น . นั้นจะเป็น selector จาก class ถ้าเป็น # จะ select ด้วย ID และถ้าหากว่าไม่มีสัญลักษณ์ก็จะเป็น select จาก name เช่น
selector จาก class

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

$(".classname")

จะเห็นได้ว่าจะนำหน้าคำด้วย . แสดงว่าเรานั้นจะ select ด้วย classname

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

$("#ID")

ถ้าหากว่านำหน้าคำด้วย # แสดงว่าเรานั้นจะ select ด้วย ID

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

$("name")

และสุดท้ายนี้ถ้าหากว่าไม่มีสัปญลักษณ์ก็จะใช้ select ด้วย name
และมีข้อดีอีก 1 ข้อนั้นคือก็คือเราสามารถเอาตัวแปรของ javascript มาเพื่อ select element ต่อได้โดยเราไม่ต้องมาเขียนใหม่โดยเราจะเอาตัวแปรนั้นมาใช้ทั้งตัวเลยครับ
เช่นถ้าหากว่าตัวแปรของเรามีตัวแปรที่ชื่อว่า selector ที่เราจะใช้ select มาแล้วจากฝั่ง javascript แล้วเราอยากจะเอามาใช้งานต่อในฝั่งของ jquery เราสามารถใช้

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

$(selector)

เปรียบเทียบความยาวโค้ดของ javascript กับ jquery

เปรียบเทียบความยาวโค้ดของ javascript กับ jquery.png (5.49 KiB) Viewed 601 times

ซึ่งความแตกต่างของทั้ง 2 ตัวนั้นจะอยู่ที่ว่าเรานั้นจะเอาไปใช้งานสำหรับทำอะไรครับซึ่งโดยส่วนตัวผมนั้นจะใช้ javascript เป็นหลักเพราะผมไม่ชอบมา select บ่อยๆซึ่งข้อแตกต่างนั้นก็จะเห็นได้ชัดว่าการ select ของ javascript นั้นจะมีความยาวที่มากแต่ข้อดีคือเมื่อเรา select มาแล้วเอามาใส่ในตัวแปรนั้นเราสามารถเอามาใช้งานต่อได้เรื่อยๆ แต่ถ้าเป็นของ jquery นั้นโค้ดนั้นจะสั่นมากๆแต่ว่าเราจะต้อง select บ่อยหน่อยและข้อดีคือเราจะต้อง select ดเ้วยวิธีนี้เท่านั้นเราถึงจะใช้งานร่วมกับของ jquery ได้ครับ

อ้างอิง
https://www.w3schools.com/jsref/met_document_getelementbyid.asp
https://www.w3schools.com/jquery/jquery_ref_selectors.asp
https://api.jquery.com/category/selectors/