JQuery : Selectors
สวัสดี ครับ พี่น้อง พ้องเพื่อน ชาวโลก ไซเบอร์ 
และ ชาว โปรแกรมเมอร์ทุกท่าน วันนี้ผม jonmufc โปรแกรมเมอร์ ยาจก ก็กลับมาจับ คียร์บอร์ด เขียน
บทความ สอน JQuery กันต่อ หลังจากคราวที่แล้วได้แนะนำการเขียน โปรแกรมอย่างง่าย ๆ เพื่อให้เห็นว่า JQuery ทำงานได้จริง เป็นยังไง มาวันนี้ ก็เลยจัดข้อมูลให้เพื่อน ๆ เพิ่มเติม แต่อาจจะยังไม่ครบ ทุกกระบวน ท่า
แต่ก็น่าจะพอให้คนที่ยังมอง ภาพการเขียนโปรแกรมด้วย JQueryไม่ออก ได้ลองศึกษา ดูวันนี้ มาชึกฉา เอ้ย ศึกษา ( รณรงค์ให้ใช้ภาษาไทยกันให้ถูกต้องนะครับ )
ในเรื่อง ของ selectors ตัว selectors ในความคิดของผมก็น่าจะหมายถึงว่า เราอยากจะเลือก element ตัวไหนใน document ของเราขึ้นมาทำงาน เช่น อยากเลือก div หรือ id ตัวไหนซักตัวขึ้นมาทำงาน อะไรประมาณนั้น
แล้วเวลาเราจะใช้ selectors ตัวไหน ก็ต้อง ใช้ สัญลักษณ์ ที่แสดง ถึง object ของ JQueryด้วยสัญลักษณ์นี้ $(” element ของเรา “) ดอลล่าร์ แล้ว วงเล็บเปิดตามด้วย element ของเราแล้วตามด้วยวงเล็บปิด มาดูตัวอย่างข้างล่างต่อได้เลย
$(”div”).addClass(’jonmufc’);
หรือ $(”#div_1″).addClass(’jonmufc’);
ซึ่งความหมายของมันก็คือ หา div ใน document แล้ว เพิ่ม class เข้าไปให้ div นั้น ๆ ด้วย class ที่ชื่อ jonmufc หรืออีกความหมายของบรรทัดที่สอง ก็คือ หา element id ที่ชื่อ div_1 แล้วเพิ่ม class jonmufc เข้าไป
เป็นไงบ้างครับ พอมองออกกันมั้ย ต่อไปเรามาดูว่า selectors นั้น มีรูปแบบยังไงได้บ้าง และเราจะใช้ selectors ได้อย่างไรบ้าง
- select by tagname = $(”div”) , $(”p”) ,$(”a”) ,$(”td”) , $(”tr”)
- select by id = $(”#div_1″) , $(”#p_1″)
- select by class = $(”.class1″) –> select element ที่ใช้ class1
มาดูตัวอย่างได้จากโค้ดข้างล่างเลยครับ
ลอง ลบค่า ใน tag ของ jQuery ออกทีละตัว แล้วใส่กลับเข้ามาใหม่ดูครับจากนั้นลองศึกษาผลลัพท์ ที่ได้ออกมาหรือทดลองเพิ่มเติม ตามใจชอบเลยครับ
<html>
<head>
<script src = "jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#testid").addClass("class6");
//Add Class ให้ element id ที่ชื่อ testid
$("#testid > p").addClass("class1");
//Add Class ให้ element p ภายใต้ id testid
$("#testid > ul").addClass("class2");
//Add Class ให้ element ul ภายใต้ id testid
$("li:contains(4)").addClass("class5");
//Add Class ให้ element li ที่มี เลขสี่ รวมอยู่ด้วย
$("li:eq(1)").addClass("class3");
//Add Class ให้ element li ที่ อยู่ลำดับ ที่ 2 เริ่มต้นที่ eq(0)
$("li:nth-child(even)").addClass("class4");
//Add Class ให้ element li ที่อยู่เป็นลำดับ เลขคู่(อันนี้ไม่ชัวร์เท่าไหร่)
$("input:text").addClass("class7");
//Add Class ให้ element ที่เป็น input textbox
$("input:button").addClass("class7");
//Add Class ให้ element ที่เป็น input button
});
</script> <style type="text/css"> .class1{
background-color:#fc0;
}
.class2{
background-color:#fcA;
}
.class3{
font-size : 350%;
color : #f55;
}
.class4{
font-size : 250%;
color : #f70;
}
.class5{
font-size : 500%;
color : #000;
}
.class6{
font-size : 150%;
color : #000;
background-color:#abc;
}
.class7{
border-style : solid;
border-width:3px;
border-color : #fce;
}
</style>
</head>
<body>
<div id="testid" >
Input1 : <input type="text" size="25"></input>
<input type="button" value ="Click"></input>
<p >
This is JQuery version 1.3.2!!!!!!
<ul>
<b>Test selector</b>
<li>
bullet 1
</li>
<li>
bullet 2
</li>
<li>
bullet 3
</li>
<li>
bullet 4
</li>
</ul>
</p> /div>
</body> </html>
ขอบคุณทุก คอมเม้นท์นะครับ ไปละ เจอกันใหม่ตอนหน้า
mkszviw9nx