ការសិក្សាពីការប្រើប្រាស់ jQuery

មាតិកា

I.   សេចក្តីផ្តើម

II. គោលបំណង

III. តម្រូវការ

IV. អ្វីទៅជា jQuery?

V.  ហេតុអ្វីបានជាប្រើ jQuery?

VI. វិធីប្រើប្រាស់ jQuery

VII.Syntax របស់ jQuery

VIII.jQuery Selectors

I.          សេចក្តីផ្តើម

នៅក្នុងមេរៀននេះ លោកអ្នកនឹងសិក្សាអំពីរបៀបប្រើប្រាស់ jQuery ហើយនិង​ Ajax ចាប់ពីចំនុចដំបូងឡើងទៅ ដើម្បីជាជំនួយក្នុងការយកទៅប្រើប្រាស់ទៅតាមអ្វីដែលខ្លួនឯងចង់បាន។ ជាទូទៅ គេនិយមប្រើប្រាស់វាស្ទើរតែគ្រប់ពេល ពីព្រោះវា powerful ដែលអាចអោយយើងជាអ្នកសរសេរកូដដើម្បីអោយវាមានភាពរស់រវើកនិងទាក់ទាញសម្រាប់អ្នកប្រើប្រាស់ Web application របស់យើង។ ខាងក្រោមនេះគឺជាវិធីក្នុងការប្រើប្រាស់ jQuery ព្រមទាំង syntax ដែលផ្តល់ភាពងាយស្រួលដល់អ្នកសិក្សាក្នុងការអនុវត្តន៍។

II.         គោលបំណង

ក្រោយពីអនុវត្តន៍តាម Tutorial នេះ លោកអ្នកនឹងយល់អំពី

1. យល់ដឹងអំពីអ្វីទៅជា jQuery
2. យល់ដឹងអំពីការប្រើប្រាស់ jQuery
3. យល់ដឹងអំពីការប្រើប្រាស់​ Library របស់ jQuery

III.        តម្រូវការ

ដើម្បីអាចអនុវត្តន៍បាន លោកអ្នកត្រូវមាន៖

• កម្មវិធី Microsoft Visual Studio (2008,2010,2013,2015,2017) ឬ Latest Version

ក្នុងការអនុវត្តន៍នៅក្នុងមេរៀននេះគឺខ្ញុំប្រើនូវ

• Microsoft Visual Studio 2015

IV.       អ្វីទៅជា jQuery?

jQuery គឺជា lightweight script មួយ មានន័យថា សរសេរតិច តែធ្វើការងារបានច្រើន “write less, do more” ហើយវាគឺជា open source របស់ JavaScript library។ គោលបំណងចម្បងក្នុងការប្រើប្រាស់ jQuery គឺធ្វើយ៉ាងណាអោយវាមានភាពងាយស្រួលប្រើប្រាស់ជាង JavaScriptទៅទៀត។

• jQuery library មានផ្ទុកនូវ features មួយចំនួនដូចខាងក្រោម៖
  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities

បន្ថែមពីលើនេះទៀតសោត jQuery ក៏មាននូវ plugins ជាច្រើនទៀត សម្រាប់បម្រើការងារទៅតាមមុខងាររបស់វា។ ជាឩទាហរណ៍ plugin សម្រាប់ date time picker ជាដើម។

V.         ហេតុអ្វីបានជាប្រើ jQuery?

មូលហេតុដែលយើងត្រូវប្រើប្រាស់ jQuery

• វាមានភាពពេញនិយម ដែលយើងអាចនិយាយថាវាមាននូវ community ដ៏ធំ រួមទាំងមាននូវ developers ជាច្រើនក្នុងការជ្រោមជ្រែងចែករំលែក។
• Plugin របស់វាត្រូវបាន release ពីមួយពេលទៅមួយពេល
• ចំពោះការប្រើប្រាស់ API របស់វា ដែលdocumentត្រូវបានផ្តល់អោយទាំងស្រុង រួមមានឧទាហរណ៍ជា inline code សម្រាប់អោយយើងងាយស្រួលយល់និងអាន។
• ដោយឡែកក្រុមហ៊ុនធំៗមួយចំនួនក៏ប្រើប្រាស់នូវ jQuery ទៅលើ web របស់ពួកគេផងដែរ ដែលក្រុមហ៊ុនទាំងនោះមានដូចជា៖
  • Google
  • Microsoft
  • IBM
  • Netflix

VI.       វិធីប្រើប្រាស់ jQuery

ក្នុងការប្រើប្រាស់ jQuery នៅក្នុង web pages របស់យើង គឺវាមានវិធីមួយចំនួនក្នុងការចាបផ្តើមប្រើប្រាស់

1. វិធីទី១៖ ទាញយក jQuery library តាមរយៈ website: jQuery.com
2. វិធីទី២៖ ធ្វើការ include នូវ jQuery CDN

វិធីទី១៖

ក្រោយពីលោកអ្នកទាញយក library របស់វារួចរាល់ហើយ សូមធ្វើការ Add នូវ library នោះ ចូលទៅក្នុង HTML <script> tag

វិធីទី២៖

នៅក្នុងវិធីទី២នេះ តម្រូវអោយយើងត្រូវការភ្ជាប់ Internet ដោយប្រើប្រាស់នូវ CDN (Content Delivery Network) ដើម្បីធ្វើការដំណើរការនូវ jQuery library។ យើងអាចប្រើប្រាស់ jQuery តាមរយៈ CDN របស់ Google ឬមួយក៏ CDN របស់​ Microsoft៖

1. Google CDN

Microsoft CDN

VII.          Syntax របស់ jQuery

ខាងក្រោមនេះគឺជារូបមន្តក្នុងការសរសេរនូវ jQuery៖

Basic Syntax នោះគឺ៖ $(selector).action()

• សញ្ញា $ បញ្ជាក់អំពីការកំណត់ឬក៏ដំណើរការរបស់ jQuery
• (selector) ដើម្បីធ្វើការស្វែងរកនូវ HTML elements
• action() ដើម្បីបង្ហាញអំពីសកម្មភាពទៅលើ element(s) ទាំងនោះ

ឧទាហរណ៍:

$(this).hide() – សម្រាប់លាក់នូវ current element.

$(“p”).hide() – សម្រាប់លាក់រាល់ <p> elements ទាំងអស់

$(“.test”).hide() – សម្រាប់លាក់រាល់ elements ដែលមាន class=”test” ទាំងអស់

$(“#test”).hide() – សម្រាប់លាក់រាល់ element ដែលមាន id=”test”

ដើម្បីឆែកមើលថាតើ DOM (Document object model) ត្រូវបាន Load ហើយឬនៅ គឺគេប្រើប្រាស់នូវ function មួយឈ្មោះថា “ready”

Ready function ចាត់យកនូវ callback function ធ្វើជា parameter របស់វា។ Callback function នេះនឹងត្រូវបានគេ call នៅពេលដែល document គឺវា ready ហើយ។

ដូចនេះ អ្នកអាចធ្វើការចាប់ផ្តើម interacting ជាមួយ DOM ដោយប្រើប្រាស់នូវ jQuery ដែលស្ថិតនៅក្នុង callback function។ ខាងក្រោមនេះ បង្ហាញអំពីជំហានក្នុងការសរសេរកូដ jQuery ដើម្បីឆែកមើល document នៅពេល ready ហើយឬនៅ

1. ភាពខុសគ្នារវាង window.onload ហើយនិង $(document).ready
   1. $(document).ready() គឺជា function កំណត់នៅពេលដែលរចនាសម្ព័ន្ធរបស់ DOM ត្រូវបាន load ឡើង
   1. window.onload គឺជា event ដែលត្រូវបានកើតឡើងនៅពេលដែល window ទាំងមូល ត្រូវបាន load ដោយរូមទាំង DOM, images, css ហើយនិង resources ផ្សេងៗទៀត ដែលត្រូវការ។ DOM loads មុនពេលដែល window ទាំងមូល loads.

សូមមើលនូវឧទាហរណ៍ដូចខាងក្រោម៖

នៅពេលដែលអ្នក run នូវ html ខាងលើនៅលើ browser គឺដំបូងវានឹង alert នូវពាក្យថា ‘document loaded’ ហើយបន្ទាប់មកវានឹង alert នូវពាក្យថា ‘windows loaded’ ដូច្នេះបញ្ជាក់ថា DOM គឺ load មុនគេ បន្ទាប់មក window លោតមកបន្ទាប់។

VIII.          jQuery Selectors

jQuery Selectors អនុញ្ញាតិអោយយើងស្វែងរក DOM (Document Object Model) elements នៅក្នុង web page ។ ជាទូទៅវាចាប់ផ្តើមដោយ selector function $() នៅក្នុង jQuery.

រូបមន្តក្នុងការសរសេរ

1. selector expression បញ្ជាក់ពី pattern ដើម្បីផ្គូរផ្គងទៅនឹង​ elements
2. context គឺ optional ក្នុងការប្រើ (អាចមានឬអាចអត់)។ វាបញ្ជាក់ពី elements នៅក្នុង DOM ដែលចាប់ផ្តើមក្នុង search រកនូវ elements ដែល match ទៅនឹងវា។

សូមពិនិត្យមើលការប្រើប្រាស់ Selectors នៅក្នុង jQueryដូចខាងក្រោម៖

1. Select Elements by Name

ការប្រើប្រាស់ elements name ដើម្បីកំណត់នូវឈ្មោះ selector pattern។ ក្នុងរូបខាងក្រោមបង្ហាញអំពី DOM elements ដែលវានឹង return ចេញពី $(‘p’) និង $'(div’)

ដូចដែលយើងបានឃើញខាងលើ $(‘div’) នឹង return រាល់ <div> elements រួមទាំង child elements របស់វា។ឧទាហរណ៍

លទ្ធផល

1. Select Elements by Id

ត្រង់ចំនុចនេះអ្នកអាចធ្វើការ get element ជាក់លាក់ណាមួយដោយប្រើប្រាស់នូវ id selector ដោយចាប់ផ្តើមដោយសញ្ញា “#”។ រូបភាពខាងក្រោម បង្ហាញអំពី DOM elements ដែលនឹងត្រូវបានគេ​ return ចេញពី $(‘#myDiv1’) & $'(#prg2′)

ឧទាហរណ៍

លទ្ធផល

1. Select Elements by Attribute

jQuery ក៏អនុញ្ញាតិអោយយើងធ្វើការ find element របស់វាដោយពឹងផ្អែកទៅលើសំនុំ attributes ផងដែរ។ ឈ្មោះ attribute ស្ថិតនៅក្នុង square brackets ក្នុង function សញ្ញា “$” ដែលគេអាចសរសេរដូចនេះ $(‘[class]’) មានន័យថាវានឹង return រាល់ elements ដែលមាននូវ class attribute ដោយមិនគិតពី value របស់វា។ សូមមើលឧទាហរណ៍ដូចខាងក្រោម៖

ឧទាហរណ៍

លទ្ធផល

លោកអ្នកក៏អាចបញ្ជាកអំពី value ជាក់លាក់ណាមួយរបស់ attribute​ នៅក្នុង attribute selector ផងដែរ។ ឧទាហរណ៍ $(‘[class=”myCls”]’) វានឹង return រាល់ elements ទាំងអស់ ដែលមាន class attribute ជាមួយនឹង myCls ដែលជា value។

ឧទាហរណ៍

លទ្ធផល

1. jQuery Selector Patterns

jQuery ផ្តល់នូវវិធីសាស្រ្តជាច្រើនដើម្បី select DOM element(s) ជាក់លាក់ណាមួយ។ Table lists ខាងក្រោមនេះ បង្ហាញអំពី selector patterns ដែលសំខាន់មួយចំនួន៖