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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
แนะนำหนังสือ Pre-Order PHP - high-performance ด้วย Swoole
โดย mindphp อ 24 พ.ย. 2020 4:47 pm บอร์ด Programming - PHP
0
9
อ 24 พ.ย. 2020 4:47 pm โดย mindphp
จ่ายเงินสมทบประกันสังคม มาตรา 33 , 39
โดย milk2533 อ 24 พ.ย. 2020 3:08 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
5
อ 24 พ.ย. 2020 3:08 pm โดย milk2533
ออกหัก ณ ที่จ่าย ค่าขนส่งคน , ค่าขนส่งของ ต่างกันอย่างไร
โดย milk2533 อ 24 พ.ย. 2020 2:51 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
6
อ 24 พ.ย. 2020 2:51 pm โดย milk2533
การเขียนสั่งจ่ายเช็ค อย่างไร
โดย milk2533 อ 24 พ.ย. 2020 1:29 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
4
อ 24 พ.ย. 2020 1:29 pm โดย milk2533
การจัดสินค้าขาย
โดย milk2533 อ 24 พ.ย. 2020 12:49 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
16
อ 24 พ.ย. 2020 12:49 pm โดย milk2533
FIFO สินค้าตามวันหมดอายุ
โดย milk2533 อ 24 พ.ย. 2020 11:17 am บอร์ด Share Knowledge
0
9
อ 24 พ.ย. 2020 11:17 am โดย milk2533
การนับสต๊อคสินค้าเซเว่น
โดย milk2533 อ 24 พ.ย. 2020 11:15 am บอร์ด Share Knowledge
0
8
อ 24 พ.ย. 2020 11:15 am โดย milk2533
ทริป กางเต็นท์ ใกล้กรุงเทพ
โดย milk2533 จ 23 พ.ย. 2020 1:04 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
17
จ 23 พ.ย. 2020 1:04 pm โดย milk2533