اسفند ۱۲, ۱۳۹۷ Mostafa بدون دیدگاه

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

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

متد prop در jQuery

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

متد prop ، می تواند دو کار را انجام دهد :

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

هنگامی که متد prop را برای خواندن مقدار خاصیت یک عنصر HTML به کار می برید ، این متد مقدار خاصیت اولین عنصری که با مشخصات داده شده یکسان است را نمایش می دهد .

ولی هنگامی که برای تغییر مقدار یک خاصیت عنصر HTML به کار می رود ، مقدار خاصیت کلیه عناصری که با مشخصات داده شده مطابقت داشته و در صفحه وجود دارند ، را تغییر می دهد .

خواندن مقدار یک خاصیت عنصر HTML

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

    $ ( selector ).prop ( property ) ;

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


تعیین این پارامتر اجباری است .

تغییر مقدار یک خاصیت عنصر HTML به مقدار دلخواه

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

    $ ( selector ).prop ( property , value ) ;

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

تغییر مقدار چند خاصیت css یک عنصر HTML به مقادیر دلخواه

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

    $ ( selector ).prop ( { property 1 : value 1 , property 2 : value 2 , ... } ) ;

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

    $("button").click(function(){
    var $x = $("div");
    $x.prop("color","FF0000");
    $x.append("The color property: " + $x.prop("color"));
    $x.removeProp("color");
    });

متد ( ) remove در jQuery

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

متد remove ، عنصر HTML تعیین شده برای آن را به همراه تمام متن و اشیای فرزندش از صفحه حذف می کند . این متد همچنین تمام داده ها و رویدادهای مرتبط با آن عنصر را نیز پاک می کند .
برای مثال فرض کنید که یک پاراگراف در صفحه دارید . می خواهید کدی طراحی نمایید تا در صورت کلیک کاربر بر روی یک دکمه فرمان ، عنصر پاراگراف از روی صفحه حذف شود .

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

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

    $ ( selector ).remove ( ) ;

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

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

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

متد removeAttr در jQuery

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

متد removeAttr ، یک یا چندین خاصیت css تعیین شده برای عنصر HTML مورد نظرتان را حذف می کند . با حذف خاصیت css ، اثر آن بر عنصر از بین می رود .
برای مثال فرض کنید که یک برای یک عنصر پاراگراف ( تگ < p > ) در صفحه ، خاصیت رنگ نوشته یا color تعیین کرده اید . با حذف این خاصیت و مقدارش توسط متد ( ) removeAttr ، رنگ داده شده به آن از بین رقته و به رنگ پیش فرض بر می گردد .

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

    $ ( selector ).removeAttr ( attribute ) ;

selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید یک یا چند خاصیت css آن را حذف نمایید .
تعیین این پارامتر اجباری است .
attribute : این پارامتر تعیین کننده خاصیت یا خواص css ای است که می خواهید آنها را حذف نمایید . تعیین این پارامتر اجباری است .
مثال زیر کاربرد متد removeAttr را نشان میدهد:

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

متد removeClass در jQuery

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

متد removeClass ، یک یا چندین کلاس تعیین شده برای عنصر HTML مورد نظرتان را حذف می کند.
شکل کلی استفاده از متد removeClass به شرح زیر است :

    $(selector).removeClass(classname,function(index,currentclass))

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

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

متد removeProp در jQuery

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

متد removeProp ، یک یا چندین ویژگی (Property) تعیین شده برای عنصر HTML مورد نظرتان را حذف می کند.
شکل کلی استفاده از متد removeProp به شرح زیر است :

    $(selector).removeProp(property)

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

    $("button").click(function(){
    var $x = $("div");
    $x.prop("color","FF0000");
    $x.append("The color property: " + $x.prop("color"));
    $x.removeProp("color");
    });

متد text در jQuery

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

متد text دو کار انجام می دهد :

می تواند متن موجود در یک عنصر HTML مثل یک تگ را خوانده و به صفحه برگرداند .
می تواند متن یک عنصر HTML مثل تگ پاراگراف را به متن دلخوه و تعیین شده تغییر دهد .

هنگامی که این متد برای بازگرداندن متن استفاده می شود متن تمام عناصری که با مشصات داده شده مطابقت دارند را برمی گرداند ( این متد علامت های زبان نوشتن تگ های HTML را در نظر نمی گیرد ) .
هنگامی که این متد برای تغییر متن عنصر به کار می رود متن تمام عناصری که با مشخصات داده شده مطابقت دارند را تغییر می دهد .

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

خواندن و بازگرداندن متن یک عنصر HTML

به وسیله متد text می توانید متن یک عنصر مثل تگ پاراگراف را خوانده و در خروجی نمایش دهید :

    $ ( selector ).text( ) ;

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

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

    $("button").click(function(){
    $("p").text("Hello world!");
    });

