ما هي مكتبه جكويري jQuery ؟

مدهش — Wed, 04 Jan 2012 23:39:36 +0000

مقدمه 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

jQuery

[/html]

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

[html]
[/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

jQuery

[/html]

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

[html]
[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]

فواصل » ما،هي،جكويري،تعرف،علي،جكويري،شروحات،برمجه

ما هي مكتبه جكويري jQuery ؟

اساسيات jQuery

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

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