تثبيت JQuery مرحبًا بكم في دورة نوليدج سيتي في JavaScript للمستوى المتقدم في هذا الفصل من دورتنا، سنلقي نظرة على jQuery دعنا نتحدث قليلاً أولاً عن سبب رغبتك للنظر في استخدام jQuery لأن هناك الكثير من مكتبات JavaScript الموجودة هناك ما الجيد في هذا؟ حسنًا، أولاً وقبل كل شيء، إنها تحظى بشعبية كبيرة قرأت إحصائية ذات يوم تقول 96٪ من مواقع الويب التي تستخدم JavaScript تستخدم jQuery وهو ما يزيد عن 75٪ من جميع المواقع في جميع الأنحاء لذا، فهي تحظى بشعبية كبيرة يجب أن يكون هناك سبب لذلك ونعم، هناك أسباب يمكنك فعل المزيد بكود أو تعليمات برمجية أقل بادئ ذي بدء، معالجة نموذج كائن المستند DOM باستخدام JavaScript العادي، لنفترض على سبيل المثال أنني أردت تحديد جميع الفقرات في DOM سأفعل ذلك مع document.querySelectorAll على سبيل المثال مع jQuery هذا كل ما علي فعله وكلما قل الكود الذي يمكننا كتابته كلما زاد عدد الكود الذي نطرحه ونصبح أكثر إنتاجية ونحن بالتأكيد نريد ذلك لذلك يتفوق jQuery في معالجة DOM كما أنه يجعل استدعاءات AJAX أسهل بشكل كبير مما وفي علامة اقتباسات، تفعله جافا سكريبت العادية ولديها مكتبة تأثيرات كبيرة نوعًا ما التي تستفيد من تأثيرات CSS والشيء المهم هو لأننا لا نريد أن نقلق بشأن هذا أيضًا يقوم بتلخيص المشكلات عبر المتصفحات jQuery هي مجرد مكتبة إنها مكتبة واسعة جدًا كما سترى بمجرد تثبيتها في هذا الدرس لكن أحد الأشياء التي تفعلها هي أنها تلخص المشكلات عبر المتصفحات لذلك لا داعي للقلق يجب أن يعمل كود jQuery الخاص بنا بشكل متساوٍ أيضًا في أي نوع من المتصفحات دون أن يكون علينا أن نقلق بشأن معظم تفاصيل المتصفح في العالم بعد أن قلت كل ذلك نأمل أن نكون قد توصلنا إلى الحالة التي تريد فيها أن تكون مهتمًا بفعل هذا دعونا نلقي نظرة على الطرق التي يمكننا من خلالها تثبيت هذا الآن لهذه الدورة سأستخدم Visual Studio وهذا هو الاستوديو المرئي الكامل إصدار المجتمع هو بالأحرى ما لدي هنا لذلك، جميع الأدوات متوفرة هنا يمكنك تنزيل هذا مجانًا إذا لم يكن لديك الآن، أدركت أن هناك الكثير من الأماكن المختلفة التي قد ترغب في كتابة jQuery لها أو من تقنيات مختلفة تستخدمها معها لذلك سأعرض طريقتين مختلفتين هنا وبعد ذلك سنتحدث عما يتعين علينا القيام به لجعله على وجه التحديد جزءًا من التطبيق الذي أقوم بتشغيله هنا لكن أولاً وقبل كل شيء، أسهل شيء هو مجرد الذهاب والحصول عليه لذا يمكننا الانتقال إلى jquery.com يوجد وثائق هناك أمثلة جيدة جدًا حول كيفية استخدام هذا ولكن يمكنك تنزيل jQuery من هنا الإصدار الحالي اعتبارًا من وقت هذا التسجيل 3.5.1 وهو ما سأستخدمه في مشاريعي إذا كنت لا تريد تثبيته مباشرة كما هو الحال مع معظم المكتبات من أي نوع من الشعبية يمكنك أيضًا استخدام CDN بحيث تكون تقوم فقط بالربط بأي نسخة أقرب وباستخدام jQuery يقدمون لك هذه الخيارات الأربعة هناك غير المضغوط، المصغر، النحيف و النحيف مصغر بناءً على مكانك في مشروعك يمكنك استخدام أنواع مختلفة هنا عادة، نستخدم النسخة غير المضغوطة uncompressed في وقت التطوير حتى نتمكن من إجراء بعض التصحيح ثم المصغر minified في وقت الإنتاج حتى يعمل تطبيقنا بشكل أكثر سلاسة، وملفات أصغر كل هذا النوع من الاشياء إذا كنت تريد استخدام CDN ما عليك سوى النقر فوقه وهناك رابط البرنامج النصي الخاص بك لذا يمكنني نسخ ذلك هناك وكما تقول، فإن التقاطع والنزاهة cross origin, integrity موجودان هناك لفحص SRI لذا يمكنك القيام بذلك بكل تأكيد لذا إذا كنت سأفعل ذلك، فهذا كل ما يجب أن أمتلكه في أي مستند أريد أن يكون متاحًا فيه الخيارات الأخرى، إذا كنت تستخدم NPM وهو ما يمكننا القيام به من Visual Studio ما علي فعله هو فتح سطر أوامر هنا وأداة صغيرة لطيفة لدي لذلك افتح سطر الأوامر هذا امتداد يمكنك إضافته إلى Visual Studio لذلك إذا كنت لا تستخدم Visual Studio على وجه التحديد لا تقلق كثيرا بشأن هذا الجزء لكني أحب هذا كامتداد ويمكنك فقط إضافة ملحقات هنا من خلال قائمة الإضافات extensions لكن Open Command Line يعطيني إما PowerShell أو موجه أوامر Dev أو موجه الأوامر الافتراضي وبالنسبة لهذا، لا يهم حقًا لكن الشيء الجميل الذي لا ينبغي على القلق بشأنه عندما أفعل ذلك ههو أنه كما يمكنك الملاحظة، أنه يضعني هناك في المجلد الذي أريد أن أكون فيه لأن ما سأفعله هنا هو مجرد تثبيت jQuery باستخدام NPM لذلك Node Package Manager واسم الحزمة هو ببساطة مجرد jQuery ويمكنك أن ترى من ذلك يبدو أنه ليس لدينا NPM مثبتًا حسنًا، هذا سهل الإصلاح حسنا يمكنك الحصول على Node js و NPM معًا لذلك سأقوم بتثبيت هذا وسنترك ذلك يقوم بعمله ونعود في ثانية حسنًا، لقد عدنا من خلال سحر الفيديو دعونا نرى ما إذا كان NPM مثبتًا حاليًا هذا جيد، نحصل على الوثائق والتأكد من وصول jQuery إلى هناك مرة أخرى، إنها مسألة بسيطة جدًا الحزمة تسمى jQuery وهذا يجب أن يتم تثبيت كل شيء لنا لذلك، في هذا المشروع بالذات ما فعله ذلك لي هو أنه تم إنشاء مجلد وحدات العقدة node module الآن، إذا كان هذا يظهر باللون الرمادي في مشروعك أو إذا كنت لا تراها على الإطلاق إليكم كيف نحصل عليه في Visual Studio بادئ ذي بدء ، نريد التأكد من أن عرض جميع الملفات show all files يعرض جميع الملفات وسترى المجلدات والملفات هنا التي لا تعتبر في الواقع جزءًا من الحل الذي تقدمه لكنهم في الدليل لذا، إذا كان عرضك هكذا، على سبيل المثال فسنرغب في تضمينه في المشروع هناك بحيث يكون جزءًا من المشروع وهذا هو المكان الذي ستنتهي فيه جميع حزم العقدnode packages الخاصة بنا وهذا هو مكان وجود jQuery الآن، بالنسبة لهذا النوع المحدد من المشاريع أنا أقوم بتطبيق ASP.NET Core وبالنسبة لهذا النوع المحدد من المشروع من أجل تقديم الملفات الثابتة لا بد لي من إجراء تغيير واحد في ملف startup.cs لذا، مرة أخرى، إذا كنت لا تستخدم Visual Studio أو طريقة مشروع التطبيق الأساسي لإنشائه لا تقلق بشأن هذا الجزء احصل على NPM لتثبيت jQuery ولكن يمكنك القيام بذلك ثم امض قدمًا واستخدمها ولكن بالنسبة لنوع التطبيق المعين هذا نحتاج إلى هذا الاستدعاء لاستخدام ملفات ثابتة إنه مجرد شيء يحتاجه التطبيق وأنا فقط أسلك المسار الأساسي لطلبي معالجة مجلد وحدات العقدة هناك node modules بحيث يخدم jQuery من هذا الموقع بالذات الآن، عندما ينتهي بي الأمر بفعل ذلك، أعود إلى صفحتي من أجل الحصول على المرجع لا يزال مجرد مرجع نصي، إذا أمكنني كتابة مرجع والمصدر هناك هو، سنذهب من وحدات العقدة إلى أسفل node modules لذلك كان لدينا حزمة jQuery الخاصة بنا هناك ودعنا نرى، أعتقد أن هذا موجود في مجلد فرعي آخر لذلك هناك توزيع dist وسأستخدم فقط مهما كان ملف jQuery هناك لذلك سيكون jQuery.js لذلك أي من هذه الطرق جيدة ومع ذلك، فأنت تريد إدخال هذا النص هناك مهما كان ما يناسبك، فلا بأس بذلك ودعنا نختبر ونتأكد أن لدينا شيئًا بالفعل ما نسميه دائمًا هو دالة jQuery وهكذا يمكنك استخدام الكلمة الفعلية jQuery لكن ما ستراه على الأرجح، هو أن معظم الناس يستخدمون علامة الدولار لذلك يمكننا أن نفعل أيًا من هؤلاء، هذا جيد الآن هناك احتمال أن بعض المكتبات الأخرى قد تستخدم علامة الدولار كشيء مهم إذن ما الذي يمكنك فعله بعد ذلك هو في الأساس التخلي عن السيطرة على علامة الدولار إلى تلك المكتبة الأخرى إذا كانت لديك ويمكنك القيام بما يسمى وضع عدم التعارض no conflict mode على سبيل المثال، يمكنني تسمية هذا أي شيء آخر أريده jq هو المعيار إلى حد ما ثم نسمي jquery.noConflict والآن بالنسبة لبقية ما سنفعله هو أن jq يستدعي دالةQuery وبعد ذلك يمكننا أن نفعل كل ما نريد القيام به المستند جاهز document ready شيء ستجد نفسك تستخدمه إلى حد ما في تطبيقات jQuery هذا هو ما يحدث عندما يتم تحميل كل شيء لذلك، لست بحاجة إلى وضع تعارض سأستخدم ببساطة دالة jQuery هنا وما نقوم به هو النظر إلى كائن المستند وبعد ذلك يتم تشغيل كل هذا عندما يتم تحميل المستند الخاص بنا لذلك دعونا نلقي نظرة سريعة على hello world هنا ونتأكد من أن الطريقة التي اخترناها تعمل سأستمر في استخدام CDN الآن وسوف نحفظ كل شيء ويجب أن يكون لدينا صفحة لأنفسنا هل أنت مستعد ل Hello World الذي لا ينسى على الإطلاق؟ أفضل من كل الآخرين الذين رأيتهم من قبل حسنا مرحبا hello انظر، إنها تحتوي على أخطاء إملائية، إنها لا تنسى لذلك في هذا الدرس، نظرنا في مجموعة متنوعة من الطرق لتثبيت jQuery في مشروعك ترقبوا الدرس التالي سنلقي نظرة أكثر على دالة jQuery ومجموعة العناصر المغلفة وكيفية استخدام المحددات
