دورة الجيكويري - الدرس 14 - شرح Css | مدونة ملك العرب التعليمية

الاثنين، 15 سبتمبر 2014

دورة الجيكويري - الدرس 14 - شرح Css

الاثنين، 15 سبتمبر 2014 تحرير

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

كيف حالكم اخواني اخواتي زوار مدونة ملك العرب التعليمية ..

ان شاء الله بالف خير ..

=-=-=-=-=-=-=

اليوم إن شاء الله تعالى سنتعرف على .Css()

دورها هو إضافة خصائص css مباشرة من سكربت الجيكويري

قبل البدء أحب التنويه إلى أنه مكتبة الجيكويري حساسة لحالة الأحرف لهذا أكتبوا الأكواد كما هي ..

لنبدأ بـمثال كالعادة وليكن التالي :

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Css</title> <script src="lib/jquery.js"></script> <script> $(function(){ $('.add1').css("color","orange"); $('.add2').css({"color":"green","background":"#ccc"}); }); </script> </head> <body> <h1 class="add1"> Mohammed Taha</h1> <h1 class="add2"> Mohammed Taha</h1> </body> </html>

لنقم بتحليل الوثيقة كالعادة ..

قمنا بعمل اثنين h1 في وثيقتنا واعطينا لكل واحد منهما كلاس كالتالي:

<h1 class="add1"> Mohammed Taha</h1> <h1 class="add2"> Mohammed Taha</h1>

ثم قمنا باستدعاء مكتبة الجيكويري الخاصة بنا وأنا منزلها على السيرفر الشخصي

ثم قمنا بكتابة أوامر سكربتنا بالطريقة المعهودة ..

قمنا بعمل تحديد للكلاسين add1 و add2

- حيث إن الكلاس add1 يمثل طريقة إضافة خاصية واحدة فقط وفي حالتنا هذه قمنا بإضافة لون فقط

- و الكلاس add2 يمثل طريقة إضافة أكثر من خاصية

إذا ما الفرق بين الطريقتين ؟؟

أولا انظر للسكربت :

<script> $(function(){ $('.add1').css("color","orange"); $('.add2').css({"color":"green","background":"#ccc"}); }); </script>

الفرق هو عند إضافة خاصية واحدة فقط نكتب الكود بهذه الطريقة:

$('.add1').css("color","orange");

وعند إضافة أكثر من خاصية نكتب الكود بهذه الطريقة :

$('.add2').css({"color":"green","background":"#ccc"});

الآن لم يتبقى سوى تطبيق السكربت ..

وأي استفسار أنا موجود إن شاء الله

في الختام أحبابي في الله أتمنى صادقا دعوة صالحة لي ولوالدي

واراكم في الدرس المقبل إن شاء الله تعالى

محبكم محمد طه

بقلم محمد طه

محمد طه مدون مغربي مهتم ببرمجة وتصميم المواقع ومهووس بتعلم كل جديد في مجال البرمجة والتصميم واحب نشر ما اعرفه ليتعلم منه الناس باسلوبي الخاص

اضغط على السمايل للحصول على الكود: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

اضف كود (html) ركن الاسئلة !