سلام.
خیلی وقت بود قصد داشتم تا این اسکریپت رو برای دوستان بنویسم ولی کمبود وقت باعث شد تا این امر طول بکشه.
همونطور که از اسم این اسکریپت پیداست، شما می تونید با انتخابگرهای ابتدایی css المنتهای مورد نظر خودتون رو پیدا کنید، از انتخابگرهای ( Selectors ) مجاز که در این اسکریپت پیاده سازی شده عبارتند از: Tag, Id, Class
همچنین شما می تونید، همزمان چندین المنت رو همزمان با هم دریافت کنید ( دقیقا مانند انتخابگرهای css ): p, #id, .class
بیشتر از این فکر نمی کنم توضیحی نیاز باشه، فقط یک مورد اینکه تابعی که در این اسکریپت استفاده شده، و المنتهای پیدا شده، از نوع آرایه بازگشت داده می شه و شما باید برای اینکه بتونید این تابع رو بکار ببرید باید از یک حلقه کمک بگیرید.
/*!
* Simple CSS Selector
* Copyright(C) 2010 by Amin Akbari [http://eAmin.me/]
* Licenced under the MIT Style License [http://www.opensource.org/licenses/mit-license.php]
* Created on: 1/22/2010
*/
var selector = function(query) {
var trim = function(arg) { return arg.replace(/^\s+|\s+$/, ''); };
var contains = function(arg1, arg2) { return arg1.indexOf(arg2) !== -1; };
query = trim(query);
var tag = document.getElementsByTagName('*'), length = tag.length, match = [], seperate = query.split(/,/g);
for (var j = 0, leng = seperate.length; j < leng; j++) {
var ele = trim(seperate[j]);
if (contains(ele, '#')) {
for (var i = 0; i < length; i++) {
if(tag[i].id === ele.slice(1)) match.push(tag[i]);
}
} else if (contains(ele, '.')) {
for (var i = 0; i < length; i++) {
if (contains(' '+tag[i].className+' ', ' '+ele.slice(1)+' '))
match.push(tag[i]);
}
} else {
for (var i = 0; i < length; i++ ) {
if (tag[i].nodeName.toLowerCase() === ele) match.push(tag[i]);
}
}
}
return match;
}
و یک نمونه طرز استفاده:
window.onload = function() {
var elems = selector('h1, #ids, .class1, p, span');
for (var i = 0; i < elems.length; i++) {
elems[i].style.color = '#8977FF';
elems[i].style.fontFamily = 'verdana';
elems[i].style.fontSize = '12px';
elems[i].onmouseover = function() {
this.style.color = '#FFFFFF';
this.style.backgroundColor = '#000000';
};
elems[i].onmouseout = function() {
this.style.color = '#8977FF';
this.style.backgroundColor = '';
}
}
};
و
Array.prototype.each = function(fn) {
for (var i = 0, length = this.length; i < length; i++) {
fn(this[i]);
}
return this;
}
// sample
selector("#ids").each(function(i) {
i.style.color = 'blue'; // etc...
});
توجه داشته باشید، که بنده این اسکریپت رو فقط جهت آموزش ارائه کردم. و به همین دلیل کمترین امکانات رو برای این اسکریپت در نظر گرفتم. البته شما دوستان اگر مایل بودید می تونید امکانات بیشتری به این اسکریپت اضافه کنید.
موفق باشید ;)
پاسخ با نقل قول
