تبلیغات
6 تایی - ساختار دستوری jQuery :

امروز:

ساختار دستوری jQuery :

ساختار دستوری jQuery :

آموزش 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 را بر روی آنها اجرا کرده ایم . این متد عناصری که دیده می شوند را پنهان عناصر پنهان را آشکار می نماید . برای اجرای این متد بایستی بر روی دکمه فرمان خروجی مثال کلیک نمایید :


This is paragraph 1 .

This is paragraph 2 . Click me
Example Example
< html >
< head >
< script type="text/javascript" src="jquery.js" > < /script >
< script type="text/javascript" >
$ (document). ready ( function( )
$ ("button") . click ( function( )
$ ( " p.Ex_1 " ) . toggle( );
);
);

کد
This is paragraph 1 .

This is paragraph 2 .

Click me
خروجی


نوشته شده در : دوشنبه 4 مرداد 1395  توسط : مطالب علمی 2015.    نظرات() .

 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر