ساختار دستوری jQuery
ساختار دستوری jQuery :
در قسمت مقدمه ، شما را با یک مثال از زبان jQuery آشنا کردیم . دراین فسمت قصد داریم
تا ساختار کلی jQuery را به شما آموزش دهیم .
در jQuery شما بیستی ابتدا عنصر یا عناصری که می خواهید در صفحه تغییر دهید ، را انتخاب
کنید . سپس متد مورد نظرتان را بر روی آن اجرا نمایید . ساختار کلی دستور jQuery به
صورت زیر است :
|
Syntax
|
$ ( Selector ) . action ( )
|
در ادامه به توضیح مفهوم ساختار فوق می پردازیم :
1 : علامت $ : این علامت ، علامت خاص
زبان jQuery است . این علامت را بایستی در ابتدای هر خط دستوری زبان jQuery قرار دهید
. به این وسیله مرورگر تشخیص می دهد که کد نوشته شده ، به زبان $ است و باید چگونه
آن را اجرا نماید .
2 : انتخاب کننده ( Selector ) : در
قسمت دوم شما باید عنصر و یا عناصر مورد نظر خود را به وسیله انواع انتخاب کننده (
Selector ) انتخاب نمایید . 4 روش برای انتخاب عنصر مورد نظرتان وجود دارد . انتخاب
خود عنصر جاری ، انتخاب بر حسب نوع عنصر ، انتخاب بر حسب کلاس ( class ) عنصر و یا
انتخاب بر حسب شناسه ( Id ) عنضر . در مثال های زیر انواع این حالت را نمایش می دهیم
. در این مثال ها از متد ( ) Hide که باعث پنهان شدن عنصر می شود ، استفاده شده است
. در بخش بعدی به طور کامل تر به نحوه انتخاب عناصر در jQuery می پردازیم . مثال های
این بخش صرفا برای آشنایی با ساختار این زبان است .
- انتخاب خود عنصر جاری : این کد باعث می شود تا متد مورد نطر
بر روی عنصر جاری اجرا شده و آن را پنهان می کند .
|
Syntax
|
$ ( this ) . hide ( )
|
- انتخاب بر حسب نوع کلی عنصر : این کد باعث می شود تا متد مورد
نظر بر روی کلیه عناصر از نوع تعیین شده اجرا شود . در مثال زیر اجرا متد کلیه عناصری
که از نوع پاراگراف ( < p > ) هستند را پنهان می کند .
|
Syntax
|
$ ( "p" ) . hide ( )
|
- انتخاب بر حسب کلاس ( class ) عنصر : این کد باعث می شود تا
متد مورد نظر بر روی کلیه عناصر از کلاس تعیین شده اجرا شود . در مثال زیر اجرا متد
کلیه عناصری را که از نوع پاراگراف بوده و جز کلاس ( test ) هستند را پنهان می کند
.
|
Syntax
|
$ ( "p.text" ) . hide ( )
|
- انتخاب بر حسب شناسه ( Id ) عنصر : این کد باعث می شود تا متد
مورد نظر بر روی کلیه عنصری که شناسه انحصاری آن ) Id ) تعیین شده اجرا شود . در مثال
زیر اجرا متد عنصری را که Id آن برابر با و جز کلاس ( test ) می باشد را پنهان می کند
.
|
Syntax
|
$ ( "#.test" ) . hide ( )
|
3 : انتخاب متد ( action ) : در قسمت
سوم شما متدی را که می خواهید بر روی عنصر یا عناصر مورد نظرتان اجرا شود را تعیین
می کنید .
تابع document.ready :
این تابع را باید یکبار در ابتدای کلیه دستورات jQuery قرار دهید . قرار دادن این تابع
باعث می شود تا قبل از لود ( load ) شدن کامل صفحه ( یا به اصطلاح ready شدن آن ) ،
هیچ یک از دستورات jQuery اجرا نشود . اجرا شدن این دستورات قبل از لود کامل صفحه می
تواند برای مرورگر مشکل ساز شود . برای مثال ، مثال های ارائه شده در قسمت بالا را
در نظر بگیرید . تا زمانی که صفحه کاملا لود نشود ، هیچ یک از عناصر تعیین شده هنوز
وجود خارجی ندارن تا متد تعیین شده روی آنها انجام شود . این مسئله می تواند باعث شکست
مرورگر شود .
در کد زیر نحوه تعریف تابع document.ready تشریح شده است :
|
Syntax
|
$ ( document ) . ready ( function ( ) {
کد های jQuery را اینجا می نویسید .//
});
|
یک مثال کاربردی :
پس از تعریف ساختار دستوری jQuery ، تمام موارد فوق را در یک مثال کلی نشان می دهیم
.
مثال : در مثال زیر 2 پاراگراف داریم که جز کلاس Ex_1
هستند . با کد نوشته شده متد ( ) toggle را بر روی آنها اجرا کرده ایم . این متد عناصری
که دیده می شوند را پنهان و عناصر پنهان را آشکار می کند . برای اجرای این متد باید
بر روی دکمه فرمان خروجی مثال کلیک نمایید :
< html >
< head >
< script type="text/javascript" src="jquery.js"
> < /script >
< script type="text/javascript" >
$ (document). ready ( function(
) {
$ ("button") . click ( function(
){
$ ( " p.Ex_1 " ) . toggle(
);
});
});
</script>
</head>
<body>
<p> This is paragraph 1 . </p>
<p> This is paragraph 2 . </p>
<button> Click me</button>
</body>
</html>
|
|
This is paragraph 1 .
This is paragraph 2 .
|