سون لرن • آموزش

درباره سایت

آخرین مطالب

امکانات وب

ممکنه شما نیاز به jQuery نداشته باشید (قسمت 16)

0 4 ۲۰ بهمن ۹۴

در این مطلب با ادامه مطالب مربوط با کدهای جایگزین برای jQuery در خدمتتون هستم و امیدوارم که بدردتون بخوره.

موضوع 3 : المنتها و کار با DOM

مورد 39 : تغییر متن یک المنت

اگر بخوایم در jQuery به فرزندهای درون یک المنت دسترسی داشته باشیم و فیلتر برای اونا بزاریم، بصورت زیر عمل میکنیم:

$(el).siblings();

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد siblings میتونیم این مورد رو انجام بدیم. این متد یک ورودی رو بصورت دلخواه دریافت کرده که فیلتر مورد نظرتون رو در اون قرار میدین.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

var siblings = Array.prototype.slice.call(el.parentNode.children);

for (var i = siblings.length; i--;) {

if (siblings[i] === el) {

siblings.splice(i, 1);

break;

}

میبینید که در Javascript به راحتی میتونین این کار رو انجام بدین. با استفاده از کد بالا میتونین به هدف مورد نظر دسترسی پیدا کنید.

برای IE9 به بالا:

Array.prototype.filter.call(el.parentNode.children, function(child){

retu child !== el;

});

میبینید که در مرورگر ie9 به بالا راحتتر میتونین به این مورد دسترسی پیدا کنید.

مورد 40 : انجام toggle class

اگر بخوایم در jQuery کلاس معینی رو اضافه و حذف کنید، بصورت زیر عمل میکنیم:

$(el).toggleClass(className);

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد toggleClass میتونیم کلاس className مورد نظرتون رو قرار بدین.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

if (el.classList) {

el.classList.toggle(className);

} else {

var classes = el.className.split(' ');

var existingIndex = -1;

for (var i = classes.length; i--;) {

if (classes[i] === className)

existingIndex = i;

}

if (existingIndex >= 0)

classes.splice(existingIndex, 1);

else

classes.push(className);

el.className = classes.join(' ');

}

میبینید که در Javascript میتونین معادل کار مورد نظر رو انجام بدین.

برای IE9 به بالا:

if (el.classList) {

el.classList.toggle(className);

} else {

var classes = el.className.split(' ');

var existingIndex = classes.indexOf(className);

if (existingIndex >= 0)

classes.splice(existingIndex, 1);

else

classes.push(className);

el.className = classes.join(' ');

}

برای IE10 به بالا:

el.classList.toggle(className);

برای IE10 به بالا میتونین به راحتی و با استفاده از متد classList این کار رو انجام بدیم.

امیدوارم که از این مطلب خوشتون اومده باشه.

موفق و سربلند باشید.

یا علی

Source

- - , .

برچسب: نویسنده: استخدام کار تاريخ: سه شنبه 20 بهمن 1394 ساعت: 23:39

درباره سایت

آخرین مطالب

امکانات وب

ممکنه شما نیاز به jQuery نداشته باشید (قسمت 16)

موضوع 3 : المنتها و کار با DOM

مورد 39 : تغییر متن یک المنت

مورد 40 : انجام toggle class

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه