باللغة العربية jQuery دورة

ثس هللا اىشح اىشح

jQueryالبرمجة باستخدام

أنيس حكمت أبو حميد : تقديم الطالب نظم معلومات حاسوبية: التخصص

األردن\جامعة ال البيت

أنيس حكمت أبو حميد

[email protected]

ال يجوز بيعه , وخالص لوجه هللا تعالى هذا العمل مجاني

mailto:[email protected]

ثس هللا عي ثشمخ هللا جذأ

بعض المالحظات المهمة

لطرقة استعراض هذه

الشرائح

ال جوز بعه , هذا العمل مجان

�� .docx

؟ JQueryب

قام , سكربت جافا أكواد على تحتوي ضخمة مكتبة عن عبارة ه•

األكواد كتابة عملة لتسهل , المبرمجن من مجموعة بتجمعها

وتحتوي , التعامل ف ما نوعا معقدة سكربت الجافا ألن , المختلفة

لدى والمهمة الرائعةfunction من كبرة مجموعة على المكتبة هذه

. مبرمج أي



jQueryزطيجبد دسح

جد بشكل Html : أوال•

Java : ثانا• Script ( مفاهم بشكل ) تعامل كف عرف بحث

.البسطة األمور وبعض المتغرات وتعرف javscript مع

. جدا بسط بشكل Css : ثالثا•


[email protected]



JQueryطشقخ رحو


[email protected]



JQueryطشقخ رحو ال جوز بعه , هذا العمل مجان







اىي ال بع ىب أعطذ ال عط ىاب عذ ال فع را اىجذ ل اىجذ


طشقخ رض اىنزجخ

نقوم بكتابة هذا السطر البرمج لتضمن المكتبة headداخل •

• <script type="text/JavaScript" src=”اسم الملف.js"></script>

جب ان كون فوق اي فانكشن أي ال جوز استخدام فانكشن jquery.jsجب أن تعلم أن ملف

.داخل هذه المكتبة قبل استدعائها ف مكان


ثبه عي طشقخ اىزض


jQueryداخو functionمف جذأ ثنزبثخ

: أوال •

$(document).ready(function () {});OR $(document).ready(function(){

});قد تراها مكتوبة بأي من الشكلن الت باألعلى : مالحظة

أنه مجرد ما تم استدعاء الصفحة نفذ ready.(document)$ونقصبد ما ف داخلها


jQueryداخو functionمف جذأ ثنزبثخ

مكننا أضا الكتابة بهذا الشكل : ثانا •$(function(){

// jQuery methods go here...

});

jQuery(function($){ هذه الطريقة: ثالثا // jQuery methods go here...

});لك الخار بأي واحدة من هذه الطرق الثالث ان تكتب برنامجك ولكن تم ذكر : مالحظة

.الطرق هذه لمساعدتك ف فهم اي كود ج كوري قد تراه


JQueryثبه


first_example.html

bodyداخو tagطشقخ اىصه أل

: كل ما علنا هو اآلت bodyداخل tagللوصل ألي $(document).ready(function(){$(“?????")……

});

.الذي نرد ان حدث عله أي تغر tagتم وضع مكان عالمات االستفهام ...أرأئتم عالمات االستقهام ؟ وتتعلق htmlداخل tagه Pوهذه Pنرى عندنا أننا وضعنا ( وهو المثال السابق ) انظروا الى هذا المثال

.لذلك عند تنفذك للمثال السابق كان أي شء داخل فقرة عند الضغط عله ختف ..بالفقرات $(document).ready(function(){

$("p").click(function(){$(this).hide();

});});

...وهذا عن كل اش داخل الصفحة * .... رمز Pاذا قمنا بوضع مكان


bodyداخو tagطشقخ اىصه أل

لكن هناك سؤال مهم ؟ ماذا لو كنت ارد أن كون الحدث فقط لفقرة واحة لس لجمع الفقرات كما كان المثال األول ؟؟ Cssكما ف classأو idجواب السؤال حلها كون عن طرق وضع

: مثال $(document).ready(function(){

$(".nameOFclass").click(function(){$(this).hide();

});});

IDوالفرق بنهم أن #رمز له idو ) . ( رمز له بالنقطة class: مالحظة فمكن الوصول اله من أكثر classواحد أما ال tagال مكن ان ستعمله اال

. tagمن


tagثبه عي طشقخ اىصه أل ال جوز بعه , هذا العمل مجان

ex2.html

hide Method

وكانت , ألخفاء األشاء من على صفحة االنترنت methodتستخدم هذه ...أمثلتنا السابقة جمعا علها

: مثال $(document).ready(function(){$(".1").click(function(){$(this).hide(5000);

});});

وه التحكم بسرعة االختفاء, خصائص methodان لهذه ال $(this).hide(5000); اثانة= 1000هنا عن طرق الثوان كل

$(this).hide(“slow”);هنا بطء$(this).hide(“fast”); هنا بسرعة


ex3.html

show method

, ألظهار األشاء من على صفحة االنترنت methodتستخدم هذه

مصمم الصفحة أخفى هذه المعلومات لحن )والت ه باألصل مخفة

