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

មាតិកា

XI. Manipulate HTML Attributes ដោយប្រើប្រាស់ jQuery

XII.Manipulate DOM Element’s Dimensions ដោយប្រើប្រាស់ jQuery

XI.       Manipulate HTML Attributes ដោយប្រើប្រាស់ jQuery

ក្នុង table list jQuery methods ខាងក្រោមប្រើដើម្បី get ហើយនិង set value នៃ attribute, property, text ឬក៏ html.

រូបភាពខាងក្រោម​ បង្ហាញអំពី jQuery methods ផ្សេងៗគ្នា ដើម្បីធ្វើការ​ access នូវ attribute របស់ DOM elements, properties ហើយនិង value។

1. jQuery attr() Method

jQuery attr() method គឺត្រូវបានគេប្រើដើម្បីធ្វើការ get ឬក៏ set នូវ value នៃ attribute ជាក់លាក់របស់ DOM element។

រូបមន្ត

$('selector expression').attr('name','value');

ឧទាហរណ៍

លទ្ធផល

1. jQuery prop() Method

នៅក្នុងឧទាហរណ៍ខាងលើ $(‘p’).attr(‘style’) ទទួលនូវ style attribute នៃ <p> element ក្នុង html page។ វាមិន return នូវ style attributes ទាំងអស់របស់ <p> element ឡើយ។

jQuery prop() method គឺត្រូវបានគេប្រើដើម្បីធ្វើការ get ឬក៏ set នូវ value នៃ property ជាក់លាក់ទៅកាន់ DOM element។

រូបមន្ត

$('selector expression').prop('name','value');

ឧទាហរណ៍

លទ្ធផល

នៅក្នុងឧទាហរណ៍ខាងលើ $(‘p’).prop(‘style’) return នូវ Object។ យើងអាចធ្វើការទទួលនូវ style properties ខុសៗគ្នា ដោយប្រើនូវ​ object.propertyName e.g. style.fontWeight ។ មិនត្រូវប្រើ “–” ធ្វើជា property name ឡើយ។

1. jQuery html() Method

jQuery html() method គឺត្រូវបានគេប្រើដើម្បីធ្វើការ get ឬក៏ set នូវ html content ដើម្បីបញ្ជាក់ពី DOM element(s) ជាក់លាក់ណាមួយ។

រូបមន្ត

$('selector expression').html('content');

ឧទាហរណ៍

លទ្ធផល

1. jQuery text() Method

jQuery text() method គឺត្រូវបានគេប្រើដើម្បីធ្វើការ get ឬក៏ set នូវ text content ដើម្បីបញ្ជាក់ពី DOM element(s) ជាក់លាក់ណាមួយ។

រូបមន្ត

$('selector expression').text('content');

ឧទាហរណ៍

លទ្ធផល

សូមកត់ចំណាំថា text() method គ្រាន់តែ return នូវ text content នៅខាងក្នុង element ហើយមិនមែនជា innerHtml ឡើយ។

1. jQuery val() Method

jQuery val() method គឺត្រូវបានគេប្រើដើម្បីធ្វើការ get ឬក៏ set នូវ value property ដើម្បីបញ្ជាក់ពី DOM element(s) ជាក់លាក់ណាមួយ។

រូបមន្ត

$('selector expression').val('value');

លទ្ធផល

នៅក្នុងឧទាហរណ៍ខាងលើ val() method return value នៃ “value” property។ ប្រសិនបើ element មិន support value របស់ property ទេ ពេលនោះ val() method នឹង return null។

XII.       Manipulate DOM Element’s Dimensions ដោយប្រើប្រាស់ jQuery

នៅក្នុង jQuery library រួមបញ្ចូលនូវ methods ផ្សេងៗគ្នា សម្រាប់ប្រើប្រាស់ dimension របស់ DOM elements ដូចជា Height, width, offset, position ជាដើម។ តារាងខាងក្រោមនេះបង្ហាញអំពី jQuery methods ដើម្បី get ឬក៏ set dimension របស់​ DOM element.

រូបភាពខាងក្រោមបង្ហាញអំពី dimension ផ្សេងៗគ្នានៃ element

1. jQuery height() Method

jQuery height() method គឺត្រូវបានគេប្រើដើម្បីធ្វើការ get ឬក៏ set នូវ height  នៃ DOM element(s) ជាក់លាក់ណាមួយ។

រូបមន្ត

$('selector expression').height(value);

ឧទាហរណ៍

លទ្ធផល

1. jQuery width() Method

jQuery width() method គឺត្រូវបានគេប្រើដើម្បីធ្វើការ get ឬក៏ set នូវ width នៃ DOM element(s) ជាក់លាក់ណាមួយ។

រូបមន្ត

$('selector expression').width(value);

ឧទាហរណ៍

លទ្ធផល

1. jQuery offset() Method

jQuery offset() method គឺត្រូវបានគេប្រើដើម្បីធ្វើការ get ឬក៏ set នូវ coordinates នៃ DOM element(s) ជាក់លាក់ណាមួយ។

រូបមន្ត

$('selector expression').offset(options);

ឧទាហរណ៍

លទ្ធផល