مارس 3, 2019 Mostafa بدون دیدگاه

اگر دنبال برنامه نویس برای ساخت افزونه ،قالب،سایت،برنامه ویندوز،اپلیکیشین اندروید،ربات تلگرام و.... هستید ،سفارش برنامه نویسی را مطالعه نمایید.

توجه : درخواست افزونه ،قالب، اسکریپت و نرم افزار و ... و سوالات و مشکلات خود را در انجمن ارسال نمایید

افکت ( ) slideToggle در jQuery

در این بخش از آموزش jquery ، افکت SlideToggle را در طراحی سایت آموزش می دهیم.

افکت slideToggle همانند یک عملگر دوجانبه بین دو افکت slideUp و افکت slideDown بر روی عنصر مورد اثر خود عمل می کند .
به عبارت دیگر افکت slideToggle ابتدا وصغیت نمایش و یا عدم نمایش عنصر را بررسی کرده و در صورتی که آن عنصر نمایان باشد ، با کاهش تدریجی ارتفاع آن باعث مخفی شدن عنصر می شود . و چنانچه عنصر مخفی باشد با افزایش تدریجی ارتفاع آن ، عنصر را نمایان می سازد .
افکت slideToggle کاربرد بسیار سودمندی می تواند داشته باشد . به وسیله آن می توانید این اختیار را به کاربر بدهید تا عناصری را که می خواهد در صفحه مخفی کرده و یا آنها را نمایان سازد .

کار افکت slideToggle این است که حلقه وار افکت میدهد .

شکل کلی استفاده از این متد به شرح زیر است :

    $ ( " selector " ).slideToggle ( speed , callback )

selector :selector عنصری است که این افکت باعث مخفی و یا نمایان شدن آن می شود .
speed :این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت مخفی و یا نمایان شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی یا نمایان شود را نعیین می کنید . مثلا ۱۰۰ ms .
تعیین بر اساس ۳ حالت کلی زیر : در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت مخفی یا نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .

"slow"
"normal"
"fast"

callback :توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان یافتن اجرای افکت ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است .

مثال زیر کاربردافکت slideToggle را نشان میدهد:

    $("#flip").click(function(){
    $("#panel").slideToggle();
    });

افکت ( ) stop در jQuery

در این بخش از آموزش jquery ، افکت stop را در طراحی سایت آموزش می دهیم.

به کار بردن افکت stop باعث توقف انجام یک عمل یا انیمیشن برای عنصر مورد نظر می شود . برای مثال فرض کنید که یک تگ Div دارید که می خواهید ارتفاع آن را از ۱۰۰ به ۵۰۰ پیکسل افزایش دهید . انجام این کار چند ثانیه طول می کشد . می توانید دکمه فرمانی قرار دهید تا با اجرای  افکت stop انجام انیمیشن فوق را برای تگ Div ، مثلا در وسط فرایند متوقف سازد .
شکل کلی استفاده از این افکت بصورت زیر است :

    $( selector ).stop( stopAll , goToEnd ) ;

selector : selector تعیین کننده id عنصری است که می خواهیم اجرای یک افکت بر روی آن با متد ( ) stop متوقف شود .

stopAll : این پارامتر یک مقدار Boolean را تعیین می کند . مقدار پیش فرض آن false است ولی اگر روی true تنظیم شود، در هنگام اجرای افکت stop ، کلیه انیمیشن های مرتبط با این افکت را به صورت یکباره متوقف می سازد .
استفاده از این پارامتر اختیاری است .
goToEnd : این پارامتر یک مقدار Boolean را تعیین می کند . مقدار پیش فرض آن false است ولی اگر روی true تنظیم شود ، در هنگام اجرای افکت stop ،انیمیشن های مرتبط با آن را به یکباره متوقف کرده و به مرحله آخر می رساند .
استفاده از این پارامتر اختیاری است .

مثال زیر کاربرد افکت stop را نشان میدهد:

    $("#stop").click(function(){
    $("div").stop();
    });

افکت ( ) toggle در jQuery

در این بخش از آموزش jquery ، افکت toggle را در طراحی سایت آموزش می دهیم.

افکت ( ) toggle بین دو افکت ( ) show و افکت ( ) hide تغییر وضعیت می دهد .