.. hideوه عكس لل ( استدعائها

: مثال

$(document).ready(function(){

$(".a").show(5000);

});

... showنطبق على hideما نطبق على


ex4.html

show And hide methodرطجق عي

وراء بعضها لك تنفذ و methodمكن وضع أكثر من : مالحظة بنفس التسلسل

:مثال

$(document).ready(function(){$(".a").show(5000).hide(2000).show(3000);});

ثوان ثم ختف بعد 5ف هذا المثال فإنه أوال سقوم باظهار النص بعد ... 3ثانتان وثم ظهر بعد

اذا دققت بالمثال فإنه مش بشكل متسلسل حسب الترتب وفصلها .نقاط


ex5.html

delay Method

..لتأخر تنفذ أمر معن methodوتستخدم هذه ال

: مثل


$(".a").show(2000).delay(4000).hide(2000);

});

: هنا ف هذا المثال

سقوم باظهار النص اوال ثم ستوقف ثانة وثم سخف النص بعد ثانتان


ex6.html

fadeIn Method

صبح , ألظهار النصوص بشكل متدرج methodتستخدم هذه ال

...مثل فكرت الفالش , الظهور أوضح شئا فشئا

: مثال


$(".a").fadeIn(2000);

});

..وهنا أضا مكن تحدد الوقت الذي ستستغرقه


ex7.html

fadeOut Method

... fadeInعكس methodوهذه ال

: مثال


$(".a").fadeOut(5000);

});


ex8.html

أحت اىصبىح ىسذ ىعي أ أبه ث شفبعخ أمش رجبسر اىعبص ى م ساء ف اىجضبعخ


[email protected]



append method

..لالضافة داخل الصفحة methodوتستخدم هذه ال

:مثال


$(".a").append("Anees used Append");

});


ex9.html

appendTo method

تضف بعد تنفذ الكالس ) لالضافة داخل الصفحة methodوتستخدم هذه ال

معن tagوالكن كتب بداخلها مثال ( األصل

:مثال


$(“<h1>Jordan</h1> ").appendTo(“.a");

});

prependهو appendToوال appendعكس ال : مالحظة

appendوبنفس الطرقة كتبوا االثنن ولكن الفرق ان ال prependToو

.تضف ألول النص prependتضف لنهاة النص بنما


ex10.html

Click Event

..ستخدم هذا الحدث عند الضغط بزر الفأرة

: مثال


$(".a").click(function(){

// any code

});

...هنا عندما قوم بالضغط سقوم بتنفذ كود معن


ex11.html

dblclick Event

..ستخدم هذا الحدث عند الضغط بزر الفأرة مرتن متتابعتن

: مثال


$(".a").dblclick(function(){

// any code

});

...هنا عندما قوم بالضغط مرتن سقوم بتنفذ كود معن


ex12.html

ظفخ

انشاء صفحة تحتوي على اسم الطالب وتخصصه وعند الضغط ( 1س.على اسم الطالب ختف تخصص الطالب وظهر السنة الدراسة

تقوم على buttonوهذه ال buttonانشاء صفحة تحتوي ( 2سثوان 5مع مالحظة أن االسم أرده أن ظهر بعد , اظهار اسمك

( . double click) مرتن buttonوبعد الضغط على ال

وعند الضغط , انشاء صفحة تحتوي على اسم أكثر مادة بتحبها ( 3سقوم باضافة المعدل لهذه , بزر الفأرة على اسم المادة لمرة واحدة

.المادة دون ان ختف اسم المادة


Text Method

تستخدم هذه الطرقة الضافة نص داخل الصفحة ولكنها تمح النص

..األصل أو الموجود سابقا

:مثال


$(".a").click(function(){

$(this).text("I HATE FOOTBALL GAME");

});

});


ex13.html

Html Method

تستخدم هذه الدالة الضافة ما أحتاجه على الصفحة عن طرق الج

query وتختلف عنtext بانها تنفذtag المختلفة بداخلها أماtext ...فال تنفذها وستقوم على طباعتها كما ه


$(this).html(“<span style=„color:#f0f0ff;background:#ff0000;‟>Welcome</span>");

});


