آموزش مقداردهی یا قرار دادن محتوا در عناصر و خصوصیات HTML

علیرضا حاتمی نیا 1243

سلام خدمت شما علاقه مندان به آموزش برنامه نویسی و همین طور آموزش جی کوئری. در جلسه قبل با آموزش متدهای text(),html(),val() در جی کوئری جهت دریافت محتوا و خصوصیات عناصر html آشنا شدیم. در این آموزش قصد داریم تا به آموزش مقداردهی یا قرار دادن محتوا در عناصر و خصوصیاتHTML توسط این 3 متد بپردازیم.

قرار دادن محتوا در عناصر HTML توسط متدهای text,HTML,val

در جلسه قبلی آموزش جی کوئری آموختید که چه طور محتوای عناصر HTML را توسط متدهای text(),html(),val() در اختیار داشته باشید. این نکته را در نظر داشته باشید که می توانید توسط این سه متد محتوای داخل تگ های HTML را نیز تغییر داده و محتوای دلخواه خود را در تگ های مورد نظر قرار دهید.

هر یک از این متدها به شکل زیر محتوای داخل عناصر را تنظیم می کنند:

  • متد text() : متن داخل عنصر یا عناصر را مقداردهی یا برمی گرداند.
  • متد html(): محتوای داخل عنصر یا عناصر انتخاب شده را (همراه با تگ های HTML) مقداردهی یا بر می گرداند.
  • متد val(): محتوای داخل فیلد یا فیلدهای انتخاب شده داخل فرم ها را مقداردهی یا برمی گرداند. 

در مثال زیر متن داخل تگ <p> را با استفاده از متد text() مقداردهی می کنیم.

HTML

<p id="content1">This is a my first paragraph.</p>
<button>Set Text</button>

Jquery

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

در مثال زیر متن داخل تگ <p> را با استفاده از متد html() مقداردهی می کنیم.

HTML

<p id="content2">This is a my second paragraph.</p>
<button>Set HTML</button>

Jquery

$("button").click(function(){
        $("#content2").html("<b>Hello world!</b>");
    });

در مثال زیر متن داخل تگ <input> را با استفاده از متد val() مقداردهی می کنیم.

HTML

<input type="text" id="content3" value="This is mys textbox">
<button>Set Value</button>

Jquery

$("button").click(function(){
        $("content3 ").val("Hello World!");
    });

تابع فراخوان یا callback برای متدهای text(),html(),val()

هر 3 متد text(),html(),val() می توانند با یک تابع فراخوان یا callback function همراه باشند. تابع فراخوان برای این سه متد دارای دو پارامتر به شرح زیر است:

  • Index: این پارامتر شاخص یا شماره عنصر جاری در لیست عناصر انتخاب شده است
  • origText: این پارامتر مشخص کننده محتوای قبلی عنصر انتخاب شده است.

همچنین توسط دستور return می توانید محتوای مورد نظر را مقداردهی نمایید.

در مثال زیر محتوای قبلی و محتوای جدید را توسط تابع فراخوان در عنصر مورد نظر مقداردهی می کنیم.

HTML

<p id="content1">This is first <b>bold</b> paragraph.</p>
<p id="content2">This is second <b>bold</b> paragraph.</p>

<button id="btn1">Show Old/New Text</button>
<button id="btn2">Show Old/New HTML</button>

Jquery

$("#btn1").click(function(){
        $("#content1").text(function(i, origText){
            return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; 
        });
    });

    $("#btn2").click(function(){
        $("#content2").html(function(i, origText){
            return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; 
        });
    });

قرار دادن مقدار برای خصوصیات توسط متد attr()

توسط متد attr() می توانید یک یا چند خصوصیت یک عنصر را به صورت همزمان مقداردهی کنید.

در مثال زیر مقدار خصوصیات title و href را برای تگ <a> به صورت همزمان تغییر می دهیم.

HTML

<a href="https://ilikephp.ir" title="this is my title" id="myLink">ilikephp.ir</a>
<br>
<button>Change href and title</button>

Jquery

$("button").click(function(){
        $("#myLink").attr({
            "href" : "https://ilikephp.ir/techshow/",
            "title" : "ilikephp.ir is a programming Tutorial"
        });
    });

تابع فراخوان یا callback برای متد Attr()

متد Attr() همچنین می تواند دارای یک تابع فراخوان یا callback باشد. 

تابع فراخوان برای متد attr دارای دو پارامتر به شرح زیر است:

  • Index: این پارامتر شاخص یا شماره عنصر جاری در لیست عناصر انتخاب شده است
  • origText: این پارامتر مشخص کننده محتوای قبلی عنصر انتخاب شده است.

همچنین توسط دستور return می توانید خصوصیت عنصر مورد نظر را مقداردهی نمایید.
در مثال زیر در مثال زیر تابع فراخوان یا callback برای متد attr() تعریف شده است:

Html

<a href="https://ilikephp.ir" id="myLink">ilikephp.ir</a>
<br>
<button>Change href Value</button>

Jquery

$("button").click(function(){
        $("#myLink").attr("href", function(i, origValue){
            return origValue + "/techshow/"; 
        });
    });

 

کلمات کلیدی

لینک های مرتبط

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