آموزش jquery ساختار دستوری قسمت دوم

ساختار جی‌کوئری بر این مبناست که شما یک المنت را انتخاب کرده و عملیات مختلفی روی آن انجام دهید.

ساختار ساده آن بدین شکل است :

$(selector).action()

علامت $ ، برای فراخوانی و دسترسی به جی‌کوئری بکار می‌رود.

(selector) ، المنت را انتخاب می‌کند.بجای selector آدرس ، نام المنت را قرار می‌‌دهیم. مثلا ('div.news')

و ()action. دستوری است که به selector نسبت می‌دهیم.

 مثلا :

$("p").hide() - hides all <p> elements.

 تمام المنت های p را مخفی می‌کند.

 رویداد Doqument Ready :

$(document).ready(function(){
 // متد های جی‌کوئری...
}); 

شاید بپرسید چرا تمام Method های ما درون Doqument Ready هستاین امر سب می‌شود تا کد های جی‌کوئری تا زمانی صفحه کامل لود نشده ، اجرا نشوند و معمولا بهتر است که تمام صفحه کاملا لود شده و در پایان کد های جی‌کوئری اجرا شود.

 

اگر این کار صورت نگیرد ، چه اتفاقی رخ می‌دهد ؟

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

$(function(){
$('p').hide();
 
}); 

با اجرای این کد ، اتفاقی نمی‌افتد. چون صفحه کاملا لود نشده و المنت ها هنوز شکل نگرفته اند. بنابراین المنت p   هنوز تشکیل نشده که پنهاد شود.

selector های جی‌کوئری این امکان را به ما می‌دهند تا المنت ها را اتنخاب کرده و آنها را تغییر دهیم. اگر با selector های CSS آشنا باشید کار شما راحت است و براحتی می‌توانید المنت خود رو بر اساس ID ، Class ، خاصیت ها و نوع المنت انتخاب کنید.

کد زیر تمام المنت های img را انتخاب می‌کند :

$("img") 

وقتی کد زیر اجرا می‌شود ، با کلیک روی Button ، تمام  المنت های img (تصویر ها) مخفی می‌شوند :

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

انتخاب المنت بر اساس ID :

فرض کنید ما یک المنت با id زیر داریم :

<div id="ali">Hello</div>

حال می‌خواهیم با جی‌کوئری این المنت را انتخاب کنیم ( بر اساس ID آن) :

$(document).ready(function(){
  $("button").click(function(){
    $("#ali").hide();
  });
});

با کلیک روی Button ، المنت دارای ali id مخفی می‌شود.

انتخاب المنت بر اساس Class :

فرض کنید ما یک المنت با class زیر داریم :

<div class ="ali">Hello</div>

حال می‌خواهیم با جی‌کوئری این المنت را انتخاب کنیم ( بر اساس class آن) :

$(document).ready(function(){
  $("button").click(function(){
    $(".ali").hide();
  });
});

با کلیک روی Button ، المنت دارای ali class مخفی می‌شود.

selector های بیشتر :

$("*") // تمام المنت ها را انتخاب می‌کند
$(this) // المنت انتخاب شده فعلی را انتخاب می‌کند
$("p.intro") // تمام المنت های p با کلاس intro را انتخاب می‌کند.
$("p:first") // اولین المنت p را انتخاب می‌کند .

 

کلیات آموزش jquery هم به پایان رسید، در جلسات بعدی حتما موارد تخصصی تر و کاربردی تر و قابل لمس تری براتون میذارم.

نمونه ای از آخرین کارهای ما

آموزش jquery ساختار دستوری قسمت دومReviewed by Goolexacom on Mar 23Rating: 5.0

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اگر ربات نیستی جواب بده *

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت