دروس jQuery

المنتقي و الأحداث و التأثيرات و أستدعاء الوظائف في ال jQuery | جي قيوري

سجين القدر
اخر تحديث :

المنتقى



يسمح لك منتقى jQuery بإختيار و تعديل عناصر HTML منفصلة أو مجتمعة .



منتقى jQuery


تحدثنا في الدرس السابق عن بعض الأمثلة عن كيفية اختيار عناصر HTML مختلفة .

من المهم تعلم كيف تقوم jQuery باختيار العنصر المحدد الذي تود تطبيق الـتأثيرات عليه .

يسمح لك منتقى jQuery باختيار عناصر HTML مجتمعة أو منفصلة من خلال اسم العنصر أو اللاحقة الخاصة به أو من خلال المحتوى .

ملاحظة :

مصطلح HTML DOM يسمح لك بالتعديل على عناصر DOM كعقد مجتمعة أو منفصلة .



منتقى العناصر Element Selector


تستخدم jQuery منتقى CSS لاختيار عناصر HTML .

  • $("p") : تستخدم لاختيار جميع عناصر <p> .

  • $("p.intro") : تستخدم لاختيار جميع عناصر <p> و التي تحتوي على class="intro" .

  • $("p#demo") : تستخدم لاختيار جميع عناصر <p> و التي تحتوي على id="intro" .





منتقى اللواحق Attribute Selectors


تستخدم jQuery تعابير Xpath لاختيار العناصر مع اللواحق الخاصة بهم .

  • $("[href]") : تستخدم لاختيار جميع العناصر التي تحتوي على اللاحقة href .

  • $("[href='#']") : تستخدم لاختيار جميع العناصر التي تحتوي على القيمة "#" المرفقة مع اللاحقة href .

  • $("[href!='#']") : تستخدم لاختيار جميع العناصر التي لا تحتوي على القيمة "#" المرفقة مع اللاحقة href .

  • $("[href$='.jpg']") : تستخدم لاختيار جميع العناصر التي تحتوي على اللاحقة href والتي تنتهي قيمتها .jpg .





منتقى CSS


يستخدم منتقى CSS لتغيير خواص CSS لعناصر HTML .

يقوم المثال التالي بتغيير لون الخلفية لجميع عناصر p إلى اللون الأصفر :
$("p").css("background-color","yellow");




أمثلة أخرى





















































أمثلة أخرى عن منتقى jQuery
التركيبةالشرح
$(this)عنصر HTML الحالي
$("p")جميع عناصر <p>
$("p.intro")جميع عناصر <p> و التي تحتوي على class="intro"
$("p#intro")جميع عناصر <p> و التي تحتوي على id="intro"
$("p#intro:first")أول عنصر <p> و الذي يحتوي على id="intro"
$(".intro")جميع العناصر التي تحتوي على class="intro"
$("#intro")أول عنصر يحتوي على id="intro"
$("ul li:first")أول عنصر <li> للقائمة <ul>
$("ul li:first-child")أول عنصر <li> لجميع القائمة <ul>
$("[href$='.jpg']")جميع العناصر التي تحتوي على اللاحقة href والتي تنتهي قيمتها ".jpg"
$("div#intro .head")جميع العناصر التي تحتوي على class="head" داخل العنصر <div> مع id="intro"


أحداث jQuery



تعتبر لغة jQuery سلسلة من الأحداث .



وظائف الأحداث


تعتبر طرائق أحداث jQuery صلب الأكواد الوظيفية functions في jQuery .

الطرائق البديلة هي أحداث يتم استدعائها عند حدوث شيء ما .

من الشائع والمهم وضع أكواد jQuery ضمن الطرائق في قسم <head> .

مثال
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
}); });

</script>
</head>
<body>

<h2>هذا عنوان</h2>
<p>هذا موضوع</p>
<p> هذا موضوع آخر</p>
<button>اضغط هنا</button>

</body>
</html>




في المثال السابق تم استدعاء function عند الضغط على الحدث الذي تم دمجه مع الزر :
$("button").click(function() {..الكود هنا ... } )

