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

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

บทที่ 3 jQuery Selectors ตอนที่ 2
  จากบทเรียน บทที่ 3 jQuery Selectors ตอนที่ 1 ที่ได้ยกตัวอย่าง jQuery selectors พื้นฐานไปแล้ว จากหลายๆตัวอย่าง จะสังเกตว่าในโค๊ดคำสั่งแต่ล่ะชุดนั้นจะมี document ready function
$(document).ready(function()   document ready function  มีหน้าที่ควบคุม javascript ที่อยู่ใน function ดังกล่าว เพื่อทำงานเมื่อหน้า html โหลดเสร็จเรียบร้อยโดยอัตโนมัติ ทั้งนี้ก็เพื่อให้ javascript ที่เราต้องการเรียกใช้งานนั้นอยู่ในสภาพพร้อมใช้
<script>
$(document).ready(function(){  
    $("h2").fadeOut(4000);
  });
</script>
จากตัวอย่างเมื่อหน้า html โหลดเสร็จเรียบร้อย ก็จะทำการเลือกแท็ก h2 แล้วจัดการ fadeOut (ค่อยๆจางหายไป) แท็ก h2
     การใช้งาน document ready function นั้นสามารถเขียนให้สั้นเข้าไปอีกได้ดังนี้

<script type>
 $(function() {
  $("h2").fadeOut(4000);
 });
</script>


    jQuery สามารถเลือกอิลิเมนต์เป็นกลุ่มหรือเลือกอิลิเมนต์เดียว,เลือกตามชื่ออิลิเมนต์,เลือกตามแอตตริบิวต์,หรือเลือกตามเนื้อหาดังนี้

jQuery Element Selectors
jQuery ใช้ css ในการเลือก อิลิเมนต์  HTML (DOM)

$("p") เลือกอิลิเมนต์ <p> ทั้งหมด

$("p.intro")เลือกอิลิเมนต์<p>และอิลิเมนต์ class="intro"

$("p#demo")เลือกอิลิเมนต์ <p> และอิลิเมนต์ id="demo"

jQuery Attribute Selectors
jQuery ใช้ xPath expressions ในการเลือกอิลิเมนต์ในแอตตริบิวต์

$("href")เลือกอิลิเมนต์ทั้งหมดที่มีแอตตริบิวต์ href

$("[href=#]")เลือกอิลิเมนต์ทั้งหมดที่มีแอตตริบิวต์ href =?#?

$("[href!=#]")เลือกอิลิเมนต์ทั้งหมดที่แอตตริบิวต์ href  ไม่เท่ากับ=?#?

$("[href$='.jpg']")เลือกอิลิเมนต์ทั้งหมดที่มีแอตตริบิวต์ href และค่าของแอตตริบิวต์ลงท้ายด้วย .jpg

jQuery CSS Selectors
jQuery css selectors สามารถกำหนด,สร้าง,เปลื่ยนแปลง คุณสมบัติของ css ได้ จากตัวอย่างจะเป็นการเปลี่ยนพื้นหลังของอิลิเมนต์ <p>เป็นสีเหลืองทั้งหมดดังนี้

$("p").css("background-color","yellow");

 

อ่านเพิ่มเติม

บทที่ 3 jQuery Selectors ตอนที่ 1

บทที่ 3 jQuery Selectors ตอนที่ 3

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ปัญหาการใช้งาน MJUpgrade
โดย Anonymous อ 07 เม.ย. 2020 10:33 am บอร์ด MindPHP News & Feedback
5
18
อ 07 เม.ย. 2020 1:10 pm โดย mindphp
การรันไฟล์ .exe
โดย bumbim01 จ 06 เม.ย. 2020 8:25 pm บอร์ด Programming - C/C++ & java & Python
0
10
จ 06 เม.ย. 2020 8:25 pm โดย bumbim01
สรรพากรแจ้งข่าวดี ขยายเวลายื่นแบบฯ ให้ผู้ประกอบการทุกราย สู้ COVID19
โดย thatsawan จ 06 เม.ย. 2020 1:42 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
จ 06 เม.ย. 2020 1:42 pm โดย thatsawan
G -ข้อมูลสำหรับ ทำโปรแกรม ความต้องการของระบบที่ต้องทำ รวมเฟส 4
โดย mindphp จ 06 เม.ย. 2020 12:18 pm บอร์ด AZKing (Main)
1
10
จ 06 เม.ย. 2020 12:32 pm โดย mindphp
แนะนำบริการ hosting จาก Hostneverdie
โดย tumsailom อ 05 เม.ย. 2020 7:58 pm บอร์ด Web Hosting Review - Free Host Share Host VPS
0
86
อ 05 เม.ย. 2020 7:58 pm โดย tumsailom
อยากทราบถ้าหากต้องการที่ทดสอบการทำงานของของ Event cron จะต้องทำอย่างไรบางครับ
โดย Ittichai_chupol ส 04 เม.ย. 2020 10:50 am บอร์ด Programming - PHP
1
56
จ 06 เม.ย. 2020 11:39 am โดย mindphp
เทมเพลต Megadeal ของ MooZiiCart สำหรับทำเว็บขายสินค้าออนไลน์
โดย prmindphp ศ 03 เม.ย. 2020 6:39 pm บอร์ด MindPHP News & Feedback
0
78
ศ 03 เม.ย. 2020 6:39 pm โดย prmindphp
เครื่องมือช่วยกรองสินค้า สำหรับค้นหาสินค้าที่ต้องการ
โดย prmindphp พฤ 02 เม.ย. 2020 6:46 pm บอร์ด MindPHP News & Feedback
0
107
พฤ 02 เม.ย. 2020 6:46 pm โดย prmindphp
การเขียน Script สำหรับสร้าง User ใน Joomla
โดย tsukasaz พฤ 02 เม.ย. 2020 3:33 pm บอร์ด Joomla Developing Knowledge
0
169
พฤ 02 เม.ย. 2020 3:33 pm โดย tsukasaz
อยากทราบวิธีการดึงข้อมูลจาก Excel โดยการดึงข้อมูลจาก คอลัมของ Excel มาบันทึกลงในฐานข้อมูล
โดย Ittichai_chupol พฤ 02 เม.ย. 2020 10:09 am บอร์ด Programming - PHP
1
169
พฤ 02 เม.ย. 2020 10:43 am โดย mindphp
เอ้าๆ ใครที่ใบขับขี่หมดอายุในช่วง COVID-19 สามารถอมรมผ่านออนไลน์ ด้วย e-learning ได้เเล้วนะ
โดย thatsawan พฤ 02 เม.ย. 2020 10:09 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
88
พฤ 02 เม.ย. 2020 10:09 am โดย thatsawan
วิธีการเชื่อม api ของ gitlab สำหรับดาวน์โหลดไฟล์ project ใน ภาษา Python
โดย jirawoot พ 01 เม.ย. 2020 3:38 pm บอร์ด Python Knowledge
0
160
พ 01 เม.ย. 2020 3:38 pm โดย jirawoot
สอบถาม ผมจะทำ ci ของ gitlab ผมดูดไฟล์ project จาก api ของ gitlab ได้แล้วทำอย่างไรต่อครับ
โดย jirawoot พ 01 เม.ย. 2020 12:09 pm บอร์ด Programming - C/C++ & java & Python
3
127
พฤ 02 เม.ย. 2020 10:50 am โดย tsukasaz
ผมอัพเกรด joomla 2.5 เป็นเวอร์ชั่นล่าสุด 3.8 หน้าเว็บเวอร์ชั่นเดิมจะหายไปไหมคับ
โดย Anonymous พ 01 เม.ย. 2020 12:00 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
3
100
พ 01 เม.ย. 2020 4:29 pm โดย icphp
ลดอัตราหัก ณ ที่จ่าย เหลือ 1.5% ออกเป็นกฎหมายมีผลใช้บังคับแล้ว!!! นะ เริ่ม 1 เมษายน 2563
โดย thatsawan พ 01 เม.ย. 2020 10:54 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
101
พ 01 เม.ย. 2020 10:54 am โดย thatsawan
วิธีการจัดการกับเด็กๆ กวนใจ เมื่อต้องทำงานจากบ้าน #Work from home
โดย thatsawan พ 01 เม.ย. 2020 9:53 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
64
พ 01 เม.ย. 2020 9:53 am โดย thatsawan
วิธีแก้ไขปัญหา สำหรับ การนำ Template phpbb 3.3 มาใช้ใน phpbb 3.2
โดย thatsawan อ 31 มี.ค. 2020 7:27 pm บอร์ด phpBB user Guide Knowledge
0
169
อ 31 มี.ค. 2020 7:27 pm โดย thatsawan
สอบถาม ผมลองใช้ curl ของ API ของ gitlab แล้ว "message":"401 Unauthorized ครับ
โดย jirawoot อ 31 มี.ค. 2020 5:16 pm บอร์ด Programming - C/C++ & java & Python
1
307
อ 31 มี.ค. 2020 5:35 pm โดย jirawoot
การเชื่อมต่อ API ของ GitLab เพื่อดาวน์โหลดไฟล์
โดย tsukasaz อ 31 มี.ค. 2020 12:52 pm บอร์ด PHP Knowledge
0
2865
อ 31 มี.ค. 2020 12:52 pm โดย tsukasaz
วิธิการใส่ icon favorite เพื่อแสดงในแต่ละ browser
โดย Ittichai_chupol อ 31 มี.ค. 2020 11:14 am บอร์ด Graphic design
4
343
พฤ 02 เม.ย. 2020 4:33 pm โดย thatsawan