Manipulation در jQuery | قسمت اول: کار با Get/Set و ویژگی Insert

در بخش اول آموزش ها، Getter و Setter را می آموزیم و سپس به سراغ ویژگی Insert می رویم. ابتدا به این موضوع می پردازیم که manipulation چیست و کدام قسمت از کتابخانه jQuery را شامل می شود؟

manipulation در لغت به معنای «دستکاری کردن» است. در واقع به این بُعد از کتابخانه jQuery می پردازد که چگونه می توان محتوای مختلفی را به DOM اضافه کرد. این محتوا گستره وسیعی از یک متن عادی تا تگ های html و... را شامل می شود. ما در این قسمت از آموزش قسمت های بعدی آموزش manipulation در این رابطه می آموزیم که چطور از ابزارهای manipulation در jQuery بهره ببریم تا بتوانیم DOM را دستکاری کنیم. در ادامه با ابزارهای manipulation آشنا می شوید و مثال هایی از کاربرد آن را مشاهده خواهید کرد.

Setter ها و Getter ها در jQuery

Getter ها و Setter ها به شما کمک می کنند تا محتوای عناصر html و یا مقادیر attribute ها در DOM را دریافت (get) و یا اعمال (set) کنید. تعدادی از متدهای jQuery هستند که از آن ها جهت خواندن مقادیر از عناصر یا اعمال مقادیر جدید بر عناصری که توسط selector ها انتخاب شده اند، استفاده می شود، از جمله: ()text() ،html() ، attr()، val.

اگر متدهایی که از آن ها نام برده شد، آرگومانی دریافت نکنند، در واقع به عنوان getter یا دریافت کننده کاربرد پیدا می کنند و اگر مقداری بگیرند، نقش آن ها به setter یا اعمال کننده تغییر پیدا می کند، زیرا در حقیقت باید مقداری را که دریافت کرده اند در جایی از DOM که select شده است، اعمال کنند.

متد ()text در jQuery

از متد ()text در جهت دریافت محتوای متنی عنصر انتخاب شده یا ترکیبی از عناصر انتخاب شده (که می تواند شامل فرزندان یک عنصر یا تگ Html هم باشد) و یا اعمال محتوای متنی بر عناصر انتخابی استفاده می شود.

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

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

<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>
$(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>

نکته: زمانی که متدهای ()val() ،attr() ،html و ()text آرگومانی را در ورودی خود دریافت کنند، مقدار ورودی را بر عنصر یا عناصر انتخابی اعمال می کنند.

متد ()html در jQuery

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

دریافت محتوای Html با استفاده از متد ()html

در کد مثال زیر مشاهده می کنید که با استفاده از متد ()html، محتوای html پاراگرف و عنصری با "id="container که یک عنصر <div> می باشد را دریافت می کنیم:

<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

کد مثال زیر به شما نشان می دهد که چطور می توانید محتوای Html را بر عنصر body اعمال کنید و در واقع محتوای جدیدی را که شامل تگ های html می شود، برای آن تنظیم کنید:

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

متد ()attr در jQuery

attribute ها در واقع همان صفات عناصر html هستند که مقادیری را شامل می شوند. برای مثال در تگ <a> می توان به صفت href اشاره کرد. با استفاده از متد ()attr می توانید مقادیر attribute های عناصر انتخاب شده از DOM را دریافت کنید و یا مقدار جدیدی برای attribute های عناصر انتخابی اعمال کنید:

دریافت مقدار attribute با استفاده از متد ()attr

در کد مثال زیر دو کاربرد از دریافت مقادیر attribute ها را با استفاده از متد ()attr مشاهده می کنید. ابتدا مقدار یک attribute از تگ <href> را دریافت می کنیم و سپس مقدار صفت alt را از تگ <img> دریافت خواهیم کرد:

<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 تنهای عنصر انتخابی اول را از DOM مد نظر قرار می دهد و مقدار صفت مورد نظر برای آن عنصر انتخابی را بر می گرداند.

اعمال مقادیر برای صفات یا attribute های عنصر انتخاب شده

مثال زیر به شما نشان می دهد که چگونه مقداری را برای صفت checked از عنصر checkbox اعمال می کنیم:

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

همچنین متد ()attr به شما این امکان را می دهد تا مقدار چند صفت یا attribute را همزمان اعمال کنید. برای مثال در کد زیر مشاهده می کنید که مقادیر 2 صفت class و title از عنصر <img> اعمال می گردند:

<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 در jQuery

متد ()val به صورت گسترده جهت دریافت مقدار از عناصر فرم html و یا اعمال مقادیر بر عناصر فرم html مانند <input> ،<select> و <textarea> استفاده می گردد.

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

مثال زیر به شما نشان می دهد که چگونه مقدار form controls را دریافت کنید:

<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>

نکته: اگر چند عنصر با استفاده از selector ها انتخاب شده باشند، متد ()val فقط عنصر اول را در نظر می گیرد و مقدار مرتبط با آن را برمی گرداند.

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

کد مثال زیر به شما نشان می دهد که چگونه مقداری را برای فیلدهای فرم در نظر بگیرید و آن را اعمال کنید:

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

هم اکنون شما با قسمتی از manipulation آشنا شده اید. حالا به شما می گوییم که چگونه محتوا و یا عنصری را در DOM وارد نمایید.

افزودن محتوای جدید به DOM

jQuery از متدهایی مانند: ()append() ،prepend() ،html() ،text() ،before() ،after() ،wrap و... جهت افزودن محتوای جدید بر عناصری که در DOM وجود دارند، استفاده می کند. متدهای ()text و ()html در بالا بررسی شده اند، اینک به بقیه متدها می پردازیم.

متد ()append در jQuery

متد ()append در زمانی استفاده می شود که بخواهیم در پایان عناصر انتخابی محتوایی را اضافه کنیم. در کد مثال زیر هنگامی که document در حالت ready باشد، محتوایی را در پایان همه پاراگراف ها و در پایان عنصری که در آن "id="container می باشد (در حالی که روی button کلیک می شود)، اضافه می کنیم:

<script>
$(document).ready(function(){
    // Append all paragraphs
    $("p").append(' <a href="#">read more...</a>');
    
    // Append an element with ID container
    $("button").click(function(){
       $("#container").append("This is demo text.");
    });
});
</script>

نکته: لازم به ذکر است که متدهای ()append و ()prepend محتوا را در داخل عناصر انتخابی اضافه می کند.

متد ()prepend در jQuery

با استفاده از متد ()prepend می توانید مقادیری را در آغاز عناصر اضافه کنید. در کد مثال زیر هنگامی که document در حالت ready قرار گرفته باشد، محتوایی را در آغاز همه پاراگراف ها و در آغاز عنصری که در آن "id="container می باشد (در حالی که روی button کلیک می شود)، اضافه می کنیم:

<script>
$(document).ready(function(){
    // Prepend all paragraphs
    $("p").prepend("<strong>Note:</strong> ");
    
    // Prepend an element with ID container
    $("button").click(function(){
       $("#container").prepend("This is demo text.");
    });
});
</script>

اضافه کردن چند عنصر با استفاده از متدهای ()append و ()prepend

همچنین متدهای ()append و ()prepend امکان اضافه کردن چند عنصر را برای ما فراهم کرده اند. در کد مثال زیر، عناصر <h1>، <p> و <img> را در پایان عنصر <body> به عنوان سه عنصر پایانی اضافه می کنیم:

<script>
$(document).ready(function(){
    var newHeading = "<h1>Important Note:</h1>";
    var newParagraph = document.createElement("p");
    newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";
    var newImage = $('<img src="images/smiley.png" alt="Symbol">');
    $("body").append(newHeading, newParagraph, newImage);
});
</script>

متد ()before در jQuery

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

در مثال زیر مشاهده می کنید که وقتی document در حالت ready قرار دارد، پاراگرافی قبل از عنصر conatainer اضافه می گردد و همچنین با کلیک روی button، تصویری قبل از عنصر <h1> اضافه می گردد:

<script>
$(document).ready(function(){
    // Add content before an element with ID container
    $("#container").before("<p>&mdash; The Beginning &mdash;</p>");
    
    // Add content before headings
    $("button").click(function(){
        $("h1").before('<img src="images/marker-left.gif" alt="Symbol">');
    });
});
</script>

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

متد ()after در jQuery

از متد ()after در jQuery برای اضافه کردن محتوا بعد از عناصر انتخابی استفاده می کنیم. کد مثال زیر، یک پاراگراف را بعد از عنصر container در زمانی که document در حالت ready قرار دارد و هنگامی که روی button کلیک کنید، یک <img> را بعد از عنصر <h1> اضافه می کند:

<script>
$(document).ready(function(){
    // Add content after an element with ID container
    $("#container").after("<p>&mdash; The End &mdash;</p>");
    
    // Add content after headings
    $("button").click(function(){
        $("h1").after('<img src="images/marker-right.gif" alt="Symbol">');
    });
});
</script>

اضافه کردن چند عنصر به کمک متدهای ()before و ()after

متدهای ()before و ()after همچنین چند آرگومانی را به عنوان ورودی می پذیرند. برای مثال کد زیر، عناصر <h1> ،<img> و <p> را قبل از تگ های <p> اضافه می کند:

<script>
$(document).ready(function(){
    var newHeading = "<h2>Important Note:</h2>";
    var newParagraph = document.createElement("p");
    newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";
    var newImage = $('<img src="images/smiley.png" alt="Symbol">');
    $("p").before(newHeading, newParagraph, newImage);
});
</script>

متد ()wrap در jQuery

متد ()wrap در jQuery ساختاری را پیرامون عناصر انتخابی ایجاد می کند. کد مثال زیر هنگامی یک صفحه در حالت ready قرار دارد، عناصری که کلاس container را دارند با یک div که کلاس wrapper را دارد، دربرمی گیرد، همچنین هنگامی که رویداد کلیک روی button رخ دهد، محتوای داخل پاراگرف ها را با ساختاری از تگ <b> و سپس تگ <em> در بر می گیرد:

<script>
$(document).ready(function(){
    // Wrap elements with class container with HTML
    $(".container").wrap('<div class="wrapper"></div>');
    
    // Wrap paragraph's content with HTML
    $("button").click(function(){
        $("p").contents().wrap("<em><b></b></em>");
    });
});
</script>

در قسمت های بعدی به ادامه روش های manipulation می پردازیم.