تخفي الطريقة جميع الفقرات <p> في الصفحة :
$("p").hide();






وضع functions في ملف منفصل


ان كان موقعك يحتوي على الكثير من الصفحات وتريد أن تكون أكواد و وظائف jQuery سهلة القراءة والتعديل عندها يمكنك وضعها في ملف منفصل امتداده .js

عندما قمنا بشرح أمثلة jQuery كان الكود موضوع ضمن قسم <head> و لكن من الأفضل وضع الأكواد في ملف منفصل ووضعه في قسم <head> ثم طلب الملف من خلال اللاحقة src :
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>




الخلافات حول الاسم


تستخدم jQuery إشارة $ كإختصار لاستخدام jQuery .

لكن بعض مكتبات الجافاسكربت تستخدم أيضاً إشارة $ لضبط functions لديهم .

تحدد طريقة noConflict() الاسم الافتراضي ( مثل jq ) عوضاً عن استخدام اشارة $ .



أحداث jQuery





























بعض الأمثلة في استخدام الأحداث في jQuery
طريقة الحدثالشرح
$(document).ready(function)يستخدم هذا الحدث عند انتهاء الصفحة من التحميل اي تصبح جاهزة ready .
$(selector).click(function)يستخدم عند الضغط على زر يقوم باستدعاء الحدث على العنصر المختار .
$(selector).dblclick(function)يستخدم عند الضغط بشكل مزدوج على زر يقوم باستدعاء الحدث على العنصر المختار .
$(selector).focus(function)يستخدم عند التركيز على حدث العنصر المختار .
$(selector).mouseover(function)يستخدم عند تمرير الماوس على العنصر المختار .


 الـتــأثيرات في jQuery



يمكن استخدام تأثيرات الإخفاء و الإظهار و التأثيرات الجانبية و التلاشي و التأثيرات المتحركة وغيرهم .



استخدام الاظهار و الاخفاء جي قيوري


باستخدام jQuery يمكنك اظهار و اخفاء عناصر HTML من خلال الطرائق hide() و show().

مثال
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

يمكن أن تأخذ كلاً من hide() و show() القيم الاختيارية مثل السرعة و الاستدعاء .

التركيبة


$(selector).hide(speed,callback)
$(selector).show(speed,callback)

تحدد قيمة السرعة speed سرعة الاظهار أو الاخفاء و التي يمكن أن تأخذ القيم التالية :
"slow" و "fast" و "normal" أو milliseconds :
$("button").click(function(){
$("p").hide(1000);
});

ان قيمة الاستدعاء callback هي اسم function الذي سيظهر بعد اكتمال الكود الوظيفي اظهار او اخفاء . ستتعلم المزيد عن callback في الدرس القادم من هذا الدورة .



التغيير jQuery


ان طريقة toggle() المستخدمة في jQuery تتحكم في تغيير الوضوح لعناصر HTML باستخدام الطرائق show() أو hide() .

أي يتم إظهار العناصر المخفية و يتم اخفاء العناصر الظاهرة .

التركيبة :


$(selector).toggle(speed,callback)

ان قيمة speed يمكن أ تكون أحد هذه القيم التالية مثل slow بطئ و fast سريع و normal طبيعي و milliseconds أي أجزاء الثانية .

مثال
$("button").click(function(){
$("p").toggle();
});



أما القيمة الاستدعاء callback هو اسم function الذي سيظهر بعد اكتمال طرائق الاظهار و الاخفاء .



slideDown, slideUp, slideToggle


تقوم طريقة slide بتغيير الارتفاع بشكل متدرج للعناصر المختارة .

ان طريقة slide تحتوي على الطرائق التالية :
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)

ان قيمة speed يمكن أ تكون أحد هذه القيم التالية مثل slow بطئ و fast سريع و normal طبيعي و milliseconds أي أجزاء الثانية .

أما القيمة الاستدعاء callback هو اسم function الذي سيظهر بعد اكتمال طرائق الاظهار و الاخفاء .

مثال slideDown()
$(".flip").click(function(){
$(".panel").slideDown();
});

