آموزش جی کوئری – متدهای Getter/Setter در jQuery

در بخش قبلی با تابع بازگشتی در جی کوئری آشنا شدیم. در این قسمت از سری آموزش جی کوئری, به انواع متدهای Getter/Setter در jQuery می پردازیم که برای دریافت یا تعیین کردن محتوا و مقدار خصوصیات المان ها استفاده می شود.

متدهای Getter/Setter در jQuery چیست

جی کوئری دارای متدهایی است که می توانید با استفاده از آنها مقادیر عناصر HTML را بخوانید (Getter) و یا مقداری به آن ها اختصاص دهید (Setter).

دریافت یا ست کردن محتوا و مقادیر با جی کوئری

بعضی از متدهای جی کوئری می توانند مقداری را به المان انتخابی نسبت یا بخوانند. بعضی از این متد ها text(), html(), attr(), val() هستند.

زمانی که بخواهید مقداری را به یک عنصر نسبت دهید (Set) می توانید از این متدها به همراه یک آرگومان (مقدار مورد نظر برای اختصاص به عنصر) استفاده کنید و در صورتی که بخواهید مقدار عنصر را بخوانید (Get) کافیست تا از این متد بدون آرگومان استفاده کنید.

متد text() جی کوئری

متد text() جی کوئری برای دریافت محتوای متنی ترکیب شده المان های انتخابی, شامل فرزندان, یا ست کردن محتوای متنی المان های انتخاب شده به کار می رود.

دریافت محتوا با متد text()

مثال زیر به شما نحوه دریافت محتوای متنی پاراگراف را نشان می دهد :

<script type="text/javascript">
$(document).ready(function(){
    // Get combined text contents of all paragraphs
    $(".btn-one").click(function(){
        var str = $("p").text();
        alert(str);
    });
    
    // Get text contents of the first paragraph
    $(".btn-two").click(function(){
       var str = $("p:first").text();
       alert(str);
    });
});
</script>

