تعد عمليات النقر جزءا لا يتجزأ من تطوير الويب. ولكن في بعض الأحيان يكون من الضروري إضافة وظائف إضافية إلى الانتقالات ، على سبيل المثال ، عرض نافذة مشروطة مع تحذير أو تأكيد. في مثل هذه الحالات ، يقدم مسج أدوات مريحة تجعل من السهل تنفيذ مثل هذه الوظائف الإضافية.
طريقة النقر () ، والتي تسمح لك بربط معالج حدث "النقر" بعنصر. عندما ينقر المستخدم على عنصر ، يتم تمرير الوظيفة إلى. في سياق الروابط ، هذا يعني أنه يمكننا اعتراض حدث النقر وتنفيذ الإجراءات اللازمة قبل النقر على الرابط.
من أجل اعتراض الحدث انقر على وصلة باستخدام مسج, يجب تحديد العنصر المناسب باستخدام محدد واستدعاء. كوسيطة للطريقة ، يتم تمرير وظيفة سيتم استدعاؤها عند النقر فوق هذا العنصر. داخل هذه الوظيفة ، يمكنك تنفيذ جميع الإجراءات اللازمة ، على سبيل المثال ، فتح نافذة مشروطة أو تقديم طلب غير متزامن إلى الخادم.
قد تبدو التعليمات البرمجية لتنفيذ ارتباط إلى مسج مثل هذا:
. ('أ').انقر (وظيفة () {// تنفيذ إجراءات إضافية
// اتبع الرابط
});
في هذا المثال ، نختار جميع عناصر "أ" (الروابط) على الصفحة ونربط معالج الأحداث "النقر" بها. داخل هذه الوظيفة ، يمكنك تنفيذ جميع الإجراءات الإضافية اللازمة ، ثم استدعاء طريقة النقر فوق الارتباط.
- ما هو مسج?
- لماذا أحتاج إلى تنفيذ نقرة على الرابط?
- تنفيذ الرابط انقر
- الخطوة 1: تثبيت مسج
- الخطوة 2: كتابة برنامج نصي لمتابعة الرابط
- الخطوة 3: توصيل البرنامج النصي بصفحة هتمل
- النتيجة
- سؤال وجواب
ما هو مسج?
مسج هو مكتبة جافا سكريبت سريعة وصغيرة وقوية مصممة لتبسيط العمل مع وثائق هتمل ، ومعالجة الأحداث ، وخلق الرسوم المتحركة ومعالجة البيانات على صفحة ويب. يوفر بناء جملة بسيطا وبديهيا يسهل التفاعل مع عناصر صفحة الويب ويمنحها الديناميكية والتفاعل.
ويستند مسج على لغة جافا سكريبت ويدعم العديد من الوظائف والأساليب التي تجعل البرمجة من جانب العميل أكثر ملاءمة وكفاءة. توفر مكتبة مسج مختلف المدمج في وظائف للعمل مع شجرة دوم ، واختيار والتلاعب العناصر ، ومراقبة الرسوم المتحركة ، والتعامل مع الحدث ، وأكثر من ذلك.
مسج هو عبر متصفح ومتوافقة مع أنظمة التشغيل المختلفة. يتم تحميله في المتصفح مع الصفحة ويقوم تلقائيا بالعمل اللازم لتغيير صفحة الويب وتحسينها. نظرا لشعبيتها والوثائق واسعة النطاق ، مسج هي واحدة من المكتبات جافا سكريبت الأكثر شعبية ويستخدم على نطاق واسع في تطوير الشبكة.
لماذا أحتاج إلى تنفيذ نقرة على الرابط?
يعد النقر فوق الارتباط أحد العناصر الرئيسية لصفحة الويب. تتيح هذه الوظيفة للمستخدمين التنقل بين الصفحات والموارد المختلفة على الإنترنت. تلعب القدرة على النقر على الروابط دورا مهما في التنقل ، مما يوفر الراحة والوصول السريع إلى المعلومات الضرورية.
فيما يلي بعض الأسباب التي تجعل من المهم تنفيذ نقرات الارتباط في مشروع الويب الخاص بك:
- زيادة قابلية الاستخدام: يسمح للمستخدمين بالتنقل بسرعة عبر صفحات مختلفة من الموقع أو الانتقال إلى موارد أخرى بنقرة واحدة. هذا يوفر الوقت ويبسط التنقل في الموقع.
- تحسين تحسين محسنات محركات البحث: تعد الروابط عاملا مهما لمحركات البحث في تحديد مدى ملاءمة صفحات الويب وترتيبها. تساعد الروابط المنظمة بشكل صحيح على تحسين رؤية موقعك وجذب المزيد من الزوار.
- هيكلة أفضل: يساعد استخدام الروابط في تنظيم المعلومات على صفحة الويب وجعلها أكثر قابلية للفهم للمستخدم. عندما يتم تجميع الروابط حسب المعنى أو الموضوع ، فإنها تساعد المستخدمين على العثور بسرعة على المعلومات التي يحتاجون إليها والتفاعل مع الموقع بشكل أكثر فعالية.
- زيادة مشاركة المستخدم: يمكن للنقرات أن تشجع المستخدمين على استكشاف موقعك أو استكشاف موارد إضافية. على سبيل المثال ، يمكنك تقديم روابط لموضوعات ذات صلة أو مواد مماثلة لإبقاء المستخدم مهتما وتقديم معلومات إضافية للمستخدم.
- التطوير المهني: تظهر الروابط عالية الجودة والعمل بشكل صحيح نهجا احترافيا لتصميم وتطوير مواقع الويب. عندما يرى المستخدمون أن الروابط تعمل دون مشاكل وتؤدي إلى معلومات مفيدة ، فإنهم يثقون في موقعك ويعتبرونه موردا موثوقا ومفيدا.
بشكل عام ، يعد تنفيذ عمليات النقر جزءا لا يتجزأ من تطوير مشاريع الويب. أنها توفر سهولة الاستخدام ، وتساعد على تحسين تحسين محركات البحث ، وهيكل المعلومات ، وزيادة مشاركة المستخدم وإعطاء الموقع مظهرا احترافيا. لذلك ، من المهم ليس فقط إنشاء روابط جيدة ، ولكن أيضا للحفاظ على وظائفها وأهميتها.
تنفيذ الرابط انقر
يعد النقر فوق ارتباط على صفحة الويب إحدى الوظائف الرئيسية للإنترنت. مطوري الويب استخدام أساليب مختلفة لتنفيذ وصلة الملاحة ، بما في ذلك استخدام مسج.
هنا مثال على تنفيذ بسيط من النقر على وصلة باستخدام مسج:
دعونا نحلل هذا المثال:
- نحن ربط مسج باستخدام وصلة إلى المكتبة داخل العلامة.
- التفاف التعليمات البرمجية داخل العلامة في document (وثيقة).وظيفة جاهزة () ، والتي تسمح لك بتنفيذ التعليمات البرمجية فقط بعد تحميل الصفحة بالكامل.
- حدد كل العلامات على الصفحة باستخدام محدد $('أ').
- نضيف معالج حدث نقرة إلى كل رابط باستخدام وظيفة النقر ().
- داخل معالج النقر ، نحصل على قيمة السمة هريف باستخدام وظيفة أتر() وتمريرها كقيمة الخاصية هريف من النافذة.كائن الموقع.
وبالتالي ، عند النقر على الرابط ، يتم إلغاء السلوك القياسي ، ونتبع الرابط المحدد في سمة هريف.
هذا هو مجرد مثال على تنفيذ بسيط من النقر على وصلة باستخدام مسج. ومع ذلك ، يمكن استخدام طرق أخرى وطرق أكثر تقدما لتنفيذ النقر على الرابط ، اعتمادا على متطلبات المشروع.
الخطوة 1: تثبيت مسج
قبل البدء في استخدام مسج ، تحتاج إلى تحميل المكتبة وتوصيله إلى المشروع الخاص بك. هناك عدة طرق لتثبيت مسج:
- تحميل من الموقع الرسمي. انتقل إلى الموقع الرسمي مسج (https://jquery.com ) وتحميل أحدث نسخة من المكتبة. بعد التنزيل ، قم بفك ضغط الملفات وانسخ مجلد المكتبة إلى مشروعك.
- قم بتوصيل رابط كندي. بدلا من تنزيل المكتبة وتخزينها محليا ، يمكنك استخدام رابط كندي. كدن (شبكة تسليم المحتوى) هي شبكة من الخوادم الموجودة في جميع أنحاء العالم التي توفر الوصول والتنزيل السريع للمكتبات والملفات الشعبية. للاتصال مسج عبر كندي ، إضافة التعليمات البرمجية التالية إلى قسم المستند أتش تي أم أل:
- استخدام الآلية الوقائية الوطنية. إذا كنت تستخدم إدارة حزمة نبم ، تثبيت مسج يصبح أسهل. افتح موجه الأوامر وقم بتشغيل الأمر التالي:
الآلية الوقائية الوطنية تثبيت مسج
بعد تثبيت مسج ، يمكنك البدء في استخدامه في المشروع الخاص بك.
الخطوة 2: كتابة برنامج نصي لمتابعة الرابط
لتنفيذ النقر فوق الارتباط باستخدام مسج ، تحتاج إلى كتابة برنامج نصي من شأنها التعامل مع الحدث انقر فوق الارتباط وانتقل إلى عنوان ورل المحدد.
بادئ ذي بدء ، نحدد العناصر الموجودة على الصفحة التي ستكون روابط سيتم تطبيق هذا البرنامج النصي عليها. للقيام بذلك ، استخدم محدد مسج ، الذي يبدأ مع رمز """ ويشير إلى اختيار العناصر مع سمات معينة. في هذه الحالة ، نختار جميع العناصر "أ" التي تحتوي على سمة "هريف".
document (وثيقة).جاهز (وظيفة () {
انقر فوق (وظيفة (حدث) {
// رمز معالج الأحداث
});
});
بعد ذلك ، تحتاج إلى وصف رمز معالج حدث النقر. في هذه الحالة ، سوف نستخدم طريقة مسج" بريفنتدفولت () " ، الذي يلغي سلوك الارتباط القياسي (الذهاب إلى عنوان ورل المحدد).
document (وثيقة).جاهز (وظيفة () {
انقر فوق (وظيفة (حدث) {
حدث.منعالافتراضي();
// رمز معالج الأحداث
});
});
بعد إلغاء السلوك القياسي للرابط ، يمكننا تنفيذ إجراءاتنا الإضافية. للانتقال إلى عنوان ورل المحدد ، يمكنك استخدام طريقة مسج "أتر ()" ، والذي يسمح لك للحصول على قيمة سمة عنصر أو تعيين قيمة جديدة. في هذه الحالة ، سوف نحصل على قيمة السمة "هريف" من الرابط المحدد واستخدامه في "نافذة".الموقع.وظيفة "هريف" ، التي تعيد التوجيه إلى عنوان ورل المحدد.
document (وثيقة).جاهز (وظيفة () {
انقر فوق (وظيفة (حدث) {
حدث.منعالافتراضي();
فار رابط = $(هذا).عطر ('هريف');
نافذة.الموقع.هريف = ورل;
});
});
الآن بعد كتابة البرنامج النصي ، سيتم تطبيقه على كل رابط يحتوي على سمة "هريف". سيؤدي النقر فوق هذا الرابط إلى إلغاء السلوك القياسي وسيتم تنفيذ الانتقال إلى عنوان ورل المحدد.
الخطوة 3: توصيل البرنامج النصي بصفحة هتمل
بعد تحديد العنصر الضروري في صفحة هتمل الخاصة بك وإنشاء معالج أحداث ، فإن الخطوة التالية هي توصيل البرنامج النصي بالصفحة نفسها.
لتوصيل برنامج نصي بصفحة هتمل ، تحتاج إلى استخدام علامة تسمح لك بتضمين شفرة جافا سكريبت مباشرة في شفرة هتمل.
فيما يلي مثال على رمز صفحة هتمل مع برنامج نصي مرفق:
صفحة أتش تي أم أل الخاصة بي
مثال على صفحة هتمل
هذه هي صفحتي الأولى باستخدام جافا سكريبت.
في هذا المثال ، نستخدم ملف نصي خارجي يسمى " البرنامج النصي.جس " ، والذي يقع في نفس الدليل مثل ملف هتمل. إذا كان ملف البرنامج النصي الخاص بك موجودا في دليل آخر ، فأنت بحاجة إلى تحديد المسار إلى الملف بالنسبة للصفحة الحالية.
يجب وضع العلامة داخل القسم أو أمام علامة الإغلاق. داخل العلامة ، يمكنك كتابة شفرة جافا سكريبت مباشرة أو تحديد المسار إلى ملف نصي خارجي باستخدام السمة "سرك".
الآن بعد أن قمت بتوصيل البرنامج النصي إلى صفحة هتمل ، يمكنك البدء في استخدام رمز مسج الذي كتبته في الخطوات السابقة. مرة واحدة يتم تحميل الصفحة ويتم توصيل البرنامج النصي ، سيتم تنفيذ التعليمات البرمجية الخاصة بك ، وسوف تكون قادرة على تنفيذ النقر فوق الارتباط باستخدام مسج.
النتيجة
نتيجة تنفيذ النقر فوق الارتباط باستخدام مسج هو تغيير الصفحة الحالية دون إعادة تحميلها. يبقى المستخدم على نفس الصفحة ، لكن المحتوى الموجود عليها يتغير ديناميكيا دون الحاجة إلى تحميل صفحة جديدة.
باستخدام مسج ، يمكنك بسهولة اعتراض نقرة على رابط وتنفيذ إجراءات معينة قبل النقر. للقيام بذلك ، يكفي استخدام التعليمات البرمجية التالية:
انقر فوق(وظيفة (حدث) {
حدث.منعالافتراضي () ؛ / / إلغاء النقر على الرابط
// تنفيذ الإجراءات قبل الانتقال ، على سبيل المثال ، الرسوم المتحركة أو إرسال البيانات إلى الخادم
فار رابط = $(هذا).أتر ('هريف') ؛ / / الحصول على رابط الرابط
// قم بتحميل محتوى جديد إلى عنوان ورل المحدد والصقه في الصفحة
$.اياكس ({
رابط: رابط,
النجاح: وظيفة(استجابة) {
content ('#المحتوى').أتش تي أم أل (استجابة) ؛ / / إدراج محتوى جديد في عنصر مع معرف"المحتوى"
},
خطأ: وظيفة() {
تنبيه (حدث خطأ أثناء تحميل الصفحة);
}
});
});
، إلغاء النقر على الرابط. بعد ذلك ، نقوم بتنفيذ الإجراءات اللازمة قبل الانتقال — على سبيل المثال ، الرسوم المتحركة أو إرسال البيانات إلى الخادم.
.
.
وبالتالي ، فإن تنفيذ نقرة على الرابط باستخدام مسج يسمح لك بإنشاء تطبيقات ويب أكثر تفاعلية وأسرع دون الحاجة إلى إعادة تحميل الصفحة بأكملها.