مثال slideUp()

$(".flip").click(function(){
$(".panel").slideUp()
})



مثال slideToggle()
$(".flip").click(function(){
$(".panel").slideToggle();
});




fadeIn, fadeOut, fadeTo


تقوم طريقة fade بتغيير التعبئة بشكل متدرج للعناصر المختارة .

ان طريقة fade تحتوي على الطرائق التالية :
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

ان قيمة speed يمكن أ تكون أحد هذه القيم التالية مثل slow بطئ و fast سريع و normal طبيعي و milliseconds أي أجزاء الثانية .

ان القيمة المدخلة في الطريقة fadeTo() تسمح بتلاشي التعبئة المقدمة للعنصر .

أما القيمة الاستدعاء callback هو اسم function الذي سيظهر بعد اكتمال طرائق الاظهار و الاخفاء .

مثال fadeTo()
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

مثال fadeOut()
$("button").click(function(){
$("div").fadeOut(4000);
});




الرسوم المتحركة Animations


ان تركيبة jQuery في إنشاء أكواد رسوم متحركة هي :
$(selector).animate({params},[duration],[easing],[callback])

القيمة المدخلة هي params والتي تشرح خاصيات CSS التي سيتم تحريكها . يمكن تحريك العديد من الخاصيات في نفس الوقت :
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

القيمة الثانية هي duration والتي تحدد سرعة الرسوم المتحركة . و القيم الممكنة هي "fast" و "slow" و "normal" و milliseconds .

المثال 1 :
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({height:300},"slow");
$("div").animate({width:300},"slow");
$("div").animate({height:100},"slow");
$("div").animate({width:100},"slow");
});
});
</script>

المثال 2 :
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:"100px"},"slow");
$("div").animate({fontSize:"3em"},"slow");
});
});

</script>



ملاحظة :

ان عناصر HTML هي ثابتة ولايمكن تحريكها . ولجعل العناصر متحركة يمكن ضبط الخاصية في CSS الى ثابتة fixed أو relative أو مطلق absolute .



تأثيرات jQuery

















































هذه بعض الأمثلة التي تأثر على وظائف jQuery
الوظيفةالشرح
$(selector).hide()اخفاء العنصر المحدد
$(selector).show()اظهار العنصر المحدد
$(selector).toggle()التغيير بين الاظهار و الاخفاء للعنصر المحدد
$(selector).slideDown()إظهار الشرائح للعناصر المحددة
$(selector).slideUp()إخفاء الشرائح للعناصر المحددة
$(selector).slideToggle()التغيير بين إظهار و إخفاء الشرائح للعناصر المحددة
$(selector).fadeIn()تلاشي العناصر المحددة
$(selector).fadeOut()إظهار العناصر المحددة
$(selector).fadeTo()إظهار العناصر المحددة من خلال خاصية اللاشفافية
$(selector).animate()تشغيل حركة معينة للعناصر المحددة




جي قيوري - استدعاء الوظائف



يتم إظهار خاصية استدعاء الوظائف callback function بعد انتهاء الكود المتحرك animations.



 استدعاء الوظائف jQuery


يتم إظهار حالات وأكواد الجافاسكربت سطراً بسطر و لكن مع animations يمكن تشغيل السطر الثاني من الكود وعلى الرغم من أن animations لم ينتهي بعد .

لتجنب ذلك يمكنك انشاء callback function .

يتم استدعاء الكود الوظيفي callback function بعد انتهاء التأثر الحركي animation الحالي .



 مثال استدعاء الوظائف


التركيبة


$(selector).hide(speed,callback)

ان كود الاستدعاء هو عبارة عن كود وظيفي يتم استدعائه بعد انتهاء تأثير الاخفاء .

مثال
$("p").hide(1000,function(){
alert("تم اخفاء الفقرة");
});


وبدون استخدام كود الاستدعاء سيتم عرض الصندوق قبل انتهاء تأثير الاخفاء .

مثال
$("p").hide(1000);
alert("تم اخفاء الفقرة");


تعديل المقال
الأقسام

مقالات قد تهمك

تعليقات