ex14.html

this

من هو العنصر الذي أنا فه functionتستخدم هذه الدالة لتقول ألي أزرار 3أي بعبارة أخرى اذا كان لدي ..حالا أو تم له حدث معن

فكف ل أن أعرف أي منهم هو الذي تم الضغط 1كل زر رقمه . thisاإلجابة ببساطة عن طرق ..عله ؟

$(document).ready(function(){$(".aa").click(function(){

$(this).hide(1000).show(1000).hide(1000).show(1000); }); });

وهذه ه الت ستخبرنا من هو الذي (this)$اذا دققنا النظر نرى .حدث عله اإلجراء


ex15.html

CSS

تقوم هذه الدالة على التحكم بالتصامم من حث حجم الخط واأللوان

الت نتعامل cssومن اسمها فه تحوي نفس خصائص .. وغرها

معها بتصمم الصفحات

:بشكلن األول حتوي على خاصة واحدة فقط كما ف اآلت cssكتب

$(".aa").css('color','blue');

: أما الشكل الثان فأنه حتوي على اكثر من خاصة كما ف اآلت

$(".aaa").css({"color":"green","background":"red"});

{}وكما نالحظ عند وضع أكثر من خاصة نضمنهم داخل


ex16.html

hover

نطلق هذا الحدث عندما مر مؤشر الفأرة فوق أي شء وضعت له

. hoverالحدث

$("h1").hover(function (){

$(this).css({"color":"blue","background":"black"

});

<tag <h1مجرد مرور مؤشر الفأرة فوق أي شء مضمن داخل

. cssفانه سطبق الدالة


ex17.html

شند اى مع سء حفظ فأسشذ ىزشك اىعبص أخجش أ اىعي س س هللا ال ذ ىعبص


[email protected]



toggleبحث تقوم بعمل , للتبدل بن عنصرن methodتستخدم هذه ال

hide ثمshow ..


ex18.html

animate:أي جزء داخل الصفحة بأي اتجاه ( زادة أو نقصان ف أحد االتجاهات )تستخدم هذه الدالة لتحرك

positionأو تم وضع ال divمع مالحظة أن هذه الدالة ال تعمل اال اذا تم حصرها مثال داخل

absoluteساوي


ex19.html

stop.. animateهذه الدالة توقف الحركة وه عكس لل


ex20.html

alert

وه موجودة ..هذه الدالة تستخدم إلخراج صندوق حتوي نص معن

..ف الجافا سكربت


alert("hi Anees");

});


ex21.html

attrوهذا احدى الدوال المهمة ف األمور linkمن أي relأو hrefتستخدم هذه الدالة ألخذ قمة ال

..ومكن استخدامها لتعدل القم مثل الطول والعرض أثناء تنفذ الصفحة ..المتقدمة


ex22.html

sildeToggle

تستخدم هذه الدالة ألخفاء أي مكون من مكونات الصفحة ومن ثم

عن لو وضعنا زر عند الضغطة األولى ..اظهارها بعد اعادة الحدث

سختف ما ارد واذا قمت الضغط ثانة سظهر النص مجددا

المثال

الثان

المثال

األول


ex23.html

ex39.html

slideDown تغر حدث فلن أخرى مرة بالضغط بعدها قمنا وان المخفة النصوص ألظهار الدالة هذه تستخدم

باألصل مخف النص كون أن جب أنه مالحظة مع slideToggle وبن بنها الفرق هو وهذا

شء حصل فلم ظاهرا كان فإذا

نص مخف


ex24.html

slideUp

وهنا جب ان كون النص ظاهرا ..تماما slideDownوه عكس لل

.. display:noneالحظ هنا ان قد قمت بحذف ...لتم اخفائه


ex25.html

val

وه مهمة ..تستخدم هذه الدالة ألخذ القمة المخزنة داخل عنصر معن

