إذا كنت من مستعملي مكتبة جيكويري فأنا متأكد أن من أهم الأسباب التي جعلتك متعلقا بهذه المكتبة هي سهولة اختيار عناصر ال html داخل ال DOM.
هذا فعلا ما منح جيكويري هذه المكانة الرفيعة بحيث أنك تستطيع استعمال أي محدد من محددات CSS في جيكويري وهذا ما فشلت فيه معظم المكتبات التي نافست جيكويري في وقت من الأوقات مثل Mootools.js و Prototype.js
بعد هذا، إذا كنت مبرمجا فضوليا فلعلك بحثت داخل هذه المكتبة عن الكيفية أو التقنيات التي استعملها مطورو جيكويري بقيادة جون ريزيغ لجعل مكتبتهم بهذه القوة في ال DOM Manipulation وبعد بحث ربما يكون طويلا ستجد أنهم قاموا بتطوير مكتبة مستقلة أو لنقل محرك اسمه Sizzle.js يتيح لنا كل هذا الكم الهائل من المحددات التي يمكنك بفضلها التنقل في DOM بكل سهولة. ولذلك في هذا الدرس قررنا إلقاء نظرة على هذه المكتبة لاكتشاف سحرها.

التنصيب

يمكنك تحميل المكتبة من موقعها الرسمي، ثم بعد ذلك تقوم باستدعائها في ال head كما هي العادة.

الآن سنضيف بعض العناصر إلى body، مثلا نضيف أربع عناصر div لها جميعا الكلاس box :

الآن إذا مررنا المحدد أو “السلكتور” box كبرامتر للدالة Sizzle ستكون القيمة المرجعة على شكل مصفوفة من أربعة عناصر كما يلي :

Capture d’écran 2015-03-06 à 23.34.09

مثال عملي

لاحظنا أن Sizzle أرجعت لنا العناصر الأربعة كما توقعنا وما علينا الآن سوى تطبيق ما نريد عليها.

لنقوم مثلا بتغيير خلفية العنصر الأخير إلى اللون الأحمر :

Capture d’écran 2015-03-06 à 23.41.44

هنا اخترنا العنصر div.box الأخير و طبقنا عليه الستايل الذي نريد بكل سهولة.
أتمنى أن تكونوا قد أخذتم فكرة عن هذه المكتبة الفريدة والمفيدة جدا ولا تنسوا تجربتها.
إذا استفدتم من هذا الدرس فلا تنسوا مشاركته مع أصدقائكم.
السلام عليكم.

مشاركة
المادة السابقةماهو Composer ؟
المقالة القادمةحل رائع وفعال لكتابة أكواد CSS
بدأت الإحتراف في مجال برمجيات الويب منذ عام 2010، وأسعى لنقل خبراتي المتواضعة لإخواني العرب من المحيط إلى الخليج، راجيا من الله أن يجعل عملي هذا في ميزان حسناتي.

ترك الرد

Please enter your comment!
Please enter your name here