ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 3 jQuery Selectors ตอนที่1
(มาดูกันว่าเจ้ามหากาพย์ selector นั้นมีอะไรซ่อนอยู่บ้าง)
jQuery syntax
$(selector).action()    selector คือส่วนที่เลือก เช่น element , css
action() คือ เมธอดที่ใช้กำหนดการทำงานให้กับ selector  
   จากลักษณะ syntax ของ jQurey ข้างต้นจะเห็น selector คือตัวที่เราจะใช้สำหรับอ้างอิงไปถึงออบเจ็กต่างๆ ที่อยู่บนหน้าเพจ
ซึ่งการที่เราจะสั่งให้ jQuery ทำงานบางอย่างตามที่เราตั้งใจนั้น เราจำเป็นต้องเรียกใช้งาน object ให้ได้อย่างถูกต้องก่อน เพราะว่าหากเรายังไม่สามารถสั่งให้ jQuery ระบุได้ว่าจะกระทำกับ object ใด ก็ไม่สามารถทำอะไรต่อได้อีกแล้ว ก็ถือว่าได้ Selector คือเรื่องพื้นฐานที่เราต้องรู้จักแล้วใช้ให้ถูกต้องก็จะสามารถสร้างสรรค์งาน ได้ดั่งใจ  
   selector ของ jQuery จะเริ่มต้นด้วยเครื่องหมายดอลลาร์แล้วตามด้วยวงเล็บ
$(selector)
โดยมี selector แบบพื้นฐานดังนี้
1  $("#id")  เป็นการเลือก object ที่มี id ตามที่กำหนด
ตัวอย่างเช่น

<html>
<head>
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){ 
    $("#test").fadeOut(4000);
});
</script>
</head>
<body>
<h2 id="test">welcome to www.mindphp.com</h2>
</body>
</html>

คลิกดูตัวอย่างการ select แบบ IdSelector
 *จากตัวอย่าง select แบบ $("#id") จะเห็นว่าเมื่อเราใช้คำสั่ง $("#test").fadeOut(4000); ซึ่งหมายถึงเลือก object ที่มี id ทั้งหมด โดยให้มีเอฟเฟค fadeOut(4000) (ค่อยๆจางหายไปใน 4 วินาที)  ดังนั้นข้อความ welcome to www.mindphp.com ซึ่งอยู่ใน object ที่มี id จึงค่อยๆจางหายไป ตามตัวอย่าง

2   $(".class")  การเลือกด้วย classname เช่น หากในหน้าเว็บของเรามี tag ที่เรียกใช้งาน class stylesheet อยู่ แทกตัวนี้จะเป็นตัวที่ถูก selector  ตัวอย่างเช่น

<html>
<head>
<script src="/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){ 
    $(".test").fadeOut(4000);
});
</script>
</head>
<body>
<h2 class="test">welcome to www.mindphp.com</h2>
</body>
</html>

คลิกดูตัวอย่าง select โดยชื่อ classname
  *จากตัวอย่าง select โดยชื่อ classname จะเห็นว่าเมื่อเราใช้คำสั่ง $(".test").fadeOut(4000); ซึ่งหมายถึงเลือก h2 class ทั้งหมด โดยให้มีเอฟเฟค fadeOut(4000) (ค่อยๆจางหายไปใน 4 วินาที)  ดังนั้นข้อความ welcome to www.mindphp.com ซึ่งอยู่ใน h2 class จึงค่อยๆจางหายไป ตามตัวอย่าง

3   $("*")  เป็นการเลือก object ทั้งหมด (all selector) ตัวอย่างเช่น

<html>
<head>
<script src="/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){ 
    $("*").fadeOut(4000);
});
</script>
</head>
<body>
<h2>welcome to www.mindphp.com</h2>
</body>
</html>

คลิกดูตัวอย่างแบบ all selector
  *จากตัวอย่าง select โดยชื่อ all selector จะเห็นว่าเมื่อเราใช้คำสั่ง $("*").fadeOut(4000); ซึ่งหมายถึงเลือก object ทั้งหมด โดยให้มีเอฟเฟค fadeOut(4000) (ค่อยๆจางหายไปใน 4 วินาที)  ดังนั้นข้อความ welcome to www.mindphp.com ซึ่งอยู่ในแท็ก h2 ซึ่งถือเป็น object หนึ่งภายในเอกสาร html นี้จึงค่อยๆจางหายไป ตามตัวอย่าง

4   select โดยชื่อ html tag  $("a"), $("p")$, ("div")  ตัวอย่างเช่น

<html>
<head>
<script src="/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){  
    $("h2").fadeOut(4000);
  });
</script>
</head>
<body>
<h2>welcome to www.mindphp.com</h2>
</body>
</html>

คลิกดูตัวอย่าง select โดยชื่อ html tag
  *จากตัวอย่าง select โดยชื่อ html tag จะเห็นว่าเมื่อเราใช้คำสั่ง $("h2").fadeOut(4000); ซึ่งหมายถึงเลือกแท็ก h2 ทั้งหมด โดยให้มีเอฟเฟค fadeOut(4000) (ค่อยๆจางหายไปใน 4 วินาที)  ดังนั้นข้อความ welcome to www.mindphp.com ซึ่งอยู่ในแท็ก h2 จึงค่อยๆจางหายไป ตามตัวอย่าง

5.  $("selector1, selector2,.... selectorN")  เป็นการเลือก object แบบหลายๆอัน
(multi selector)
 เช่น ถ้าเราต้องการเลือกหลาย tag โดยใช้คำสั่งเดียวกัน สามารถทำได้ดังนี้

<html>
<head>
<script src="/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$('h2, p, b').fadeOut(4000);
});
</script>
</head>
<body>
<h2 > Nadech </h2>
<p > boyPakorn</p>
<b > Mario</b>
</body>
</html>

คลิกดูตัวอย่างแบบ multi selector
*จากตัวอย่าง multi selector จะเห็นว่าเมื่อเราใช้คำสั่ง $('h2, p, b').fadeOut(4000); สามารถทำให้เราสามารถเลือกแท็ก h2 , p และแท็ก b ได้พร้อมกันทั้งหมด โดยให้มีเอฟเฟค fadeOut(4000) (ค่อยๆจางหายไปใน 4 วินาที)  ดังนั้นข้อความ แท็ก h2 , p และแท็ก b จึงค่อยๆจางหายไปพร้อมๆกัน ตามตัวอย่าง  ซึ่งช่วยให้การเขียนโค๊ดคำสั่งง่ายขึ้นแทนที่จะต้องเขียนคำสั่งทีละ object


อ่านเพิ่มเติม
บทที่ 3 jQuery Selectors ตอนที่ 2
บทที่ 3 jQuery Selectors ตอนที่ 3


กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Q - Camtasia ไม่สามารถนำไฟล์เข้ามาตัดต่อได้
โดย จันนุสรณ์ ดีแก่ อ 18 ธ.ค. 2018 10:22 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
3
อ 18 ธ.ค. 2018 10:22 am โดย จันนุสรณ์ ดีแก่
Q - รัน localhost แล้วขึ้นแบบนี้ สามารถแก้ด้วยวิธีใดคะ
โดย จันนุสรณ์ ดีแก่ อ 18 ธ.ค. 2018 9:35 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
6
อ 18 ธ.ค. 2018 9:35 am โดย จันนุสรณ์ ดีแก่
กดส่งอีเมลในแบบฟอร์มการติดต่อแล้วขึ้น Error 404 Object not found ต้องแก้ไขยังไงครับ
โดย Tewlie Pinsakorn จ 17 ธ.ค. 2018 11:36 pm บอร์ด Joomla Development
0
6
จ 17 ธ.ค. 2018 11:36 pm โดย Tewlie Pinsakorn
วิธีการเพิ่ม BBcode ในเว็บ ปุ่มจัดกลาง
โดย จันนุสรณ์ ดีแก่ จ 17 ธ.ค. 2018 6:04 pm บอร์ด phpBB user Guide Knowledge
0
6
จ 17 ธ.ค. 2018 6:04 pm โดย จันนุสรณ์ ดีแก่
BBcode การจัดกึ่งกลาง
โดย จันนุสรณ์ ดีแก่ จ 17 ธ.ค. 2018 6:03 pm บอร์ด phpBB user Guide Knowledge
0
9
จ 17 ธ.ค. 2018 6:03 pm โดย จันนุสรณ์ ดีแก่
การค้นหาขั้นสูง
โดย จันนุสรณ์ ดีแก่ จ 17 ธ.ค. 2018 4:54 pm บอร์ด phpBB user Guide Knowledge
0
11
จ 17 ธ.ค. 2018 4:54 pm โดย จันนุสรณ์ ดีแก่
อยากได้แอคเซสเข้าสู่หัวใจเธอ
โดย จันนุสรณ์ ดีแก่ จ 17 ธ.ค. 2018 2:13 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
12
จ 17 ธ.ค. 2018 2:13 pm โดย จันนุสรณ์ ดีแก่
วิธีการใช้งาน Function preg_match()
โดย Ittichai_chupol จ 17 ธ.ค. 2018 11:29 am บอร์ด PHP Knowledge
0
8
จ 17 ธ.ค. 2018 11:29 am โดย Ittichai_chupol
Joomshopping ไม่สามารถใช้ฟังชั่นก์ส่งเมลได้
โดย Kritsana Leesakul อ 16 ธ.ค. 2018 8:37 pm บอร์ด Joomla Development
8
50
อ 18 ธ.ค. 2018 1:25 am โดย fernn25
วิธีแก้ปัญหาลืมรหัสผ่าน admin ของ Worlpress โดยการเปลี่ยนรหัสด้วย phpMyadmin
โดย mindphp อ 16 ธ.ค. 2018 6:44 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
9
อ 16 ธ.ค. 2018 6:44 pm โดย mindphp
วิธีการใช้งาน Function preg_match_all()
โดย Ittichai_chupol ส 15 ธ.ค. 2018 6:19 pm บอร์ด PHP Knowledge
0
15
ส 15 ธ.ค. 2018 6:19 pm โดย Ittichai_chupol
การสร้างกระดานข่าวในส่วนของผู้ดูแลระบบ
โดย จันนุสรณ์ ดีแก่ ศ 14 ธ.ค. 2018 4:38 pm บอร์ด phpBB user Guide Knowledge
0
27
ศ 14 ธ.ค. 2018 4:38 pm โดย จันนุสรณ์ ดีแก่
วิธีแก้เมื่อ Phpbb ขึ้นว่า กรุณาลบไดเรกเทอรี หากไดเรกเทอรียังอยู่ใช้ได้แต่ แผงควบคุมเท่านั้น
โดย จันนุสรณ์ ดีแก่ ศ 14 ธ.ค. 2018 3:39 pm บอร์ด phpBB user Guide Knowledge
0
29
ศ 14 ธ.ค. 2018 3:39 pm โดย จันนุสรณ์ ดีแก่
การค้นหาภายในกระทู้
โดย จันนุสรณ์ ดีแก่ ศ 14 ธ.ค. 2018 1:54 pm บอร์ด phpBB user Guide Knowledge
0
26
ศ 14 ธ.ค. 2018 1:54 pm โดย จันนุสรณ์ ดีแก่
การค้นหาภายในบอร์ด
โดย จันนุสรณ์ ดีแก่ ศ 14 ธ.ค. 2018 12:10 pm บอร์ด phpBB user Guide Knowledge
0
32
ศ 14 ธ.ค. 2018 12:10 pm โดย จันนุสรณ์ ดีแก่
การค้นหาจากทั้งหมด
โดย จันนุสรณ์ ดีแก่ ศ 14 ธ.ค. 2018 11:31 am บอร์ด phpBB user Guide Knowledge
0
28
ศ 14 ธ.ค. 2018 11:31 am โดย จันนุสรณ์ ดีแก่
เมื่อกราฟฟิกดีไซเนอร์อยากจีบสาว
โดย จันนุสรณ์ ดีแก่ ศ 14 ธ.ค. 2018 10:45 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
36
ศ 14 ธ.ค. 2018 10:45 am โดย จันนุสรณ์ ดีแก่
การตั้งค่าบอร์ด
โดย จันนุสรณ์ ดีแก่ พฤ 13 ธ.ค. 2018 5:07 pm บอร์ด phpBB user Guide Knowledge
0
19
พฤ 13 ธ.ค. 2018 5:07 pm โดย จันนุสรณ์ ดีแก่
ส่งค่า ตัวแปร เปลี่ยนภาษา ไปยัง javascript บน phpbb
โดย Ittichai_chupol พฤ 13 ธ.ค. 2018 4:28 pm บอร์ด PHP Knowledge
0
19
พฤ 13 ธ.ค. 2018 4:28 pm โดย Ittichai_chupol
Styles Orange BBEs
โดย จันนุสรณ์ ดีแก่ พฤ 13 ธ.ค. 2018 3:58 pm บอร์ด phpBB 3.1 Extension Review
0
39
พฤ 13 ธ.ค. 2018 3:58 pm โดย จันนุสรณ์ ดีแก่