استعمال علامة $ لتحديد عناصر HTML بدون استعمال jquery

اولا كيف نحدد العناصر بإستخدام javascript ؟

من بين الطرق الاكثر إستعمالا في javascript لتحديد عناصر html هي querySelector و querySelectorAll و getElementById :

const btn = document.getElementById('send-btn');  //  id تحديد عنصر بإستعمال ل
const nameInput = document.querySelector('.userName');  //  class تحديد عنصر بإستعمال ل
const images = document.querySelectorAll('img') //  tag name تحديد جميع الصور الموجودة في الصفحة بإستعمال إسم العنصر

بالنسبة لمن لا يعرف ما هو jquery :

jquery هو library خاصة ب javascript كاتمكنك من التحكم بطريقة سهلة و بسيطة ب DOM: Document object Model الاصدار الاول ديال jquery كان سنة 2006, بفضل الامتيازات اللي كايقدمها حصل على شهرة كبيرة و واسعة بين المبرمجين. رغم ان الشهرة ديالو نقصات من بعد ما خرج react و angular ... إلا انه مزال كايتستعمل بزاف, و طبقا ل jquery , npm عندو اكثر من 4 ملايين تحميل في الاسبوع و 18230 package مبني عليه.

الان كيف نحدد العناصر بإستخدام jquery ؟

في jquery باش تحدد عناصر html كاتستخدم $ :

const btn = $('#send-btn');  //  id تحديد عنصر بإستعمال ل
const nameInput = $('.userName');  //  class تحديد العنصر او جميع العناصر بإستعمال ل
const images = $('img') //  tag name تحديد جميع الصور الموجودة

كيف سنفعلها بدون إستخدام jquery ؟

كيف ما قلت لكم بإمكانا نستخدمو علامة $ لتحديد العناصر بدون إستخدام jquery, و الطريقة بسيطة جدا, و هي كالتالي :

كتب هاد 2 سطورا في البداية.

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

:الان إلى بغيتي تحدد عنصر واحد:

const btn = $('#send-btn');  //  id تحديد عنصر بإستعمال ل
const nameInput = $('.userName');  //  class تحديد العنصر بإستعمال ل
const images = $('img') //  tag name تحديد العنصر بإستعمال

إلى بغيتي تحدد جميع العناصر :

const nameInput = $$('.userName');  //  class تحديد جميع العناصر بإستعمال ل
const images = $$('img') //  tag name تحديد جميع العناصر بإستعمال

هاد الطريقة سهلة بزاف و كاتوفر الجهد و الوقت بالإضافة لانك كاتقلل من ل code اللي كاتكتب.