selector คืออะไร คือตัวที่เราจะใช้สำหรับอ้างอิงไปถึงออบเจ็กต่างๆ ที่อยู่บนหน้าเพจ ดูตัวอย่าง javascript กันก่อนนะครับ

document.getElementById('username');
document.getElementByTagName('p');

คำสั่งแรกจะอ้างอิงไปถึง อะไรก็ตามที่อยู่บนหน้าเพจที่มี id เท่ากับ username คำสั่งที่สอง อ้างอิงไปถึงแท็ก p ทุกตัวที่อยู่บนหน้าเพจ ทีนี้เรามาดู selector ในรูปแบบ css

#username{font-size:16px;}
.classname{font-size:18px;}
p a{font-size:20px;}

#username จะอ้างไปถึงออบเจ็กที่มี id เท่ากับ username
.classname จะอ้างไปถึงอ้อบเจ็กทุกตัวที่เรากำหนด class เท่ากับ classname
p a จะอ้างไปถึง แท็ก a ที่อยู่ภายใต้แท็ก p ทุกตัวในเพจ

จากที่กล่าวมาท่านพอจะเข้าใจบ้างนะครับว่า selector คืออะไร


ทีนี้เรามาว่ากันถึง selector ของ jQuery กัน

selector ของ jQuery นั้นยืมรูปแบบมาจาก css ทั้งดุ้น ถ้าท่านเคยเขียน css ละก้อ งานนี้สบายเลย selector ของ jQuery พื้นฐาน มีอยู่ด้วยกัน 4 ตัว คือ

  • *
  • #id
  • tag name
  • .classname

* จะอ้างอิงถึงทุกๆสิ่งที่อยู่บนหน้าเพจนั้นๆ
#id จะอ้างถึงออบเจ็กใดๆ ที่มี id เท่ากับชื่อที่เรากำหนดหลังเครื่องหมาย # (sharp)
tag name จะอ้างอิงไปถึงแท็กที่กำหนด เช่น p h1 หรืออื่นๆ
.classname จะอ้างอิงไปถึงอ้อบเจ็กที่มีคลาสเท่ากับ classname

มาดูตัวอย่างโค้ดครับ

$('#username').val('select2web');
$('p').text('this is paragraph');
$('.calendar').datePicker();

ในกรณีที่ท่านต้องการจะจัดการอ้อบเจ็กหลายๆตัว ด้วยการกระทำอย่างเดียวกัน jQuery อนุญาติให้ท่านเขียนได้ง่ายๆอย่างนี้

// เขียนอย่างนี้
$('#username,#password,#confirm').trim();
 
// ไม่จำเป็นต้องเขียนอย่างนี้
$('#username').trim();
$('#password').trim();
$('#confirm').trim();

หรือท่านจะเขียนในรูปแบบของ chain (สายโซ่) ก็ทำได้เหมือนกัน

$('input .classname').val();

มันก็จะอ้างไปถึง แท็ก input ที่มีคลาสชื่อว่า classname เท่านั้น ตัวอื่นไม่เกี่ยว … มาถึงตรงนี้ให้ท่านท่องไว้ในใจเลยนะครับว่า jQuery ยืม css มาทั้งกะบิ css เขียนได้ยังไง jQuery ก็เขียนในรูปแบบเดียวกันได้

ขอให้เจริญในธรรม