کاربرد jQuery در HTML - متد ( ) attr
متد ( ) attr در jQuery :
متد attr در jQuery ، برای 2 منظور می تواند به کار برده شود :
- مقدار تعیین شده برای خواص عناصر را خوانده و به کاربر نمایش می دهد . برای مثال فرض
کنید که برای خاصیت عرض ( width ) یک عنصر عکس < img >
مقدار 200px را تعیین کرده اید . این متد می تواند این مقدار را خوانده و به کاربر
نمایش دهد .
- می تواند مقدار خاصیت عناصر را تعیین کرده و یا در صورت نیاز تغییر دهد . برای مثال
به وسیله این متد می توانید سایز فونت یک پاراگراف < p > را به مقدار 14pt تغییر
دهید .
در ادامه به تشریح نحوه استفاده از این متد در هر دو روش ذکر شده می پردازیم .
کاربرد اول - نمایش مقدار خاصیت یک عنصر :
در کاربرد اول این متد می خواهیم به شما نمایش دهیم چگونه می توان مقدار خاصیت یک عنصر
را استخراج کرده و سپس نمایش دهیم .
شکل کلی استفاده از این متد به شرح زیر است :
Syntax
|
$ ( " selector " ).attr ( atrribute ) ;
|
توضیح هر یک از موارد syntax :
توضیح
|
عنصر مورد نظری است که می خواهیم مقدار یک خاصیت آن را نمایش دهیم .
|
نام خاصیتی از عنصر مورد نظر است که این متد قرار است مقدار آن را استخراج کرده و به
کاربر نمایش دهد .
|
مثال
|
$ ( " p#P1 " ).attr ( " width " ) ;
|
مثال عملی :
در مثال زیر یک عنصر تصویر داریم که می خواهیم مقدار عرض ( خاصیت width ) آن را به
کاربر نمایش دهیم . برای مشاهده خروجی بر روی دکمه فرمان خروجی مثال کلیک نمایید :
< 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 :
توضیح
|
عنصر مورد نظری است که می خواهیم مقدار یک خاصیت آن را به مقدار دلخواه تغییر دهیم
.
|
نام خاصیتی از عنصر مورد نظر است که این متد قرار است مقدار آن را تغییر دهید . برای
مثال مقدار خاصیت عرض width یک عنصر را به یک مقدار دیگر تغییر دهیم .
|
مقدار جدیدیتعیین شده است که می خواهیم مقدار خاصیت را به آن مقدار ، تغییر دهیم .
|
مثال
|
$ ( " #img_2 " ).attr ( " width " , " 150 " ) ;
|
مثال عملی :
در مثال زیر یک عکس ( تگ < img > ) داریم ، که می خواهیم مقدار عرض آن را به
200px تغییر دهیم . برای این منظور بر روی دکمه فرمان در خروجی مثال کلیک نمایید :
< 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>
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :