JQuery الدرس الاول فى

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) تخرج رسالة تحذيرية.

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: