Simple CSS Selector

[GOLDEN_BOY]

همونطور که از اسم این اسکریپت پیداست، شما می تونید با انتخابگرهای ابتدایی css المنتهای مورد نظر خودتون رو پیدا کنید، از انتخابگرهای ( Selectors ) مجاز که در این اسکریپت پیاده سازی شده عبارتند از: Tag, Id, Class
همچنین شما می تونید، همزمان چندین المنت رو همزمان با هم دریافت کنید ( دقیقا مانند انتخابگرهای css ): p, #id, .class
بیشتر از این فکر نمی کنم توضیحی نیاز باشه، فقط یک مورد اینکه تابعی که در این اسکریپت استفاده شده، المنتهای پیدا شده، در قالب آرایه به شما بازگشت داده می شه و شما باید برای استفاده مفید(!) از یک حلقه کمک بگیرید.



کد:

/*! * Simple CSS Selector * Copyright(C) 2010 by Amin Akbari [eAmin [-dot-] js [-at-] live [-dot-] com] * 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;}

و یک نمونه طرز استفاده:



کد:

e.backwindow.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.stylgroundColor = '';        }    }};

توجه داشته باشید، که بنده این اسکریپت رو فقط جهت آموزش ارائه کردم. و به همین دلیل کمترین امکانات رو برای این اسکریپت در نظر گرفتم. البته شما دوستان اگر مایل بودید می تونید امکانات بیشتری به این اسکریپت اضافه کنید.