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

الجمعة، 12 سبتمبر 2014

دورة الجيكويري - الدرس 12 - شرح html

الجمعة، 12 سبتمبر 2014 تحرير

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

السلام عليكم ورحمة الله وبركاته
كيف الحال احبابي في الله اتمنى تكونوا بالف خير ..

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

دورها هو إضافة اكواد من نوع html

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

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

<!doctype html> <html> <head> <meta charset="utf-8"> <title>html</title> <script src="lib/jquery.js"></script> <script> $(function(){ $( "button" ).click(function() { $( "div" ). html("<h1 style='color:green; background:orange;'> محمد طه</h1> "); }); }); </script> </head> <body> <button>add html</button> <div> </div> </body> </html>

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

قمنا بعمل عنصر فارغ في وثيقتنا كالتالي:

<div> </div>

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

<script src="lib/jquery.js"></script>

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

قمنا بعمل تحديد للبوطن وأضفنا له تأثير على شكل دالة حيث عند الضغط على البوطن

ستتم إضافة عنصر h1 مع تأثيرات استايل داخل عنصر div

<script> $(function(){ $( "button" ).click(function() { $( "div" ). html("<h1 style='color:green; background:orange;'> محمد طه</h1> "); }); }); </script>

ملاحظة مهمة : إن كنت قمت بتضمين الأكواد عن طريق" مزدوجة فبداخلها قم بتضمين الأكواد الإضافية بالمنفردة ' مثال :

("<h1 style='color:green; background:orange;'> محمد طه</h1> ");

كما تلاحظون أننا عملنا تضمين للـ html بالعلامة المزدوجة أي " "

وعملنا تضمين للـ css بالعلامة المنفردة أي ' '

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