توابع الانتقال عبر الصّفحة والتّعديل على العناصر في jQuery

تُعد مكتبة jQuery واحدة من أكثر المكتبات شيوعًا وانتشارًا في مجال تطوير الويب منذ إطلاقها في عام 2006. جاءت هذه المكتبة كحل ثوري يُبسط التعامل مع عناصر HTML، ومعالجة الأحداث، وتنفيذ الحركات البصرية، والتواصل مع الخادم باستخدام AJAX، بطريقة تتسم بالسهولة والكفاءة. ومن أبرز ميزاتها القدرة الفائقة على الانتقال داخل الصفحة والتفاعل مع العناصر بطرق متعددة، وهو ما سنسلّط عليه الضوء بشكل موسع في هذا المقال، حيث سنتناول توابع الانتقال عبر الصفحة وآليات التعديل على العناصر في jQuery بالتفصيل، مدعومة بالأمثلة التوضيحية وأفضل الممارسات.

أولًا: مقدمة حول jQuery ووظائفها الأساسية

تم تطوير مكتبة jQuery لتُسهل التعامل مع DOM (Document Object Model) بشكل يجعل كتابة الشيفرة أكثر اختصارًا، وأقل تعقيدًا من JavaScript التقليدية. وتقوم هذه المكتبة بتغليف التعقيدات المختلفة التي تظهر بسبب الفروقات بين المتصفحات، ما يجعل كتابة الكود أكثر توحيدًا وسرعة.

jQuery تُتيح تنفيذ عدد ضخم من الوظائف عبر واجهة بسيطة وسلسة، ومنها:

• التعامل مع الأحداث Events مثل click, hover, keydown وغيرها.

• التعديل على خصائص العناصر Attributes وCSS.

• إنشاء تأثيرات بصرية Animations مثل الإظهار والإخفاء.

• التنقل عبر عناصر الصفحة Traversing DOM.

• تنفيذ مكالمات AJAX بسهولة تامة.

ثانيًا: توابع الانتقال عبر الصفحة (Scrolling and Navigation)

1. الانتقال السلس داخل الصفحة (Smooth Scrolling)

عند إنشاء روابط داخلية في صفحة HTML تحتوي على عدة أقسام، يمكن استخدام jQuery لتوفير تجربة انتقال سلسة عند النقر على أحد هذه الروابط.

مثال تطبيقي:

html
CopyEdit
<a href="#section2" class="scroll-link">الانتقال إلى القسم الثانيa>
<div id="section2">هذا هو القسم الثانيdiv>

javascript
CopyEdit
$(".scroll-link").click(function(e){
    e.preventDefault(); // منع السلوك الافتراضي
    var target = $($(this).attr("href"));
    if(target.length){
        $("html, body").animate({
            scrollTop: target.offset().top
        }, 800);
    }
});

يستخدم الكود السابق تابع animate() لتغيير قيمة scrollTop الخاصة بالصفحة، وهو ما يؤدي إلى انتقال سلس نحو القسم المستهدف.

2. التحقق من الموقع الحالي داخل الصفحة

يمكن استخدام $(window).scroll() لرصد موقع المستخدم الحالي داخل الصفحة وتنفيذ تغييرات معينة عند الوصول إلى نقاط محددة.

مثال:

javascript
CopyEdit
$(window).scroll(function(){
    if($(this).scrollTop() > 200){
        $("#back-to-top").fadeIn();
    } else {
        $("#back-to-top").fadeOut();
    }
});

يتيح هذا الكود إظهار زر الرجوع للأعلى بعد تجاوز المستخدم مقدار معين من التمرير.

3. الانتقال إلى الأعلى أو الأسفل

مثال للانتقال إلى أعلى الصفحة:

javascript
CopyEdit
$("#back-to-top").click(function(){
    $("html, body").animate({ scrollTop: 0 }, 700);
});

الانتقال إلى أسفل الصفحة:

javascript
CopyEdit
$("html, body").animate({
    scrollTop: $(document).height()
}, 1000);

ثالثًا: التعديل على العناصر باستخدام jQuery