افکت ( ) toggle وضعیت نمایش و یا عدم نمایش عنصر مورد نظر رابر روی صفحه می سنجد . اگر عنصر در حال نمایش باشد آن را با استفاده از متد Hide مخفی کرده و اگر عنصر مخفی باشد آن را با استفاده از متد Show نمایش می دهد .
افکت ( ) toggle برای عناصری که از ابتدای اجرای صفحه مخفی تعیین شده اند ، کار نمی کند .

شکل کلی استفاده از این متد به شرح زیر است :

    $( selector ).toggle( speed , easing , callback ) ;

selector : تعیین کننده id عنصری است که می خواهیم افکت ( ) toggle ، بر روی آن اجرا شود .
speed : این پارامتر تعیین کننده سرعت انجام افکت و تغییر حالت عنصر از حالت اول به دوم است . استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
۱) MiliSecond : مدت زمان اجرای افکت بر حسب میلی ثانیه .
۲) Slow : سرعت آهسته
۳) Fast : سرعت زیاد
easing :این پارامتر تعیین کننده سرعت انجام افکت در ابتدا و انتهای آن است . استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
۱) Swing :سرعت انجام افکت در ابتدا و انتهای فرایند آهسته ولی در وسط آن زیاد است .
۲) Liner : سرعت در کل طول فرایند یکسان است .
به وسیله این پارامتر می توانیم یک تابع را تعیین کنیم ، تا در پایان انجام افکت ( ) toggle ، اجرا شود .
function :استفاده از این پارامتر اختیاری است .

مثال زیر کاربرد افکت ( ) toggle را نشان میدهد :

  $("button").click(function(){
    $("p").toggle();
    });

افکت ( ) fadeIn در jQuery

در این بخش از آموزش jquery ، افکت fadeIn را در طراحی سایت آموزش می دهیم.

افکت fadeIn باعث می شود تا عنصر مورد اثر آن به تدریج از حالت مخفی به حالت نمایان در بیاید. افکت fadeIn در یک افکت تصویری با زیاد کردن نور عنصر به تدریج باعث نمایان شدن آن می شود .
بدیهی است این افکت بر روی عناصری قابل اجراست که در ابتدا مخفی باشند . شکل کلی استفاده از این متد به شرح زیر است :

    $ ( " selector " ).fadeIn ( speed , callback )

selector :selector عنصری است که این افکت باعث نمایان شدن آن می شود .
speed : این پارامتر اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت نمایان شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر به تدریج نمایان شود را نعیین می کنید . مثلا ۱۰۰ ms .
تعیین بر اساس ۳ حالت کلی زیر : در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
“slow”
“normal”
“fast”

callback :توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و نمایان شدن عنصر مورد نظر ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است .

مثال زیر کاربرد افکت fadeIn را نشان میدهد .

    $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
    });

با کلیک روی هر button عمل fadein شدن بر روی تگ هایی که ای دی انها div1,div2,dive3 است با سرعت های متفاوت انجام می شود
متد addclass

در این بخش از آموزش JQuery ، متد addClass را در طراحی سایت ، شرح میدهیم.

متد addClass می تواند یک کلاس css را به تگ یا تگهای مختلف تخصیص دهد.

در مثال زیر با استفاده از متد addClass کلاس important به تمام تگ های از نوع div اعمال می شود :

    $("div").addClass("important");

متد ( ) after در jQuery

در این بخش از آموزش JQuery ، متد after را شرح میدهیم.

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

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

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

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

مثال زیر کاربرد متد after را نشان میدهد :

    $("button").click(function(){
    $("p").after("<p>Hello world!</p>");
    });

متد ( ) append در jQuery

در این بخش از آموزش JQuery ، متد append را شرح میدهیم.

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

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

selector : پاراگراف یا عنصر مورد نظری است که می خواهید متن مورد نظرتان را به ادامه آن اضافه نمایید .

content : تعیین کننده محتویاتی است که می خواهید به ادامه عنصر مورد نظر در صفحه اضاافه نمایید . این محتویات می تواند شامل متن باشد .

مثال زیر کاربرد  متد append را نشان میدهد :

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

متد ( ) appendTo در jQuery

در این بخش از آموزش JQuery ، متد appendTo را شرح میدهیم.

متد appendTo برای اضافه کردن المنت های HTML در ابتدای عنصر انتخاب شده استفاده میشود.

مثال زیر کاربرد متد appendTo را نشان میدهد :

    $("button").click(function(){
    $("<span>Hello World!</span>").appendTo("p");
    });

متد ( ) attr در jQuery

در این بخش از آموزش JQuery ، متد attr را شرح میدهیم.

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

مقدار تعیین شده برای خواص عناصر را خوانده و به کاربر نمایش می دهد .

برای مثال فرض کنید که برای خاصیت عرض ( width ) یک عنصر عکس < img > مقدار ۲۰۰px را تعیین کرده اید . این متد می تواند این مقدار را خوانده و به کاربر نمایش دهد .

می تواند مقدار خاصیت عناصر را تعیین کرده و یا در صورت نیاز تغییر دهد .

برای مثال به وسیله این متد می توانید سایز فونت یک پاراگراف < p > را به مقدار ۱۴pt تغییر دهید .

کاربرد اول – نمایش مقدار خاصیت یک عنصر

در کاربرد اول این متد می خواهیم به شما نمایش دهیم چگونه می توان مقدار خاصیت یک عنصر را استخراج کرده و سپس نمایش دهیم .
شکل کلی استفاده از این متد به شرح زیر است :

    $ ( " selector " ).attr ( atrribute ) ;

selector : عنصر مورد نظری است که می خواهیم مقدار یک خاصیت آن را نمایش دهیم .

attribute : نام خاصیتی از عنصر مورد نظر است که این متد قرار است مقدار آن را استخراج کرده و به کاربر نمایش دهد .

کاربرد دوم – تغییر مقدار خاصیت یک عنصر

در کاربرد دوم این متد می خواهیم به شما نمایش دهیم چگونه می توان مقدار خاصیت یک عنصر را به مقدار مورد نظرمان تغییر دهیم .

شکل کلی استفاده از این متد به شرح زیر است :

    $ ( " selector " ).attr ( atrribute , value ) ;

selector : عنصر مورد نظری است که می خواهیم مقدار یک خاصیت آن را به مقدار دلخواه تغییر دهیم .

attribute : نام خاصیتی از عنصر مورد نظر است که این متد قرار است مقدار آن را تغییر دهید . برای مثال مقدار خاصیت عرض width یک عنصر را به یک مقدار دیگر تغییر دهیم .
value : مقدار جدیدیتعیین شده است که می خواهیم مقدار خاصیت را به آن مقدار ، تغییر دهیم .

مثال زیر کاربرد متد attr را نشان میدهد :

    $("button").click(function(){
    $("img").attr("width","500");
    });

متد ( ) before در jQuery

در این بخش از آموزش JQuery ، متد before را شرح میدهیم.

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

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

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

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

مثال زیر کاربرد متد before را نشان میدهد :

    $("button").click(function(){
    $("p").before("<p>Hello world!</p>");
    });

متد clone در jQuery

در این بخش از آموزش JQuery ، متد clone را شرح میدهیم.

متد clone برای اضافه کردن المنت های HTML در ابتدای عنصر انتخاب شده استفاده میشود.
ساختار این متد به صورت زیر است :

    $(selector).clone(true|false)

مثال زیر کاربرد متد clone را نشان میدهد :

    $("button").click(function(){
    $("p").clone().appendTo("body");
    });

متد ( ) css در jQuery

در این بخش از آموزش JQuery ، متد css را شرح میدهیم.

متد css در jQuery می تواند یک یا چند خاصیت css یک عنصر HTML موجود در صفحه را برگردانده و یا به مقدار دلخواه تغییر دهد .
به عبارت دیگر شما به وسیله متد css می توانید به مقدار خواص css یک عنصر مورد نظر دسترسی داشته و یا آن خواص را به مقدار دلخواه تغییر دهید .
برای مثال می توانید به مقدار خاصیت رنگ نوشته یک پاراگراف ( خاصیت Color ) دسترسی داشته و یا آن را به یک مقدار دلخواه تغییر دهید .
دسترسی به مقدار خاصیت css یک عنصر

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

    $ ( " selector " ).css ( property ) ;

selector : عنصر مورد نظری است که می خواهید محتویات مقدار یک خاصیت CSS آن را خوانده و یا به مقدار دلخواه تغییر دهید .

property : این پارامتر تعیین کننده خاصیت css عنصری است که می خواهید مقدار آن را خوانده و یا به یک مقدار جدید تغییر دهید .

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

مثال زیر کاربرد متد css را نشان میدهد :

    $("button").click(function(){
      $("p").css("color","red");
    });

متد ( ) detach در jQuery

در این بخش از آموزش JQuery ، متد detach را شرح میدهیم.

