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

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Jquery-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳شروع کار
۴دستور زبان
۵انتخابگرها (Selectors)
۶رویدادها
جلوه‌ها در jQuery
۱نمایش دادن / پنهان کردن
۲محو شدن
۳اسلاید
۴متحرک ساختن
۵stop()
۶فراخوانی (Callback)
۷زنجیره‌سازی (Chaining)
HTML در jQuery
۱Get
۲Set
۳اضافه‌کردن (Add)
۴حذف‌کردن
۵کلاس‌های CSS
۶css()
۷ابعاد
پیمودن در jQuery
۱پیمودن (Traversing)
۲اجداد
۳نسل‌ها
۴برادرها (Siblings)
۵فیلترکردن
AJAX در jQuery
۱مقدمهٔ AJAX
۲بارگذاری
۳Get/Post
متفرقه‌های jQuery
۱noConflict()
۲فیلترها
مثال‌ها
۱مثال‌ها
مرجع‌ها

تنظیم (به انگلیسی: set) محتوا - text()، html() و val()

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

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

مثال زیر نحوه به تعیین کردن محتوا با متدهای html()، text() و jQuery val() نمایش می‌دهد:

مثال
1 $("#btn1").click(function(){
2   $("#test1").text("Hello world!");
3 });
4 $("#btn2").click(function(){
5   $("#test2").html("<b>Hello world!</b>");
6 });
7 $("#btn3").click(function(){
8   $("#test3").val("Dolly Duck");
9 });

یک تابع Callback برای text()، html() و val()

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

مثال زیر متدهای text() و html() را با یک تابع callback نمایش می‌دهد:

مثال
 1 $("#btn1").click(function(){
 2   $("#test1").text(function(i, origText){
 3     return "Old text: " + origText + " New text: Hello world!
 4     (index: " + i + ")";
 5   });
 6 });
 7 
 8 $("#btn2").click(function(){
 9   $("#test2").html(function(i, origText){
10     return "Old html: " + origText + " New html: Hello <b>world!</b>
11     (index: " + i + ")";
12   });
13 });

تنظیم ویژگی‌ها (به انگلیسی: Attributes) - attr()

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

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

مثال
1 $("button").click(function(){
2   $("#w3s").attr("href", "https://www.w3schools.com/jquery/");
3 });

متد attr() هم برای تنظیم چند ویژگی بطور همزمان استفاده می‌شود.

مثال زیر نحوه تنظیم هردو ویژگی href و title بطور همزمان را نشان می‌دهد:

مثال
1 $("button").click(function(){
2   $("#w3s").attr({
3     "href" : "https://www.w3schools.com/jquery/",
4     "title" : "W3Schools jQuery Tutorial"
5   });
6 });

یک تابع Callback برای attr()

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

مثال زیر attr() را با یک تابع callback نشان می‌دهد:

مثال
1 $("button").click(function(){
2   $("#w3s").attr("href", function(i, origValue){
3     return origValue + "/jquery/";
4   });
5 });

تمرین‌های jQuery

مرجع jQuery HTML

برای مرور کامل همه متدهای jQuery HTML، لطفاً به مرجع جی کوئری HTML/CSS مراجعه کنید.


منابع آموزشی