..جدا جدا


ex26.html

parent

نعن بذلك أي )تعلوها tagتستخدم هذه الدالة تستخدم للتعامل مع أي

tag مضمنة داخلtag اخر مثل(<a><p></p></a> فهنا

<p> مضمنة وال<a> هparent ..


ex27.html

addClasscssتستخدم هذه الدالة لتضمن أي style موجود داخل الصفحة داخل

أرده وهذه الكالس الرائع ساعدنا على التحكم بتصمم tagأي

الصفحة بشكل مرن وسهل


ex28.html

removeClasscssتستخدم هذه الدالة لحذف class طبعا الحذف المقصود )موجود داخل الصفحة

وه عكس ( به وقف التنفذ لهذا الكالس اثناء عرض الصفحة حسب حدث معن . addClassلل

ما نطبق على اضافة الكالس نطبق على الحذف فال نضع نقطة قبل : مالحظة *اسم الكالس


ex29.html

toggleClass, موجودن داخل الصفحة class 2تستخدم هذه الدالة للتبدل بن

.وهكذا مكننا تبدل خصائص اي عنصر بمجرد قام حدث معن


ex30.html

hasClass

بمعنى آخر , تستخدم هذه الدالة لمعرفة هل هذا الكالس موجود أم ال

.هل الكالس مستخدم أم ال داخل ما تم اختاره


ex31.html

keydownوهو حدث نطلق عند الدخول مثال داخل Eventهذا احدى انواع

(نطلق عند الضغط على المفتاح..)مربع نص والبدء بالكتابة

انظر للمثال .. keydownتوجد مشكلة اذا استخدمنا : مالحظة

...وأدخل والحظ الناتج انه سكون ناقص حرف


ex32.html

keyupوهو حدث نطلق عند الدخول مثال داخل Eventهذا احدى انواع

(نطلق بعد رفع الد عن اي مفتاح..)مربع نص والبدء بالكتابة

الحظ اآلن بعد تنفذ المثال أنك لن تواجه المشكلة

انظر للمثال ..السابقة النه اآلن ضف ثم أخذ القمة


ex33.html

ex41.html

Keyup and keydown

انظر الى هذا المثال وحتوي كال من الحدثن

..السابقن


ex34.html

keypress altوال shiftال تقبل keypressولكن الفرق بنهم هو أن keydownهذا الحدث شبه بال

تقبل جمع ما على لوحة المفاتح keydownالخ بنما ال ...

داخل كل altعند تطبق المثال اضغط

مربع نص وانظر الى ما سحدث


ex35.html

change

فعند حدوث اي تغر مثال داخل , تستخدم هذه الدالة لمراقبة التغر

..مربع نص نطلق


ex36.html

مف ثبىد اعظب

اىي إب سأىل سحزل فبغفش ىب بهللا


[email protected]



focusin

.. نطلق هذا الحدث مجرد الدخول او تحدد أي عنصر


ex37.html

focusout

focusinهذا الحدث نطلق عند الخروج من التحدد وهو عكس لل


ex38.html

selectأي عندما قوم المستخدم بتحدد , ”التحدد “ المقصود بهذا الدالة هو

.. ماذا سحصل ... نص معا مثال


ex40.html

submitوه عملة رفع البانات الموجودة داخل فورم معن submitمن األمور المهمة جدا ف االنترنت

...والحظ انن قلت فورم ... serverالى ال


ex42.html

Submit example 2 ال جوز بعه , هذا العمل مجان

ex43.html

attrعد ا اى

فكما تم ذكرها سابقا , اآلن سنتعرف على وظائف اخرى , تكلمنا عن هذه الدالة سابقا

: على انها تلجب الرابط فانها اآلن مكنها التعدل عله كما ف المثال التال


ex44.html

attr 2عد ا اى

كما مكننا أضا اضافة رابط وان لم وضع رابط داخل اللنك وبنفس

:الطرقة السابقة


ex45.html

attr 3عد ا اى

هو مستطل صغر الحجم ظهر عند وضع title (titleكما مكننا أضا التعدل أو االضافة لل

: الحظها ف المثال التال ( مؤشر الفأرة على شء ما


ex46.html

attr 4عد ا اى

بالطرقة ..أضا مكننا من التعدل او االضافة بنفس الوقت على الرابط

: التالة


ex47.html

attr 5عد ا اى

مكننا القام بعملة حذف , كما مكن أن نقوم باألضافة أوالتعدل

: removeAttrباستخدام


ex48.html

attr 6عد ا اى معن functionحث مكننا برمجة , attrداخل functionاستخدام ال

: كما ف المثال التال ..قوم بالتعدل على الخصائص


ex49.html

اىي صو سي ثبسك عي أمش خيقال سذب حذ صو هللا عي ساي حزا

شض عي اىصالح اىسال


[email protected]



propبحدد خاصة ..تستخدم هذه الدالة إلرجاع القمة لخاصة معنة مثال ما هو اللون الموجود حالا ؟

color ومكن اضا استخدامها لوضع قم داخل الخصائص أو حتى , والدالة تجلب ل قمتها

:اآلن انظر الى المثال ..ولكن هناك فرق سنراه بالشرحة التالة .. attrتعدل القم وه تشبه


ex50.html

propاذن ما الفرق؟ attrكما الحظنا ف المثال السابق فانه ال ختلف عن

تحذف القمة فقط عن لو propتحذف الخاصة مع القمة بنما attrالجواب هو بكل بساطة أن

<”a href=“anees>فرضنا ان هناك

( لن تستطع الضغط عله )لحذف الرابط فان الرابط سحذف attrاذا استخدمت

..فسبقى الرابط لكن ولكن بدون قمة propبنما لو قمنا باستخدام

...انظر المثال التال وستتوضح الفكرة باذن هللا تعالى


ex51.html

mouseenterهذا الحدث نطلق عند مرور مؤشر الفأرة فوق أي شء حددت له الدث

mouseenter وهو شبهhover ...


ex52.html

mousedown

نطلق هذا الحدث عند الضغط بزر الفأرة األسر فوق أي شء تم

mousedownتحدده بالحدث


ex53.html

mouseup

نطلق هذا الحدث بعد رفع زر الفأرة األسر من الضغطة عن قلنا ف

mouseupأما ف , عند الضغط نطلق الحدث musedownال

بمجرد رفع اصبع عن الزر –فان الحدث نطلق بعد الضغط

.األسر


ex54.html

mouseleave

هنا سنطلق الحدث بمجرد ابتعاد مؤشر الفأرة عن الشء الذي تم

...اعطائه هذا الحدث


ex55.html

mousemove

هنا نطلق الحدث طالما مؤشر الفأرة داخل نطاق الخاصة الت تحتوي

. mouseoverعلى


ex56.html

...بك أضب .... mouseoutو mouseoverوجد هناك أضا

mouseleaveوال mouseenterوهم شبهو تقربا ال

هناو هنا... لمعرفة الفرق اضغط هنا

... outerو innerاذا الحظت فإن االختالف ظهر عند وجود

Mouseout وmouseover عند انتقاله منouter الىinner وعلى...العكس عتبرها حدث

فهم عبروه حدثا واحدا حن mouseleaveوال mouseenterبنما innerالى outerالدخول من


http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-mouseout-mouseleave-example.html

http://api.jquery.com/mouseover/

find()ان كان tagتستخدم هذه الدالة للبحث داخل الصفحة والبحث كون لل

parent وان كانchild ..


ex57.html

after ...وهذه الدالة تستخدم إلضافة محتوى محدد الى احدى العناصر


ex58.html

find and after example

وهذا مثال حتوي .. afterو findرأنا بالشرحتن السابقتن كف تعاملنا مع

ات بعدها االجراء الذي findفنحن نعلم أن ال ..معا afterو findعلى

afterوهذه المرة لنجعل االجراء هو , سنقوم باتخاذه


ex59.html

أشذ أ ال اىا اال هللا حاذ ال شاشل ى اىيل ى اىحذ عيا ماو , ى

شاااااااااااااااااااااااء اااااااااااااااااااااااذش

أشذ أ حذ سسه هللا


[email protected]



first()تستخدم هذه الدالة لتنفذ االجراء على أول ما تم قرائته او استرجاعه

عن لو كان عنا قائمة فها عشرة عناصر سأخذ , من الخصائص

...وهناك طرقتن لكتابة هذه الدالة ...أول عنصر


ex60.html

last()ما تم قرائته او استرجاعه من الخصائص آخرتستخدم هذه الدالة لتنفذ االجراء على

وهناك ...عنصر آخرعن لو كان عنا قائمة فها عشرة عناصر سأخذ ,

... firstطرقتن لكتابة هذه الدالة وبنفس األسلوب للدالة


ex61.html

prevما تتم قرائته او آلخير من ا قبلتستخدم هذه الدالة لتنفذ االجراء على العنصر

و ..للوراء عنصر عنصر مع مالحظة أنه مكننا استخدامها للرجوع .استرجاعه...تكتب حسب التسلسل التال


http://api.jquery.com/prev/

ex62.html

nextما تتم بعد األول من تستخدم هذه الدالة لتنفذ االجراء على العنصر

...مع مالحظة أنه مكننا استخدامها للتقدم .قرائته او استرجاعه


ex63.html

blurأو بمعنى آخر الخروج من , هذا الحدث نطلق بمجرد انهاء التأشر

...موقع تم تحدده


ex64.html

width()تستخدم هذه الدالة ف ال ج كوري لمعرفة العرض ألي شء ف

...الصفحة

$(document).width()


ex65.html

height..وتستخدم هذه الدالة لمعرفة ارتفاع أي من الخصائص ف الصفحة


ex66.html

فزمشا هللا اىعظ , اال ثزمش هللا رطئ اىقية

ال اى اال هللا حذ سسه هللا


[email protected]



serialize .. للخادم الرسالها المعلومات هذه وتجهز بتحددها قمت خاصة أي من القم ألخذ الدالة هذه تستخدم

جب أنه مراعاة مع , محدد شء مستوى على أو كامل form مستوى على تستخدم أن ومكن

صحح بشكل تعمل فلن واال أسماء للعناصر كون أن


ex67.html

eachتستخدم هذه الدالة للمرور على جمع العناصر الت تم تحدد الخاصة

( loop...)وه تشبه عملة الدوران , لها


ex68.html

on

مثل , تستخدم هذه الدالة للتحكم بحدث أو بمجموعة احداث ووضعها لعنصر معن

وكمنها أضا ..وهكذا ..انطالق أمر معن عند ضغطة واحدة أو ضغطتن

وهذه التقنة استخدمت .. submitالتحكم بأحداث على مستوى فورم مثل عملة

وهذه الدالة مكن استخدامها مع التطورات المستقبلة لو تم 1.7عند االصدار

..وه دالة قدمة bindوه بدل عن ... اضافة احداث جددة على سكربت

سأستخدم اسهل ..وهذه ه الصغة العامة لها وأنا ف المثال والشرح الذي سأذكره

..صغة لهذه الدالة

Syntax

$(selector).on(event,childSelector,data,function,map)

لمزد من التفاصل حول هذا الموضوع

سذهب بك الى موقع –رجى الضغط هنا

W3school تابع


http://www.w3schools.com/jquery/event_on.asp

onال جوز بعه , هذا العمل مجان

ex69.html

offتستخدم هذه الدالة القاف عمل حدث معن تم استخدامه من قبل الدالة

on , وهذا عن أنoff تقوم على اقاف عملon ...


ex70.html

Ajax and jQuery

Ajax : هييjavascript + xml عنيي مكننييا , ولكيين بييدون مزامنييةالوصول الى أي قمة داخل أحد الخصيائص والتعاميل معهيا بيدول ميا نعميل

reload لصفحة...

؟ jQueryمع Ajaxما ه عالقة jQuery قوم على طرح عدة أسالب أو طيرق لسسيتفادة مين الوظيائف التي

. Ajaxتقوم بها

أو textلييل requestمكننييا عمييل Ajaxوال jQueryباسييتخدام ال xml أوHtml أوJosn عيين طرييق السييرفر باسييتخدامPOST وال

GET ... مييع امكانيية عمييلload لبانييات خارجيية ووضييعها داخييل أحييد. web pageالعناصر الموجودة داخل


load(jquery and ajax) method

Ajaxولكن رغم بساطتها فإنها تعط قوة رهبة لل , هذه الدالة بسطة

تقوم هذه الدالة على جلب البانات من السرفر ومن ثم وضعها

....بالصفحة الت انا فها

قد يحدث خطأ عند استخدام هذه الدالة الننا نتعامل مع صفحات على نفس : مالحظة

أو اذا ظهرت عندك المشكلة قم بالبحث عن شيء fireFoxلذلك استخدم ..الجهاز

Allow acssesيسمى file


ex71.html


مكننا استدعاء صفحات .. من البنات الخارجة الت مكن استدعائها

... html.مثل ...االنترنت


ex72.html


أو اي classأو idومكننا أضا استدعاء جزء من صفحة عن طرق

...شء آخر


ex73.html


ومن التطبقات الت مكن استخدامها معرفة هل ام تحمل الصفحة

: مثال ..windowبنجاح أم ال ع طرق


ex74.html

unload: تنطلق هذه الدالة بمجرد حدوث أحد األحداث التالة

a link to leave the page is clicked

a new URL is typed in the address bar

the forward or back buttons are used

the browser window is closed

the page is reloaded

قد تصب هذه الدالة بعض المشاكل بخصوص

المتصفحات فقم بتجربتها على أكثر من متصفح


ex75.html

نعيـب سماننـا والعيـب فيـنـا

ومـال سماننـا عـيـب سـىانـا

ونهجى ذا الشمـان بغيـز ذنـب

ولـى نطـق الشمـان لنـا هجانـا

وليس الذئب يأكـل لحـم ذئـب

ويأكـل بعضنـا بـعـض عيـانـاالشافعي رحمه هللا


[email protected]



$.post

تستخدم هذه الدالة الرسال بانات لخارج الصفحة واستقبال المعلومات الراجعة

وه من ..وبمعناها الدقق ه عملة جلب البانات من السرفر الى الصفحة .

أهم الدوال الموجودة والمستخدمة ف صفحات االنترنت

: jQueryوالصغة العامة لها داخل

$.post(“ استقبال البيانات “ ,”البيانات المراد ارسالها ”,”اسم الصفحة التي ستذهب لها المعلومات”);

تابع


$.post ال جوز بعه , هذا العمل مجان

ex76.html

$.postلكن لو قمنا , الرسال البانات buttonف المثال السابق قمنا باستخدام

تقوم submitفهذا الكود لن عمل بشكل صحح الن submitباستخدام

ولتالف هذه المشكلة نقوم بوضع , على اعادة تحمل الصفحة عندما تنفذ

return داخلclick .. واالرجاع كون ..القاف التحملfalse


ex77.html

$.get

ولكن هذه البانات تكون موجودة داخل , تستخدم أضا لجلب البانات

وأي فورم أنا أقوم بانشائه كون urlالسرفر والقم موجودة داخل

... GETافتراضا


ex78.html

error..نستطع استخدام هذه الدالة لتالف حصول األخطاء الغر متوقعة

..وأي من األخطاء الت لم نأخذها بعن اإلعتبار ..مثال عند الذهاب لصفحة غر موجودة


ex79.html

$.ajax(){}

الت postوال getباسلوب أقوى من ajaxاآلن سنتعامل مع ال

من get and postحث كانت , استخدمناها ف الدروس الماضة

واآلن سنتعلم بإذن هللا تعالى كف نزد .. ajaxاألمثلة البسطة على

.. ajax.$من قوة الصفحة وجعلها أكثر مرونة باستخدام

.. ajax.$سأتكم أوال عن المكونات الرئسة والموجودة داخل

فصل بن كل مكون واآلخر فاصلة اال اذا كان أخر مكون ال نضع خلفه فاصلة ولس : مالحظة

...جمعها الزام

المكون األول


$.ajax(){}

المكون الثات


$.ajax(){}

المكون الثالث


$.ajax(){}

المكون الرابع


$.ajax(){}

المكون الخامس


$.ajax(){}

المكون السادس


$.ajax(){}

األمثلة


$.ajax example

( : ال يوجد خطأ : )المثال األول

(:404خطأ : )المثال الثاني


ex80.html

ex81.html

ف اىخزب أشنش هللا اىعي اىعظ ىب فق اى أسزغفش أرة اى أسأه هللا سحز اعر ثبهلل سخط اىبس اىي ا زا اىعو خبىص ىجل اىنش فزقجي ب هللا ب سح ب سح

اىي عيب ب فعب افعب ثب عيزب ال أذ اىعي اىحن

اىي آ ..اىي اغفش ى ىاىذ ىيؤ أحبئ أار

اخا ال رس صبىح دعبئن هللا ى ...ال رس ا اىعي أبخ ىيعي صمبح صمبح اىعي شش

اىزفق

آخش دعاب أ اىحذ هلل سة اىعبىاخم أس


[email protected]



Education

باللغة العربية jQuery دورة