در صفحه 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) کلیک نمایید تا عرض عکس، دو برابر شود :