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


กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
อยากทราบคำสั่งสำหรับวนลูปในการคลิกเลือกหน้าถัดไป
โดย Panchalee ส 17 ก.พ. 2018 6:40 pm บอร์ด Programming - C/C++ & java & Python
0
2
ส 17 ก.พ. 2018 6:40 pm โดย Panchalee
วิธีการติดตั้งเวอร์ชั่น php ในโปรแกรม Laragon
โดย Parichat ส 17 ก.พ. 2018 6:31 pm บอร์ด PHP Knowledge
0
2
ส 17 ก.พ. 2018 6:31 pm โดย Parichat
ปัญหาเรื่องบทความComponent, Module และ Plug in แตกต่างกันอย่างไร
โดย alisa93 ส 17 ก.พ. 2018 11:33 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
14
ส 17 ก.พ. 2018 2:27 pm โดย mindphp
ปัญหาเรื่องบทความ Joomla Extension
โดย alisa93 ส 17 ก.พ. 2018 10:56 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
15
ส 17 ก.พ. 2018 2:34 pm โดย mindphp
Selenium : คำสั่งสำหรับเช็ค Error ความสมบูรณ์ที่หน้าเว็บ
โดย Panchalee ศ 16 ก.พ. 2018 3:53 pm บอร์ด Software testing
0
8
ศ 16 ก.พ. 2018 3:53 pm โดย Panchalee
การสร้าง URL ให้แสดงทั้งไอดีทั้งจังหวัดต้องทำอย่างไรค่ะ
โดย Parichat ศ 16 ก.พ. 2018 2:40 pm บอร์ด Joomla Development
1
18
ศ 16 ก.พ. 2018 2:50 pm โดย tsukasaz
การสร้าง URL ให้แสดงทั้งลิ้งทั้งจังหวัดต้องทำอย่างไรค่ะ
โดย Parichat ศ 16 ก.พ. 2018 2:39 pm บอร์ด Joomla Development
3
25
ศ 16 ก.พ. 2018 3:23 pm โดย Parichat
อยากทราบคำสั่งสำหรับการเช็ค Error ในกรณีที่หน้าเว็บโหลดขึ้นไม่ครบ
โดย Panchalee ศ 16 ก.พ. 2018 2:14 pm บอร์ด Programming - C/C++ & java & Python
1
19
ศ 16 ก.พ. 2018 2:16 pm โดย thatsawan
ความเเตกต่าง ระหว่าง python 2 - python 3
โดย Jom07 ศ 16 ก.พ. 2018 1:48 pm บอร์ด Python Knowledge
0
21
ศ 16 ก.พ. 2018 1:48 pm โดย Jom07
Selenium : การใช้คำสั่งวนลูปใน xpath
โดย Panchalee ศ 16 ก.พ. 2018 1:44 pm บอร์ด Software testing
0
16
ศ 16 ก.พ. 2018 1:44 pm โดย Panchalee
จะขอถามเรื่องการเข้าไปดูผลลัพธ์ที่สร้าง Component ที่ชื่อว่า OS Responsive Image Gallery ยังไงค่ะ
โดย Parichat ศ 16 ก.พ. 2018 1:35 pm บอร์ด Joomla Development
2
24
ศ 16 ก.พ. 2018 1:55 pm โดย Parichat
OS Responsive Image Gallery(โอเอส เรสปอน์ซีฟอิมเมดแกลเลอรี่)-Component แกลเลอรี Joomla ที่เรียบง่าย
โดย Parichat ศ 16 ก.พ. 2018 1:29 pm บอร์ด Joomla Extension Review
0
12
ศ 16 ก.พ. 2018 1:29 pm โดย Parichat
การ์ดจอ กับ สโมสร ลิเวอร์พูล
โดย Before Dong ศ 16 ก.พ. 2018 10:33 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
18
ศ 16 ก.พ. 2018 2:07 pm โดย jobyjob
สอบถามค่ะ การยื่นภงด.1ก ยืนไม่ตรงกับภงด 1 ใบแนบเเต่ละเดือนเป็นไปได้มั้ยค่ะ
โดย thatsawan ศ 16 ก.พ. 2018 10:09 am บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
3
18
ศ 16 ก.พ. 2018 10:15 am โดย atipornh
การทำ webdriver บน Python GUI (Tkinter)
โดย Jom07 พฤ 15 ก.พ. 2018 6:48 pm บอร์ด Software testing
0
29
พฤ 15 ก.พ. 2018 6:48 pm โดย Jom07
ติดตั้ง Template ลงใน Joomle ไม่ได้ค่ะ
โดย Parichat พฤ 15 ก.พ. 2018 2:47 pm บอร์ด Joomla Development
4
25
พฤ 15 ก.พ. 2018 3:19 pm โดย Parichat
ออกรถยนต์ใหม่ป้ายแดงดาวน์ 0% ( ไม่ต้องใช้เงินดาวน์เลยแม้แต่บาทเดียว)
โดย bank16947 พฤ 15 ก.พ. 2018 10:09 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
พฤ 15 ก.พ. 2018 10:09 am โดย bank16947
รวมกลุ่มเฟสบุ๊คเกี่ยวกับ IT, Technology, CES
โดย AePongsak พฤ 15 ก.พ. 2018 10:08 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
6
59
ศ 16 ก.พ. 2018 11:51 am โดย AePongsak
งานประจำวันที่ 15 กุมภาพันธ์ 2561
โดย Alisasukkeaw พฤ 15 ก.พ. 2018 9:49 am บอร์ด M054 - อลิสา สุขเขียว
2
13
ศ 16 ก.พ. 2018 3:12 am โดย mindphp
Joomla กดอัพเดท 2.5.28 เป็น 3.5.1 แล้วเข้าเวปไม่ได้
โดย suwanna พ 14 ก.พ. 2018 5:51 pm บอร์ด Joomla Development
16
111
ศ 16 ก.พ. 2018 10:21 am โดย tsukasaz