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

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

บทที่ 2 jQuery Syntax
    หลังจากดาวน์โหลดเสร็จแล้วก็เอาไฟล์ jquery.js ไปวางไว้ที่ Root Document หรือจะเอาไปรวมไว้กับไลบรารี่อื่นๆ ก็ได้ ขอให้เรารู้ก็แล้วกันว่ามันอยู่ที่ไหนจะได้อ้างไปหาถูกที่ (ตามตัวอย่างใช้ jQuery เวอร์ชั่น 1.9.1)
 โดยการใส่โค๊ดให้ยึดตามชื่อของไฟล์ jQuery ที่เราโหลดมา เช่น
-หากโหลดมาชื่อไฟล์เป็น jquery-1.9.1 ก็ให้ใส่โค๊ดเป็น <script src="/jquery-1.9.1.js"> 
-หรือ หากโหลดมาชื่อไฟล์เป็น jquery-1.9.1.min ก็ให้ใส่โค๊ดเป็น <script src="/jquery-1.9.1.min.js" > 
 
โดยมีรูปแบบ ดังนี้

<script src="/jquery-1.9.1.js"> 
</script>   โดยเขียนโค้ดข้างต้นไว้ในแท็ก <head> ตัวอย่างเช่น
<html>
<head>
<script src="/jquery-1.9.1.js"></script>
<script>
// เราจะเขียนโค้ดคำสั่ง javascript ต่างๆของเราในส่วนนี้นะจ๊ะ
</script>
</head>
<body>
  <!-- ส่วนตรงนี้เราก็จะใช้เขียนโค้ด html  -->
</body>
</html>   

     สำหรับบางคนที่ไม่สะดวกจะดาวน์โหลดไฟล์ jQuery อาจใช้วิธีอ้างอิงจากเซิร์ฟเวอร์อื่นๆได้ดังนี้
1.อ้างอิงจากเซิร์ฟเวอร์ของ google จะใช้ syntax ดังนี้

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>

2.อ้างอิงจากเซิร์ฟเวอร์ของ Microsoft จะใช้ syntax ดังนี้

<head>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js">
</script>
</head>

     jQuery syntax
jQuery ออกแบบมาให้เลือก HTML element และกำหนด action ให้กับอิลิเมนต์นั้น มี syntax ดังนี้
$(selector).action()             selector คือส่วนที่เลือก เช่น element , css
       action() คือ เมธอดที่ใช้กำหนดการทำงานให้กับ selector
 ตัวอย่าง เช่น
- $(this).hide()  เป็นการซ่อนองค์ประกอบปัจจุบัน
- $("p").hide()  เป็นการซ่อนองค์ประกอบ  "p" ทั้งหมด
- $(".test").hide()  เป็นการซ่อนองค์ประกอบที่มี class= "test"
-  $(#test").hide()  เป็นการซ่อนองค์ประกอบที่มี  id="test"

    ลักษณะการใช้งาน  jQuery
   การใช้งาน jQuery Library จะใช้งานผ่านฟังก์ชัน jQuery() เป็นหลัก ยกตัวอย่างเช่น หากต้องการเข้าถึงแท็ก <title> เราสามารถเขียนได้ดังนี้ jQuery("title")

 

และเนื่องจากมันเป็นฟังก์ชันหลักที่เราต้องเรียกใช้อยู่ตลอด ผู้คิดค้นจึงเตรียมฟังก์ชัน $() ไว้เป็น Shortcut ให้เราเรียกใช้ได้โดยสะดวก ดังนั้นตัวอย่างข้างต้นจึงเขียนได้ใหม่ดังนี้
$("title")   จากตัวอย่างที่ยกมาข้างต้นนี้เมื่อเราเข้าถึง Elements ต่างๆได้แล้ว เราก็สามารถเรียกใช้ฟังก์ชันต่างๆเพื่อดัดแปลงแก้ไข Elements นั้นได้ ไม่ว่าจะเป็น Text, Attribute, หรือ CSS เป็นต้น ตัวอย่างเช่น
$("title").text("Hello jQuery");   ตัวอย่างข้างต้น ?title? คือ Selector หรือตัวกำหนดว่าจะเข้าถึง Elements ใด โดย Syntax จะใช้รูปแบบเดียวกับ Selector ใน CSS ส่วนเมธอด text() คือเมธอดสำหรับแก้ไขข้อความใน Element นั้นๆ (เมื่อเรา Select อะไรได้แล้ว ทุกอย่างคือออบเจกต์ ดังนั้นฟังก์ชันภายในออบเจกต์ก็คือเมธอดนั่นเอง)  

   นอกจากนี้ jQuery ยังนำเสนอรูปแบบการเขียนที่เรียกว่า Method Chainning กล่าวคือเมื่อเราได้ออบเจกต์ (Elements) ที่ต้องการแล้ว เราสามารถเรียกใช้หลายๆเมธอดเป็นลำดับขั้นได้ (และเขียนมันภายในบรรทัดเดียว) ตัวอย่างเช่น
$("h1").text("One more?").css("font-style","italic");   ในตัวอย่างข้างต้นนี้เราเข้าถึงแท็ก <h1> (สมมุติว่ามีเพียงแท็กเดียวในเอกสาร HTML) และเปลี่ยนแปลงข้อความในแท็กให้เป็น "One more?" ด้วยเมธอด text() จากนั้นเราจึงเรียกเมธอด css() เพื่อกำหนดสไตล์ให้กับแท็ก <h1> อีกที นี่แหละเทคนิคที่เรียกว่า Method Chainning และจะ Chain มากกว่าสองครั้งก็ได้

 

ข้อมูลอ้างอิง
http://www.kontentblue.com
http://sci.udru.ac.th

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
10 สุดยอดสตรีทฟู้ดในแอฟริกาตะวันตก
โดย Anonymous อ 24 พฤษภาคม 2020 9:58 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
อ 24 พฤษภาคม 2020 9:58 pm โดย บุคคลทั่วไป
ข้อมูลสำหรับทำระบบ
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
3
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดดความคืบหน้า / Progress - มารียา ซีฟู้ดส์
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
3
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดด Template เว็บไซต์ FDD (V2)
โดย mindphp อ 24 พฤษภาคม 2020 3:51 am บอร์ด FDD (Main)
0
1
อ 24 พฤษภาคม 2020 3:51 am โดย mindphp
R - ปรับกราฟฟิก ของเว็บ FDD
โดย mindphp อ 24 พฤษภาคม 2020 3:50 am บอร์ด FDD (Main)
0
2
อ 24 พฤษภาคม 2020 3:50 am โดย mindphp
ความคืบหน้า / Progress
โดย mindphp อ 24 พฤษภาคม 2020 3:46 am บอร์ด FDD (Main)
0
1
อ 24 พฤษภาคม 2020 3:46 am โดย mindphp
VDO - SP Page builder
โดย numtan5839 ศ 22 พฤษภาคม 2020 6:27 pm บอร์ด SP Page Builder Thai Edition - Manual & VDO & เทคนิคการใช้งาน
1
7
ศ 22 พฤษภาคม 2020 7:00 pm โดย mindphp
วิธีการใช้ Google Tasks แอพจัดการบันทึกสิ่งที่ต้องทำ
โดย sirirat ศ 22 พฤษภาคม 2020 11:04 am บอร์ด Share Knowledge
0
35
ศ 22 พฤษภาคม 2020 11:04 am โดย sirirat
งานประจำวันที่ 22 พฤษภาคม 2563
โดย sirirat ศ 22 พฤษภาคม 2020 10:10 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
1
15
ศ 22 พฤษภาคม 2020 11:22 am โดย numtan5839
สรุปการเรียนรู้ประจำวัน 21/05/63
โดย sirirat ศ 22 พฤษภาคม 2020 10:08 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
0
2
ศ 22 พฤษภาคม 2020 10:08 am โดย sirirat
รายงานความคืบหน้า / Process
โดย mindphp ศ 22 พฤษภาคม 2020 1:07 am บอร์ด SP Page Builder Thai Edition (Main)
1
3
ศ 22 พฤษภาคม 2020 1:34 am โดย mindphp
ส่ง site map ให้ google แต่ไม่โชว์ในเมนูบนเว็บเรา จะมีผลอะไรกับเว็บไหมครับ
โดย toonytoony2004 พฤ 21 พฤษภาคม 2020 10:17 pm บอร์ด Joomla Development
6
64
ส 23 พฤษภาคม 2020 10:56 pm โดย toonytoony2004
B - เวลาของบอร์ดไม่ตรงเวลาไทย
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:19 pm บอร์ด Odoojob.com - Tester
0
1
พฤ 21 พฤษภาคม 2020 5:19 pm โดย thatsawan
B - ข้อความแนะนำตัว ของผู้สมัครไม่แสดงใน บริษัทที่เปิดรับ
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:18 pm บอร์ด Odoojob.com - Tester
0
1
พฤ 21 พฤษภาคม 2020 5:18 pm โดย thatsawan
R - [email Formart-หาคน] เเจ้งเมื่อมีคนสมัครงานใน Odoojob
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:12 pm บอร์ด Odoojob.com - Manual & Content
0
1
พฤ 21 พฤษภาคม 2020 5:12 pm โดย thatsawan
B - บริษัทหาคน ต้องการเปลี่ยน Email รับสมัครงานหาทางเข้าไม่เจอ
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:07 pm บอร์ด Odoojob.com - Tester
0
1
พฤ 21 พฤษภาคม 2020 5:07 pm โดย thatsawan
R - [email Formart-หางาน] หลังสมัครงาน บน Odoojob
โดย thatsawan พฤ 21 พฤษภาคม 2020 4:57 pm บอร์ด Odoojob.com - Manual & Content
0
5
พฤ 21 พฤษภาคม 2020 4:57 pm โดย thatsawan
ทำไมสมัครสมาชิกแล้วเข้าสู่ระบบไม่ได้??
โดย sirirat พฤ 21 พฤษภาคม 2020 4:56 pm บอร์ด MindPHP News & Feedback
0
35
พฤ 21 พฤษภาคม 2020 4:56 pm โดย sirirat
B - ข้อมูลผู้สมัครที่กรอกใน mdsoft ไม่ติดมาด้วย
โดย thatsawan พฤ 21 พฤษภาคม 2020 4:51 pm บอร์ด Odoojob.com - Tester
0
1
พฤ 21 พฤษภาคม 2020 4:51 pm โดย thatsawan
B - คลิกเมนูแผงควบคุมเเล้ว เข้าไม่ได้ เด้งกลับมา index
โดย thatsawan พฤ 21 พฤษภาคม 2020 4:47 pm บอร์ด Odoojob.com - Tester
0
1
พฤ 21 พฤษภาคม 2020 4:47 pm โดย thatsawan