يصبح إنشاء تطبيق يستند إلى Ajax أمرًا بسيطًا وسريعًا باستخدام jQuery.
تم إنشاء jQuery في الأصل بواسطة John Resig في أوائل عام 2006. تتم صيانة وصيانة مشروع jQuery حاليًا بواسطة مجموعة موزعة من المطورين كمشروع مفتوح المصدر.
يمكنك توفير الكثير من الوقت والجهد مع jQuery. لذا أضف هذا الموقع إلى مفضلاتك واستمر في القراءة
هناك العديد من الأشياء التي يمكنك القيام بها باستخدام jQuery.
لا تنتهي القائمة عند هذا الحد ، فهناك العديد من الأشياء الرائعة الأخرى التي يمكنك القيام بها باستخدام jQuery.
هناك العديد من المزايا التي تجعل المرء يختار استخدام jQuery:
للبدء ، دعنا أولاً ننزل نسخة من jQuery ثم ندرجها في مشروعنا. يتوفر إصداران من jQuery للتنزيل: لوحة e غير مضغوط .
الملف غير المضغوط هو الأنسب للتطوير أو التصحيح ؛ بينما ، يوصى بالملف المصغر والمضغوط للإنتاج لأنه يحفظ النطاق الترددي ويحسن الأداء بسبب حجم الملف الأصغر.
يمكننا تنزيل jQuery من هنا: https://jquery.com/download/
بمجرد تنزيل ملف jQuery ، يمكنك أن ترى أنه يحتوي على امتداد js ، أي أنه ملف JavaScript. في الواقع ، JQuery ليست سوى مكتبة JavaScript ، لذا يمكنك تضمين ملف jQuery في مستند HTML مع العنصر تمامًا مثلما تقوم بتضمين ملفات JavaScript عادية.
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>تذكر دائمًا تضمين ملف jQuery قبل البرامج النصية المخصصة ؛ خلاف ذلك ، لن تكون واجهات برمجة تطبيقات jQuery متاحة عندما يحاول كود jQuery الوصول إليها.
كما لاحظت ، فقد تخطينا السمة في المثال السابق type="text/javascript" داخل العلامة . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiانتهى في HTML5 وفي جميع المتصفحات الحديثة.
كبديل ، يمكنك تضمين jQuery في مستندك عبر روابط CDN (شبكة توصيل المحتوى) المتاحة مجانًا ، إذا كنت تفضل تجنب تنزيل الملف.
يمكن لشبكات CDN أن تقدم ميزة أداء عن طريق تقليل وقت التحميل ، لأنها تستضيف jQuery على خوادم متعددة حول العالم ، وعندما يطلب المستخدم الملف ، سيتم تقديمه من أقرب خادم.
هذا أيضًا له ميزة أنه إذا قام زائر صفحة الويب الخاصة بك بتنزيل نسخة من jQuery من نفس CDN أثناء زيارته لمواقع أخرى ، فلن يضطروا إلى تنزيله مرة أخرى لأنه موجود بالفعل في ذاكرة التخزين المؤقت للمتصفح.
في هذه الحالة عليك أن تكتب:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>بالإضافة إلى CDN الذي يوفره مشروع jquery ، يمكنك تضمين jQuery via شراء مراجعات جوجل e مایکروسافت CDN.
بعد الاطلاع على أهداف مكتبة jQuery وكيفية تضمينها في المستند ، حان الوقت الآن لوضع jQuery موضع التنفيذ.
لنقم الآن بعملية jQuery بسيطة عن طريق تغيير لون نص الرأس من اللون السابقdefinished من الأسود إلى اللون الأخضر.
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>في الكود ، أجرينا عملية jQuery بسيطة عن طريق تغيير لون الرأس ، أي العنصر باستخدام محدد عنصر jQuery وطريقة css () عندما يكون المستند جاهزًا ، والمعروف باسم حدث جاهز المستند.
عادةً ما يبدأ بيان jQuery بعلامة الدولار ( $) وتنتهي بفاصلة منقوطة ( ;).
في jQuery ، علامة الدولار ( $) هو مجرد اسم مستعار لـ jQuery. ضع في اعتبارك نموذج التعليمات البرمجية التالي الذي يوضح أبسط عبارة jQuery.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>يعرض المثال ببساطة رسالة تحذير "Hello I'm a JQuery sign"للمستخدم. دعنا نرى بعض الميزات:
<script>: jQuery هي مجرد مكتبة JavaScript ، ويمكن وضع كود jQuery داخل العنصر <script>، أو يمكنك وضعه في ملف جافا سكريبت خارجي ؛$(document).ready(handler)؛ يُعرف بحدث جاهز. أين هي handler إنها وظيفة يتم تمريرها إلى الطريقة المراد تنفيذها بمجرد أن يصبح المستند جاهزًا ، أي عندما يتم إنشاء التسلسل الهرمي لـ DOM بالكامل.طريقة jQuery ready() يتم استخدامه عادة مع وظيفة مجهولة. لذلك ، يمكن أيضًا كتابة المثال أعلاه بترميز مختصر مثل هذا:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>داخل الوظيفة ، يمكنك كتابة جمل jQuery لتنفيذ أي إجراء يتبع بناء الجملة الأساسي ، مثل:
$(selector).action();حمامة، $(selector) يقوم بشكل أساسي بتحديد عناصر HTML من شجرة DOM بحيث يمكن معالجتها و action() تطبيق بعض الإجراءات على العناصر المحددة ، مثل تغيير قيمة خاصية CSS ، أو ضبط محتوى العنصر ، إلخ.
الآن دعنا نلقي نظرة على مثال آخر يحدد نص الفقرة:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>يشير مثال jQuery إلى المحدِّد p، وهذا يحدد كل الفقرات ، ثم الطريقة text() اضبط محتوى نص الفقرة بعلامة "Hello World!".
يتم استبدال نص الفقرة في المثال السابق تلقائيًا عندما يكون المستند جاهزًا. لكن دعنا نرى كيفية القيام بذلك في حالة رغبتك في تنفيذ إجراء قبل تشغيل كود jQuery ، لاستبدال نص الفقرة.
لنفكر في مثال أخير:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>في هذا المثال ، يتم استبدال نص الفقرة فقط عند وقوع حدث نقرة على الزر "Replace Text"، وهو ما يعني ببساطة عندما ينقر المستخدم على هذا الزر.
يمكنك استخدام محدد المعرف لتحديد عنصر واحد بمعرف فريد على الصفحة.
على سبيل المثال ، سيحدد كود jQuery التالي ويميز عنصرًا بسمة ID id="markid"، عندما يكون المستند جاهزًا.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>يمكن استخدام محدد الفئة لتحديد عناصر بفئة معينة.
على سبيل المثال ، سيحدد كود jQuery التالي ويبرز العناصر ذات السمة class class="markclass"، عندما يكون المستند جاهزًا.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>يمكن استخدام محدد العنصر لتحديد العناصر حسب اسم العنصر.
على سبيل المثال ، سيحدد كود jQuery التالي ويبرز كل الفقرة ، أي العناصر "<p>" من المستند عندما يكون جاهزًا.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>يمكنك استخدام محدد السمة لتحديد عنصر بناءً على إحدى سمات HTML الخاصة به ، مثل سمة الارتباط targetأو سمة الإدخال type، الخ.
على سبيل المثال ، سيحدد كود jQuery التالي ويبرز كل مدخلات النص ، مثل العناصر "<input>" مع type="text"، عندما يكون المستند جاهزًا.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>يمكنك أيضًا دمج محددات CSS لجعل اختيارك أكثر دقة.
على سبيل المثال ، يمكنك دمج محدد الفئة مع محدد العنصر للعثور على عناصر في مستند لها نوع وفئة معينة.
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>بالإضافة إلى المحددات definiti ، يوفر jQuery محدده المخصص لزيادة تحسين قدرات اختيار العناصر على الصفحة.
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>غالبًا ما يتم تشغيل الأحداث من خلال تفاعل المستخدم مع صفحة الويب ، على سبيل المثال عند النقر فوق ارتباط أو زر ، أو إدخال نص في مربع الإدخال أو منطقة النص ، أو التحديد في مربع التحديد ، أو الضغط على مفتاح على لوحة المفاتيح ، أو تحريك مؤشر الماوس ، إلخ. في بعض الحالات ، يمكن للمتصفح نفسه تشغيل أحداث ، مثل تحميل الصفحة وتنزيل الأحداث.
يحسن jQuery الآليات الأساسية لمعالجة الأحداث من خلال تقديم طرق الأحداث لمعظم أحداث المستعرض الأصلي ، وبعض هذه الطرق كذلك ready(), click(), keypress(), focus(), blur(), change()، الخ.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>بشكل عام ، يمكن تصنيف الأحداث إلى أربع مجموعات رئيسية:
يتم تشغيل حدث الماوس عندما ينقر المستخدم على عنصر ، أو يحرك مؤشر الماوس ، وما إلى ذلك.
فيما يلي بعض طرق jQuery شائعة الاستخدام للتعامل مع أحداث الماوس.
click()الطريقة click() إرفاق وظيفة معالج الحدث بالعناصر المحددة للحدث "click". يتم تنفيذ الوظيفة المرتبطة عندما ينقر المستخدم على هذا العنصر. سيخفي المثال التالي العناصر <p> على صفحة عند النقر عليها.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()الطريقة dblclick() إرفاق وظيفة معالج الحدث بالعناصر المحددة للحدث "dblclick". يتم تنفيذ الوظيفة المرتبطة عندما ينقر المستخدم نقرًا مزدوجًا فوق هذا العنصر. سيخفي المثال التالي العناصر <p> عند النقر المزدوج عليها.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()الطريقة hover() قم بإرفاق وظيفة أو اثنتين من وظائف معالج الأحداث بالعناصر المحددة التي يتم تنفيذها عندما يتحرك مؤشر الماوس داخل وخارج العناصر. تعمل الوظيفة الأولى عندما يضع المستخدم مؤشر الماوس فوق عنصر ، بينما تعمل الوظيفة الثانية عندما يزيل المستخدم مؤشر الماوس من هذا العنصر.
المثال التالي سوف يبرز العناصر <p> عند وضع المؤشر عليه ، ستتم إزالة التمييز عند إزالة المؤشر.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()الطريقة mouseenter() إرفاق وظيفة معالج الحدث بالعناصر المحددة والتي يتم تنفيذها عندما يدخل الماوس عنصرًا. سيضيف المثال التالي تمييز الفصل إلى العنصر <p> عندما تضع المؤشر فوقه.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()الطريقة mouseleave() إرفاق وظيفة معالج الحدث بالعناصر المحددة التي يتم تشغيلها عندما يترك الماوس عنصرًا. المثال التالي سيزيل تمييز الفئة من العنصر <p> عند إزالة المؤشر منه.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>يتم رفع حدث لوحة المفاتيح عندما يقوم المستخدم بالضغط أو تحرير مفتاح على لوحة المفاتيح. لنلقِ نظرة على بعض طرق jQuery الشائعة الاستخدام للتعامل مع أحداث لوحة المفاتيح.
keypress()الطريقة keypress() يرفق وظيفة معالجة الأحداث بالعناصر المحددة (عادةً عناصر التحكم في النموذج) والتي يتم تشغيلها عندما يتلقى المستعرض مدخلات لوحة المفاتيح من المستخدم. سيعرض المثال التالي رسالة عند بدء الحدث keypress وكم مرة يتم تشغيله عند الضغط على المفتاح الموجود في لوحة المفاتيح.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>حدث ضغط المفاتيح مشابه لحدث keydown ، باستثناء ذلك المُعدِّل والمفاتيح غير القابلة للطباعة مثل Shift أو Esc أو Backspace أو Delete ومفاتيح الأسهم وما إلى ذلك. يطلقون أحداث keydown ولكن ليس أحداث keydown.
keydown()الطريقة keydown() يرفق وظيفة معالجة الأحداث بالعناصر المحددة (عادةً عناصر التحكم في النموذج) التي يتم تنفيذها عندما يضغط المستخدم أولاً على مفتاح على لوحة المفاتيح. سيعرض المثال التالي رسالة عند بدء الحدث keydown وكم مرة يتم تشغيله عند الضغط على المفتاح الموجود في لوحة المفاتيح.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()الطريقة keyup() إرفاق وظيفة معالجة الحدث بالعناصر المحددة (عادةً عناصر التحكم في النموذج) التي يتم تنفيذها عندما يقوم المستخدم بتحرير مفتاح على لوحة المفاتيح. سيعرض المثال التالي رسالة عند بدء الحدث keyup وعدد المرات التي يتم تشغيلها عند الضغط على مفتاح على لوحة المفاتيح وتحريره.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>يتم تشغيل حدث النموذج عندما يتلقى عنصر تحكم النموذج التركيز أو يفقده ، أو عندما يغير المستخدم قيمة عنصر تحكم النموذج ، مثل كتابة نص في إدخال نص ، وتحديد خيار في مربع تحديد ، وما إلى ذلك. فيما يلي بعض طرق jQuery شائعة الاستخدام للتعامل مع أحداث النموذج.
change()الطريقة change() إرفاق وظيفة معالج الحدث بالعناصر <input> ويتم تنفيذه عندما تتغير قيمته. سيعرض المثال التالي رسالة تحذير عند تحديد خيار في مربع الاختيار المنسدل.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>بالنسبة لمربعات النقر ومربعات الاختيار وأزرار الاختيار ، يتم تشغيل الحدث فورًا عندما يقوم المستخدم بتحديد الماوس ، ولكن لإدخال النص ومنطقة النص ، يتم تشغيل الحدث بعد أن يفقد العنصر التركيز.
focus()الطريقة focus() يرفق وظيفة معالج الحدث بالعناصر المحددة (عادةً عناصر التحكم وروابط النموذج) التي يتم تنفيذها عند التركيز عليها. سيعرض المثال التالي رسالة عندما يتلقى إدخال النص التركيز.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()الطريقة blur() إرفاق وظيفة معالج الحدث لتشكيل عناصر مثل <input>, <textarea>, <select> الذي يتم تنفيذه عندما يفقد التركيز. سيعرض المثال التالي رسالة عندما يفقد إدخال النص التركيز.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()الطريقة submit() إرفاق وظيفة معالج الحدث بالعناصر <form> يتم تشغيله عندما يحاول المستخدم إرسال نموذج. سيعرض المثال التالي رسالة بناءً على القيمة التي تم إدخالها عند محاولة إرسال النموذج.
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>يتم تشغيل الأحداث أيضًا في حالة تكون فيها صفحة DOM (نموذج كائن المستند) جاهزة أو عندما يقوم المستخدم بتغيير حجم نافذة المتصفح أو تمريرها ، وما إلى ذلك. فيما يلي بعض طرق jQuery شائعة الاستخدام للتعامل مع هذا النوع من الأحداث.
ready()الطريقة ready() يحدد وظيفة ليتم تنفيذها عند تحميل DOM بالكامل.
سيحل المثال التالي محل نص الفقرة بمجرد أن يتم إنشاء التسلسل الهرمي لـ DOM بالكامل وجاهزًا للتلاعب به.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()الطريقة resize() إرفاق وظيفة معالج الحدث بعنصر النافذة الذي يتم تشغيله عند تغيير حجم نافذة المتصفح.
سيُظهر المثال التالي العرض والارتفاع الحالي لنافذة المتصفح عندما تحاول تغيير حجمها عن طريق سحب أركانها.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()الطريقة scroll() قم بإرفاق وظيفة معالج الحدث بالنافذة أو بملف iframe والعناصر القابلة للتمرير التي يتم تشغيلها كلما تغير موضع التمرير الخاص بالعنصر.
سيعرض المثال التالي رسالة عند التمرير في نافذة المتصفح.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
أعلنت صحيفة فاينانشيال تايمز يوم الاثنين الماضي عن صفقة مع OpenAI. "فاينانشيال تايمز" ترخص صحافتها ذات المستوى العالمي...
يدفع الملايين من الأشخاص مقابل خدمات البث، ويدفعون رسوم الاشتراك الشهرية. من الشائع أنك…
سوف تستمر شركة Coveware by Veeam في تقديم خدمات الاستجابة لحوادث الابتزاز السيبراني. ستوفر Coveware إمكانات الطب الشرعي والمعالجة...
تُحدث الصيانة التنبؤية ثورة في قطاع النفط والغاز، من خلال اتباع نهج مبتكر واستباقي لإدارة المحطات.