مقدمه jQuery وأساسياتها التي تحتاج لمعرفتها لكي تقوم باستخدامها

المصدر: http://docs.jquery.com/Tutorials:How_jQuery_Works
ترجمه للكاتب: John Resig.

اساسيات jQuery

تعريف بالجى كويرى :

هى مكتبه جافا سكربت اساسيه ولازمه لإضافة تاثيرات جمالية على تصميم صفحه الويب التى تقوم بتصميمها

تابع معى لناخذ معا نظره لاكبر المواقع التى تعمل من خلال هذا المكتبه (  وعامه الجافا سكربت ككل )

• Google – Code search
• Amazon – Amazon
• IBM – IBM
• Microsoft – Visual Studio, ASP.NET MVC.
• Twitter – Social micro-blogging service and platform
• Dell, Inc. – Computer manufacturer
• Best Buy – Electronics retailer
• NBC – Official site for the NBC television network.
• EA – EA Video Games
• Match – Online Dating Site
• ESPN – ESPN
• CBS News – Official site for the CBS News programs.
• Bank of America

في البدايه قم بإضافة هذا الكود:

[html]

Demo

<a href="http://jquery.com/">jQuery</a>
<script type="text/javascript" src="jquery.js">// <![CDATA[
mce:0
// ]]></script>
<script type="text/javascript">// <![CDATA[
mce:1
// ]]></script>

[/html]

قوم بإضافه خاصيةالصوره في السكريبت تاج للإشاره الي نسختك الجديده من jquery.js
فعلي سبيل المثال :
إذا كانت jquery.jsفي نفس دليل ملف htmlيمكنك استخدام

[html] <script type="text/javascript" src="jquery.js">// <![CDATA[
mce:2
// ]]></script>
[/html]

ويمكنك تحميل نسختك من jQuery منDownloading jQuery إطلاق الكود من الملف جاهز أول شيء إن معظم المبرمجين جافا سكريبت يقومون بإضافة كودا في برنامجهم مشابه لهذا:

[html] window.onload = function(){ alert("welcome"); }
[/html]

وهذا هو الكود الذي تريد تشغيله عند بدأ الصفحه، ومع ذلك، لا يتم تشغيل شفرة JavaScript حتى يتم الانتهاء من تحميل جميع الصور (وهذا يشمل لافتة الإعلانات). و سبب استخدام window.onload في المقام الأول هو أن لا تنتهي “وثيقة”html التحميل بعد ذلك ، عند أول محاولة لتشغيل التعليمات البرمجية. ولتفادي المشاكل،وjQuery لعا جمله بسيطه تفحص الملف وتنتظر حتي يتم تفعيله، والمعروفة باسم ready event:

[html] $(document).ready(function(){
// Your code here
});
[/html]

وداخل الحدث الجاهز قم بإضافة

[html] $(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
[/html]

قم بحفظ الملف ومن ثم قم بتجربته ولإستدعاء event.preventDefault() في event handler:

[html] $(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
[/html]

مثال كامل: هذها المثال يوضح لك شكل ملف html النهائي عند إضافة هذا السكريبت إليه

[html]

jQuery demo

<a href="http://jquery.com/">jQuery</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">// <![CDATA[
mce:3
// ]]></script>
<script type="text/javascript">// <![CDATA[
mce:4
// ]]></script>

[/html]

لإضافة وحذف html class
أولا قم بإضافة بعض معلومات styleفي بداية الكود

[html] <!– a.test { font-weight: bold; } –>
[html] $("a").removeClass("test");
[/html] [note] الـــhtml تتيح إضافة أكثر من class
[/note] مؤثرات خاصه:
لكي تقوم بإضافة بعض المؤثرات اليدويه قم بتغير clickالذي قمت بإضافته قبل ذلك

[html] $("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});
[/html]

والأن عند الضغط علي أي لينك سوف تجعله يختفي ببطئ

بعد ذلك قم بإضافةaddClass

إلي الـــscript

[html] $("a").addClass("test");
[/html]

كل العناصر الأن سوف تكون bold
ولحذف الــclass قم بإضافة removeClass

[html] $("a").removeClass("test");
[/html]

الإستدعاء والدوال:
الاستدعاء هو عندما تقوم بإستدعاء داله مصممه جاهزه إلي داله حاليه

عند الإستدعاء بدون وسائط

[html] $.get(‘myhtmlpage.html’, myCallBack);
[/html]

علما بان المتغير الثاني هو إسم الداله
النوع الثاني من الإستدعاء هو:
الطريقه الخطأ هي

[html] $.get(‘myhtmlpage.html’, myCallBack(param1, param2));
[/html] [warning] وهو لا يعمل لأنك قمت بإستدعاء
[/warning] [html] $.get(‘myhtmlpage.html’, myCallBack(param1, param2));
[/html]

والصحيح هو:
والخطأ في الطريقه الأولي هو ان المتغيرات تم تنفيذها قبل الداله
وهذا هو الكود الصحيح

[html] $.get(‘myhtmlpage.html’, function(){
myCallBack(param1, param2);
});
[/html] [note] ولقراءة المزيد ادخل علي هذا اللينك Documentation
[/note]