تغییر دادن مقادیر مشخصه های (attribute) عنصرهای صفحه، با روش attr ، در jQuery
با استفاده از روش attr در jQuery ، می توانیم مقادیر مربوط به مشخصه های (attribute) عنصرهای صفحه را تغییر دهیم.
به مثال زیر توجه کنید :
در صفحه HTML زیر، با استفاده از تگ img ، یک عکس (image) را نمایش داده ایم و با استفاده از مشخصه های width و height برای آن، عرض و طول عکس را مشخص نموده ایم. همچنین یک دکمه (button) نیز ساخته ایم که هنگام کلیک بر روی آن، کدهای jQuery اجرا می شوند. در کدهای jQuery ، با استفاده از روش attr ، با تغییر مقدار تعیین شده برای مشخصه width از تگ img ، عرض مربوط به عکس را تغییر می دهیم :
همان طور که در کد بالا مشاهده می کنید، تگ img دارای id برابر kelidestan_image می باشد :
و تگ button که برای ساخت دکمه به کار رفته، دارای id برابر kelidestan_button می باشد :
سپس در کدهای jQuery ، تگ های img و button را بر اساس id آنها شناسایی کرده و تعیین کرده ایم که با کلیک بر روی دکمه (button)، کدهای jQuery اجرا شوند :
بنابراین با کلیک بر روی دکمه (button)، کدهای jQuery زیر اجرا خواهند شد :
در کد بالا، با استفاده از روش attr ، مقدار مشخصه width برای تگ img دارای id برابر kelidestan_image را به مقدار 400 تغییر داده ایم که باعث می شود عکس نمایش داده شده توسط آن، با عرض دو برابر (نسبت به مقدار قبلی آن که برابر 200 بود)، نمایش داده شود.
نتیجه :
بر روی دکمه (button) کلیک نمایید تا عرض عکس، دو برابر شود :
با استفاده از روش attr در jQuery ، می توانیم به صورت همزمان، دو یا چند مشخصه (attribute) از یک عنصر در صفحه را تغییر دهیم.
به مثال زیر توجه کنید :
همان مثال قبل را تکرار می کنیم و این بار، دو مشخصه width و height را تغییر خواهیم داد تا طول و عرض عکس به صورت همزمان، تغییر کنند (مقدار آنها را دو برابر می کنیم) :
این بار، روش attr به صورت زیر به کار رفته است :
نتیجه :
بر روی دکمه (button) کلیک نمایید تا عرض و طول عکس، دو برابر شود :