1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

آموزش jQuery

شروع موضوع توسط hector2141 ‏12/9/12 در انجمن Web

  1. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

    [h=2]افکت ها در jQuery - افکت slideToggle[/h] افکت ( ) slideToggle در jQuery :
    این افکت همانند یک عملگر دوجانبه بین دو افکت slideUp و slideDown بر روی عنصر مورد اثر خود عمل می کند .
    به عبارت دیگر افکت slideToggle ابتدا وصغیت نمایش و یا عدم نمایش عنصر را بررسی کرده و در صورتی که آن عنصر نمایان باشد ، با کاهش تدریجی ارتفاع آن باعث مخفی شدن عنصر می شود . و چنانچه عنصر مخفی باشد با افزایش تدریجی ارتفاع آن ، عنصر را نمایان می سازد .
    این افکت کاربرد بسیار سودمندی می تواند داشته باشد . به وسیله آن می توانید این اختیار را به کاربر بدهید تا عناصری را که می خواهد در صفحه مخفی کرده و یا آنها را نمایان سازد .
    شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).slideToggle ( speed , callback ) [/TD]
    [/TR]
    [/TABLE]
    توضیح هر یک از موارد syntax :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح [/TD]
    [TD="class: header"] Parameter [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] selector عنصری است که این افکت باعث مخفی و یا نمایان شدن آن می شود . [/TD]
    [TD="class: header"] selector [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .
    این پارامتر سرعت مخفی و یا نمایان شدن عنصر توسط افکت را تعین می کند .
    این پارامتر به دو صورت قابل مقداردهی می باشد .
    • تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی یا نمایان شود را نعیین می کنید . مثلا 100 ms .
    • تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت مخفی یا نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
      • "slow"
      • "normal"
      • "fast"
    [/TD]
    [TD="class: header"] speed [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان یافتن اجرای افکت ، آن تابع اجرا شود .
    به کار بردن این پارامتر اختیاری است . [/TD]
    [TD="class: header"] callback [/TD]
    [/TR]
    [/TABLE]
    در چند مثال سعی می کنیم تا استفاده از افکت ( ) slideToggle را در عمل به شما نمایش دهیم .

    مثال 1 : در مثال اول یک تصویر ( تگ < img > ) داریم . یک دکمه فرمان طراحی کرده ایم که کاربر می تواند با کلیک بر روی آن باعث تغییر وضعیت نمایش عکس شود .با کلیک بر روی دکمه فرمان چنانچه عکس نمایان باشد آن را مخفی کرده و یا برعکس. برای تغییر وضعیت نمایش عکس بر روی دکمه فرمان در خروجی مثال کلیک نمایید :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # Btn_1 ") . click ( function( ){
    $ ( " # img_1 " ) . slideToggle( )
    });
    });
    </script>
    </head>
    <body>
    < input type="button" id="Btn_1" value="click me to toggle image!" />
    < img id="img_1" src="../Pic/computer_banner.jpg" " />
    </body>
    </html> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"]

    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    مثال 2 : در مثال دوم دو لیست از اسامی زبان های برنامه نویسی را با آیتم های مختلف به کاربر نمایش داده ایم . در ابتدا آیتم های لیست ها به کاربر نمایش داده می شود . اما کاربر می تواند با برداشتن تیک کنترل انتخابی checkbox در مثال ، آیتم های لیست را مخفی کرده و دوباره با علامت زدن آن ، آیتم را نمایش دهد . برای مخفی کردن و نمایش دوباره آیتم های لیست ها تیک کادر انتخاب را در خروجی مثال تغییر دهید :
    راهنمایی مثال : در این مثال افکت slideToggle اعضای کلاس Items را که همان آیتم های لیست ها هستند ، را مخفی و یا نمایان می کند .
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # Check_1 ") . change ( function( ){
    $ ( " .Items " ) . slideToggle ( )
    });
    });
    </script>
    </head>
    <body>
    <input type="checkbox" id="Check_1" checked="checked" /> نمایش زیر مجموعه ها
    طراحی وب
    <ul>
    <li class="Items">HTML </li>
    <li class="Items">CSS </li>
    <li class="Items">Flash </li>
    </ul>
    برنامه نویسی وب
    <ul>
    <li class="Items">ASP.Net </li>
    <li class="Items">PHP </li>
    <li class="Items">Java Script </li>
    <li class="Items">jQuery </li>
    </ul>
    </body>
    </html> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] نمایش زیر مجموعه ها
    طراحی وب
    • HTML
    • CSS
    • Flash
    برنامه نویسی وب
    • ASP.Net
    • PHP
    • Java Script
    • jQuery
    [/TD]
    [/TR]
    [/TABLE]
     
  2. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

    [h=2]کاربرد jQuery در HTML - متد ( ) after[/h] متد ( ) after در jQuery :
    به وسیله متد after در jQuery ، می توانید محتویات مورد نظر خود ( می تواند شامل متن یا تگ های HTML باشد ) را پس از عنصر مورد نظر خود ، در صفحه HTML وارد نمایید .
    برای مثال فرض کنید که یک پاراگراف در صفحه دارید . به وسیله این متد می توانید یک پاراگراف یا یک تگ دیگر HTML را پس از آن عنصر ، به صفحه اضافه نمایید .
    شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).after ( content ) ; [/TD]
    [/TR]
    [/TABLE]

    توضیح هر یک از موارد syntax :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح [/TD]
    [TD="class: header"] Parameter [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] عنصر مورد نظری است که می خواهید محتویات مورد نظرتان را پس از آن ، در صفحه وارد نمایید . [/TD]
    [TD="class: header"] selector [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] تعیین کننده محتویاتی است که می خواهید پس از عنصر مورد نظر در صفحه وارد نمایید . این محتویات می تواند شامل متن یا سایر تگ های HTML باشد . [/TD]
    [TD="class: header"] content [/TD]
    [/TR]
    [/TABLE]

    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] مثال [/TD]
    [TD="class: prdes, align: left"] $ ( " p#P1 " ).after ( " < p > This is what you want to add < /p > " ) ; [/TD]
    [/TR]
    [/TABLE]

    [HR][/HR] مثال عملی :
    در مثال زیر استفاده از این متد را در عمل به شما نمایش داده ایم .
    در این مثال ، یک پاراگراف داریم که درباره jQuery توضیحات مختصری را ارائه کرده است . اما یک پاراگراف دوم نیز در نظر گرفتیم که از دید کاربر مخفی است و قرار است توضیحات بیشتری راجع به jQuery نمایش دهد . کاربر در صورت تمایل می تواند با کلیک بر روی دکمه فرمان موجود در خروجی مثال ، پاراگراف دوم را نیز به صفحه اضافه کرده و آن را بخواند .
    برای مشاهده خروجی مثال ، بر روی دکمه فرمان در خروجی کلیک نمایید :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example
    [/TD]
    [/TR]
    [TR]
    [TD="class: body"] <p id="P_1">
    jQuery is a new scripting method .
    </p>
    <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 ( ) {
    $( "#P_1" ).after ( " < p > with jQuery you can do very useful things . you can hide or toggle objects < /p > " );
    });
    }); </script>
    <button> Click to add second paragraph</button> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] jQuery is a new scripting method .
    Click to add second paragraph [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
     
  3. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

    [h=2]کاربرد jQuery در HTML - متد ( ) after[/h] متد ( ) after در jQuery :
    به وسیله متد after در jQuery ، می توانید محتویات مورد نظر خود ( می تواند شامل متن یا تگ های HTML باشد ) را پس از عنصر مورد نظر خود ، در صفحه HTML وارد نمایید .
    برای مثال فرض کنید که یک پاراگراف در صفحه دارید . به وسیله این متد می توانید یک پاراگراف یا یک تگ دیگر HTML را پس از آن عنصر ، به صفحه اضافه نمایید .
    شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).after ( content ) ; [/TD]
    [/TR]
    [/TABLE]

    توضیح هر یک از موارد syntax :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح [/TD]
    [TD="class: header"] Parameter [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] عنصر مورد نظری است که می خواهید محتویات مورد نظرتان را پس از آن ، در صفحه وارد نمایید . [/TD]
    [TD="class: header"] selector [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] تعیین کننده محتویاتی است که می خواهید پس از عنصر مورد نظر در صفحه وارد نمایید . این محتویات می تواند شامل متن یا سایر تگ های HTML باشد . [/TD]
    [TD="class: header"] content [/TD]
    [/TR]
    [/TABLE]

    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] مثال [/TD]
    [TD="class: prdes, align: left"] $ ( " p#P1 " ).after ( " < p > This is what you want to add < /p > " ) ; [/TD]
    [/TR]
    [/TABLE]

    [HR][/HR] مثال عملی :
    در مثال زیر استفاده از این متد را در عمل به شما نمایش داده ایم .
    در این مثال ، یک پاراگراف داریم که درباره jQuery توضیحات مختصری را ارائه کرده است . اما یک پاراگراف دوم نیز در نظر گرفتیم که از دید کاربر مخفی است و قرار است توضیحات بیشتری راجع به jQuery نمایش دهد . کاربر در صورت تمایل می تواند با کلیک بر روی دکمه فرمان موجود در خروجی مثال ، پاراگراف دوم را نیز به صفحه اضافه کرده و آن را بخواند .
    برای مشاهده خروجی مثال ، بر روی دکمه فرمان در خروجی کلیک نمایید :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] <p id="P_1">
    jQuery is a new scripting method .
    </p>
    <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 ( ) {
    $( "#P_1" ).after ( " < p > with jQuery you can do very useful things . you can hide or toggle objects < /p > " );
    });
    }); </script>
    <button> Click to add second paragraph</button>
    [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] jQuery is a new scripting method .
    Click to add second paragraph [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
     
  4. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

    [h=2]کاربرد jQuery در HTML - متد ( ) attr[/h] متد ( ) attr در jQuery :
    متد attr در jQuery ، برای 2 منظور می تواند به کار برده شود :

    1. مقدار تعیین شده برای خواص عناصر را خوانده و به کاربر نمایش می دهد . برای مثال فرض کنید که برای خاصیت عرض ( width ) یک عنصر عکس < img > مقدار 200px را تعیین کرده اید . این متد می تواند این مقدار را خوانده و به کاربر نمایش دهد .
    2. می تواند مقدار خاصیت عناصر را تعیین کرده و یا در صورت نیاز تغییر دهد . برای مثال به وسیله این متد می توانید سایز فونت یک پاراگراف < p > را به مقدار 14pt تغییر دهید .
    در ادامه به تشریح نحوه استفاده از این متد در هر دو روش ذکر شده می پردازیم .
    [HR][/HR] کاربرد اول - نمایش مقدار خاصیت یک عنصر :
    در کاربرد اول این متد می خواهیم به شما نمایش دهیم چگونه می توان مقدار خاصیت یک عنصر را استخراج کرده و سپس نمایش دهیم .
    شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).attr ( atrribute ) ; [/TD]
    [/TR]
    [/TABLE]

    توضیح هر یک از موارد syntax :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح [/TD]
    [TD="class: header"] Parameter [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] عنصر مورد نظری است که می خواهیم مقدار یک خاصیت آن را نمایش دهیم . [/TD]
    [TD="class: header"] selector [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] نام خاصیتی از عنصر مورد نظر است که این متد قرار است مقدار آن را استخراج کرده و به کاربر نمایش دهد . [/TD]
    [TD="class: header"] attribute [/TD]
    [/TR]
    [/TABLE]

    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] مثال [/TD]
    [TD="class: prdes, align: left"] $ ( " p#P1 " ).attr ( " width " ) ; [/TD]
    [/TR]
    [/TABLE]
    مثال عملی :
    در مثال زیر یک عنصر تصویر داریم که می خواهیم مقدار عرض ( خاصیت width ) آن را به کاربر نمایش دهیم . برای مشاهده خروجی بر روی دکمه فرمان خروجی مثال کلیک نمایید :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] [​IMG]
    برای نمایش مقدار خاصیت کلیک نمایید [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]

    [HR][/HR] کاربرد دوم - تغییر مقدار خاصیت یک عنصر :
    در کاربرد دوم این متد می خواهیم به شما نمایش دهیم چگونه می توان مقدار خاصیت یک عنصر را به مقدار مورد نظرمان تغییر دهیم .
    شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).attr ( atrribute , value ) ; [/TD]
    [/TR]
    [/TABLE]

    توضیح هر یک از موارد syntax :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح [/TD]
    [TD="class: header"] Parameter [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] عنصر مورد نظری است که می خواهیم مقدار یک خاصیت آن را به مقدار دلخواه تغییر دهیم . [/TD]
    [TD="class: header"] selector [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] نام خاصیتی از عنصر مورد نظر است که این متد قرار است مقدار آن را تغییر دهید . برای مثال مقدار خاصیت عرض width یک عنصر را به یک مقدار دیگر تغییر دهیم . [/TD]
    [TD="class: header"] attribute [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] مقدار جدیدیتعیین شده است که می خواهیم مقدار خاصیت را به آن مقدار ، تغییر دهیم . [/TD]
    [TD="class: header"] value [/TD]
    [/TR]
    [/TABLE]

    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] مثال [/TD]
    [TD="class: prdes, align: left"] $ ( " #img_2 " ).attr ( " width " , " 150 " ) ; [/TD]
    [/TR]
    [/TABLE]
    مثال عملی :
    در مثال زیر یک عکس ( تگ < img > ) داریم ، که می خواهیم مقدار عرض آن را به 200px تغییر دهیم . برای این منظور بر روی دکمه فرمان در خروجی مثال کلیک نمایید :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] [​IMG]
    برای تغییر مقدار خاصیت کلیک نمایید [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
     
  5. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

    [h=2]کاربرد jQuery در HTML - متد ( ) append[/h] متد ( ) append در jQuery :
    توسط متد append در jQuery می توانید یک متن را به ادامه یک پاراگراف دیگر اضافه نمایید . متن اضافه شده به ادامه پاراگراف اضافه می شود نه اینکه در سطر بعد ( برخلاف متد ( ) after ) .
    از این متد برای زمانی استفاده می شود که بخواهید یک متن را به ادامه یک پاراگراف موجود در صفحه اضافه نمایید .
    شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).append ( content ) ; [/TD]
    [/TR]
    [/TABLE]

    توضیح هر یک از موارد syntax :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح [/TD]
    [TD="class: header"] Parameter [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] پاراگراف یا عنصر مورد نظری است که می خواهید متن مورد نظرتان را به ادامه آن اضافه نمایید . [/TD]
    [TD="class: header"] selector [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] تعیین کننده محتویاتی است که می خواهید به ادامه عنصر مورد نظر در صفحه اضاافه نمایید . این محتویات می تواند شامل متن باشد . [/TD]
    [TD="class: header"] content [/TD]
    [/TR]
    [/TABLE]

    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] مثال [/TD]
    [TD="class: prdes, align: left"] $ ( " p#P1 " ).append ( " < b > This is what you want to add < /b > " ) ; [/TD]
    [/TR]
    [/TABLE]

    [HR][/HR] مثال عملی :
    در مثال زیر استفاده از این متد را در عمل به شما نمایش داده ایم .
    در این مثال ، یک پاراگراف داریم که درباره jQuery توضیحات مختصری را ارائه کرده است . اما یک ادامه متنی را نیز در نظر گرفتیم که از دید کاربر مخفی است و قرار است توضیحات بیشتری راجع به jQuery نمایش دهد . کاربر در صورت تمایل می تواند با کلیک بر روی دکمه فرمان موجود در خروجی مثال ، متن اضافه را پاراگراف جاری اضافه کرده و آن را بخواند .
    برای مشاهده خروجی مثال ، بر روی دکمه فرمان در خروجی کلیک نمایید :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] <p id="P_1">
    jQuery is a new scripting method .
    </p>
    <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 ( ) {
    $( "#P_1" ).append ( " < b > with jQuery you can do very useful things . you can hide or toggle objects . < /b > " );
    });
    }); </script>
    <button> Click to add second paragraph</button>
    [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] jQuery is a new scripting method .
    Click to add second paragraph [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
     
  6. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

    [h=2]کاربرد jQuery در HTML - متد ( ) before[/h] متد ( ) before در jQuery :
    از متد before در jQuery برای وارد نمودن یک متن یا پاراگراف در سطر قبلی یک پاراگراف استفاده می شود .
    این متد متن مورد نظر شما را به سطر قبلی پاراگراف تعیین شده در صفحه ، اضافه می کند .
    شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).before ( content ) ; [/TD]
    [/TR]
    [/TABLE]

    توضیح هر یک از موارد syntax :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح [/TD]
    [TD="class: header"] Parameter [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] عنصر مورد نظری است که می خواهید محتویات مورد نظرتان را قبل از آن ، در صفحه وارد نمایید . [/TD]
    [TD="class: header"] selector [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] تعیین کننده محتویاتی است که می خواهید قبل از عنصر مورد نظر در صفحه وارد نمایید . این محتویات می تواند شامل متن یا سایر تگ های HTML باشد . [/TD]
    [TD="class: header"] content [/TD]
    [/TR]
    [/TABLE]

    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] مثال [/TD]
    [TD="class: prdes, align: left"] $ ( " p#P1 " ).before ( " < p > This is what you want to add < /p > " ) ; [/TD]
    [/TR]
    [/TABLE]

    [HR][/HR] مثال عملی :
    در مثال زیر استفاده از این متد را در عمل به شما نمایش داده ایم .
    در این مثال ، یک پاراگراف داریم که درباره jQuery توضیحات مختصری را ارائه کرده است . اما یک پاراگراف دوم نیز در نظر گرفتیم که از دید کاربر مخفی است و قرار است توضیحات بیشتری راجع به jQuery نمایش دهد . کاربر در صورت تمایل می تواند با کلیک بر روی دکمه فرمان موجود در خروجی مثال ، پاراگراف دوم را نیز به صفحه اضافه کرده و آن را بخواند .
    برای مشاهده خروجی مثال ، بر روی دکمه فرمان در خروجی کلیک نمایید :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] <p id="P_1">
    jQuery is a new scripting method .
    </p>
    <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 ( ) {
    $( "#P_1" ).before ( " < p > with jQuery you can do very useful things . you can hide or toggle objects < /p > " );
    });
    }); </script>
    <button> Click to add second paragraph</button>
    [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] jQuery is a new scripting method .
    Click to add second paragraph [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]