متد toggleclass در jQuery

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

با متد toggleClass می توان اگر به تگی کلاس خاصی تخصیص داده نشده ،آنرا به تگ اختصاص داد ،در غیر این صورت اگر آن کلاس به آن تگ قبلا تخصیص داده شده ، کلاس از تگ حذف می شود و این تشخیص به طور خودکار توسط متد toggleClass صورت میگیرد.

ساختار این دستور به صورت زیر است :

    $(selector).toggleClass(classname,function(index,currentclass),switch)

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

در مثال زیر در صورتیکه کلاس blue قبلا به تگ های h1 , h2 , p اعمال نشده است ، اعمال می شود و در صورتیکه قبلا کلاس blue به محتوای تگ های h1 , h2 , p اعمال شده است ، این کلاس از محتوای این تگ ها حذف خواهد شد :

$("h1,h2,p").toggleClass("blue");

متد unwrap در jQuery

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

متد unwrap عنصر والد از عنصر انتخاب شده را پاک میکند.

ساختار این متد به صورت زیر است :

    $(selector).unwrap()

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

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

متد val در jQuery

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

توسط متد val میتوانیم به محتوا (value ) عناصر موجود در فرم ها دسترسی و مقدارش را تغییر دهیم .

ساختار این دستور به صورت زیر است :

    $(selector).val();

    $(selector).val(newValue);

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

