آموزش طراحی وب

قواعد دستوری و یا Syntax جی کوئری

با استفاده از قواعد و دستورات جی کوئری شما می توانید بر روی تک تک عناصر HTML افکت مورد نظر خود را اعمال نمایید …

syntax jquery

فصل اول (مبانی جی کوئری)

جلسه سوم ( قواعد دستوری و یا Syntax جی کوئری)

با استفاده از قواعد و دستورات جی کوئری شما می توانید بر روی تک تک عناصر HTML افکت مورد نظر خود را اعمال نمایید ، با استفاده از قاعده ی دستوری زیر شما می توانید عنصر مورد نظر را انتخاب نمایید و افکت دلخواه و یا عملیات مورد نظر خود را طراحی و پیاده سازی کنید .

ساختار اصلی یک دستور جی کوئری :

 $ : برای دسترسی به جیکوئری  به کار میرود.

selector : برای جستجوی عناصر HTML  به کار میرود.

()action: عملی را که که بر روی عنصر بایستی  انجام شود مشخص میکند.

برای درک بهتر یک مثال می زنیم :

حال ما میخواهیم عنصر HTML دلخواه خود را پنهان کنیم . برای این کار از اکشن hide() استفاده می کنیم ، به این صورت :

 این مثال همه ی عناصر موجود در صفحه را مخفی می کند :

این مثال المنت جاری را مخفی میکند:

این مثال المنتی که نام Class  آن Example هست را مخفی میکند:

این مثال المنتی که نام  ID  آن Example هست را مخفی میکند:

 این مثال  Span های موجود در صفحه را مخفی می کند :

 این مثال  Spanی که در تگ div با کلاس Example هست را مخفی می کند :

 حال با قواعد استفاده از جی کوئری آشنا شدید ، شما می توانید به جای اکشن  hide() از هر اکشنی که میخواهید استفاده کنید .

به عنوان مثال برای نمایش span پنهان شده می توانید از دستور زیر استفاده کنید :

 حتی می توانید سرعت پنهان شدن و آشکار شدن Span را مشخص نمایید . که از دستور زیر استفاده می کنید :

۳۰۰۰  به این معنی می باشد که این span طی ۳ ثانیه آشکار شود .

حال با استفاده از مواردی که در بالا آموختیم می خواهیم یک تکه کد جی کوئری به همراه هم پیاده کنیم :

در این مثال می گوییم که در صفحه ی در حال اجرا در صورتی که لود صفحه کامل شده است، وقتی بر روی دکمه  (button)کلیک شد ، div ها به ترتیب با سرعت های متفاوت نمایش داده شوند .

 خوب جلسه ی امروز به پایان رسید ، برای درک بهتر این جلسه فایل مربوطه را دانلود نمایید .

تهیه شده در مدرسه آنلاین ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۵

  • سلام
    سایت بسیار خوبی دارید

    یک پیشنهاد
    اگر برای مطالب اموزش فایل پی دی اف رو هم پیوست میکردید خیلی عالی میشد
    باز هم ممنون

  • سلام و تشکر از مطالب مفیدتون
    واسه اجرا شدن کدهای بالا اگه داخل تگ head یه باز کنیم کافیه یا کار دیگه ای هم باید انجام داد؟
    من این کار رو انجام دادم ولی کدها کار نمیکنه!
    مرسی

    • سلام دوست عزیز
      کتابخانه اصلی جی کوئری رو به صفحه اضافه می کنید؟

  • سلام
    ممنون از شیوه ی آموزش فوق العادتون. سوالات جمع شده طی دو سه سال رو به راحتی از سایت گرفتم، واقعا جی کوئری رو از این راحت تر نمیشد فهمید
    باز هم متشکرم

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین