سلسلة دروس شرح مكتبة jQuery - [ الدالة hide و show ]

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
3,370
مستوى التفاعل
2,917
النقاط
113
الإقامة
K.S.A
  • التقييمات: 1
  • #1
بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم

اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،

نكمل معكم هذه السلسلة بدرس جديد نشرح فيه دالتين من دوال مكتبة الـjQuery وهذا الدرس متعلق بالدرس السابق فمن فاته الدرس السابق يستطيع زيارة فهرس الدورة عن طريق الرابط التالي:


بسم الله نبدأ الدرس :

اليوم سوف نتكلم عن دالتين من دوال هذه المكتبة الرائعة:

الدالة الاولى

دالة show : تعمل هذه الدالة على اظهار العناصر المخفية عن طريق احد خواص لغة css مثل خاصية display: none

الدالة الثانية

دالة hide : وتعمل هذه الدالة عكس عمل الدالة السابقة تماما ً فهي تقوم باخفاء اي عنصر في الصفحة:

الدالتين تكتب بنفس الطريقة وطريقة كتابة الدالة تكون كالتالي:


JavaScript:
$(element).show();

كما تلاحظون اولا ً نقوم بتحديد العنصر الذي نريد تطبيق الدالة عليه ومن ثم نكتب الدالة بعد العنصر تماما ً لكي يتم تطبيقها عليه والاقواس التي تلي الدالتين تستخدم لتحديد سرعة ظهور واخفاء العنصر ويتم وضع فيها اما كلمة slow اي بطيء او fast وتعني سريع او يمكن استخدم عدد الثواني ويكون الاستخدام بالميلي ثانية بمعنى ال 1000 ميلي = ثانية

والان لنأخذ مثال لكي تتضح الصورة وسوف نأخذ نفس المثال في الدرس السابق ولكن سوف نقوم ببعض التغييرات


HTML:
<div class="container">
        <button class="xenarabia show_div">
          اضغط هنا لاظهار المحتوى
        </button>
        <button class="xenarabia hide_div">
          اضغط هنا لاخفاء المحتوى
        </button>
     
        <div id="container" style="display: none;">
          <h3>
            محتوى مخفي
          </h3>
        </div>
    </div>

نشرح الكود قليلا ً للتوضيح اكثر قمنا بوضع زرين احدهمها لاخفاء العنصر ويحمل الكلاس hide_div والاخر لاظهاره ويحميل الكلاس show_div

وقمنا بوضع div داخله عبارة محتوى مخفي ولاحظو اننا اضفنا لهذا ال div احد خواص css وهي display:none; وذلك لاخفاء هذا المحتوى وسوف نقوم باظهاره واخفائه عن طريق الدالتين show و hide

الان لنقوم بكتابة كود jQuery


JavaScript:
    $(function() {
      $('.show_div').click(function() {
        $('#container').show('slow');
      });
 
    $('.hide_div').click(function() {
        $('#container').hide('slow');
      });
    });

قمنا بداية ً بتعريف مكتبة ال jquery ثم بعد ذلك استخدمنا دالة click والذي سبق وشرحناها في الدرس السابق والتي سوف تستمر معنا في كثير من الدروس

ثم قمنا بتعريف العنصر الاول وهو كلاس اظهار المحتوى المخفي show_div وبعدها استخدمنا الدالة show واسندنا لها قيمة slow كما ذكرت سابقا ً

وقمنا بعد ذلك باستخدام نفس الكود ولكن عوضا ً عن استخدام الدالة show استخدمنا hide لاخفاء العنصر بعد بعد اظهاره


ويمكنكم تجربة الكود عبر الرابط التالي:


مثال الدرس


وفي النهاية اتمنى ان اكون قد وفقت في شرح هذا الدرس فان اصبت فهذا من فضل الله وان اخطأت فجل من لايخطأ

احترامي وتقديري
اخوكم
شقاوي
 
التعديل الأخير:

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني
مبدع اخونا تركي و الشرح مفهوم وواضح جدا
و حتى رابط التجربة رائع
جزاك الله عنا خيرا
وجعله في ميزان حسناتك
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
3,370
مستوى التفاعل
2,917
النقاط
113
الإقامة
K.S.A
حياك الله حبيبي محمد والحمد لله ان الشرح واضح

والله يجازيني واياك وجميع المسلمين الخير

احترامي وتقديري
اخوك
شقاوي
 

zoolraqey

:: الأعضاء ::
إنضم
25 مايو 2021
المشاركات
5
مستوى التفاعل
0
النقاط
1
بارك الله فيك
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
3,370
مستوى التفاعل
2,917
النقاط
113
الإقامة
K.S.A
حياك الله اخوي @zoolraqey والله يبارك بعمرك
 

iAhmedDh

:: الأعضاء ::
إنضم
30 يونيو 2023
المشاركات
18
مستوى التفاعل
21
النقاط
3
السّلام عليكم ورحمة الله وبركـاته

تم التطبيق بنجاح والحمد لله. لكن جربت التطبيق على وسم img & p معًا بنفس الكود:

JavaScript:
  $(function(){
        $('.show').click(function(){
          $('img, p').show('slow');

        });

من الناحية الجمالية في ظهور الصورة، حيث كانت أبعادها 777*463 px
عند استخدام slow يكون ظهورها أكثر جمالًا وترتيبًا من fast. ولكن يمكن أيضًا عدم تحديد قيمة.

قرأت في مستندات الجيكويري من الموقع الرسمي بخصوص دالة .show()

أن القيمة الإفتراضية تكون 400 جزء من الثانية... أي عند كتابة .show() هكذا. أما عند إضافة قيمة .show('slow') فتكون 600 جزء من الثانية. وعند إضافة .show('fast') فتكون 200 جزء من الثانية.

كل الشكر لك أخي تركي على دروسك البسيطة والمفهومة عند تطبيقها.
 
التعديل الأخير:

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
3,370
مستوى التفاعل
2,917
النقاط
113
الإقامة
K.S.A
وعليكم السلام ورحمة الله وبركاته

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

اما بالنسبة ﻻستخدام slow و fast مع نفس الدالة فغالبا ً ما استخدم fast او اترك القيمة فارغة عند استخدام هذا الدالة ﻻنك كمبرمج عند برمجة اي سكربت فعليك ان تاخذ في الحسبان اتصال الزائر فليس كل زائر لسكربتك يكون لديه اتصال سريع لذا عند استخدام slow احيانا ً اذا كان اﻻتصال بطيء ممكن تؤثر هذه العملية على عرض العنصر المخفي واذا كنت مصر على استخدام slow فسوف تضطر الى عمل loading لحين ظهور العنصر المخفي

احترامي وتقديري
اخوك
شقاوي
 

جميع المواضيع والمشاركات والتعليقات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة زين العربية .ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

الأعضاء المتصلون

لا يوجد أعضاء متصلون الآن.

إحصائيات المنتدى

المواضيع
2,082
المشاركات
21,949
الأعضاء
977
آخر عضو مسجل
rfab
أعلى