آموزش jquery کاربرد آن در HTML قسمت سیزدهم

مطمینا همه افرادی که مخاطب این آموزش هستند اهمیت جایگاه جی کوئری و دلیل به کار بردن اون داخ html براشون روشنه، این کار رو از دو روش میشه انجام داد که این روش که براتون آموزش میدم روش درست و کامل اضافه کردن جی کوئری به html هست

به وسیله متد after در jQuery ، می توانید محتویات مورد نظر خود ( می تواند شامل متن یا تگ های HTML باشد ) را پس از عنصر مورد نظر خود ، در صفحه HTML وارد نمایید .
برای مثال فرض کنید که یک پاراگراف در صفحه دارید . به وسیله این متد می توانید یک پاراگراف یا یک تگ دیگر HTML را پس از آن عنصر ، به صفحه اضافه نمایید .
شکل کلی استفاده از این متد به شرح زیر است :

;( " selector " ).after ( content ) $

توضیح هر یک از موارد syntax :

selector    عنصر مورد نظری است که می خواهید محتویات مورد نظرتان را پس از آن ، در صفحه وارد نمایید .

content    تعیین کننده محتویاتی است که می خواهید پس از عنصر مورد نظر در صفحه وارد نمایید . این محتویات می تواند شامل متن یا سایر تگ های HTML باشد .

مثال عملی :

در مثال زیر استفاده از این متد را در عمل به شما نمایش داده ایم .
در این مثال ، یک پاراگراف داریم که درباره jQuery توضیحات مختصری را ارائه کرده است . اما یک پاراگراف دوم نیز در نظر گرفتیم که از دید کاربر مخفی است و قرار است توضیحات بیشتری راجع به jQuery نمایش دهد . کاربر در صورت تمایل می تواند با کلیک بر روی دکمه فرمان موجود در خروجی مثال ، پاراگراف دوم را نیز به صفحه اضافه کرده و آن را بخواند .
برای مشاهده خروجی مثال ، بر روی دکمه فرمان در خروجی کلیک نمایید :

<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>

متد ( ) append در jQuery :

توسط متد append در jQuery می توانید یک متن را به ادامه یک پاراگراف دیگر اضافه نمایید . متن اضافه شده به ادامه پاراگراف اضافه می شود نه اینکه در سطر بعد ( برخلاف متد ( ) after ) .
از این متد برای زمانی استفاده می شود که بخواهید یک متن را به ادامه یک پاراگراف موجود در صفحه اضافه نمایید .
شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).append ( content ) ;

توضیح هر یک از موارد syntax :

selector    پاراگراف یا عنصر مورد نظری است که می خواهید متن مورد نظرتان را به ادامه آن اضافه نمایید .
content    تعیین کننده محتویاتی است که می خواهید پس از عنصر مورد نظر در صفحه وارد نمایید . این محتویات می تواند شامل متن باشد .  

مثال

$ ( " p#P1 " ).append ( " < b > This is what you want to add < /b > " ) ;

مثال عملی :

در مثال زیر استفاده از این متد را در عمل به شما نمایش داده ایم .
در این مثال ، یک پاراگراف داریم که درباره jQuery توضیحات مختصری را ارائه کرده است . اما یک ادامه متنی را نیز در نظر گرفتیم که از دید کاربر مخفی است و قرار است توضیحات بیشتری راجع به jQuery نمایش دهد . کاربر در صورت تمایل می تواند با کلیک بر روی دکمه فرمان موجود در خروجی مثال ، متن اضافه را پاراگراف جاری اضافه کرده و آن را بخواند .
برای مشاهده خروجی مثال ، بر روی دکمه فرمان در خروجی کلیک نمایید :

<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>

متد ( ) before در jQuery :

از متد before در jQuery برای وارد نمودن یک متن یا پاراگراف در سطر قبلی یک پاراگراف استفاده می شود .
این متد متن مورد نظر شما را به سطر قبلی پاراگراف تعیین شده در صفحه ، اضافه می کند .
شکل کلی استفاده از این متد به شرح زیر است :

 $ ( " selector " ).before ( content ) ;

توضیح هر یک از موارد syntax :

selector     عنصر مورد نظری است که می خواهید محتویات مورد نظرتان را قبل از آن ، در صفحه وارد نمایید .
content     تعیین کننده محتویاتی است که می خواهید قبل از عنصر مورد نظر در صفحه وارد نمایید . این محتویات می تواند شامل متن یا سایر تگ های HTML باشد .

مثال

 $ ( " p#P1 " ).before ( " < p > This is what you want to add < /p > " ) ;

مثال عملی :

در مثال زیر استفاده از این متد را در عمل به شما نمایش داده ایم .
در این مثال ، یک پاراگراف داریم که درباره jQuery توضیحات مختصری را ارائه کرده است . اما یک پاراگراف دوم نیز در نظر گرفتیم که از دید کاربر مخفی است و قرار است توضیحات بیشتری راجع به jQuery نمایش دهد . کاربر در صورت تمایل می تواند با کلیک بر روی دکمه فرمان موجود در خروجی مثال ، پاراگراف دوم را نیز به صفحه اضافه کرده و آن را بخواند .
برای مشاهده خروجی مثال ، بر روی دکمه فرمان در خروجی کلیک نمایید :

<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>

 

این هم از پایان این بخش و آموزش قرار دادن جی کوئری در html

بیشتر ادامه نمیدم اما سعی می کنم مطالب مفید و نیاز های اصلی آموزش جی کوئری رو اضافه کنم و تشریح بدم

موفق و سربلند باشید

نمونه ای از آخرین کارهای ما

آموزش jquery کاربرد آن در HTML قسمت سیزدهمReviewed by Goolexacom on Mar 24Rating: 5.0آموزش jquery کاربرد آن در HTMLآموزش jquery کاربرد آن در HTML

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اگر ربات نیستی جواب بده *

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت