jQuery والتعامل مع DOM

محددات jQuery - الجزء الأول

15 دقيقة الدرس 3 من 30

إتقان محددات jQuery

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

لماذا المحددات مهمة

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

💡 نقطة مهمة: إذا كنت تعرف محددات CSS، فأنت تعرف بالفعل محددات jQuery! إنها تستخدم نفس البناء تماماً.

المحددات الأساسية

1. محدد العنصر

اختر جميع العناصر من نوع معين:

// اختيار جميع الفقرات
$('p')

// اختيار جميع divs
$('div')

// اختيار جميع الروابط
$('a')

// مثال: إخفاء جميع الفقرات
$('p').hide();

2. محدد المعرف

اختر عنصراً واحداً بمعرفه الفريد:

// اختيار العنصر بمعرف "header"
$('#header')

// اختيار العنصر بمعرف "loginBtn"
$('#loginBtn')

// مثال: تغيير نص العنصر بمعرف "title"
$('#title').text('عنوان جديد');

📝 تذكر: المعرفات يجب أن تكون فريدة في الصفحة. استخدم البادئة # لمحددات المعرف.

3. محدد الفئة

اختر جميع العناصر بفئة معينة:

// اختيار جميع العناصر بفئة "highlight"
$('.highlight')

// اختيار جميع العناصر بفئة "btn"
$('.btn')

// مثال: إضافة فئة لجميع العناصر بفئة "card"
$('.card').addClass('shadow');

مثال واقعي

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .highlight { background: yellow; }
        .hidden { display: none; }
    </style>
    <script>
        $(function() {
            // محدد العنصر - إخفاء جميع الفقرات
            $('#hideP').click(function() {
                $('p').addClass('hidden');
            });

            // محدد المعرف - تغيير عنوان محدد
            $('#changeTitle').click(function() {
                $('#mainTitle').text('تم تغيير العنوان!');
            });

            // محدد الفئة - تسليط الضوء على جميع البطاقات
            $('#highlightCards').click(function() {
                $('.card').addClass('highlight');
            });
        });
    </script>
</head>
<body>
    <h1 id="mainTitle">العنوان الأصلي</h1>

    <div class="card">بطاقة 1</div>
    <div class="card">بطاقة 2</div>
    <div class="card">بطاقة 3</div>

    <p>فقرة 1</p>
    <p>فقرة 2</p>

    <button id="hideP">إخفاء الفقرات</button>
    <button id="changeTitle">تغيير العنوان</button>
    <button id="highlightCards">تسليط الضوء على البطاقات</button>
</body>
</html>

المحدد العام

اختر جميع العناصر في الصفحة:

// اختيار كل شيء
$('*')

// مثال: إضافة فئة لجميع العناصر
$('*').addClass('animated');

⚠️ تحذير: استخدم المحدد العام (*) بحذر. يمكن أن يؤثر على الأداء في الصفحات الكبيرة لأنه يختار كل عنصر.

محددات متعددة

اختر عدة عناصر مختلفة في وقت واحد:

// اختيار جميع عناصر h1 وh2 وh3
$('h1, h2, h3')

// اختيار فئات متعددة
$('.warning, .error, .alert')

// محددات مختلطة
$('#header, .nav, p')

// مثال: إخفاء جميع العناوين والفقرات
$('h1, h2, h3, p').hide();

محددات التسلسل الهرمي

محدد النسل (مسافة)

اختر العناصر داخل عناصر أخرى:

// اختيار جميع الفقرات داخل divs
$('div p')

// اختيار جميع الروابط داخل التنقل
$('#nav a')

// اختيار جميع عناصر القائمة داخل العناصر بفئة "menu"
$('.menu li')

مثال HTML:

<div id="container">
    <p>هذه الفقرة سيتم اختيارها</p>
    <section>
        <p>وهذه أيضاً (على أي مستوى عمق)</p>
    </section>
</div>

<script>
    // يختار كلا الفقرتين
    $('#container p').css('color', 'blue');
</script>

محدد الطفل (>)

اختر الأطفال المباشرين فقط:

// اختيار فقط الفقرات الأطفال المباشرة لـ divs
$('div > p')

// اختيار عناصر القائمة المباشرة فقط
$('#menu > li')

مثال HTML:

<div id="container">
    <p>طفل مباشر - سيتم اختياره</p>
    <section>
        <p>حفيد - لن يتم اختياره</p>
    </section>
</div>

<script>
    // يختار فقط الفقرة الطفل المباشر
    $('#container > p').css('color', 'blue');
</script>

💡 الفرق:

النسل (مسافة): يختار على أي مستوى عمق
الطفل (>): يختار فقط الأطفال المباشرين

محددات الخاصية

اختر العناصر بناءً على خصائصها:

// عناصر بخاصية معينة
$('[href]')              // جميع العناصر بخاصية href
$('[data-id]')           // جميع العناصر بخاصية data-id

// الخاصية تساوي قيمة معينة
$('[type="text"]')       // جميع مدخلات النص
$('[class="button"]')    // عناصر بفئة "button" بالضبط

