آموزش ساختار jQuery

با سلام به شما دوستان عزیز ، امیدوارم که شاد باشید. با ساختار نگارشی (jQuery syntax ) درخدمت شماهستم.به کمک کتابخانه ی jQuery می توان از المان های HTML query گرفته (آن را یافته) و بسته به نیاز خود “عملیاتی” را بر روی آن ها پیاده کرد.

ساختار نگارشی

ساختار نگارشی این فریم ورک ویژه ی گزینش المان های HTML و انجام عملیات بر روی آن ها طراحی شده است.

ساختار پایه ای jQuery به صورت زیر می باشد:

$(selector).action()

علامت دلار $: برای اعلان jQuery و دسترسی به عناصر html ارائه شده و مورد استفاده قرار می گیرد. این علامت معادل متد ()document.getElementById در جاوا اسکریپت می باشد با این تفاوت که با تابع مذکور فقط می توان به عناصر با شناسه ی معین دسترسی داشت ولی $ می تواند به تمام عناصر دسترسی داشته باشد.

:selector اسم کلاس، شناسه، اسم tag، نوع، نام خاصیت و یا مقدار خاصیت المان مورد نظر HTML است (المان های html را یافته/ از آن query بگیرد).

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

مثال

$(this).hide() – المان جاری را پنهان می سازد.

$(“p”).hide() – تمامی المان های

را مخفی می سازد.

$(“.test”).hide() – تمامی المان هایی که دربردارنده ی کلاس class=”test” هستند را پنهان می سازد.

$(“#test”).hide()-عنصری که شامل شناسه مشخص شده در کد جاری هستند را hide می کند.

آیا با انتخاب گرهای (CSS selector) CSS آشنایی دارید؟

در jQuery برای دسترسی به عناصر HTML، تنظیم و دستکاری آنها می توان از انتخاب گرهای CSS بهره گرفت.

رخداد ready

شاید تاکنون متوجه شده باشید که کلیه ی متدهای jQuery در مثال های پیشین داخل رخداد ready قرار دارند:

$(document).ready(function(){
// jQuery methods go here…
});

این کار به منظور جلوگیری از اجرای کد پیش از اتمام بارگذاری صفحه (و آماده شدن آن) صورت می گیرد (سبب می شود کدهای jQuery پس از بارگذاری کامل صفحه، اجرا شوند).

توصیه می شود همیشه صبر کنید تا صفحه کاملا load شود، سپس همچنین با این شیوه قادر خواهید بود کدهای JavaScript را در بخش صفحه بگذارید.

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

تلاش برای پنهان کردن عنصری که هنوز ایجاد نشده است.

تلاش برای گرفتن اندازه (عرض و ارتفاع) تصویری که هنوز کاملا load نشده است.

نکته

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

$(function(){
// jQuery methods go here…
});

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