تعرف علي مكتبة Sizzle.js

raheel · 07-04-2019, 06:14 PM

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

يمكنك تحميل المكتبة من موقعها الرسمي، ثم بعد ذلك تقوم باستدعائها في ال head كما هي العادة.
<html> <head> <script type="text/javascript" src="sizzle.js"></script> </head> <body> </body> </html>
1
2
3
4
5
6
7
8

<html>
<head>
<script type="text/javascript" src="sizzle.js"></script>
</head>
<body>

</body>
</html>

الآن سنضيف بعض العناصر إلى body، مثلا نضيف أربع عناصر div لها جميعا الكلاس box :
<html> <head> <script type="text/javascript" src="sizzle.js"></script> </head> <body> <div class="box">box 1</div> <div class="box">box 2</div> <div class="box">box 3</div> <div class="box">box 4</div> </body> </html>
1
2
3
4
5
6
7
8
9
10
11

<html>
<head>
<script type="text/javascript" src="sizzle.js"></script>
</head>
<body>
<div class="box">box 1</div>
<div class="box">box 2</div>
<div class="box">box 3</div>
<div class="box">box 4</div>
</body>
</html>

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

مثال عملي

لاحظنا أن Sizzle أرجعت لنا العناصر الأربعة كما توقعنا وما علينا الآن سوى تطبيق ما نريد عليها.
لنقوم مثلا بتغيير خلفية العنصر الأخير إلى اللون الأحمر :
تعرف مكتبة Sizzle.js

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

المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress

07-04-2019, 06:14 PM	#1
raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10	raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10 تعرف علي مكتبة Sizzle.js تعرف علي مكتبة Sizzle.js إذا كنت من مستعملي مكتبة جيكويري فأنا متأكد أن من أهم الأسباب التي جعلتك متعلقا بهذه المكتبة هي سهولة اختيار عناصر ال html داخل ال DOM. هذا فعلا ما منح جيكويري هذه المكانة الرفيعة بحيث أنك تستطيع استعمال أي محدد من محددات CSS في جيكويري وهذا ما فشلت فيه معظم المكتبات التي نافست جيكويري في وقت من الأوقات مثل Mootools.js و Prototype.js بعد هذا، إذا كنت مبرمجا فضوليا فلعلك بحثت داخل هذه المكتبة عن الكيفية أو التقنيات التي استعملها مطورو جيكويري بقيادة جون ريزيغ لجعل مكتبتهم بهذه القوة في ال DOM Manipulation وبعد بحث ربما يكون طويلا ستجد أنهم قاموا بتطوير مكتبة مستقلة أو لنقل محرك اسمه Sizzle.js يتيح لنا كل هذا الكم الهائل من المحددات التي يمكنك بفضلها التنقل في DOM بكل سهولة. ولذلك في هذا الدرس قررنا إلقاء نظرة على هذه المكتبة لاكتشاف سحرها. التنصيب يمكنك تحميل المكتبة من موقعها الرسمي، ثم بعد ذلك تقوم باستدعائها في ال head كما هي العادة. <html> <head> <script type="text/javascript" src="sizzle.js"></script> </head> <body> </body> </html> 1 2 3 4 5 6 7 8 <html> <head> <script type="text/javascript" src="sizzle.js"></script> </head> <body> </body> </html> الآن سنضيف بعض العناصر إلى body، مثلا نضيف أربع عناصر div لها جميعا الكلاس box : <html> <head> <script type="text/javascript" src="sizzle.js"></script> </head> <body> <div class="box">box 1</div> <div class="box">box 2</div> <div class="box">box 3</div> <div class="box">box 4</div> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 <html> <head> <script type="text/javascript" src="sizzle.js"></script> </head> <body> <div class="box">box 1</div> <div class="box">box 2</div> <div class="box">box 3</div> <div class="box">box 4</div> </body> </html> الآن إذا مررنا المحدد أو “السلكتور” box كبرامتر للدالة Sizzle ستكون القيمة المرجعة على شكل مصفوفة من أربعة عناصر كما يلي : مثال عملي لاحظنا أن Sizzle أرجعت لنا العناصر الأربعة كما توقعنا وما علينا الآن سوى تطبيق ما نريد عليها. لنقوم مثلا بتغيير خلفية العنصر الأخير إلى اللون الأحمر : هنا اخترنا العنصر div.box الأخير و طبقنا عليه الستايل الذي نريد بكل سهولة. أتمنى أن تكونوا قد أخذتم فكرة عن هذه المكتبة الفريدة والمفيدة جدا ولا تنسوا تجربتها. إذا استفدتم من هذا الدرس فلا تنسوا مشاركته مع أصدقائكم. المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress
	اقتباس

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
تعرف علي الأدوات المستخدمة مع React Native لبرمجة تطبيقات الموبايل	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	10-04-2019 08:29 PM
كيفية استعمال مكتبة Redux في مشاريع React.js	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	01-04-2019 06:18 PM
فوائد مكتبة Socket.io في بناء تطبيقات الويب التزامنية	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	01-04-2019 05:26 PM
كتابة المقالات – تعرف على الطريقة الصحيحة لكتابة المقالات ضمن شروط السيو	القيصر	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	11-03-2019 06:32 AM
البرمجة للمبتدئين – تعرف على أهم الأمور اللازمة للبدأ في هذا المجال	القيصر	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	11-03-2019 06:22 AM

اسم العضو		حفظ البيانات؟
كلمة المرور

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)