متد detach عنصر HTML تعیین شده برای آن ( شامل تمام متن و اشیای فرزند ) را از روی صفحه پاک می کند . اما اطلاعات و رویدادهای شی مورد نظر بر روی صفحه باقی می مانند .
متد detach همچنین یک کپی از عنصر پاک شده را در خود نگه داشته و بعدا می توانید آن عنصر را مجددا به صفحه وارد نمایید .
برای مثال فرض کنید یک پاراگراف یا عکس را بر روی صفحه دارید . به وسیله این متد می توانید آن را از روی صفحه بردارید .

شکل کلی استفاده از متد detach به شرح زیر است :

    $ ( " selector " ).detach ( ) ;

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

برای حذف کامل یک عنصر ( حذف عنصر به همراه تمامی متن و رویدادهای مربوط به آن ) از متد ( ) remove استفاده نمایید .
برای پاک کردن محتویات داخلی یک عنصر و نه حذف آن از صفحه ، از متد ( ) empty استفاده نمایید .

مثال زیر کاربرد متد detach را نشان میدهد :

    $("button").click(function(){
    $("p").detach();
    });

متد ( ) empty در jQuery

در این بخش از آموزش JQuery ، متد empty را شرح میدهیم.

متد empty ، محتویات متنی و سایر اشیای فرزند عنصر HTML تعیین شده برای آن را پاک می کند .
نکته مهم درباره متد empty اینست که این متد خود عنصر و یا خواص آن را حذف نمی کند ، بلکه فقط محتویات درونی آن را خالی می کند . بنابراین عنصر همچنان بر روی صفحه قرار داشته و قابل دسترس است .
برای مثال می توانید به وسیله متد ( ) empty ، محتویات درون یک پاراگراف یا آیتم های موجود در یک لیست HTML را پاک نمایید و

شکل کلی استفاده از متد empty به شرح زیر است :

    $ ( " selector " ).empty ( ) ;

selector : این پارامتر تعیین کننده id عنصر HTML ی است که می خواهید محتویات درون آن را پاک کنید .

مثال زیر کاربرد متد empty را نشان میدهد :

   $("button").click(function(){
    $("div").empty();
    });

متد hasClass در jQuery

در این بخش از آموزش JQuery ، متد hasClass را شرح میدهیم.

متد hasClass مشخص میکند که آیا عنصر دارای کلاس classname هست یا خیر .
ساختار این متد به صورت زیر است :

    $(selector).hasClass(classname)

مثال زیر کاربرد متد hasClass را نشان میدهد :

    $("button").click(function(){
    alert($("p").hasClass("intro"));
    });

متد ( ) height در jQuery

در این بخش از آموزش JQuery ، متد height را شرح میدهیم.

متد height در jQuery , می تواند مقدار ارتفاع یک عنصر HTML را خوانده و بر گرداند و یا به وسیله آن مقدار ارتفاع عنصر را به یک مقدار دلخواه تغییر دهید .

برای مثال اگر یک عنصر div داشته باشیم که ارتفاع آن px 300 باشد ، با استفاده از متد ( ) height می توان دو کار را انجام داد :

مقدار ارتفاع آن را که px 300 است ، به صفحه برگدانیم .

مقدار جدیدی را برای ارتفاع عنصر تعیین کرده و آن را به مقدار جدید تغییر دهید .
نکته : همانطور که در تصویر زیر نمایش داده ایم ، متد height شامل حاشیه بیرونی ( margin ) ، حاشیه درونی ( padding ) و خطوط حاشیه عنصر ( border ) نمی شود و فقط ارتفاع خود عنصر را بر می گرداند .

استفاده از متد ( ) height در حالت اول – خواندن ارتفاع یک عنصر :

گفتیم که در حالت اول متد ( ) height ، از این متد برای خواندن مقدار ارتفاع یک عنصر و بازگرداندن آن مقدار به صفحه استفاده می شود . شکل کلی استفاده از متد ( ) height در حالت اول به شرح زیر است :

    $ ( " selector " ).height ( ) ;

استفاده از متد ( ) height در حالت دوم – تنظیم ارتفاع یک عنصر :

گفتیم که در حالت دوم متد height ، از این متد برای تنظیم مقدار ارتفاع یک عنصر به یک مقدار جدید استفاده می شود . شکل کلی استفاده از متد ( ) height در حالت دوم به شرح زیر است :

    $ ( " selector " ).height ( value ) ;

value : مقدار مورد نظر


برچسب ها