Syntax
كما قلنا سابقا ان الجى كويرى هى اطار عمل للغة الجافا سكريبت لذلك تكتب اكوادها بين اكواد الجافا سكريبت ولابد من تعريف مكتبة الجى كويرى كما تعلمنا سابقا والشكل العام لكتابة اكواد الجى كويرى كالتالى:
$(selector).action()
حيث نستخدم علامة الدولار ($) فى بداية السطر للتعريف باننا نكتب اكواد جى كويرى ثم بعد ذلك (selector) وهى عبارة عن اكواد (HTML) ثم (action) وهى عبارة عن الحدث الذى يتم تنفيذة.
selector
|
مثال |
Selector |
|
$(“p”) |
Tag of HTML |
|
$(“#test”) |
#id Selector |
|
$(“.test”) |
.class Selector |
|
$(this) |
Selector of the current HTML element |
|
$(“*”) |
Selector of all HTML elements |
actions or events
|
مثال |
الشرح |
Events |
|
$(“p”).click() |
حدث الضغط على الماوس |
click |
|
$(“p”). dblclick() |
حدث الضغط مرتين على الماوس |
dblclick |
|
$(“#p”). mouseenter() |
حدث اثناء وضع الماوس على جزء معين بالصفحة |
mouseenter |
|
$(“#p”). mouseleave() |
حدث اثناء رفع الضغط على الماوس |
mouseleave |
|
$(“#p”). keypress() |
حدث الضغط على زر من ازرار الكيبورد |
keypress |
|
$(“#p”). keydown() |
حدث اثناء الضغط لاسفل على زر من ازرار الكيبورد |
keydown |
|
$(“#p”). keyup() |
حدث اثناء رفع الضغط على زر من ازرار الكيبورد |
keyup |
|
$(“.div”). submit() |
حدث الضغط على زر submit |
submit |
|
$(“.div”). focus() |
حدث اثناء التركيز بالماوس على شىء معين فى صفحة الويب |
focus |
|
$(“.div”). blur() |
حدث اثناء ابعاد التركيز بالماوس على شىء معين فى صفحة الويب |
blur |
|
$(“h1”). load() |
حدث عند تحميل الصفحة |
load |
|
$(“h1”). unload() |
حدث فى حالة عدم تحميل الصفحة |
unload |
The Document Ready Event:
يفضل وضع اكواد الجى كويرى بين حدث (document ready) لتجنب حدوث مشاكل عند كتابة الاكواد كالتالى:
$(document).ready(function(){
// jQuery code here
});
امثلة:
(1)
<!DOCTYPE html>
<html>
<head>
< src=”jquery-1.10.2.min.js” script>
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Click me </p>
<p>Click me too</p>
</body>
</html>
حيث عند تنفيذ حدث الضغط على كود البارجراف (p) يختفى النص المكتوب بداخلة.
(2)
<!DOCTYPE html>
<html>
<head>
< src=”jquery-1.10.2.min.js” script>
$(document).ready(function(){
$(“#p1”).mouseleave(function(){
alert(“bye now!”);
});
});
</script>
</head>
<body>
<p id=”p1″>move mouse</p>
</body>
</html>
حيث عند ابعاد الماوس من على النص (move mouse) تخرج رسالة تحذيرية.
(3)
<!DOCTYPE html>
<html>
<head>
< src=”jquery-1.10.2.min.js” script>
$(document).ready(function(){
$(“.p1”).mouseenter(function(){
alert(“bye now!”);
});
});
</script>
</head>
<body>
<p>move mouse</p>
</body>
</html>
حيث عند الوقوف بالماوس على النص (move mouse) تخرج رسالة تحذيرية.
w3s4arb 