تبلیغات متنی و بنر

کاربرد jQuery در HTML - متد ( ) attr

متد ( ) attr در jQuery :

متد attr در jQuery ، برای 2 منظور می تواند به کار برده شود :

  1. مقدار تعیین شده برای خواص عناصر را خوانده و به کاربر نمایش می دهد . برای مثال فرض کنید که برای خاصیت عرض ( width ) یک عنصر عکس < img > مقدار 200px را تعیین کرده اید . این متد می تواند این مقدار را خوانده و به کاربر نمایش دهد .
  2. می تواند مقدار خاصیت عناصر را تعیین کرده و یا در صورت نیاز تغییر دهد . برای مثال به وسیله این متد می توانید سایز فونت یک پاراگراف < 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> 		کد

خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