jQuery مقابل JavaScript العادي

var element = $('#myId');

var element = document.getElementById('myId');
// أو الطريقة الحديثة:
var element = document.querySelector('#myId');

var elements = $('.myClass');

var elements = document.getElementsByClassName('myClass');
// أو الطريقة الحديثة:
var elements = document.querySelectorAll('.myClass');

var paragraphs = $('p');

var paragraphs = document.getElementsByTagName('p');
// أو الطريقة الحديثة:
var paragraphs = document.querySelectorAll('p');

var items = $('#menu li.active');

var items = document.querySelectorAll('#menu li.active');

// الحصول على النص
var text = $('#myDiv').text();

// تعيين النص
$('#myDiv').text('نص جديد');

var element = document.querySelector('#myDiv');

// الحصول على النص
var text = element.textContent;

// تعيين النص
element.textContent = 'نص جديد';

// الحصول على HTML
var html = $('#myDiv').html();

// تعيين HTML
$('#myDiv').html('<strong>نص عريض</strong>');

var element = document.querySelector('#myDiv');

// الحصول على HTML
var html = element.innerHTML;

// تعيين HTML
element.innerHTML = '<strong>نص عريض</strong>';

// الحصول على القيمة
var value = $('#username').val();

// تعيين القيمة
$('#username').val('أحمد محمد');

var input = document.querySelector('#username');

// الحصول على القيمة
var value = input.value;

// تعيين القيمة
input.value = 'أحمد محمد';

$('#myDiv').css('color', 'red');

document.querySelector('#myDiv').style.color = 'red';

$('#myDiv').css({
    color: 'red',
    fontSize: '20px',
    backgroundColor: 'yellow'
});

var element = document.querySelector('#myDiv');
element.style.color = 'red';
element.style.fontSize = '20px';
element.style.backgroundColor = 'yellow';

// أو باستخدام Object.assign:
Object.assign(element.style, {
    color: 'red',
    fontSize: '20px',
    backgroundColor: 'yellow'
});

// إضافة فئة
$('#myDiv').addClass('active');

// إزالة فئة
$('#myDiv').removeClass('active');

// تبديل فئة
$('#myDiv').toggleClass('active');

// التحقق من وجود فئة
if ($('#myDiv').hasClass('active')) {
    // افعل شيئاً
}

var element = document.querySelector('#myDiv');

// إضافة فئة
element.classList.add('active');

// إزالة فئة
element.classList.remove('active');

// تبديل فئة
element.classList.toggle('active');

// التحقق من وجود فئة
if (element.classList.contains('active')) {
    // افعل شيئاً
}

$('#myButton').click(function() {
    alert('تم النقر!');
});

// أو باستخدام on()
$('#myButton').on('click', function() {
    alert('تم النقر!');
});

document.querySelector('#myButton').addEventListener('click', function() {
    alert('تم النقر!');
});

$('#myInput').on('focus blur change', function() {
    console.log('تم إطلاق الحدث');
});

var input = document.querySelector('#myInput');
['focus', 'blur', 'change'].forEach(function(event) {
    input.addEventListener(event, function() {
        console.log('تم إطلاق الحدث');
    });
});

// معالجة النقرات على العناصر المضافة ديناميكياً
$('#list').on('click', 'li', function() {
    console.log('تم النقر على عنصر القائمة');
});

document.querySelector('#list').addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
        console.log('تم النقر على عنصر القائمة');
    }
});

$(function() {
    // DOM جاهز
});

// أو
$(document).ready(function() {
    // DOM جاهز
});

document.addEventListener('DOMContentLoaded', function() {
    // DOM جاهز
});

// أو نهج حديث أبسط (إذا كان السكريبت في نهاية body):
// اكتب الكود مباشرة - لا حاجة للانتظار

$('#myDiv').show();
$('#myDiv').hide();
$('#myDiv').toggle();

var element = document.querySelector('#myDiv');

// إظهار
element.style.display = 'block';

// إخفاء
element.style.display = 'none';

// تبديل
element.style.display = element.style.display === 'none' ? 'block' : 'none';

$.ajax({
    url: '/api/users',
    method: 'GET',
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.error(error);
    }
});

// أو اختصار
$.get('/api/users', function(data) {
    console.log(data);
});

fetch('/api/users')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

// أو مع async/await (حديث)
async function getUsers() {
    try {
        const response = await fetch('/api/users');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

$('li').each(function(index, element) {
    console.log(index, $(element).text());
});

var items = document.querySelectorAll('li');
items.forEach(function(element, index) {
    console.log(index, element.textContent);
});

// أو دالة سهم حديثة
items.forEach((element, index) => {
    console.log(index, element.textContent);
});

var newDiv = $('<div>', {
    class: 'my-class',
    text: 'مرحبا بالعالم'
});
$('body').append(newDiv);

var newDiv = document.createElement('div');
newDiv.className = 'my-class';
newDiv.textContent = 'مرحبا بالعالم';
document.body.appendChild(newDiv);

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(function() {
            $('#addBtn').click(function() {
                var text = $('#taskInput').val();
                if (text) {
                    $('#taskList').append(
                        $('<li>').text(text)
                    );
                    $('#taskInput').val('');
                }
            });

            $('#taskList').on('click', 'li', function() {
                $(this).toggleClass('completed');
            });
        });
    </script>
    <style>
        .completed { text-decoration: line-through; }
    </style>
</head>
<body>
    <input id="taskInput" placeholder="أدخل مهمة">
    <button id="addBtn">إضافة</button>
    <ul id="taskList"></ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var addBtn = document.querySelector('#addBtn');
            var taskInput = document.querySelector('#taskInput');
            var taskList = document.querySelector('#taskList');

            addBtn.addEventListener('click', function() {
                var text = taskInput.value;
                if (text) {
                    var li = document.createElement('li');
                    li.textContent = text;
                    taskList.appendChild(li);
                    taskInput.value = '';
                }
            });

            taskList.addEventListener('click', function(e) {
                if (e.target.tagName === 'LI') {
                    e.target.classList.toggle('completed');
                }
            });
        });
    </script>
    <style>
        .completed { text-decoration: line-through; }
    </style>
</head>
<body>
    <input id="taskInput" placeholder="أدخل مهمة">
    <button id="addBtn">إضافة</button>
    <ul id="taskList"></ul>
</body>
</html>

jQuery 3.7.1 (مصغر): ~87 KB
JavaScript العادي: 0 KB (مدمج في المتصفح)

document.querySelectorAll('div'):  ~1-2ms
$('div'):                          ~3-5ms