Simple CSS Selector

[eAmin]

سلام.

خیلی وقت بود قصد داشتم تا این اسکریپت رو برای دوستان بنویسم ولی کمبود وقت باعث شد تا این امر طول بکشه.
همونطور که از اسم این اسکریپت پیداست، شما می تونید با انتخابگرهای ابتدایی 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 = '';
		}
	}

};

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

موفق باشید

 

[D.A.V.O.O.D]

مرسی امین جان ، لطف کردی رفیق
اومدم خاک تاپیک را بپرونم حیف بود بره پایین
این FrameWork که تو امضات Coming Zood زدی ، یه چیز تو مایه های JQuey یا MooTools یا ... هست ؟
کی release میشه ؟

 

[eAmin]

مرسی امین جان ، لطف کردی رفیق
اومدم خاک تاپیک را بپرونم حیف بود بره پایین
این FrameWork که تو امضات Coming Zood زدی ، یه چیز تو مایه های JQuey یا MooTools یا ... هست ؟
کی release میشه ؟

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

راجع به Framework هم بله اگه خدا بخواد؛ والا دقیق نمی تونم زمان مشخصی رو تعیین کنم ولی سعی می کنم تو همین امسال یک ورژن بتا رو برای برطرف کردن مشکلات فعلی عرضه کنم.
در کل به غیر تغییراتی که دوباره می خوام روش اعمال کنم که چیز زیادی نیست، فقط Selector Engine می مونه که باید تمام تلاشم رو برای کامل کردنش بکنم.

بزودی توضیحات تکمیلی رو در وبلاگی که قراره برای خودم راه بندارم می گم.
-------
خیلی خوب شد تاپیک رو بالا آوردی داود جان، الان که دیدم برای استفاده کاربران تازه وارد زیاد رادست نیست، برای همین می تونید از این متدی که برای Array نوشته شده استفاده کنید، مثال هم درونش موجوده.

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...
});

موفق باشید.