// الخاصية تحتوي على قيمة
$('[href*="google"]')    // روابط تحتوي على "google"
$('[class*="btn"]')      // عناصر بـ "btn" في أي مكان في الفئة

// الخاصية تبدأ بقيمة
$('[href^="https"]')     // روابط تبدأ بـ "https"
$('[id^="user"]')        // معرفات تبدأ بـ "user"

// الخاصية تنتهي بقيمة
$('[href$=".pdf"]')      // روابط تنتهي بـ .pdf
$('[src$=".jpg"]')       // صور تنتهي بـ .jpg

أمثلة عملية

// فتح جميع الروابط الخارجية في علامة تبويب جديدة
$('a[href^="http"]').attr('target', '_blank');

// تنسيق جميع روابط البريد الإلكتروني
$('a[href^="mailto:"]').css('color', 'green');

// العثور على جميع المدخلات المطلوبة
$('input[required]').css('border', '2px solid red');

// اختيار جميع خصائص البيانات
$('[data-toggle="modal"]').click(function() {
    // معالجة فتح النافذة المنبثقة
});

محددات التصفية

:first و :last

// الفقرة الأولى
$('p:first')

// عنصر القائمة الأخير
$('li:last')

// مثال: تسليط الضوء على العناصر الأولى والأخيرة
$('li:first').css('background', 'lightgreen');
$('li:last').css('background', 'lightblue');

:even و :odd

// العناصر ذات الترقيم الزوجي (0، 2، 4...)
$('tr:even')

// العناصر ذات الترقيم الفردي (1، 3، 5...)
$('tr:odd')

// مثال: تلوين جدول بخطوط
$('tr:even').css('background', '#f0f0f0');
$('tr:odd').css('background', '#ffffff');

📝 ملاحظة: jQuery تستخدم فهرسة بدءاً من الصفر، لذا :even يختار العناصر الأولى والثالثة والخامسة (الفهارس 0، 2، 4).

:eq(), :lt(), :gt()

// عنصر في فهرس محدد
$('li:eq(2)')           // عنصر القائمة الثالث (الفهرس 2)

// عناصر بفهرس أقل من
$('li:lt(3)')           // أول 3 عناصر قائمة (الفهارس 0، 1، 2)

// عناصر بفهرس أكبر من
$('li:gt(2)')           // جميع العناصر بعد الثالث (الفهارس 3+)

// مثال: اختيار نطاق محدد
$('li:gt(1):lt(4)')     // العناصر 2، 3، 4 (الفهارس 2، 3، 4)

نصائح أداء المحدد

💡 أفضل ممارسات الأداء:

محددات المعرف هي الأسرع - استخدمها عندما يكون ذلك ممكناً: $('#myId')
كن محدداً - $('div.menu') أسرع من $('.menu')
احفظ المحددات - احفظ في متغيرات إذا استخدمت عدة مرات

❌ سيء (يختار عدة مرات):

$('#menu').addClass('active');
$('#menu').show();
$('#menu').fadeIn();

✅ جيد (حفظ المحدد):

var $menu = $('#menu');
$menu.addClass('active');
$menu.show();
$menu.fadeIn();

// أو أفضل مع التسلسل:
var $menu = $('#menu')
    .addClass('active')
    .show()
    .fadeIn();

🎯 تمرين عملي:

أنشئ صفحة HTML تحتوي على:

قائمة من 5 عناصر بفئة "item"
العنصر الثالث يجب أن يكون له معرف "special"
أضف أزراراً لـ:
1. تسليط الضوء على جميع العناصر الزوجية
2. إخفاء العنصر الأول
3. تغيير نص #special
4. إضافة حدود للعنصر الأخير

💡 الحل

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(function() {
            $('#btn1').click(function() {
                $('.item:even').css('background', 'yellow');
            });

            $('#btn2').click(function() {
                $('.item:first').hide();
            });

            $('#btn3').click(function() {
                $('#special').text('أنا مميز!');
            });

            $('#btn4').click(function() {
                $('.item:last').css('border', '3px solid red');
            });
        });
    </script>
</head>
<body>
    <ul>
        <li class="item">عنصر 1</li>
        <li class="item">عنصر 2</li>
        <li class="item" id="special">عنصر 3</li>
        <li class="item">عنصر 4</li>
        <li class="item">عنصر 5</li>
    </ul>

    <button id="btn1">تسليط ضوء زوجي</button>
    <button id="btn2">إخفاء الأول</button>
    <button id="btn3">تغيير المميز</button>
    <button id="btn4">حدود الأخير</button>
</body>
</html>

الملخص

في هذا الدرس، تعلمت:

المحددات الأساسية: العنصر، المعرف (#)، والفئة (.)
المحدد العام (*) يختار جميع العناصر
محددات متعددة باستخدام الفاصلة
محددات التسلسل الهرمي: النسل (مسافة) والطفل (>)
محددات الخاصية للعثور على العناصر بالخصائص
محددات التصفية: :first، :last، :even، :odd، :eq()
نصائح الأداء للاختيار الفعال

في الدرس التالي، سنستكشف محددات أكثر تقدماً وطرق التصفية!