$(document).ready(function(){

// Get combined text contents of all paragraphs

$(".btn-one").click(function(){

var str = $("p").text();

alert(str);

});

// Get text contents of the first paragraph

$(".btn-two").click(function(){

var str = $("p:first").text();

alert(str);

});

</script>

نکته: متد text() مقادیر همه عناصر انتخابی (متن ترکیب شده) را دریافت می کند, درحالی که دیگر متدهای getter مثل html(), attr(), val() فقط مقدار اولین المان در سلکتور را برگشت می دهد.

ست کردن محتوا با متد text()

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

<script type="text/javascript">
$(document).ready(function(){
    // Set text contents of all paragraphs
    $(".btn-one").click(function(){
        $("p").text("This is demo text.");
    });
    
    // Set text contents of the first paragraph
    $(".btn-two").click(function(){
        $("p:first").text("This is another demo text.");
    });
});
</script>

$(document).ready(function(){

// Set text contents of all paragraphs

$(".btn-one").click(function(){

$("p").text("This is demo text.");

});

// Set text contents of the first paragraph

$(".btn-two").click(function(){

$("p:first").text("This is another demo text.");

});

</script>

نکته: زمانی که متد های جی کوئری text(), html(), attr(), val() را با یک مقدار به عنوان آرگومان صدا می زند, آن مقدار به عنوان محتوای المان قرار می گیرد (set)

متد html() جی کوئری

متد html() در جی کوئری برای دریافت یا ست کردن محتوای HTML المان ها به کار می رود.

دریافت محتوای HTML با متد html()

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

<script type="text/javascript">
$(document).ready(function(){
    // Get HTML contents of first selected paragraph
    $(".btn-one").click(function(){
        var str = $("p").html();
        alert(str);
    });
    
    // Get HTML contents of an element with ID container
    $(".btn-two").click(function(){
        var str = $("#container").html();
        alert(str);
    });
});
</script>

$(document).ready(function(){

// Get HTML contents of first selected paragraph

$(".btn-one").click(function(){

var str = $("p").html();

alert(str);

});

// Get HTML contents of an element with ID container

$(".btn-two").click(function(){

var str = $("#container").html();

alert(str);

});

</script>

نکته: اگر چندین المان انتخاب شده باشد, متد html() فقط محتوای اولین المان انتخابی را برگشت می دهد.

ست کردن محتوای HTML با متد html()

مثال زیر به شما نحوه ست کردن محتوای HTML المان <body> را نشان می دهد.

<script type="text/javascript">
$(document).ready(function(){
    // Set HTML contents for document's body
    $("button").click(function(){
        $("body").html("<p>Hello World!</p>");
    });
});
</script>

$(document).ready(function(){

// Set HTML contents for document's body

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

$("body").html("<p>Hello World!</p>");

});

</script>

متد attr() جی کوئری

شما می توانید از متد attr() در جی کوئری برای دریافت مقادیر خصوصیات (attribute) المان ها یا ست کردن یک یا چند خصوصیت به المان انتخابی استفاده کنید.

دریافت مقدار خصوصیت با متد attr()

مثال زیر به شما نحوه دریافت خصوصیت href یک هایپرلینک <a> و خصوصیت alt المان <img> را نشان می دهد :

<script type="text/javascript">
$(document).ready(function(){
    // Get href attribute value of first selected hyperlink
    $(".btn-one").click(function(){
        var str = $("a").attr("href");
        alert(str);
    });
    
    // Get alt attribute value of an image with ID sky
    $(".btn-two").click(function(){
        var str = $("img#sky").attr("alt");
        alert(str);
    });
});
</script>

$(document).ready(function(){

// Get href attribute value of first selected hyperlink

$(".btn-one").click(function(){

var str = $("a").attr("href");

alert(str);

});

// Get alt attribute value of an image with ID sky

$(".btn-two").click(function(){

var str = $("img#sky").attr("alt");

alert(str);

});

</script>

نکته: اگر چندین المان انتخاب شود, متد attr() فقط مقدار اولین المان را برگشت می دهد.

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

مثال زیر به شما نحوه ست کردن خصوصیت checked برای چک باکس را نشان می دهد:

<script type="text/javascript">
$(document).ready(function(){
    // Check all the checkboxes
    $("button").click(function(){
        $('input[type="checkbox"]').attr("checked", "checked");
    });
});
</script>

$(document).ready(function(){

// Check all the checkboxes

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

$('input[type="checkbox"]').attr("checked", "checked");

});

</script>

همچنین متد attr() به شما اجازه ست کردن چندین خصوصیت بصورت همزمان را می دهد. در مثال زیر ما دو خصوصیت class و title را برای المان های <img> ست کردیم.

<script type="text/javascript">
$(document).ready(function(){
    // Add a class and title attribute to all the images
    $("button").click(function(){
        $("img").attr({
            "class" : "frame",
            "title" : "Hot Air Balloons"
        });
    });
});
</script>

$(document).ready(function(){

// Add a class and title attribute to all the images

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

$("img").attr({

"class" : "frame",

"title" : "Hot Air Balloons"

});

</script>

متد val() جی کوئری

متد val() در جی کوئری اساسا برای دریافت یا ست کردن محتوای فعلی المان های فرم HTML مثل <input>, <select>, <textarea> استفاده می شود.

دریافت مقادیر فیلدهای فرم با متد val()

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

<script type="text/javascript">
$(document).ready(function(){
    // Get value of a text input with ID name
    $("button.get-name").click(function(){
        var name = $('input[type="text"]#name').val();
        alert(name);
    });
    
    // Get value of a textarea with ID comment
    $("button.get-comment").click(function(){
        var comment = $("textarea#comment").val();
        alert(comment);
    });
    
    // Get value of a select box with ID city
    $("button.get-city").click(function(){
        var city = $("select#city").val();
        alert(city);
    });
});
</script>

$(document).ready(function(){

// Get value of a text input with ID name

$("button.get-name").click(function(){

var name = $('input[type="text"]#name').val();

alert(name);

});

// Get value of a textarea with ID comment

$("button.get-comment").click(function(){

var comment = $("textarea#comment").val();

alert(comment);

});

// Get value of a select box with ID city

$("button.get-city").click(function(){

var city = $("select#city").val();

alert(city);

});

</script>

نکته: اگر چندین المان فرم را انتخاب کنید, متد val() فقط مقدار اولین المان انتخابی را برگشت می دهد.

ست کردن مقادیر فیلدهای فرم با متد val()

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

<script type="text/javascript">
$(document).ready(function(){
    // Set value of all the text inputs
    $("button").click(function(){
        var text = $(this).text();
        $('input[type="text"]').val(text);
    });
});
</script>

$(document).ready(function(){

// Set value of all the text inputs

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

var text = $(this).text();

$('input[type="text"]').val(text);

});

</script>

امیدوارم در این بخش آموزش جی کوئری, از متدهای Getter/Setter در jQuery نهایت استفاده را برده باشید.

در بخش بعدی با نحوه افزودن محتوا یا المان در جی کوئری, آشنا می شوید.

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

موفق باشید

آموزش جی کوئری – متدهای Getter/Setter در jQuery

متدهای Getter/Setter در jQuery چیست

دریافت یا ست کردن محتوا و مقادیر با جی کوئری

متد text() جی کوئری

دریافت محتوا با متد text()

ست کردن محتوا با متد text()

متد html() جی کوئری

دریافت محتوای HTML با متد html()

ست کردن محتوای HTML با متد html()

متد attr() جی کوئری

دریافت مقدار خصوصیت با متد attr()

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

متد val() جی کوئری

دریافت مقادیر فیلدهای فرم با متد val()

ست کردن مقادیر فیلدهای فرم با متد val()

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه