ให้เรตสมาชิก: 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


กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การใช้งาน Python GUI (Tkinter) :Checkboxes (ช่องทำเครื่องหมาย)
โดย Jom07 จ 12 ก.พ. 2018 4:26 pm บอร์ด Python Knowledge
0
42
จ 12 ก.พ. 2018 4:26 pm โดย Jom07
แนะนำการเดินทางจากรังสิต-เสนานิคม1
โดย mynarirat จ 12 ก.พ. 2018 3:45 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
40
จ 12 ก.พ. 2018 3:45 pm โดย mynarirat
การเดินทางจากมีนบุรี สู่ เสนานิคม 1
โดย Alisasukkeaw จ 12 ก.พ. 2018 3:18 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
34
จ 12 ก.พ. 2018 3:18 pm โดย Alisasukkeaw
note M054
โดย Alisasukkeaw จ 12 ก.พ. 2018 10:55 am บอร์ด M054 - อลิสา สุขเขียว
0
17
จ 12 ก.พ. 2018 10:55 am โดย Alisasukkeaw
รวมงานประจำปี 2561
โดย Alisasukkeaw จ 12 ก.พ. 2018 10:54 am บอร์ด M054 - อลิสา สุขเขียว
0
2
จ 12 ก.พ. 2018 10:54 am โดย Alisasukkeaw
รวมบทความประจำปี 2561
โดย Alisasukkeaw จ 12 ก.พ. 2018 10:53 am บอร์ด M054 - อลิสา สุขเขียว
0
3
จ 12 ก.พ. 2018 10:53 am โดย Alisasukkeaw
งานประจำวัน 12 กุมภาพันธ์ 2561
โดย Alisasukkeaw จ 12 ก.พ. 2018 10:50 am บอร์ด M054 - อลิสา สุขเขียว
0
18
จ 12 ก.พ. 2018 10:50 am โดย Alisasukkeaw
Work's on Hand M054 อลิสา สุขเขียว
โดย Alisasukkeaw จ 12 ก.พ. 2018 10:40 am บอร์ด M054 - อลิสา สุขเขียว
0
5
จ 12 ก.พ. 2018 10:40 am โดย Alisasukkeaw
เรื่องราวของ flash player
โดย Before Dong จ 12 ก.พ. 2018 10:27 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
192
จ 12 ก.พ. 2018 10:27 am โดย Before Dong
เมื่อคนเมาไขกุญแจบ้าน
โดย Before Dong ส 10 ก.พ. 2018 4:41 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
652
ส 10 ก.พ. 2018 4:41 pm โดย Before Dong
โปรแกรมเมอร์ผู้หญิง
โดย Before Dong ศ 09 ก.พ. 2018 10:31 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
211
อ 13 ก.พ. 2018 4:22 pm โดย บุคคลทั่วไป
Set timezone บน PostgreSQL ตั้งค่าเวลาในฐานข้อมููล
โดย mindphp พฤ 08 ก.พ. 2018 7:19 pm บอร์ด PostgreSQL
0
53
พฤ 08 ก.พ. 2018 7:19 pm โดย mindphp
แก้ปัญหา Start PostgreSQL ไม่ได้ เจอ Error could not create shared memory segment: Invalid argument
โดย mindphp พฤ 08 ก.พ. 2018 6:41 pm บอร์ด PostgreSQL
2
55
พฤ 08 ก.พ. 2018 6:59 pm โดย mindphp
สอบถามเรื่อง SQL ต้องการ COUNT 2 field ในตารางเดียวใช้เขียน syntex ยังไงครับ
โดย AePongsak พฤ 08 ก.พ. 2018 6:07 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
76
พฤ 08 ก.พ. 2018 6:13 pm โดย nuattawoot
การใช้งาน Python GUI (Tkinter) :Radio Buttons (ปุ่มเรดิโอ)
โดย Jom07 พฤ 08 ก.พ. 2018 5:44 pm บอร์ด Python Knowledge
0
65
พฤ 08 ก.พ. 2018 5:44 pm โดย Jom07
สอบถาม phpBB ต้องการจะ Query ตาราง Reply ของแต่ละกระทู้ครับ
โดย AePongsak พฤ 08 ก.พ. 2018 5:16 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
2
58
พฤ 08 ก.พ. 2018 5:24 pm โดย AePongsak
สอบถามการเขียน phpBB เรื่อง Event เมื่อเขียนแล้วสามารถแสดงได้ทุกหน้า
โดย AePongsak พฤ 08 ก.พ. 2018 4:47 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
61
พฤ 08 ก.พ. 2018 5:22 pm โดย AePongsak
การใช้งาน Python GUI (Tkinter) :Dynamical Content in a Label ( เนื้อหาแบบไดนามิกในป้ายกำกับ)
โดย Jom07 พฤ 08 ก.พ. 2018 4:02 pm บอร์ด Python Knowledge
0
51
พฤ 08 ก.พ. 2018 4:02 pm โดย Jom07
การใช้งาน Python GUI (Tkinter) : Message Widget ( การทำวิดเจ็ตข้อความ)
โดย Jom07 พฤ 08 ก.พ. 2018 3:53 pm บอร์ด Python Knowledge
0
55
พฤ 08 ก.พ. 2018 3:53 pm โดย Jom07
การใช้งาน Python GUI (Tkinter) : calculator program (การทำเครื่องคิดเลข)
โดย Jom07 พฤ 08 ก.พ. 2018 2:44 pm บอร์ด Python Knowledge
0
82
พฤ 08 ก.พ. 2018 2:44 pm โดย Jom07