متد attr در jQuery ، برای 2 منظور می تواند به کار برده شود :
- مقدار تعیین شده برای خواص عناصر را خوانده و به کاربر نمایش می دهد . برای مثال فرض کنید که برای خاصیت عرض ( width ) یک عنصر عکس < img > مقدار 200px را تعیین کرده اید . این متد می تواند این مقدار را خوانده و به کاربر نمایش دهد .
- می تواند مقدار خاصیت عناصر را تعیین کرده و یا در صورت نیاز تغییر دهد . برای مثال به وسیله این متد می توانید سایز فونت یک پاراگراف < p > را به مقدار 14pt تغییر دهید .
در ادامه به تشریح نحوه استفاده از این متد در هر دو روش ذکر شده می پردازیم .
کاربرد اول - نمایش مقدار خاصیت یک عنصر :
در کاربرد اول این متد می خواهیم به شما نمایش دهیم چگونه می توان مقدار خاصیت یک عنصر را استخراج کرده و سپس نمایش دهیم .
شکل کلی استفاده از این متد به شرح زیر است :
| Syntax | $ ( " selector " ).attr ( atrribute ) ; |
توضیح هر یک از موارد syntax :
| syntax توضیح | |
| توضیح | Parameter |
| عنصر مورد نظری است که می خواهیم مقدار یک خاصیت آن را نمایش دهیم . | selector |
| نام خاصیتی از عنصر مورد نظر است که این متد قرار است مقدار آن را استخراج کرده و به کاربر نمایش دهد . | attribute |
| مثال | $ ( " p#P1 " ).attr ( " width " ) ; |
مثال عملی :
در مثال زیر یک عنصر تصویر داریم که می خواهیم مقدار عرض ( خاصیت width ) آن را به کاربر نمایش دهیم . برای مشاهده خروجی بر روی دکمه فرمان خروجی مثال کلیک نمایید :
| Example | |
|
< img id="Img_1" src="../Pic/ADS/JQ1.jpg" width="150px" height="100px" /> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready( function ( ) { $("button").click (function ( ) { alert ( " Image size is = " + $("# Img_1").attr ( "width" ) ) ; }); }); </script> <button> برای نمایش مقدار خاصیت کلیک نمایید </button> |
کد |
کاربرد دوم - تغییر مقدار خاصیت یک عنصر :
در کاربرد دوم این متد می خواهیم به شما نمایش دهیم چگونه می توان مقدار خاصیت یک عنصر را به مقدار مورد نظرمان تغییر دهیم .
شکل کلی استفاده از این متد به شرح زیر است :
| Syntax | $ ( " selector " ).attr ( atrribute , value ) ; |
توضیح هر یک از موارد syntax :
| syntax توضیح | |
| توضیح | Parameter |
| عنصر مورد نظری است که می خواهیم مقدار یک خاصیت آن را به مقدار دلخواه تغییر دهیم . | selector |
| نام خاصیتی از عنصر مورد نظر است که این متد قرار است مقدار آن را تغییر دهید . برای مثال مقدار خاصیت عرض width یک عنصر را به یک مقدار دیگر تغییر دهیم . | attribute |
| مقدار جدیدیتعیین شده است که می خواهیم مقدار خاصیت را به آن مقدار ، تغییر دهیم . | value |
| مثال | $ ( " #img_2 " ).attr ( " width " , " 150 " ) ; |
مثال عملی :
در مثال زیر یک عکس ( تگ < img > ) داریم ، که می خواهیم مقدار عرض آن را به 200px تغییر دهیم . برای این منظور بر روی دکمه فرمان در خروجی مثال کلیک نمایید :
| Example | |
|
< img id="Img_2" src="../Pic/ADS/JQ1.jpg" width="100px" height="100px" /> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready( function ( ) { $("button").click (function ( ) { $("# Img_2").attr ( "width" , "200" ) ) ; }); }); </script> <button> برای تغییر مقدار خاصیت کلیک نمایید </button> |
کد |
