شرح وظيفة OnClick في JQuery بأمثلة
نشرت: 2021-06-18تعد jQuery واحدة من المكتبات السريعة والصغيرة والغنية بالميزات في JavaScript. يتم استخدام jQuery لإنشاء مستندات HTML ومعالجة الأحداث واجتيازها ومعالجتها ، إلخ.
عند النقر على عنصر HTML ، يكون هناك حدث jQuery click. لتشغيل وظيفة onclick في jQuery ، انقر فوق () مستخدمة. على سبيل المثال ، عند النقر فوق فقرة في مستند ، سيتم تشغيل حدث النقر بواسطة الأسلوب $ ("p"). click (). يمكن للمستخدم إرفاق وظيفة بأسلوب النقر كلما حدث نقرة لتشغيل الوظيفة. وبالتالي يتم تنفيذ جزء من الكود كلما بدأ حدث النقر ().
يتم محاكاة النقر بالماوس من خلال أسلوب HTMLElement.click ().
Click () وظيفة مضمنة في jQuery تبدأ حدث click. عندما يتم النقر فوق عنصر ذي صلة ، يتم تشغيل الحدث بواسطة طريقة click (). يؤدي حدثه بعد ذلك إلى حدوث نقرة لعناصر أعلى في شجرة المستند (أو سلسلة الأحداث).
كما يوحي الاسم ، فإن الأمر ببساطة هو الضغط على زر الماوس وتحريره بواسطة المستخدم فوق العنصر.
يتم إرفاق واحد أو أكثر من معالجات الأحداث بالعناصر المحددة من خلال طريقة on (). عند النقر فوق أحد العناصر ، يحدث حدث النقر (). يتم تنفيذ طريقة click () بمجرد حدوث حدث click (). يتم إرفاق وظيفة بطريقة النقر () ويتم تنفيذها. تُستخدم طريقة click () مع أحداث أخرى من jQuery.
لذلك ، يربط .click () معالج الحدث بحدث JavaScript "click" ، أو يطلق حدثًا على عنصر. الاختلافات في طريقة JavaScript onclick هي:
- .click (معالج).
- .click ([eventData]، handler).
- .انقر().
المتغيرات الأولى والثانية عبارة عن نموذج قصير لـ .on ("انقر" ، معالج) والاختصار لـ .trigger ("انقر") في الشكل الأخير.
عندما يكون مؤشر الماوس فوق العنصر ويتم الضغط على الزر وتحريره ، يتم إرسال نقرة الحدث () إلى هذا العنصر. يمكن استقبال الحدث عن طريق أي عنصر من عناصر HTML.
يمكن أيضًا تشغيل حدث click () إذا تم النقر فوق العنصر الآخر من خلال الكود التالي.
باستخدام هذا الرمز ، سيتم تنبيه الرسالة بواسطة العنصر
من خلال الأحداث التالية ، يتم تشغيل حدث click () فقط.
- عندما يكون مؤشر الماوس داخل عنصر ويكون زر الماوس مضغوطًا.
- عندما يكون مؤشر الماوس داخل عنصر ويتم تحرير زر الماوس.
قبل اتخاذ أي إجراء ، عادة ما تكون الأحداث المذكورة أعلاه هي التسلسل المطلوب. عدا ذلك ، فإن الحدث المناسب الآخر هو حدث الماوس لأسفل أو لأعلى.
نظرًا لأن طريقة .click () هي الاختصار لـ .on ("انقر" ، معالج) ، فإن إمكانية الفصل موجودة من خلال استخدام .off ("انقر").
إستعمال
توجد طريقتان يمكن استخدامهما لاستدعاء طريقة click ():
- مع وسيطة دالة معينة
- بدون حجة معينة
يمكن استخدام وظيفة onclick في jQuery في عناصر HTML مثل div والفقرات والارتباطات التشعبية وما إلى ذلك لإنجاز المهمة المطلوبة. النقرة هي حدث بالماوس يحدث عند الضغط على الزر الموجود بالماوس. ومع ذلك ، سيحدث الحدث إذا كان المؤشر الموجود في الماوس داخل العنصر.
بناء الجملة:
$ (محدد) .click () ؛ -> تُستخدم لبدء حدث نقرة للعناصر المحددة.
$ (محدد). انقر (وظيفة) ؛ -> تُستخدم لإرفاق الوظيفة بحدث نقرة.
- المعلمة الاختيارية المستخدمة هي "الوظيفة" التي يتم استخدامها للتنفيذ عند حدوث حدث نقرة.
- قيمة الإرجاع: يتم إرجاع العنصر المحدد الذي تم تحديده بالوظيفة المراد تنفيذها.
جدول المحتويات
تنفيذ طريقة انقر فوق ()
1. عندما يتم إعطاء وسيطة دالة
في هذا النوع من التنفيذ ، يتم أخذ الوظيفة كمدخلات ويتم تنفيذها كلما تم استدعاء طريقة النقر ().
- تتم كتابة الكود بين علامة البرنامج النصي وداخل نص HTML الخاص بالشفرة.
- يتم استدعاء الوظيفة كسمة نمط h1.
- يتم الإعلان عن وسيطة مع الوظيفة ويتم أخذها كدالة منفصلة.
- يتم تطبيق طريقة التبديل على الكائن باستخدام هذا العامل مع تأخير يبلغ 1000 مللي ثانية.
- يظهر أدناه مثال على طريقة التنفيذ مع وسيطة دالة معينة.
سيكون إخراج الكود هو "النقر فوقي سيؤدي إلى تبديل النص!"
2. عندما لا يتم إعطاء حجة
تعمل طريقة javascript onclick على إطلاق حدث تم تعيين عنصر بالفعل للطريقة. لذلك يمكن لأي عنصر استدعاء الحدث عند النقر على عنصر آخر بشكل منفصل. يمكن تحقيق ذلك من خلال الخطوات التالية:
- يجب التصريح عن الكائن أولاً بسمة نمط معين يمكن النقر عليه. يجب التصريح عن إجراء عند النقر للكائن.
- يجب إنشاء كتلة نصية في نص الكود حيث يتم إسناد طريقة النقر () إلى تنسيق نمط مختلف ، ص .
- يتم استدعاء طريقة h1 onclick التي تم تعريفها بالفعل داخل استدعاء الوظيفة.
- ثم يتم استدعاء نفس طريقة onclick للسمة.
- فيما يلي مثال على رمز يوضح تنفيذ طريقة click () بدون وسيطة معينة.
ناتج الكود هو "النقر فوقي سيؤدي إلى استدعاء تنبيه!".
- يمكن استخدام العديد من الأحداث في طريقة $ .on مثل dblclick و change وغيرها.
- عرض زر HTML وإضافة نص إلى الصفحة عند النقر فوق الزر. عادةً ما يتم إرفاق طريقة Click () بزر ، ومع ذلك ، يمكن إرفاقها بأي عناصر أخرى في صفحة الويب.
- يتم عرض الزر الأساسي بمعرف "btn-primary" الموجود داخل <div> بمعرف "main.
- من خلال الكود ، يتم عرض المحتوى الجديد مع فئة "محتوى جديد" في علامة <p> بعد النقر فوق الزر.
- يتم وضع jQuery داخل علامات <script>.
- يتم إرفاق طريقة click () بمعرف الزر ويتم أخذ الوسيطة كوظيفة إعادة الاتصال وهي وظيفة مجهولة.
- يتم إرجاع السلسلة "تم النقر فوق الزر" بواسطة وظيفة رد الاتصال.
- الوظيفة التي لا تحمل اسمًا تسمى ببساطة وظيفة مجهولة وتستخدم كعمليات رد نداء كوسيطات لطريقة ما. لبناء أي مواقع ويب وتطبيقات سريعة الاستجابة ، تعمل الوظائف المجهولة وطرق رد الاتصال كحجر الزاوية.
- سيبدأ الرمز بالزر الموجود داخل <div> "main".
- بمجرد النقر فوق الزر ، سيتم استدعاء وظيفة رد الاتصال بواسطة معالج الأحداث حيث يتم إرفاق طريقة click () بمحدد الزر.
- سيتم عرض السلسلة "تم النقر فوق الزر".
- سيعرض الكود أعلاه المحتوى مرة واحدة فقط ، ولكن لعرض السلسلة في كل مرة يتم فيها النقر على الكود ، يتم استخدام append () بدلاً من HTML ().
- سينتج السلسلة ثلاث مرات مثل المحتوى الجديد داخل العلامة <p>.
- يتم استدعاء وظيفة رد الاتصال في كل مرة يتم فيها النقر فوق الزر.
خاتمة
تمت مناقشة أداء وظيفة onclick في jquery في المقالة جنبًا إلى جنب مع استخداماتها وأمثلة. باستخدام بضعة سطور فقط من التعليمات البرمجية ، يمكن إنشاء وظيفة صفحة الويب من خلال طريقة JavaScript onclick .
إذا كانت لديك رغبة في معرفة المزيد حول تطوير الويب والتخصص في المجالات الأخرى ذات الصلة ، فيمكنك التحقق من دورة " ماجستير العلوم في علوم الكمبيوتر " التي تقدمها upGrad . مصممة خصيصًا للمهنيين المبتدئين (ذكورًا وإناثًا على حد سواء في سن 21 إلى 45 عامًا) ، وستكون الدورة على منصة عبر الإنترنت مع جلسات مباشرة ، لسهولة المسافرين لمسافات طويلة. مع أكثر من 30 مشروعًا ومهمة ، سيحصل الطالب على مزايا حالة خريجي IIIT-Bangalore و LJMU . لا تتردد في الاتصال بفريقنا للحصول على أي مساعدة.