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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ติดตั้ง Joomla บน ubuntu ไม่ได้ค่ะ
โดย bolue ส 15 ส.ค. 2020 6:35 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
3
13
ส 15 ส.ค. 2020 7:00 pm โดย bolue
การใส่ เมนู ใน editor ของ mindphp ไม่ขึ็นข้อมูล
โดย bolue ส 15 ส.ค. 2020 10:14 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
0
8
ส 15 ส.ค. 2020 10:14 am โดย bolue
Joomla 4 beta 3 มาแล้ว มีอะไรใหม่ บ้างมาดูกัน
โดย mindphp ศ 14 ส.ค. 2020 2:12 pm บอร์ด MindPHP News & Feedback
0
14
ศ 14 ส.ค. 2020 2:12 pm โดย mindphp
การใช้ try-catch จับ Exception ในภาษา Java
โดย nai_cyp พฤ 13 ส.ค. 2020 2:47 pm บอร์ด Share Knowledge
0
15
พฤ 13 ส.ค. 2020 2:47 pm โดย nai_cyp
การใช้ switch ในภาษา Java
โดย nai_cyp พฤ 13 ส.ค. 2020 2:45 pm บอร์ด Share Knowledge
0
11
พฤ 13 ส.ค. 2020 2:45 pm โดย nai_cyp
การใช้คำสั่ง break และ continue ในภาษา Java
โดย nai_cyp พฤ 13 ส.ค. 2020 2:44 pm บอร์ด Share Knowledge
0
9
พฤ 13 ส.ค. 2020 2:44 pm โดย nai_cyp
การใช้ Do-While loop ในภาษา Java
โดย nai_cyp พฤ 13 ส.ค. 2020 1:37 pm บอร์ด Share Knowledge
0
11
พฤ 13 ส.ค. 2020 1:37 pm โดย nai_cyp
การใช้ For-loop ในภาษา Java
โดย nai_cyp พฤ 13 ส.ค. 2020 1:36 pm บอร์ด Share Knowledge
0
11
พฤ 13 ส.ค. 2020 1:36 pm โดย nai_cyp
การใช้ While-loop ในภาษา Java
โดย nai_cyp พฤ 13 ส.ค. 2020 1:33 pm บอร์ด Share Knowledge
0
12
พฤ 13 ส.ค. 2020 1:33 pm โดย nai_cyp
โปรแกรมตัดต่อ VDO ที่ฟรี บน windows
โดย nai_cyp พฤ 13 ส.ค. 2020 11:35 am บอร์ด Share Knowledge
2
30
พฤ 13 ส.ค. 2020 12:36 pm โดย nai_cyp
สร้าง crontab ใน Directadmin แล้ว Error Error Creating Cron Job
โดย mindphp พ 12 ส.ค. 2020 5:08 am บอร์ด Linux - Web Server
1
64
พ 12 ส.ค. 2020 5:17 am โดย mindphp
Undertaker เปิดตัวด้วยเพลงของ Metalica (ดนตรี)
โดย nai_cyp อ 11 ส.ค. 2020 5:20 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
อ 11 ส.ค. 2020 5:20 pm โดย nai_cyp
Green Day ปล่อยเพลงใหม่ช่วง COVID-19 (ดนตรี)
โดย nai_cyp อ 11 ส.ค. 2020 5:16 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
17
อ 11 ส.ค. 2020 5:16 pm โดย nai_cyp
BLACKPINK โปสเตอร์ทีเซอร์ใหม่? (ดนตรี)
โดย nai_cyp อ 11 ส.ค. 2020 5:11 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
16
อ 11 ส.ค. 2020 5:11 pm โดย nai_cyp
Liam Gallagher ในช่วง COVID-19 ระบาด (ดนตรี)
โดย nai_cyp อ 11 ส.ค. 2020 5:10 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
15
อ 11 ส.ค. 2020 5:10 pm โดย nai_cyp
Khalid ในช่วง COVID-19 ระบาด (ดนตรี)
โดย nai_cyp อ 11 ส.ค. 2020 5:07 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
อ 11 ส.ค. 2020 5:07 pm โดย nai_cyp
Green Day ในช่วง COVID-19 ระบาด (ดนตรี)
โดย nai_cyp อ 11 ส.ค. 2020 5:01 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
17
อ 11 ส.ค. 2020 5:01 pm โดย nai_cyp
การคำนวณเงินหากลูกค้าเป็นสมาชิกโดยใช้ If/else ในภาษา Java
โดย nai_cyp จ 10 ส.ค. 2020 7:10 pm บอร์ด Share Knowledge
0
31
จ 10 ส.ค. 2020 7:10 pm โดย nai_cyp
การหาค่า BMI ในภาษา Java
โดย nai_cyp จ 10 ส.ค. 2020 6:45 pm บอร์ด Share Knowledge
0
20
จ 10 ส.ค. 2020 6:45 pm โดย nai_cyp
ขั้นตอนการใช้ SMS Gateway
โดย natthanit.r2538 พ 08 ก.ค. 2020 11:42 am บอร์ด Programming - PHP
1
23
พ 08 ก.ค. 2020 7:10 pm โดย natthanit.r2538