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

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

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

متد ( ) html در jQuery

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

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

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

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

استفاده از متد html در حالت اول :

شما می توانید به وسیله این متد ، محتویات درونی یک عنصر را بخوانید . شکل کلی استفاده از متد html در حالت اول به شرح زیر است :

    $ ( " selector " ).html ( ) ;

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


متد innerHeight در jQuery

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

متد innerHeight  ارتفاع عناصر را با در نظر گرفتن مقدار padding انها بر می گرداند.

مثال :

    $("button").click(function(){
    var txt="";
    txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
    txt+="Inner height: " + $("#div1").innerHeight();
    $("#div1").html(txt);
    });

متد replaceAll در jQuery

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

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

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

    $ ( content ).replaceAll ( selector ) ;

content : این پارامتر تعیین کننده عنصر HTML یا متنی است که می خواهید آن را به جای عنصر HTML مورد نظرتان در صفحه قرار دهید .
تعیین این پارامتر اجباری است .
selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید آن را با یک عنصر جدید مورد نظرتان عوض کنید .
تعیین این پارامتر اجباری است .

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

    $("button").click(function(){
    $("<span>Hello world!</span>").replaceAll("p:last");
    });

متد replaceWith در jQuery

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

متد replaceWith ، عنصر HTML تعیین شده را با محتوای جدید جایگزین میکند.

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

    $(selector).replaceWith(content,function(index))

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

    $("button").click(function(){
    $("p:first").replaceWith("Hello world!");
    });

متد innerWidth در jQuery

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

متد innerWidth عرض  عناصر را با در نظر گرفتن مقدار padding انها بر می گرداند.

مثال :

    $("button").click(function(){
    var txt="";
    txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
    txt+="Inner height: " + $("#div1").innerHeight();
    $("#div1").html(txt);
    });

متد ( ) insertAfter در jQuery

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

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

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

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

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

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

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

متد scrollLeft در jQuery

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

متد scrollLeft ،برای عنصر HTML تعیین شده اسکرول افقی تنظیم میکند .

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

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

    $(selector).scrollLeft(position)

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

موقعیت افقی اسکرول زا برمیگرداند.

    $(selector).scrollLeft()

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

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

متد insertBefore در jQuery

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

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

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

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

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

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

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

متد offset در jQuery

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

متد offset ،برای عنصر HTML تعیین شده مختصات آفست را نسبت به سند تنظیم میکند.

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

مختصات آفست را تنظیم میکند.

    $(selector).offset({top:value,left:value})

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

مختصات آفست را برمیگرداند.

    $(selector).offset()

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

   $("button").click(function(){
    var x=$("p").offset();
    alert("Top: " + x.top + " Left: " + x.left);
    });

متد offsetParent در jQuery

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

متد offsetParent ،موقعیت عنصر انتخاب شده را نسبت به والدین (Parent) خود نمایش میدهد.

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

    $(selector).offsetParent()

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

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

متد outerHeight در jQuery

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

متد outerHeight ارتفاع بیرونی اولین عنصر انتخاب شده در HTML را برمیگرداند.

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

    $(selector).outerHeight(includeMargin)

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

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

متد outerWidth در jQuery

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

متد outerWidth عرض بیرونی اولین عنصر انتخاب شده در HTML را برمیگرداند.

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

    $(selector).outerWidth(includeMargin)

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

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

متد position در jQuery

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

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

این تابع متد position مختصات عنصر مورد نظر را با دو مقدار عددی نمایش می دهد که یکی تعیین کننده میزان فاصله از بالای عنصر مادر ( parent ) است است که به آن top می گویند . عدد دوم تعیین کننده میزان فاصله از سمت چپ عنصر مادر ( parent ) است که به آن left می گویند .
واحد خروجی این مثال بر حسب پیکسل px می باشد .

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

    $ ( " selector " ).position ( ) ;

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

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

    $("button").click(function(){
    x=$("p").position();
    alert("Top: " + x.top + " Left: " + x.left);
    });

متد prepend در jQuery

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

متد prepend مطالب را در آغاز  عناصر انتخاب شده درج میکند.

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

     $(selector).prepend(content,function(index,html))

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

    $("button").click(function(){

$("p").prepend("<b>Prepended text</b>");
});

متد prependTo در jQuery

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

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

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

    $ ( content ).prependTo ( selector ) ;

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

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

    $("button").click(function(){
    $("<span>www.ctboard.com</span>").prependTo("p");
    });

 

 


برچسب ها