الفرق بين المراجعتين ل"jQuery/click"
Kinan-mawed (نقاش | مساهمات) |
ط (استبدال النص - 'JQuery' ب'jQuery') |
||
| (11 مراجعة متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:التابع <code>.click()</code> في jQuery}}</noinclude> | <noinclude>{{DISPLAYTITLE:التابع <code>.click()</code> في jQuery}}</noinclude> | ||
| − | |||
== <code>.click( handler )</code> == | == <code>.click( handler )</code> == | ||
===القيمة المعادة=== | ===القيمة المعادة=== | ||
| − | كائن [[ | + | كائن [[jQuery/jQuery|jQuery]]. |
===الوصف=== | ===الوصف=== | ||
يُستخدَم التابع <code>.click()</code> في ربط مُعالِج الأحداث (event handler) إلى الحدث <code>click</code> في JavaScript أو إطلاق هذا الحدث على عنصر ما. | يُستخدَم التابع <code>.click()</code> في ربط مُعالِج الأحداث (event handler) إلى الحدث <code>click</code> في JavaScript أو إطلاق هذا الحدث على عنصر ما. | ||
| سطر 27: | سطر 26: | ||
لا يقبل هذا الشكل من التّابع أيّة وسائط. | لا يقبل هذا الشكل من التّابع أيّة وسائط. | ||
| − | يُعدُّ هذا التّابع اختصارًا للتابع <code>.on( "click", handler )</code> في أول شكلين له، وللتّابع <code>.trigger( "click" )</code> في شكله الثّالث. يُرسَل الحدث <code>click</code> إلى العنصر عندما يكون مُؤشّر الفأرة فوق العنصر ويُنقَر على زر الفأرة ثمّ يُترَك | + | يُعدُّ هذا التّابع اختصارًا للتابع <code>.on( "click", handler )</code> في أول شكلين له، وللتّابع <code>.trigger( "click" )</code> في شكله الثّالث. يُرسَل الحدث <code>click</code> إلى العنصر عندما يكون مُؤشّر الفأرة فوق العنصر ويُنقَر على زر الفأرة ثمّ يُترَك. بإمكان أي عنصر HTML أن يستقبل هذا الحدث، فلنأخذ مثال HTML التالي:<syntaxhighlight lang="html"> |
| + | <div id="target"> | ||
| + | انقر هنا | ||
| + | </div> | ||
| + | <div id="other"> | ||
| + | إطلاق مُعالِج الأحداث | ||
| + | </div> | ||
| + | </syntaxhighlight>يُمكِن ربط مُعالِج الحدث إلى عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>:<syntaxhighlight lang="javascript"> | ||
| + | $( "#target" ).click(function() { | ||
| + | alert( "استُدعي معالج الأحداث للتابع .click()" ); | ||
| + | }); | ||
| + | </syntaxhighlight>إن ضغطنا الآن على هذا العنصر، ستُعرَض رسالة السّجل:<syntaxhighlight lang="text"> | ||
| + | استُدعي معالج الأحداث للتابع .click() | ||
| + | </syntaxhighlight>بإمكاننا أيضًا إطلاق الحدث عند النقر على عنصر آخر:<syntaxhighlight lang="javascript"> | ||
| + | $( "#other" ).click(function() { | ||
| + | $( "#target" ).click(); | ||
| + | }); | ||
| + | </syntaxhighlight>بعد تنفيذ هذه الشيفرة سيُعطينا الضغط على عبارة "إطلاق مُعالِج الحدث" رسالة التنبيه. | ||
| + | |||
| + | يُطلَق الحدث <code>click</code> فقط بعد سلسلة الأحداث هذه: | ||
| + | * عندما يكون زر الفأرة منقورًا ويكون مُؤشّر الفأرة بداخل مجال العنصر. | ||
| + | * عندما يُترَك زر الفأرة ويكون مُؤشّر الفأرة بداخل مجال العنصر. | ||
| + | يكون عادةً هذا هو التسلسل المطلوب قبل إطلاق الحدث، وإن لم نكن نرغب بهذا فقد تكون الأحداث <code>mousedown</code> و <code>mouseup</code> مُلائِمةً أكثر. | ||
| + | === ملاحظات إضافية=== | ||
| + | *لمّا كان التّابع <code>.click()</code> مُجرَّد اختصار للتابع <code>.on( "click", handler )</code>، فمن المُمكن إلغاء الحدث عبر استخدام <code>.off( "click" )</code>. | ||
| + | |||
| + | === أمثلة === | ||
| + | إخفاء الفقرات الموجودة في الصفحة عند النقر عليها:<syntaxhighlight lang="html"> | ||
| + | <!doctype html> | ||
| + | <html lang="en"> | ||
| + | <head> | ||
| + | <meta charset="utf-8"> | ||
| + | <title>click مثال عن الحدث</title> | ||
| + | <style> | ||
| + | p { | ||
| + | color: red; | ||
| + | margin: 5px; | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | p:hover { | ||
| + | background: yellow; | ||
| + | } | ||
| + | </style> | ||
| + | <script src="https://code.jquery.com/jquery-1.10.2.js"></script> | ||
| + | </head> | ||
| + | <body> | ||
| + | |||
| + | <p>الفقرة الأولى</p> | ||
| + | <p>الفقرة الثانية</p> | ||
| + | <p>فقرة أخيرة أيضًا</p> | ||
| + | |||
| + | <script> | ||
| + | $( "p" ).click(function() { | ||
| + | $( this ).slideUp(); | ||
| + | }); | ||
| + | </script> | ||
| + | |||
| + | </body> | ||
| + | </html> | ||
| + | </syntaxhighlight>إطلاق الحدث <code>click</code> على جميع الفقرات الموجودة في الصفحة:<syntaxhighlight lang="javascript"> | ||
| + | $( "p" ).click(); | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | ==<span>مصادر</span>== | ||
| + | *<span>[http://api.jquery.com/click/ صفحة التابع .click() في توثيق jQuery الرسمي].</span> | ||
| + | [[تصنيف:jQuery]] | ||
| + | [[تصنيف:jQuery Events]] | ||
المراجعة الحالية بتاريخ 09:21، 24 يونيو 2018
.click( handler )
القيمة المعادة
كائن jQuery.
الوصف
يُستخدَم التابع .click() في ربط مُعالِج الأحداث (event handler) إلى الحدث click في JavaScript أو إطلاق هذا الحدث على عنصر ما.
.click( handler )
أضيفت في الإصدار: 1.0.
handler
دالة على الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُطلَق فيها الحدث.
.click( [eventData ], handler )
أضيفت في الإصدار: 1.4.3.
eventData
أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيّة استخدام أي نوع)، ويُمثِّل كائن يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.
handler
دالة على الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُطلَق فيها الحدث.
.click()
أضيفت في الإصدار: 1.0.
لا يقبل هذا الشكل من التّابع أيّة وسائط.
يُعدُّ هذا التّابع اختصارًا للتابع .on( "click", handler ) في أول شكلين له، وللتّابع .trigger( "click" ) في شكله الثّالث. يُرسَل الحدث click إلى العنصر عندما يكون مُؤشّر الفأرة فوق العنصر ويُنقَر على زر الفأرة ثمّ يُترَك. بإمكان أي عنصر HTML أن يستقبل هذا الحدث، فلنأخذ مثال HTML التالي:
<div id="target">
انقر هنا
</div>
<div id="other">
إطلاق مُعالِج الأحداث
</div>
يُمكِن ربط مُعالِج الحدث إلى عنصر <div>:
$( "#target" ).click(function() {
alert( "استُدعي معالج الأحداث للتابع .click()" );
});
إن ضغطنا الآن على هذا العنصر، ستُعرَض رسالة السّجل:
استُدعي معالج الأحداث للتابع .click()
بإمكاننا أيضًا إطلاق الحدث عند النقر على عنصر آخر:
$( "#other" ).click(function() {
$( "#target" ).click();
});
بعد تنفيذ هذه الشيفرة سيُعطينا الضغط على عبارة "إطلاق مُعالِج الحدث" رسالة التنبيه.
يُطلَق الحدث click فقط بعد سلسلة الأحداث هذه:
- عندما يكون زر الفأرة منقورًا ويكون مُؤشّر الفأرة بداخل مجال العنصر.
- عندما يُترَك زر الفأرة ويكون مُؤشّر الفأرة بداخل مجال العنصر.
يكون عادةً هذا هو التسلسل المطلوب قبل إطلاق الحدث، وإن لم نكن نرغب بهذا فقد تكون الأحداث mousedown و mouseup مُلائِمةً أكثر.
ملاحظات إضافية
- لمّا كان التّابع
.click() مُجرَّد اختصار للتابع.on( "click", handler )، فمن المُمكن إلغاء الحدث عبر استخدام .off( "click" ).
أمثلة
إخفاء الفقرات الموجودة في الصفحة عند النقر عليها:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>click مثال عن الحدث</title>
<style>
p {
color: red;
margin: 5px;
cursor: pointer;
}
p:hover {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>الفقرة الأولى</p>
<p>الفقرة الثانية</p>
<p>فقرة أخيرة أيضًا</p>
<script>
$( "p" ).click(function() {
$( this ).slideUp();
});
</script>
</body>
</html>
إطلاق الحدث click على جميع الفقرات الموجودة في الصفحة:
$( "p" ).click();