تنظیم محتوا و ویژگی‌های jQuery

تنظیم محتوا - text(), html() و val()

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

  • text() - تنظیم یا بازگرداندن محتوای متنی انتخاب شده
  • html() - تنظیم یا بازگرداندن محتوای انتخاب شده (شامل علامت‌گذاری HTML)
  • val() - تنظیم یا بازگرداندن مقدار فیلد فرم

در این مثال به روش‌های text(), html() و val() برای تنظیم محتوا اشاره می‌شود:

مثال

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

آزمایش کنید

توابع بازگشتی text(), html() و val()

سه روش jQuery: text(), html() و val() نیز دارای توابع بازگشتی هستند. توابع بازگشتی دو پارامتر دارند: شماره‌ی علامت‌گذار فعلی در لیست انتخاب شده و مقدار اولیه (قدیمی). سپس با استفاده از توابع جدید مقدار جدیدی که می‌خواهید استفاده کنید را بازگردانید.

در مثال زیر، استفاده از توابع بازگشتی text() و html() نمایش داده شده است:

مثال

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    بازگشت "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});
$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    بازگشت "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

آزمایش کنید

تنظیم attribute - attr()

روش attr() jQuery همچنین برای تنظیم/تغییر مقدار attribute استفاده می‌شود.

در مثال زیر، نحوه‌ی تغییر (تنظیم) مقدار attribute href لینک نمایش داده شده است:

مثال

$("button").click(function(){
  $("#w3s").attr("href","http://www.codew3c.com/jquery");
});

آزمایش کنید

روش attr() همچنین اجازه می‌دهد تا چندین属性 را همزمان تنظیم کنید.

در مثال زیر، نحوه‌ی تنظیم همزمان属性 href و title نمایش داده شده است:

مثال

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.codew3c.com/jquery",
    "title" : "CodeW3C.com آموزش jQuery"
  });
});

آزمایش کنید

توابع بازگشتی attr()

روش attr() jQuery نیز توابع بازگشتی را فراهم می‌کند. توابع بازگشتی دو پارامتر دارند: شماره‌ی زیر (تعداد) عنصر انتخاب شده و مقدار اولیه (قدیم). سپس با استفاده از توابع بازگشتی مقدار جدیدی که می‌خواهید استفاده کنید، بازمی‌گردانید.

در مثال زیر، روش attr() با استفاده از توابع بازگشتی نمایش داده شده است:

مثال

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    بازگشت origValue + "/jquery";
  });
});

آزمایش کنید

منابع مرجع HTML jQuery

برای اطلاعات کامل در مورد روش‌های HTML jQuery، لطفاً به منابع زیر مراجعه کنید: