با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش کاربردی آموزش jQuery ، را دنبال می کنند. در بخش قبلی، چگونگی دسترسی و دریافت محتوا و ویژگی های یک عنصر html، در jQuery را ، ارائه کردیم. اکنون در ادامه همان مبحث ، در این بخش ، قصد داریم به موضوع چگونگی تنظیم مقادیر و ویژگی های HTML در jQuery که شامل ( تنظیم مقادیر عناصر html ، تنظیم صفات و ویژگی ها ، توابع callback در تابع ()attr ) ، بپردازیم.
ما در بخش قبلی نحوه دسترسی به محتوای عناصر html و نمایش آنها را بررسی کردیم . و موضوع کار با محتوا و ویژگی های HTML در jQuery ،را در بخش قبلی، ارائه کردیم.
اکنون در تکمیل مبحث قبلی ، در این بخش به موضوع تنظیم ویژگی ها و مقادیر HTML در jQuery ، می پردازیم.
در این بخش ما سه روش تغییر و تنظیم مقادیر و محتوای عناصر html در jQuery را، ارائه کرده ایم:
مثال زیر ، چگونگی استفاده از توابع فوق را، برای تنظیم مقادیر و محتوای عناصر html، نشان می دهد:
1 2 3 4 5 6 7 8 9 | $("#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 می توان از توابع callback نیز، استفاده کرد. این تابع دو پارامتر دارد:
اولین پارامتر ، مقدار جدیدی است. که می خواهید جایگزین مقدار قبلی در عنصر html ، مربوطه شود.
دومین پارامتر مقدار قدیمی است که آنرا با مقدار جدید عوض می کنیم.
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 | $("#btn1").click(function(){ $("#test1").text(function(i, origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i, origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; }); }); |
با استفاده از تابع ()attr ، می توانید صفات و ویژگی های یک عنصر html را، تغییر دهید.
مثال زیر ، چگونگی دسترسی به صفت href یک عنصر، و تغییر دادن آن را ، نشان می دهد:
1 2 3 | $("button").click(function(){ $("#w3s").attr("href", "https://www.pvlearn.com/jquery/"); }); |
مثال ۲: در اینجا دو صفت یک عنصر، همزمان تغییر می کند:
1 2 3 4 5 6 | $("button").click(function(){ $("#w3s").attr({ "href" : "https://www.pvlearn.com/jquery/", "title" : "pvlearn jQuery Tutorial" }); }); |
در تابع ()attr می توان ، از توابع callback نیز، استفاده کرد. این تابع دو پارامتر دارد:
اولین پارامتر ، مقدار جدیدی است. که می خواهید جایگزین مقدار قبلی در عنصر html ، مربوطه شود.
دومین پارامتر مقدار قدیمی است که آنرا با مقدار جدید عوض می کنیم.
مثال زیر چگونگی استفاده از callback را در تابع ()attr ، نشان می دهد:
1 2 3 4 5 | $("button").click(function(){ $("#w3s").attr("href", function(i, origValue){ return origValue + "/jquery/"; }); }); |
در این جلسه که به نحوی در تکمبل مبحث جلسه قبل ارائه شده است. ما به موضوع تنظیم ویژگی ها و مقادیر HTML در jQuery ، با ارائه توضیحات کافی و مثال های متعدد، پرداختیم. امیدواریم که این موضع نیز، مورد توجه و استفاده ی شما قرار گرفته باشد.