به مثال های زیر توجه نمایید :

    $(‘input#name’).val();

مقدار value عنصر input با آیدی name را بر میگرداند .

    $(‘select.foo option:selected’).val();

هنگامی که پنجره dropdown باز است مقدار انتخابی را برمیگرداند .

    $(‘select.foo’).val(‘two’);

مقدار انتخاب شده عنصر select با کلاس foo را روی مقدار two تنظیم میکند.

    $(‘input:checkbox:checked’).val();

مقدار چک باکس انتخاب شده را بر میگرداند .

    $(‘input:radio[name=bar]:checked’).val();

مقدار انتخاب شده از دکمه های رادیویی در گروه با نام bar را بر میگرداند.

متد wrap در jQuery

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

متد wrap ، برای کار با تگ‌های اطراف یک بخش استفاده میشود.

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

     $(selector).wrap(wrappingElement,function(index))

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

    $("button").click(function(){
    $("p").wrap("<div></div>");
    });

متد wrapAll در jQuery

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

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

    $(selector).wrapAll(wrappingElement)

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

    $("button").click(function(){
      $("p").wrapAll("<div></div>");
    });

متد wrapInner در jQuery

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

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

    $(selector).wrapInner(wrappingElement,function(index))

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

    $("button").click(function(){
    $("p").wrapInner("<b></b>");
    });

Ajax در Jquery چگونه است ؟

Ajax مختصر شده عبارت Asynchronous JavaScript and XML میباشد . این تکنولوژی اولین بار برای استفاده از داده های Xml در جاوا اسکریپت ایجاد شد.

Ajax یک زبان برنامه نویسی نیست . بلکه تکنولوژی برای ارتباط با سرور از طریق جاوااسکریپت و ایجاد صفحات داینامیک میباشد .
ایجاکس در jquery

در jquery توابعی برای کار با ایجاکس وجود دارد که کار را با این تکنولوژی بسیار آسان نموده است . توسط این توابع میتوان تبادل اطلاعات را با سرور بصورت TXT , HTML , XML و JASON و با استفاده از دو متد GET و POST انجام داد .

و شما میتوانید اطلاعات نتیجه که از سرور بدست می آید را در عنصر انتخابی (selector) به نمایش در آورید .
Ajax در Jquery چگونه است ؟

Ajax مختصر شده عبارت Asynchronous JavaScript and XML میباشد . این تکنولوژی اولین بار برای استفاده از داده های Xml در جاوا اسکریپت ایجاد شد.

Ajax یک زبان برنامه نویسی نیست . بلکه تکنولوژی برای ارتباط با سرور از طریق جاوااسکریپت و ایجاد صفحات داینامیک میباشد .
ایجاکس در jquery

در jquery توابعی برای کار با ایجاکس وجود دارد که کار را با این تکنولوژی بسیار آسان نموده است . توسط این توابع میتوان تبادل اطلاعات را با سرور بصورت TXT , HTML , XML و JASON و با استفاده از دو متد GET و POST انجام داد .

و شما میتوانید اطلاعات نتیجه که از سرور بدست می آید را در عنصر انتخابی (selector) به نمایش در آورید .
متد ( ) Ajax در jQuery

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

از متد ajax ، برای ارسال یک درخواست Ajax به سرور استفاده می شود .
تمامی متدهای Ajax در jQuery از متد ajax برای ارسال درخواست خود استفاده می کنند . اما در زمانی که هیچ کدام از آنها را نتوان به کار برد ، باید از متد ( ) Ajax استفاده کرد .
شکل کلی استفاده از این متد بصورت زیر است :

$.ajax( { name:value , name:value , … } ) ;

مقادیر پیش فرض را می توانید به صورت جفت های نام-مقدار تعیین نمایید .

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

    $("button").click(function(){
    $.ajax({url:"demo_test.txt",success:function(result){
    $("#div1").html(result);
    }});
    });

در زیر ، انواع مقادیر ممکن برای جفت های نام-مقدار را معرفی کرده ایم :
async : این پارامتر یک مقدار Boolean را تعیین می کند که آیا درخواست به صورت تبادل اطلاعاتی به سرور ارسال شود یا خیر . مقدار پیش فرض true است .
( beforeSend ( xhr : به وسیله این پارامتر می توان یک تابع را تعیین کرد تا قبل از ارسال درخواست به سرور اجرا شود .
cashe : این پارامتر یک مقدار Boolean را تعیین می کند ، که آیا صفحات دریافتی از سرور باید در حافظه Cashe ذخیره شوند یا خیر . مقدار پیش فرض true است .
(complete (xhr,status : این پارامتر یک تابع را تعیین می کند تا در هنگام پایان یافتن درخواست اجرا شود . مقدار پیش فرض true است .
data : تعیین کننده اطلاعاتی است که می خواهید به سرور ارسال نمایید .
error : این پارامتر تعیین کننده یک تابع است تا در صورتی که درخواست ناموفق بود ، اجرا شود .
password : این پارامتر یک رمز عبور را برای استفاده در درخواست HTTP تعیین می کند . مقدار پیش فرض true است .
proccessData : این پارامتر یک مقدار Boolean را تعیین می کند که آیا اطلاعاتی که قرار است به سرور ارسال شوند ، باید به صورت QueryString باشند یا خیر . مقدار پیش فرض true است .
success : این پارامتر یک تابع را تعیین می کند تا در صورت اجرای موفق درخواست اجرا شود .
timeout : مدت زمانی است که برای اجرای درخواست به میلی ثانیه تعیین می شود .
type : این پارامتر نوع درخواست را تعیین می کند ( GET یا POST ) .
url : این پارامتر آدرس صفحه مقصد که باید درخواست به آن ارسال شود را تعیین می کند . مقدار پیش فرض صفحه جاری است .
username : این پارامتر یک نام کاربری را برای استفاده در درخواست HTTP تعیین می کند .

متد ( ) ajaxComplete در jQuery

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

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

    $( selector ).ajaxComplete( function( event , xhr , options ) ) ;

function : نام تابعی است که می خواهیم پس از اتمام درخواست های Ajax اجرا شود .
استفاده از این پارامتر اجباری است .

event : در بر گیرنده شی event است .
xhr : در بر گیرنده شی XmlHttpRequest است .
options : در برگیرنده تنظیمات ( optoions ) در درخواست Ajax است .

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

    $("#txt").ajaxStart(function(){
    $("#wait").css("display","block");
    });
    $("#txt").ajaxComplete(function(){
    $("#wait").css("display","none");
    });

متد ( ) ajaxError در jQuery

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

متد ajaxError ، یک تابع را تعیین می کند تا در صورتی که در خواست Ajax با errro مواجه شد ، اجرا شود .
برای مثال به وسیله این متد می توان پیام هشداری را به کاربر مبنی بر انجام ناموفقیت آمیز درخواست Ajax ، به کاربر اعلام کرد .
شکل کلی استفاده از این متد بصورت زیر است :

    $( selector ).ajaxError( function( event , xhr , options ) ) ;

function : نام تابعی است که می خواهیم در صورت بروز error در اجرای درخواست های Ajax ، اجرا شود .
استفاده از این پارامتر اجباری است .

event : در بر گیرنده شی event است .
xhr : در بر گیرنده شی XmlHttpRequest است .
options : در برگیرنده تنظیمات ( optoions ) در درخواست Ajax است .

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

    $("div").ajaxError(function(){
    alert("An error occurred!");
    });

متد ( ) ajaxSend در jQuery

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

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

    $( selector ).ajaxSend ( function( event , xhr , options ) ) ;

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

event : در بر گیرنده شی event است .
xhr : در بر گیرنده شی XmlHttpRequest است .
options : در برگیرنده تنظیمات ( optoions ) در درخواست Ajax است .

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

    $("div").ajaxSend(function(e,xhr,opt){
    $(this).html("Requesting " + opt.url);
    });

برچسب ها
نظرات

توجه : لطفاً فقط نظرات خود را از این طریق ارسال نمایید و سوالات و مشکلات خود را در انجمن سایت مطرح نمایید.