آموزش JQuery جلسه اول معرفی JQuery خوب بعد از اتمام جلسات جاوااسکریپت اومدم سراغ JQuery. برای آموزش این کتابخونه ی جاوااسکریپت تصمیم داشتم که برای هر جلسه یه تاپیک جداگونه بزنم ولی بعد از کلی فکر کردن به این نتیجه رسیدم که بهتره به همون روشی که توی جاوااسکریپت پیش رفتیم یعنی توی یه تاپیک منحصر به فرد همه جلسات پشت سر هم بیاد. با اینکه روش هر جلسه یک تاپیک برای جلب موتورهای جستجو مفیدتره ولی اینجوری (یعنی یک تاپیک اختصاصی) برای کاربرا کار رو راحت تر می کنه چون توی یه تاپیک می تونن کل جلسات رو در صفخات مختلف پشت سر هم ببینند. ضمناً منبع ترجمه من باز هم وب سایت W3Schools هست. پس میرم سراغ جلسه اول: کتابخانه جی کوئری را می توان با یک خط کد به صفحه وب افزود. قبل از جی کوئری چه چیزی باید بدانید؟ قبل از مطالعه جی کوئری شما باید اطلاعات پایه ای درباره این مباحث داشته باشید: • HTML • CSS • JavaScript JQuery چیست؟ جی کوئری کتابخانه ای از توابع جاوااسکریپت است. جی کوئری یک کتابخانه جاوا اسکریپت سبک با ویژگی «کمتر بنویس، بیشتر کار انجام بده» است. کتابخانه جی کوئری شامل خصوصیات زیر است: • انتخاب عناصر HTML • دستکاری عناصر HTML • دستکاری CSS • توابع رویداد (event) HTML • انیمیشن ها و افکت های جاوااسکریپت • پیمایش و اصلاح HTML DOM • AJAX • یک سری ابزارهای دیگر افزودن کتابخانه JQuery به صفحه تمام کتابخانه جی کوئری در یک فایل جاوااسکریپت ذخیره شده که شامل تمام توابع جی کوئری است. این کتابخانه را می توانید از سایت JQuery.com دانلود نمایید. با یک خط کد زیر می توانید این کتابخانه را برای استفاده به صفحه وب خود وصل کنید. دقت کنید که این خط باید بین تو تگ <head> و </head> صفحه اضافه نمایید. کد: <script type="text/javascript" src="jquery.js"></script> اولین مثال JQuery مثال زیر نحوه استفاده از تابع hide() را نشان می دههد که با استفاده از آن تمام عناصر <p> صفحه را مخفی می کنیم. کد: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html> اگر متوجه مثال نشدید اصلاً نگران نباشید چون در جلسات آینده با تک تک کدها آشنا خواهید شد. فقط این مثال را یک بار کپی کرده و اجرا نمایید تا حداقل یک نمونه از کاربر جی کوئری را دیده باشید. دانلود JQuery دو ورژن از جی کوئری برای دانلود وجود دارد: یک مدل کوچک و یک مدل فشرده نشده که دومی بیشتر برای برنامه نویسان، برای مطالعه کدها و بررسی آنهاست. هر دو نسخه را می توانید از همان سایت JQuery.com دانلود نمایید. جایگزین های دانلود اگر نمی خواهید این کتابخانه را دانلود کنید و یا علاقه ای به آپلود آن در هاست خودتان ندارید؛ می توانید از نسخه هایی که در هاست گوگل و یا مایکروسافت موجود است استفاده کنید. فقط به این موضوع هم توجه کنید با توجه به تحریم های ایران ممکن است دچار مشکل شوید پس بهتر است از روش اول استفاده نمایید. • گوگل: کد: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> • مایکروسافت: کد: <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> [HR][/HR]
پاسخ : آموزش گام به گام JQuery اما جلسه دوم آموزش JQuery JQuery – جلسه دوم: نحو JQuery یا جی کوئری شما عناصر HTML را انتخاب کرده (Query = Select) و «اعمالی» را بر روی آنها اجرا می کنید. مثال های نحوی JQuery کد: $(this).hide() این مثال متد hide() جی کوئری را نشان می دهد که عنصر جاری را مخفی می کند کد: $(“#test”).hide() این مثال متد hide() را روی عنصری با id=”test” اعمال می کند. کد: $(“p”).hide() این مثال تمام عناصر <p> صفحه را مخفی می کند. کد: $(“.test”).hide() این مثال تمام عناصر با class=”test” را مخفی می کند. نحو (Syntax) جی کوئری نحو جی کوئری برای انتخاب عناصر HTML مناسب سازی شده و بعضی اعمال (Action) را بر روی آن عناصر اعمال می کند. دستور نحوی اصلی به این صورت است: کد: $(selector).action() یک علامت دلار ($) که JQuery را تعریف میکند. یعنی نشان دهنده این است که این یک دستور جی کوئری است. یک (selector) که برای یافتن (query) عناصر HTML به کار می رود. یک اکشن جی کوئری برای اعمال روی عناصر مثال ها: کد: $(this).hide() عنصر حاضر را مخفی می کند. کد: $("p").hide() تمام پاراگراف ها را مخفی می کند. کد: $("p.test").hide() همه ی پاراگراف ها با class=”test” را مخفی می کند. کد: $("#test").hide() همه عناصر با id=”test” را مخفی می کند. نکته: جی کوئری ادغامی از دستورات انتخاب XPath و CSS است. البته در جلسات بعد توضیحات بیشتری درباره نحو و دستورات جی کوئری می آموزید. تابع Document Ready: شاید تا به حال کدهای جی کوئری دیده باشید. نکته قابل توجه در این است که همه کدهای جی کوئری در داخل تابع document.ready() نوشته می شوند. کد: $(document).ready(function(){ // jQuery functions go here... }); این تابع باعث می شود که کدهای جی کوئری قبل از لود کامل صفحه و آماده شدن اجرا نشوند. این کار از تداخل کد ها جلوگیری می کند. مثلاً اگر کارهای زیر را بخواهیم قبل از لود کامل صفحه انجام دهیم به خطا بر می خوریم: تلاش برای مخفی کردن عنصری که وجود ندارد (در حقیقت لود نشده است) تلاش برای به دست آوردن سایز عکسی که هنوز لود نشده است.
