باللغة العربية jQuery دورة
-
Upload
anees-abu-hmaid -
Category
Education
-
view
1.057 -
download
2
description
Transcript of باللغة العربية jQuery دورة
ثس هللا اىشح اىشح
jQueryالبرمجة باستخدام
أنيس حكمت أبو حميد : تقديم الطالب نظم معلومات حاسوبية: التخصص
األردن\جامعة ال البيت
أنيس حكمت أبو حميد
ال يجوز بيعه , وخالص لوجه هللا تعالى هذا العمل مجاني
ثس هللا عي ثشمخ هللا جذأ
بعض المالحظات المهمة
لطرقة استعراض هذه
الشرائح
ال جوز بعه , هذا العمل مجان
؟ JQueryب
قام , سكربت جافا أكواد على تحتوي ضخمة مكتبة عن عبارة ه•
األكواد كتابة عملة لتسهل , المبرمجن من مجموعة بتجمعها
وتحتوي , التعامل ف ما نوعا معقدة سكربت الجافا ألن , المختلفة
لدى والمهمة الرائعةfunction من كبرة مجموعة على المكتبة هذه
. مبرمج أي
ال جوز بعه , هذا العمل مجان
jQueryزطيجبد دسح
جد بشكل Html : أوال•
Java : ثانا• Script ( مفاهم بشكل ) تعامل كف عرف بحث
.البسطة األمور وبعض المتغرات وتعرف javscript مع
. جدا بسط بشكل Css : ثالثا•
أنيس حكمت أبو حميد
ال جوز بعه , هذا العمل مجان
JQueryطشقخ رحو
أنيس حكمت أبو حميد
ال جوز بعه , هذا العمل مجان
JQueryطشقخ رحو ال جوز بعه , هذا العمل مجان
JQueryطشقخ رحو
ال جوز بعه , هذا العمل مجان
JQueryطشقخ رحو
ال جوز بعه , هذا العمل مجان
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...
});لك الخار بأي واحدة من هذه الطرق الثالث ان تكتب برنامجك ولكن تم ذكر : مالحظة
.الطرق هذه لمساعدتك ف فهم اي كود ج كوري قد تراه
ال جوز بعه , هذا العمل مجان
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ثبه عي طشقخ اىصه أل ال جوز بعه , هذا العمل مجان
hide Method
وكانت , ألخفاء األشاء من على صفحة االنترنت methodتستخدم هذه ...أمثلتنا السابقة جمعا علها
: مثال $(document).ready(function(){$(".1").click(function(){$(this).hide(5000);
});});
وه التحكم بسرعة االختفاء, خصائص methodان لهذه ال $(this).hide(5000); اثانة= 1000هنا عن طرق الثوان كل
$(this).hide(“slow”);هنا بطء$(this).hide(“fast”); هنا بسرعة
ال جوز بعه , هذا العمل مجان
show method
, ألظهار األشاء من على صفحة االنترنت methodتستخدم هذه
مصمم الصفحة أخفى هذه المعلومات لحن )والت ه باألصل مخفة
.. hideوه عكس لل ( استدعائها
: مثال
$(document).ready(function(){
$(".a").show(5000);
});
... showنطبق على hideما نطبق على
ال جوز بعه , هذا العمل مجان
show And hide methodرطجق عي
وراء بعضها لك تنفذ و methodمكن وضع أكثر من : مالحظة بنفس التسلسل
:مثال
$(document).ready(function(){$(".a").show(5000).hide(2000).show(3000);});
ثوان ثم ختف بعد 5ف هذا المثال فإنه أوال سقوم باظهار النص بعد ... 3ثانتان وثم ظهر بعد
اذا دققت بالمثال فإنه مش بشكل متسلسل حسب الترتب وفصلها .نقاط
ال جوز بعه , هذا العمل مجان
delay Method
..لتأخر تنفذ أمر معن methodوتستخدم هذه ال
: مثل
$(document).ready(function(){
$(".a").show(2000).delay(4000).hide(2000);
});
: هنا ف هذا المثال
سقوم باظهار النص اوال ثم ستوقف ثانة وثم سخف النص بعد ثانتان
ال جوز بعه , هذا العمل مجان
fadeIn Method
صبح , ألظهار النصوص بشكل متدرج methodتستخدم هذه ال
...مثل فكرت الفالش , الظهور أوضح شئا فشئا
: مثال
$(document).ready(function(){
$(".a").fadeIn(2000);
});
..وهنا أضا مكن تحدد الوقت الذي ستستغرقه
ال جوز بعه , هذا العمل مجان
fadeOut Method
... fadeInعكس methodوهذه ال
: مثال
$(document).ready(function(){
$(".a").fadeOut(5000);
});
ال جوز بعه , هذا العمل مجان
أحت اىصبىح ىسذ ىعي أ أبه ث شفبعخ أمش رجبسر اىعبص ى م ساء ف اىجضبعخ
أنيس حكمت أبو حميد
ال جوز بعه , هذا العمل مجان
append method
..لالضافة داخل الصفحة methodوتستخدم هذه ال
:مثال
$(document).ready(function(){
$(".a").append("Anees used Append");
});
ال جوز بعه , هذا العمل مجان
appendTo method
تضف بعد تنفذ الكالس ) لالضافة داخل الصفحة methodوتستخدم هذه ال
معن tagوالكن كتب بداخلها مثال ( األصل
:مثال
$(document).ready(function(){
$(“<h1>Jordan</h1> ").appendTo(“.a");
});
prependهو appendToوال appendعكس ال : مالحظة
appendوبنفس الطرقة كتبوا االثنن ولكن الفرق ان ال prependToو
.تضف ألول النص prependتضف لنهاة النص بنما
ال جوز بعه , هذا العمل مجان
Click Event
..ستخدم هذا الحدث عند الضغط بزر الفأرة
: مثال
$(document).ready(function(){
$(".a").click(function(){
// any code
});
...هنا عندما قوم بالضغط سقوم بتنفذ كود معن
ال جوز بعه , هذا العمل مجان
dblclick Event
..ستخدم هذا الحدث عند الضغط بزر الفأرة مرتن متتابعتن
: مثال
$(document).ready(function(){
$(".a").dblclick(function(){
// any code
});
...هنا عندما قوم بالضغط مرتن سقوم بتنفذ كود معن
ال جوز بعه , هذا العمل مجان
ظفخ
انشاء صفحة تحتوي على اسم الطالب وتخصصه وعند الضغط ( 1س.على اسم الطالب ختف تخصص الطالب وظهر السنة الدراسة
تقوم على buttonوهذه ال buttonانشاء صفحة تحتوي ( 2سثوان 5مع مالحظة أن االسم أرده أن ظهر بعد , اظهار اسمك
( . double click) مرتن buttonوبعد الضغط على ال
وعند الضغط , انشاء صفحة تحتوي على اسم أكثر مادة بتحبها ( 3سقوم باضافة المعدل لهذه , بزر الفأرة على اسم المادة لمرة واحدة
.المادة دون ان ختف اسم المادة
ال جوز بعه , هذا العمل مجان
Text Method
تستخدم هذه الطرقة الضافة نص داخل الصفحة ولكنها تمح النص
..األصل أو الموجود سابقا
:مثال
$(document).ready(function(){
$(".a").click(function(){
$(this).text("I HATE FOOTBALL GAME");
});
});
ال جوز بعه , هذا العمل مجان
Html Method
تستخدم هذه الدالة الضافة ما أحتاجه على الصفحة عن طرق الج
query وتختلف عنtext بانها تنفذtag المختلفة بداخلها أماtext ...فال تنفذها وستقوم على طباعتها كما ه
$(document).ready(function(){
$(this).html(“<span style=„color:#f0f0ff;background:#ff0000;‟>Welcome</span>");
});
ال جوز بعه , هذا العمل مجان
this
من هو العنصر الذي أنا فه functionتستخدم هذه الدالة لتقول ألي أزرار 3أي بعبارة أخرى اذا كان لدي ..حالا أو تم له حدث معن
فكف ل أن أعرف أي منهم هو الذي تم الضغط 1كل زر رقمه . thisاإلجابة ببساطة عن طرق ..عله ؟
$(document).ready(function(){$(".aa").click(function(){
$(this).hide(1000).show(1000).hide(1000).show(1000); }); });
وهذه ه الت ستخبرنا من هو الذي (this)$اذا دققنا النظر نرى .حدث عله اإلجراء
ال جوز بعه , هذا العمل مجان
CSS
تقوم هذه الدالة على التحكم بالتصامم من حث حجم الخط واأللوان
الت نتعامل cssومن اسمها فه تحوي نفس خصائص .. وغرها
معها بتصمم الصفحات
:بشكلن األول حتوي على خاصة واحدة فقط كما ف اآلت cssكتب
$(".aa").css('color','blue');
: أما الشكل الثان فأنه حتوي على اكثر من خاصة كما ف اآلت
$(".aaa").css({"color":"green","background":"red"});
{}وكما نالحظ عند وضع أكثر من خاصة نضمنهم داخل
ال جوز بعه , هذا العمل مجان
hover
نطلق هذا الحدث عندما مر مؤشر الفأرة فوق أي شء وضعت له
. hoverالحدث
$("h1").hover(function (){
$(this).css({"color":"blue","background":"black"
});
<tag <h1مجرد مرور مؤشر الفأرة فوق أي شء مضمن داخل
. cssفانه سطبق الدالة
ال جوز بعه , هذا العمل مجان
شند اى مع سء حفظ فأسشذ ىزشك اىعبص أخجش أ اىعي س س هللا ال ذ ىعبص
أنيس حكمت أبو حميد
ال جوز بعه , هذا العمل مجان
toggleبحث تقوم بعمل , للتبدل بن عنصرن methodتستخدم هذه ال
hide ثمshow ..
ال جوز بعه , هذا العمل مجان
animate:أي جزء داخل الصفحة بأي اتجاه ( زادة أو نقصان ف أحد االتجاهات )تستخدم هذه الدالة لتحرك
positionأو تم وضع ال divمع مالحظة أن هذه الدالة ال تعمل اال اذا تم حصرها مثال داخل
absoluteساوي
ال جوز بعه , هذا العمل مجان
alert
وه موجودة ..هذه الدالة تستخدم إلخراج صندوق حتوي نص معن
..ف الجافا سكربت
$(document).ready(function(){
alert("hi Anees");
});
ال جوز بعه , هذا العمل مجان
attrوهذا احدى الدوال المهمة ف األمور linkمن أي relأو hrefتستخدم هذه الدالة ألخذ قمة ال
..ومكن استخدامها لتعدل القم مثل الطول والعرض أثناء تنفذ الصفحة ..المتقدمة
ال جوز بعه , هذا العمل مجان
sildeToggle
تستخدم هذه الدالة ألخفاء أي مكون من مكونات الصفحة ومن ثم
عن لو وضعنا زر عند الضغطة األولى ..اظهارها بعد اعادة الحدث
سختف ما ارد واذا قمت الضغط ثانة سظهر النص مجددا
المثال
الثان
المثال
األول
ال جوز بعه , هذا العمل مجان
slideDown تغر حدث فلن أخرى مرة بالضغط بعدها قمنا وان المخفة النصوص ألظهار الدالة هذه تستخدم
باألصل مخف النص كون أن جب أنه مالحظة مع slideToggle وبن بنها الفرق هو وهذا
شء حصل فلم ظاهرا كان فإذا
نص مخف
ال جوز بعه , هذا العمل مجان
slideUp
وهنا جب ان كون النص ظاهرا ..تماما slideDownوه عكس لل
.. display:noneالحظ هنا ان قد قمت بحذف ...لتم اخفائه
ال جوز بعه , هذا العمل مجان
val
وه مهمة ..تستخدم هذه الدالة ألخذ القمة المخزنة داخل عنصر معن
..جدا جدا
ال جوز بعه , هذا العمل مجان
parent
نعن بذلك أي )تعلوها tagتستخدم هذه الدالة تستخدم للتعامل مع أي
tag مضمنة داخلtag اخر مثل(<a><p></p></a> فهنا
<p> مضمنة وال<a> هparent ..
ال جوز بعه , هذا العمل مجان
addClasscssتستخدم هذه الدالة لتضمن أي style موجود داخل الصفحة داخل
أرده وهذه الكالس الرائع ساعدنا على التحكم بتصمم tagأي
الصفحة بشكل مرن وسهل
ال جوز بعه , هذا العمل مجان
removeClasscssتستخدم هذه الدالة لحذف class طبعا الحذف المقصود )موجود داخل الصفحة
وه عكس ( به وقف التنفذ لهذا الكالس اثناء عرض الصفحة حسب حدث معن . addClassلل
ما نطبق على اضافة الكالس نطبق على الحذف فال نضع نقطة قبل : مالحظة *اسم الكالس
ال جوز بعه , هذا العمل مجان
toggleClass, موجودن داخل الصفحة class 2تستخدم هذه الدالة للتبدل بن
.وهكذا مكننا تبدل خصائص اي عنصر بمجرد قام حدث معن
ال جوز بعه , هذا العمل مجان
hasClass
بمعنى آخر , تستخدم هذه الدالة لمعرفة هل هذا الكالس موجود أم ال
.هل الكالس مستخدم أم ال داخل ما تم اختاره
ال جوز بعه , هذا العمل مجان
keydownوهو حدث نطلق عند الدخول مثال داخل Eventهذا احدى انواع
(نطلق عند الضغط على المفتاح..)مربع نص والبدء بالكتابة
انظر للمثال .. keydownتوجد مشكلة اذا استخدمنا : مالحظة
...وأدخل والحظ الناتج انه سكون ناقص حرف
ال جوز بعه , هذا العمل مجان
keyupوهو حدث نطلق عند الدخول مثال داخل Eventهذا احدى انواع
(نطلق بعد رفع الد عن اي مفتاح..)مربع نص والبدء بالكتابة
الحظ اآلن بعد تنفذ المثال أنك لن تواجه المشكلة
انظر للمثال ..السابقة النه اآلن ضف ثم أخذ القمة
ال جوز بعه , هذا العمل مجان
Keyup and keydown
انظر الى هذا المثال وحتوي كال من الحدثن
..السابقن
ال جوز بعه , هذا العمل مجان
keypress altوال shiftال تقبل keypressولكن الفرق بنهم هو أن keydownهذا الحدث شبه بال
تقبل جمع ما على لوحة المفاتح keydownالخ بنما ال ...
داخل كل altعند تطبق المثال اضغط
مربع نص وانظر الى ما سحدث
ال جوز بعه , هذا العمل مجان
change
فعند حدوث اي تغر مثال داخل , تستخدم هذه الدالة لمراقبة التغر
..مربع نص نطلق
ال جوز بعه , هذا العمل مجان
مف ثبىد اعظب
اىي إب سأىل سحزل فبغفش ىب بهللا
أنيس حكمت أبو حميد
ال جوز بعه , هذا العمل مجان
focusout
focusinهذا الحدث نطلق عند الخروج من التحدد وهو عكس لل
ال جوز بعه , هذا العمل مجان
selectأي عندما قوم المستخدم بتحدد , ”التحدد “ المقصود بهذا الدالة هو
.. ماذا سحصل ... نص معا مثال
ال جوز بعه , هذا العمل مجان
submitوه عملة رفع البانات الموجودة داخل فورم معن submitمن األمور المهمة جدا ف االنترنت
...والحظ انن قلت فورم ... serverالى ال
ال جوز بعه , هذا العمل مجان
Submit example 2 ال جوز بعه , هذا العمل مجان
attrعد ا اى
فكما تم ذكرها سابقا , اآلن سنتعرف على وظائف اخرى , تكلمنا عن هذه الدالة سابقا
: على انها تلجب الرابط فانها اآلن مكنها التعدل عله كما ف المثال التال
ال جوز بعه , هذا العمل مجان
attr 2عد ا اى
كما مكننا أضا اضافة رابط وان لم وضع رابط داخل اللنك وبنفس
:الطرقة السابقة
ال جوز بعه , هذا العمل مجان
attr 3عد ا اى
هو مستطل صغر الحجم ظهر عند وضع title (titleكما مكننا أضا التعدل أو االضافة لل
: الحظها ف المثال التال ( مؤشر الفأرة على شء ما
ال جوز بعه , هذا العمل مجان
attr 4عد ا اى
بالطرقة ..أضا مكننا من التعدل او االضافة بنفس الوقت على الرابط
: التالة
ال جوز بعه , هذا العمل مجان
attr 5عد ا اى
مكننا القام بعملة حذف , كما مكن أن نقوم باألضافة أوالتعدل
: removeAttrباستخدام
ال جوز بعه , هذا العمل مجان
attr 6عد ا اى معن functionحث مكننا برمجة , attrداخل functionاستخدام ال
: كما ف المثال التال ..قوم بالتعدل على الخصائص
ال جوز بعه , هذا العمل مجان
اىي صو سي ثبسك عي أمش خيقال سذب حذ صو هللا عي ساي حزا
شض عي اىصالح اىسال
أنيس حكمت أبو حميد
ال جوز بعه , هذا العمل مجان
propبحدد خاصة ..تستخدم هذه الدالة إلرجاع القمة لخاصة معنة مثال ما هو اللون الموجود حالا ؟
color ومكن اضا استخدامها لوضع قم داخل الخصائص أو حتى , والدالة تجلب ل قمتها
:اآلن انظر الى المثال ..ولكن هناك فرق سنراه بالشرحة التالة .. attrتعدل القم وه تشبه
ال جوز بعه , هذا العمل مجان
propاذن ما الفرق؟ attrكما الحظنا ف المثال السابق فانه ال ختلف عن
تحذف القمة فقط عن لو propتحذف الخاصة مع القمة بنما attrالجواب هو بكل بساطة أن
<”a href=“anees>فرضنا ان هناك
( لن تستطع الضغط عله )لحذف الرابط فان الرابط سحذف attrاذا استخدمت
..فسبقى الرابط لكن ولكن بدون قمة propبنما لو قمنا باستخدام
...انظر المثال التال وستتوضح الفكرة باذن هللا تعالى
ال جوز بعه , هذا العمل مجان
mouseenterهذا الحدث نطلق عند مرور مؤشر الفأرة فوق أي شء حددت له الدث
mouseenter وهو شبهhover ...
ال جوز بعه , هذا العمل مجان
mousedown
نطلق هذا الحدث عند الضغط بزر الفأرة األسر فوق أي شء تم
mousedownتحدده بالحدث
ال جوز بعه , هذا العمل مجان
mouseup
نطلق هذا الحدث بعد رفع زر الفأرة األسر من الضغطة عن قلنا ف
mouseupأما ف , عند الضغط نطلق الحدث musedownال
بمجرد رفع اصبع عن الزر –فان الحدث نطلق بعد الضغط
.األسر
ال جوز بعه , هذا العمل مجان
mouseleave
هنا سنطلق الحدث بمجرد ابتعاد مؤشر الفأرة عن الشء الذي تم
...اعطائه هذا الحدث
ال جوز بعه , هذا العمل مجان
mousemove
هنا نطلق الحدث طالما مؤشر الفأرة داخل نطاق الخاصة الت تحتوي
. mouseoverعلى
ال جوز بعه , هذا العمل مجان
...بك أضب .... mouseoutو mouseoverوجد هناك أضا
mouseleaveوال mouseenterوهم شبهو تقربا ال
هناو هنا... لمعرفة الفرق اضغط هنا
... outerو innerاذا الحظت فإن االختالف ظهر عند وجود
Mouseout وmouseover عند انتقاله منouter الىinner وعلى...العكس عتبرها حدث
فهم عبروه حدثا واحدا حن mouseleaveوال mouseenterبنما innerالى outerالدخول من
ال جوز بعه , هذا العمل مجان
find()ان كان tagتستخدم هذه الدالة للبحث داخل الصفحة والبحث كون لل
parent وان كانchild ..
ال جوز بعه , هذا العمل مجان
after ...وهذه الدالة تستخدم إلضافة محتوى محدد الى احدى العناصر
ال جوز بعه , هذا العمل مجان
find and after example
وهذا مثال حتوي .. afterو findرأنا بالشرحتن السابقتن كف تعاملنا مع
ات بعدها االجراء الذي findفنحن نعلم أن ال ..معا afterو findعلى
afterوهذه المرة لنجعل االجراء هو , سنقوم باتخاذه
ال جوز بعه , هذا العمل مجان
أشذ أ ال اىا اال هللا حاذ ال شاشل ى اىيل ى اىحذ عيا ماو , ى
شاااااااااااااااااااااااء اااااااااااااااااااااااذش
أشذ أ حذ سسه هللا
أنيس حكمت أبو حميد
ال جوز بعه , هذا العمل مجان
first()تستخدم هذه الدالة لتنفذ االجراء على أول ما تم قرائته او استرجاعه
عن لو كان عنا قائمة فها عشرة عناصر سأخذ , من الخصائص
...وهناك طرقتن لكتابة هذه الدالة ...أول عنصر
ال جوز بعه , هذا العمل مجان
last()ما تم قرائته او استرجاعه من الخصائص آخرتستخدم هذه الدالة لتنفذ االجراء على
وهناك ...عنصر آخرعن لو كان عنا قائمة فها عشرة عناصر سأخذ ,
... firstطرقتن لكتابة هذه الدالة وبنفس األسلوب للدالة
ال جوز بعه , هذا العمل مجان
prevما تتم قرائته او آلخير من ا قبلتستخدم هذه الدالة لتنفذ االجراء على العنصر
و ..للوراء عنصر عنصر مع مالحظة أنه مكننا استخدامها للرجوع .استرجاعه...تكتب حسب التسلسل التال
ال جوز بعه , هذا العمل مجان
nextما تتم بعد األول من تستخدم هذه الدالة لتنفذ االجراء على العنصر
...مع مالحظة أنه مكننا استخدامها للتقدم .قرائته او استرجاعه
ال جوز بعه , هذا العمل مجان
blurأو بمعنى آخر الخروج من , هذا الحدث نطلق بمجرد انهاء التأشر
...موقع تم تحدده
ال جوز بعه , هذا العمل مجان
width()تستخدم هذه الدالة ف ال ج كوري لمعرفة العرض ألي شء ف
...الصفحة
$(document).width()
ال جوز بعه , هذا العمل مجان
height..وتستخدم هذه الدالة لمعرفة ارتفاع أي من الخصائص ف الصفحة
ال جوز بعه , هذا العمل مجان
فزمشا هللا اىعظ , اال ثزمش هللا رطئ اىقية
ال اى اال هللا حذ سسه هللا
أنيس حكمت أبو حميد
ال جوز بعه , هذا العمل مجان
serialize .. للخادم الرسالها المعلومات هذه وتجهز بتحددها قمت خاصة أي من القم ألخذ الدالة هذه تستخدم
جب أنه مراعاة مع , محدد شء مستوى على أو كامل form مستوى على تستخدم أن ومكن
صحح بشكل تعمل فلن واال أسماء للعناصر كون أن
ال جوز بعه , هذا العمل مجان
eachتستخدم هذه الدالة للمرور على جمع العناصر الت تم تحدد الخاصة
( loop...)وه تشبه عملة الدوران , لها
ال جوز بعه , هذا العمل مجان
on
مثل , تستخدم هذه الدالة للتحكم بحدث أو بمجموعة احداث ووضعها لعنصر معن
وكمنها أضا ..وهكذا ..انطالق أمر معن عند ضغطة واحدة أو ضغطتن
وهذه التقنة استخدمت .. submitالتحكم بأحداث على مستوى فورم مثل عملة
وهذه الدالة مكن استخدامها مع التطورات المستقبلة لو تم 1.7عند االصدار
..وه دالة قدمة bindوه بدل عن ... اضافة احداث جددة على سكربت
سأستخدم اسهل ..وهذه ه الصغة العامة لها وأنا ف المثال والشرح الذي سأذكره
..صغة لهذه الدالة
Syntax
$(selector).on(event,childSelector,data,function,map)
لمزد من التفاصل حول هذا الموضوع
سذهب بك الى موقع –رجى الضغط هنا
W3school تابع
ال جوز بعه , هذا العمل مجان
onال جوز بعه , هذا العمل مجان
offتستخدم هذه الدالة القاف عمل حدث معن تم استخدامه من قبل الدالة
on , وهذا عن أنoff تقوم على اقاف عملon ...
ال جوز بعه , هذا العمل مجان
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
ال جوز بعه , هذا العمل مجان
load(jquery and ajax) method
مكننا استدعاء صفحات .. من البنات الخارجة الت مكن استدعائها
... html.مثل ...االنترنت
ال جوز بعه , هذا العمل مجان
load(jquery and ajax) method
أو اي classأو idومكننا أضا استدعاء جزء من صفحة عن طرق
...شء آخر
ال جوز بعه , هذا العمل مجان
load(jquery and ajax) method
ومن التطبقات الت مكن استخدامها معرفة هل ام تحمل الصفحة
: مثال ..windowبنجاح أم ال ع طرق
ال جوز بعه , هذا العمل مجان
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
قد تصب هذه الدالة بعض المشاكل بخصوص
المتصفحات فقم بتجربتها على أكثر من متصفح
ال جوز بعه , هذا العمل مجان
نعيـب سماننـا والعيـب فيـنـا
ومـال سماننـا عـيـب سـىانـا
ونهجى ذا الشمـان بغيـز ذنـب
ولـى نطـق الشمـان لنـا هجانـا
وليس الذئب يأكـل لحـم ذئـب
ويأكـل بعضنـا بـعـض عيـانـاالشافعي رحمه هللا
أنيس حكمت أبو حميد
ال جوز بعه , هذا العمل مجان
$.post
تستخدم هذه الدالة الرسال بانات لخارج الصفحة واستقبال المعلومات الراجعة
وه من ..وبمعناها الدقق ه عملة جلب البانات من السرفر الى الصفحة .
أهم الدوال الموجودة والمستخدمة ف صفحات االنترنت
: jQueryوالصغة العامة لها داخل
$.post(“ استقبال البيانات “ ,”البيانات المراد ارسالها ”,”اسم الصفحة التي ستذهب لها المعلومات”);
تابع
ال جوز بعه , هذا العمل مجان
$.post ال جوز بعه , هذا العمل مجان
$.postلكن لو قمنا , الرسال البانات buttonف المثال السابق قمنا باستخدام
تقوم submitفهذا الكود لن عمل بشكل صحح الن submitباستخدام
ولتالف هذه المشكلة نقوم بوضع , على اعادة تحمل الصفحة عندما تنفذ
return داخلclick .. واالرجاع كون ..القاف التحملfalse
ال جوز بعه , هذا العمل مجان
$.get
ولكن هذه البانات تكون موجودة داخل , تستخدم أضا لجلب البانات
وأي فورم أنا أقوم بانشائه كون urlالسرفر والقم موجودة داخل
... GETافتراضا
ال جوز بعه , هذا العمل مجان
error..نستطع استخدام هذه الدالة لتالف حصول األخطاء الغر متوقعة
..وأي من األخطاء الت لم نأخذها بعن اإلعتبار ..مثال عند الذهاب لصفحة غر موجودة
ال جوز بعه , هذا العمل مجان
$.ajax(){}
الت postوال getباسلوب أقوى من ajaxاآلن سنتعامل مع ال
من get and postحث كانت , استخدمناها ف الدروس الماضة
واآلن سنتعلم بإذن هللا تعالى كف نزد .. ajaxاألمثلة البسطة على
.. ajax.$من قوة الصفحة وجعلها أكثر مرونة باستخدام
.. ajax.$سأتكم أوال عن المكونات الرئسة والموجودة داخل
فصل بن كل مكون واآلخر فاصلة اال اذا كان أخر مكون ال نضع خلفه فاصلة ولس : مالحظة
...جمعها الزام
المكون األول
ال جوز بعه , هذا العمل مجان
$.ajax(){}
المكون الثات
ال جوز بعه , هذا العمل مجان
$.ajax(){}
المكون الثالث
ال جوز بعه , هذا العمل مجان
$.ajax(){}
المكون الرابع
ال جوز بعه , هذا العمل مجان
$.ajax(){}
المكون الخامس
ال جوز بعه , هذا العمل مجان
$.ajax(){}
المكون السادس
ال جوز بعه , هذا العمل مجان
$.ajax(){}
األمثلة
ال جوز بعه , هذا العمل مجان
$.ajax example
( : ال يوجد خطأ : )المثال األول
(:404خطأ : )المثال الثاني
ال جوز بعه , هذا العمل مجان
ف اىخزب أشنش هللا اىعي اىعظ ىب فق اى أسزغفش أرة اى أسأه هللا سحز اعر ثبهلل سخط اىبس اىي ا زا اىعو خبىص ىجل اىنش فزقجي ب هللا ب سح ب سح
اىي عيب ب فعب افعب ثب عيزب ال أذ اىعي اىحن
اىي آ ..اىي اغفش ى ىاىذ ىيؤ أحبئ أار
اخا ال رس صبىح دعبئن هللا ى ...ال رس ا اىعي أبخ ىيعي صمبح صمبح اىعي شش
اىزفق
آخش دعاب أ اىحذ هلل سة اىعبىاخم أس
أنيس حكمت أبو حميد
ال جوز بعه , هذا العمل مجان