متد attr در jQuery ، برای ۲ منظور می تواند به کار برده شود:
۱-مقدار تعیین شده برای خواص عناصر را خوانده و به کاربر نمایش می دهد .برای مثال فرض کنید که برای خاصیت ارتفاع ( height) یک عنصر عکس < img > مقدار ۱۰۰px را تعیین کرده اید . این متد می تواند این مقدار را خوانده و به کاربر نمایش دهد .
۲-می تواند مقدار خاصیت عناصر را تعیین کرده و یا در صورت نیاز تغییر دهید . برای مثال به وسیله این متد می توانید رنگ متن یک پاراگراف <p> را تغییر دهید .
در ادامه به تشریح نحوه استفاده از این متد در هر دو روش ذکر شده می پردازیم .
کاربرد اول – به دست آوردن مقدار خاصیت یک عنصر :
در کاربرد اول این متد می توان مقدار خاصیت یک عنصر را استخراج کرده و سپس نمایش دهیم .
شکل کلی استفاده از این متد :
1 | $(selector).attr(attribute); |
selector:عنصر مورد نظری است که می خواهیم مقدار یک خاصیت آن را به دست آوریم.
attribute:نام خاصیتی از عنصر مورد نظر است که این متد قرار است مقدار آن را استخراج کند.
مثال:به دست آوردن ارتفاع یک عکس با کلاس red
1 | $("img.red").attr("width"); |
کاربرد دوم – تغییر مقدار خاصیت یک عنصر :
در کاربرد دوم این متد می توانید مقدار خاصیت یک عنصر را به مقدار مورد نظرمان تغییر دهیم .
شکل کلی استفاده از این متد:
1 | $("selector").attr(atrribute,value); |
selector:عنصر مورد نظری است که می خواهیم مقدار یک خاصیت آن را به مقدار دلخواه تغییر دهیم .
attribute:نام خاصیتی از عنصر مورد نظر است که این متد قرار است مقدار آن را تغییر دهید.
value:مقدار جدید تعیین شده است که می خواهیم مقدار خاصیت را به آن مقدار ، تغییر دهیم .
مثال:تغییر اندازه عرض عکس به ۱۵۰px
1 | $("img").attr("width","150"); |
نکته:می توانید چندین خاصیت را برای عنصر مورد نظر مقدار دهی کنید.
شکل کلی متد در این حالت:
1 | $(selector).attr({attribute:value, attribute:value,...}) |
مثال:تعیین ارتفاع و پهنا برای عکس مورد نظر
1 | $("img").attr({"width":"200px","height":"100px"}); |
نکته۲:می توانید مقدار خاصیت را به یک تابع ارسال کنید.
شکل کلی متد در این حالت:
1 | $(selector).attr(attribute,function(index,currentvalue)) |
index:موقعیت شاخص عنصر مورد نظر در صفحه می باشد.
currentvalue: مقدار خاصیت عنصر مورد نظر که به تابع ارسال می کنیم.
مثال:در مثال زیر مقدار imghp?tab=wi را به آخر لینک ها اضافه می کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("a.google").attr("href", function(index, oldValue) { return oldValue + "imghp?tab=wi"; }); }); </script> </head> <body> <a href="http://www.google.com/" class="google">Google.com</a><br /> <a href="http://www.google.co.uk/" class="google">Google UK</a><br /> <a href="http://www.google.de/" class="google">Google DE</a><br /> </body> </html> |
