دورة تصميم قالب بلوجر 2021 الدرس 9 لمحة عن jQuery قسم 1



السلام عليكم واللهم صل على محمد وال محمد
نكمل اليوم بتاسع دروس دورة تصميم قالب بلوجر 2021 من الصفر الى الاحتراف فبعد ان تكلمنا في الدروس السابقة عن 
نكمل اليوم مع مكتبة jQuery ونبدء بسم الله

لمحة عن jQuery

اولا لاستخدام الجي كويري يجب استدعاء مكتبة الجي كويري وذالك يكون بكود الاستدعاء التالي
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
ثم كما تعودنا بالبداية نتعلم الاستدعاء
id يكون الاستدعاء عن طريق الايدي بالشكل التالي
 $("#id")
class يكون الاستدعاء عن طريق الكلاس بالشكل التالي
 $(".class")
tagname يكون الاستدعاء عن طريق اسم التاغ بالشكل التالي
$("tagname")
ثانيا بعد الاستدعاء يمكننا اضافة عدة وظائف ومنها
بالطبع خواص الـ jquery كثيرة ولكن سنعطي بعض منها فقط لتكون فاهم تركيبة اكواد الـ jquery ولكن قبل الوظائف يجيب تعلم كيف يتم كتابة كود الجي كويري ويكون بالطريقة التالية
$(document).ready(function(){
  هنا اكواد الخصائص والوظائف
});
الان نبدأ مع بعض الوظائف
1-$(selector).html()
تستخدم لتبديل او قراءة كود html موجود ضمن كود html
مثال على تبديل كود Html

<p>هذه فقرة سيتم استبدالها</p>
$("p").html("<p>كود html جديد</p>");
بالمثال السابق لدينا فقرة مكتوب فيها هذه فقرة سيتم استبدالها وبالاسفل استخدمنا كود جي كويري لاستبدال الفقرة بفقرة اخرى مكتوب فيها كود html جديد بالتالي باستخدام الجيكوري قمنا باستبدال كود ال html كامل
مثال على قراءة كود html
<p id='test'>هذه فقرة سيتم قرائتها</p>
$("#test").html();
في المثال السابق قمنا فقط بقراءة كود ال html الذي يحتوي على ايدي test
2-$(selector).css(property,value)
تستخدم لاضافة ستايل لعنصر معين مثال على ذالك
<p>هذه الفقرة سيتم تلوينها باللون الاحمر</p>
$("p").css("color", "red");
في المثال السابق قمنا بتلوين النص الموجود داخل الفقرة باللون الاحمر باستخدام الجي كويري
3-$(selector).addClass("classname")
لاضافة كلاس لعنصر
$(selector).removeClass("classname")
لحذف كلاس من عنصر
$(selector).toggleClass("classname")
لتبديل كلاس لعنصر
الثلاث وظائف السابقة هي لاضافة اوحذف اوتبديل كلاس
مثال على ذالك
<p>هذه الفقرة سيتم اضافة كلاس لها.</p>
$("p").addClass("test");
في هذا المثال قمنا باضافة كلاس للفقرة الموجودة بالاعلى 
<p class="test">سيتم حذف كلاس test.</p>
$("p").removeClass("test");
في هذا المثال تم حذف كلاس test من الفقرة السابقة باستخدام الجي كويري
<p>تبديل الكلاس للفقرة</p>
$("p").toggleClass("test");
في هذا المثال سيتم اضافة كلاس test في حال كان غير موجود او سيتم حذفه في حال كان موجود

يفضل دائما مشاهدة الفيديو لفهم اوضح

كاتب الموضوع: Ahmad Wael
احمد وائل عمري 28 عام من سوريا مختص صيانة حسوب وموبايل ومحب للتقنية بجميع اشكالها ولدي خبرة برمجية بتصميم مواقع الويب واتمنى ان اكون مصدر جيد لتعليم اشياء مفيدة لكم