jQuery توفر واجهة برمجية متكاملة للتعديل على خصائص عناصر HTML، سواء عبر تعديل النصوص، أو الخصائص Attributes، أو الأنماط CSS، أو بنية الصفحة DOM.

1. التعديل على النصوص والمحتوى

• .text(): استرجاع أو تعيين النص داخل العنصر.

• .html(): استرجاع أو تعيين المحتوى بصيغة HTML.

• .val(): تُستخدم مع الحقول لجلب أو تغيير القيمة.

أمثلة:

javascript
CopyEdit
$("#title").text("مرحبا بك في موقعنا");
$("#info").html("تم التحديث بنجاح");
$("#username").val("مستخدم123");

2. التعديل على الخصائص Attributes

• .attr(): لتعديل أو استرجاع خاصية معينة.

• .removeAttr(): لإزالة خاصية من العنصر.

مثال:

javascript
CopyEdit
$("img").attr("alt", "وصف للصورة");
$("#submitBtn").removeAttr("disabled");

3. التعديل على الأنماط (CSS)

• .css(): لتعيين أو جلب خاصية CSS.

• .addClass() و .removeClass() و .toggleClass(): للتعامل مع الأصناف (classes).

مثال:

javascript
CopyEdit
$("#box").css("background-color", "blue");
$("#menu").addClass("active");
$(".note").removeClass("hidden");
$("p").toggleClass("highlight");

4. التعديل على البنية DOM

الإضافة:

• .append(): لإضافة عنصر في نهاية المحتوى.

• .prepend(): لإضافة عنصر في بداية المحتوى.

javascript
CopyEdit
$("#list").append("
عنصر جديد
");

الحذف:

• .remove(): لحذف العنصر من DOM.

• .empty(): لحذف المحتوى فقط.

javascript
CopyEdit
$("#ad-banner").remove();
$(".container").empty();

الاستبدال:

javascript
CopyEdit
$("#target").replaceWith("
عنصر جديد بديل
");

5. التعامل مع الخصائص المنطقية (boolean attributes)

بعض الخصائص مثل checked, disabled, selected يتم التحكم بها باستخدام .prop() بدلاً من .attr().

مثال:

javascript
CopyEdit
$("#checkBox").prop("checked", true);
$("#submitBtn").prop("disabled", false);

رابعًا: المؤثرات والتفاعلات (Effects and Animations)

تُعتبر المؤثرات المرئية أحد أبرز جوانب قوة jQuery، ويمكن ربطها بتوابع الانتقال أو التعديل على العناصر لإنشاء تجربة تفاعلية ديناميكية.

توابع المؤثرات الأساسية:

مثال لتطبيق الحركة:

javascript
CopyEdit
$("#box").animate({
    width: "300px",
    height: "300px",
    opacity: 0.5
}, 1000);

خامسًا: التفاعل مع الأحداث (Event Handling)

لكي تتحقق فاعلية التعديلات والانتقالات، من الضروري ربطها بالأحداث المختلفة التي يطلقها المستخدم مثل النقر، تمرير الفأرة، إدخال البيانات، وغيرها.

أهم توابع التعامل مع الأحداث:

مثال:

javascript
CopyEdit
$("#hide-btn").click(function(){
    $("#target-box").slideUp();
});

سادسًا: أفضل الممارسات لاستخدام jQuery بفعالية

• تحميل jQuery من CDN لتسريع تحميل الصفحات وتحسين الأداء:

html
CopyEdit
<script src="https://code.jquery.com/jquery-3.6.0.min.js">script>

• كتابة الكود داخل جاهزية الوثيقة باستخدام:

javascript
CopyEdit
$(document).ready(function(){
    // الكود هنا
});

• استخدام التحديد الأمثل (Efficient Selectors) لتجنب البطء.

• تجنب التداخل الزائد في الأنماط واستخدام الأصناف بدلًا من التعديل المباشر على CSS داخل الجافاسكريبت.

سابعًا: جدول يوضح مقارنة توابع jQuery المرتبطة بالانتقال والتعديل

المصادر والمراجع

• jQuery Official Documentation – https://api.jquery.com

• Mozilla Developer Network (MDN) – https://developer.mozilla.org