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

آخرین مطالب

امکانات وب

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

0 4 ۴ بهمن ۹۴

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

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

مورد 19 : بررسی تطابق دو المنت با یکدیگر

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

$(el).is($(otherEl));

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد is بررسی کردیم که با المنت otherEl تطابق داره یا خیر. اگر تطابق داشته باشه true و در غیر اینصورت false رو برمیگردونه.

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

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

el === otherEl

میبینید که در Javascript میشه براحتی با استفاده از عملگر === بررسی کرد که دو المنت با هم دیگه تطابق دارند یا خیر.

مورد 20 : بررسی تطابق انتخابگر

اگر بخوایم در jQuery مثلا بررسی کنیم که المنت el دارای انتخابگر .my-class هست، بصورت زیر عمل میکنیم:

$(el).is('.my-class');

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد is بررسی شده که آیا این المنت شامل انتخابگر مورد نظر هست یا خیر. اگر تطابق موفقیت آمیز باشه true و در غیر اینصورت false برگشت داده میشه.

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

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

var matches = function(el, selector) {

var _matches = (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector);

if (_matches) {

retu _matches.call(el, selector);

} else {

var nodes = el.parentNode.querySelectorAll(selector);

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

if (nodes[i] === el)

retu true;

}

retu false;

}

};

matches(el, '.my-class');

میبینید که در ابتدا یک تابع بنام matches ساختیم و این تابع برامون این مورد رو شبیه سازی میکنه. هر جا هم که بخوایم از این تابع استفاده کنیم به راحتی اون رو فراخوانی میکنیم و 2 ورودی رو بهش میدیم. ورودی اول المنت مورد نظر و ورودی دوم انتخابگر مورد نظر برای بررسی هست.

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

var matches = function(el, selector) {

retu (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);

};

matches(el, '.my-class');

میبینید که با توجه به مرورگرهای مختلف از دستور مخصوص هر کدوم استفاده کردیم. مثلا moz مربوط به firefox و o مربوط به opera هست. در نهایت هم با استفاده از متد call بررسی صورت گرفته. تابع بالا نسبت با تابع قبلی ساده تر هست و اونم به این دلیله که مرورگر IE9 به بالا پشتیبانی بهتری دارند.

مورد 21 : بررسی تطابق انتخابگر

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

$(el).next();

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد next به المنت بعدی رفتیم و اونو انتخاب کردیم.

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

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

function nextElementSibling(el) {

do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );

retu el;

}

el.nextElementSibling || nextElementSibling(el);

میبینید که در ابتدا یک تابع بنام nextElementSibling ساختیم و این تابع برامون این مورد رو شبیه سازی میکنه. هر جا هم که بخوایم از این تابع استفاده کنیم به راحتی اون رو فراخوانی میکنیم.

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

el.nextElementSibling

مرورگرهای IE9 به بالا از خصوصیت nextElementSibling پشتیبانی میکنن و میتونین برای این منظور به راحتی از اون استفاده کنید.

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

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

یا علی

Source

- - , .

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

ما را در سایت سون لرن • آموزش دنبال می‌کنید

برچسب: نویسنده: استخدام کار بازدید: 248 تاريخ: يکشنبه 4 بهمن 1394 ساعت: 22:16

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

آخرین مطالب

امکانات وب