#AskMe

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

មាតិកា

IX. jQuery Methods

X.  DOM Manipulation Methods

IX.        jQuery Methods

កាលពីផ្នែកខាងលើ យើងបាននិយាយអំពី jQuery selector រួចមកហើយ។ jQuery selector ធ្វើការ find នូវ DOM elements ជាក់លាក់ណាមួយ ព្រមទាំងក្តោបវាដោយ jQuery Object។ ឧទាហរណ៍ document.getElementById() នៅក្នុង JavaScript វានឹង return DOM object ចំណែកឯ $(‘#id’) នឹង return នូវ jQuery object។ រូបខាងក្រោមបង្ហាញពីភាពខុសគ្នារបស់វា

ដូចដែលយើងឃើញនៅលើរូបភាពខាងលើរួចហើយ function “document.getElementById” បាន return នូវ div element រីឯ jQuery selector វិញ return នូវ jQuery object ដែលវាគឺជាអ្នកក្តោបជុំវិញ div element។ ដូចនេះ យើងអាចធ្វើការ call jQuery methods របស់ jQuery object ដែលត្រូវបានគេ return ដោយ jQuery selector។ jQuery ផ្តល់នូវ methods ខុសៗគ្នា សម្រាប់ការងារផ្សេងគ្នា ដូចជា manipulate DOM, events, ajax ជាដើម។ Table lists ខាងក្រោម បង្ហាញអំពីប្រភេទ methods ខុសៗគ្នា៖

ឧទាហរណ៍ខាងក្រោមបង្ហាញអំពីរបៀបប្រើប្រាស់ jQuery methods មួយចំនួនដើម្បី manipulate DOM elements

X.       DOM Manipulation Methods

jQuery ផ្តល់នូវ methods ផ្សេងៗគ្នាដើម្បី​ add, edit ឬក៏ delete​ ទៅលើ DOM element(s) នៅក្នុង HTML page។ ខាងក្រោមនេះគឺជាតារាងបង្ហាញអំពី methods សំខាន់ៗ ដើម្បីធ្វើការ add/remove ទៅលើ DOM elements ថ្មី

រូបភាពខាងក្រោម បង្ហាញអំពីដំណើរការ DOM manipulation methods add នូវ new elements.

  1. jQuery after() Method

jQuery after() method សម្រាប់ធ្វើការ inserts នូវ content (insert ថ្មី ឬក៏ DOM elements ដែលមានស្រាប់) បន្ទាប់ពី target element(s) ដែលត្រូវបានបញ្ជាក់ដោយ selector។

រូបមន្ត

ឧទាហរណ៍

លទ្ធផល

jQuery before() method សម្រាប់ធ្វើការ inserts នូវ content (insert ថ្មី ឬក៏ DOM elements ដែលមានស្រាប់) ពីមុខ element(s) ដែលត្រូវបានបញ្ជាក់ដោយ selector។

រូបមន្ត

ឧទាហរណ៍

លទ្ធផល

jQuery append() method សម្រាប់ធ្វើការ inserts នូវ content ទៅកាន់ខាងចុងនៃ target element(s) ដែលត្រូវបានបញ្ជាក់ដោយ selector។

រូបមន្ត

ឧទាហរណ៍

លទ្ធផល

jQuery prepend() method សម្រាប់ធ្វើការ inserts នូវ content នៅខាងដើមនៃ element(s) ដែលត្រូវបានបញ្ជាក់ដោយ selector។

រូបមន្ត

ឧទាហរណ៍

លទ្ធផល

jQuery remove() method សម្រាប់ធ្វើការ remove នូវ element(s) ដែលត្រូវបានបញ្ជាក់ដោយ selector។

រូបមន្ត

ឧទាហរណ៍

លទ្ធផល

jQuery replaceAll() method សម្រាប់ធ្វើការ replace នូវ target element(s) ទាំងអស់ ដែលត្រូវបានបញ្ជាក់ដោយ selector។

រូបមន្ត

ឧទាហរណ៍

លទ្ធផល

jQuery wrap() method សម្រាប់ធ្វើការ ក្តោប នូវ target element(s) នីមួយៗ ដែលត្រូវបានបញ្ជាក់ដោយ selector។

រូបមន្ត

ឧទាហរណ៍

លទ្ធផល