ساختار دستورات در JQuery

ساختار دستورات در JQuery

با jQuery یک عنصر یا تعدادی عنصر را انتخاب می کنید و عملی را روی آنها انجام می دهید.

نحوه نوشتن jQuery

jQuery بگونه ای بهینه شده که بتوانید با آسان ترین راه ممکن، عناصر HTML را انتخاب و عملی را روی آنها انجام دهید.

اصلی ترین دستور در jQuery:

$(selector).action()
  • علامت $: مانند متد ()document.getElementById در JavaScript عمل می کند (با این تفاوت که getElementById فقط به عناصر با id مشخص دسترسی داشت ولی $ می تواند به تمام عناصر دسترسی داشته باشد) و برای دسترسی به عناصر HTML در jQuery استفاده می شود.
  • (selector): نام کلاس، شناسه، نام تگ، نوع، نام خصوصیت و یا مقدار خصوصیت عنصر HTML است.
  • ()action: عملی است که روی عنصر HTML انجام می شود.

مثال:

$(this).hide() //عنصر جاری را پنهان می کند
$(“p”).hide() //تمام پاراگراف ها را پنهان می کند
$(“.test”).hide() //تمام عناصری که شامل کلاس مشخص شده در این کد هستند را پنهان می کند
$(“#test”).hide() //عنصری که شامل شناسه مشخص شده در این کد هستند را پنهان می کند

آیا با گزینشگرهای CSS آشنا هستید؟ (CSS selector)
در jQuery برای دسترسی به عناصر HTML و دستکاری آنها از گزینشگرهای CSS استفاده می شود. در مطلب بعدی به این موضوع خواهیم پرداخت.


رویداد ready

همانطور که تا به حال در مثال ها مشاهده کرده اید، تمام متدهای jQuery داخل رویداد ready آورده شده اند:

$(document).ready(function(){

// jQuery methods go here…

});

این امر باعت می شود تا کدهای jQuery بعد ازبارگذاری کامل صفحه، اجرا شوند. همچنین با این تکنیک، قادر خواهید بود کدهای JavaScript را در قسمت <head> صفحه قرار دهید.

در اینجا مثال هایی آورده شده است که اگر قبل از بارگذاری کامل صفحه اجرا شوند، عمل نخواهند کرد:

  • تلاش برای پنهان کردن عنصری که هنوز ایجاد نشده است.
  • تلاش برای گرفتن عرض و ارتفاع عکسی که هنوز بارگذاری نشده است.

نکته: تیم jQuery یک متد کوتاه تر برای رویداد ready ایجاد کرده است:

$(function(){

// jQuery methods go here…

});

می توانید هر کدام از روش های بالا را که ترجیح می دهید استفاده کنید. اما توجه داشته باشید که روش اول قابل فهم تر و خواناتر است.



اگه خوشت اومد به اشتراک بزار


اگه به اشتراک نزاشتی حداقل لایک کن:(

نظر شما در رابطه با این آموزش چیست


بالا

تمامی حقوق مادی و معنوی این وبسایت محفوظ میباشد و متعلق است به Webtekar.ir.
Google