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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - เมื่อมีการคืนเงินระบบบังคับคิดภาษีแยกนอกครับ [2018-06][013]
โดย Rujikon จ 25 มิ.ย. 2018 5:10 pm บอร์ด Hachanna - Testter
0
1
จ 25 มิ.ย. 2018 5:10 pm โดย Rujikon
การใช้ and ใน where ในกรณีมี 2 เงื่อนไข
โดย Parichat จ 25 มิ.ย. 2018 12:34 pm บอร์ด Joomla Developing Knowledge
0
8
จ 25 มิ.ย. 2018 12:34 pm โดย Parichat
งานประจำวันที่ 25 มิถุนายน 2561
โดย taemmynatchapon จ 25 มิ.ย. 2018 10:27 am บอร์ด M063 - ณัชพล ชัยวุฒิ
0
4
จ 25 มิ.ย. 2018 10:27 am โดย taemmynatchapon
งานประจำวันที่ 25 มิถุนายน 2561
โดย Rujikon จ 25 มิ.ย. 2018 10:15 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
1
6
จ 25 มิ.ย. 2018 6:21 pm โดย Rujikon
งานประจำวันที่ 25 มิถุนายน 2561
โดย wilawan จ 25 มิ.ย. 2018 9:39 am บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
1
9
จ 25 มิ.ย. 2018 2:10 pm โดย wilawan
งานประจำวันที่ 25 มิถุนายน 2561
โดย Parichat จ 25 มิ.ย. 2018 9:31 am บอร์ด M061 - ปาริชาติ รัตโณภาส
0
3
จ 25 มิ.ย. 2018 9:31 am โดย Parichat
สรุปงานalloy
โดย taemmynatchapon อ 24 มิ.ย. 2018 5:38 pm บอร์ด M063 - ณัชพล ชัยวุฒิ
3
14
จ 25 มิ.ย. 2018 10:51 am โดย taemmynatchapon
B - com_MJUpgrade ไม่สามารถติดตั้งได้ใน Joomla เวอร์ชัน 3.x
โดย Parichat ส 23 มิ.ย. 2018 5:27 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
0
1
ส 23 มิ.ย. 2018 5:27 pm โดย Parichat
B - ไม่สามารถ Copy สินค้าได้ [2018-05][030]
โดย Rujikon ส 23 มิ.ย. 2018 4:52 pm บอร์ด Hachanna - Testter
1
11
จ 25 มิ.ย. 2018 2:28 pm โดย Rujikon
การดูคำสั่ง sql ใน joomla
โดย Parichat ส 23 มิ.ย. 2018 3:31 pm บอร์ด Joomla Developing Knowledge
0
23
ส 23 มิ.ย. 2018 3:31 pm โดย Parichat
ปัญหา key ข้อมูลแล้ว error
โดย wilawan ส 23 มิ.ย. 2018 1:35 pm บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
1
8
ส 23 มิ.ย. 2018 1:58 pm โดย mindphp
Alloy - Product ที่ยังไม่มีในระบบ
โดย wilawan ส 23 มิ.ย. 2018 12:18 pm บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
0
5
ส 23 มิ.ย. 2018 12:18 pm โดย wilawan
ตรวจสอบ BPMN Zenith Workflow
โดย wilawan ส 23 มิ.ย. 2018 11:52 am บอร์ด Mindphp Task (ทดลองงาน)
0
3
ส 23 มิ.ย. 2018 11:52 am โดย wilawan
Google sheet ถ้าอยู่ที่ไฟล์ แล้วจะย้อนกลับมาหน้าแสดงรายละเอียดใน folder อย่างไร
โดย blackskulla ส 23 มิ.ย. 2018 11:10 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
37
ส 23 มิ.ย. 2018 11:14 am โดย thatsawan
ฺB - ไม่สามารถคืนสินค้าเข้าคลังของเสียหายได้ [2018-06][011]
โดย Rujikon ส 23 มิ.ย. 2018 11:10 am บอร์ด Hachanna - Testter
0
1
ส 23 มิ.ย. 2018 11:10 am โดย Rujikon
Q - ถ้ามีการให้ลูกค้ายืมสินค้าจะต้องดำเนินการอย่างไร [2018-06][012]
โดย Rujikon ส 23 มิ.ย. 2018 10:53 am บอร์ด Hachanna - Testter
0
4
ส 23 มิ.ย. 2018 10:53 am โดย Rujikon
B - เข้าดูข้อมูลการนัดคนเข้ามาสัมภาษณ์งานใน Application ไม่ได้
โดย watcharin ส 23 มิ.ย. 2018 10:25 am บอร์ด M.D.Soft Co.,Ltd. - Tester
1
2
ส 23 มิ.ย. 2018 10:29 am โดย watcharin
งานประจำวันที่ 23 มิถุนายน 2561
โดย Rujikon ส 23 มิ.ย. 2018 9:52 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
2
26
ส 23 มิ.ย. 2018 7:23 pm โดย Rujikon
งานประจำวันที่ 23 มิถุนายน 2561
โดย wilawan ส 23 มิ.ย. 2018 9:46 am บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
3
13
จ 25 มิ.ย. 2018 9:39 am โดย wilawan
งานประจำวันที่ 23 มิถุนายน 2561
โดย Parichat ส 23 มิ.ย. 2018 9:34 am บอร์ด M061 - ปาริชาติ รัตโณภาส
1
5
ส 23 มิ.ย. 2018 7:06 pm โดย Parichat