آموزش jquery – انتخاب المنت ها

با سلام خدمت تمامی دوستان آموزش امروز رو با کمی تاخیر خدمت شما تقدیم می کنم . در این قسمت از سری آموزش های دوران طراحی وب ادامه قسمت قبلی یعنی آموزش jquery رو دنبال می کنیم .

در قسمت قبل ساختار اصلی jquery رو مورد بررسی قرار دادیم و در این قسمت قصد داریم نحوه انتخاب المان ها و استفاده کردن از آن رو توضیح دهیم .

در ابتدا بهتر است بگوییم انتخاب المنت در صفحه به چه معنی می باشد ؟ المنت به تک تک تگ ها یا المان های درون سایت مانند عکس , ویدیو , پاراگراف , لینک ها و … گفته می شود , حالا چه لزومی دارد که ما این المان ها را انتخاب کنیم ؟ جواب این سوال بسیار ساده می باشد و آن این است که شما هنگامی که می خواهید درون صفحه خود بر روی یکی از تگ ها یا المان ها تغییری ایجاد نمایید می بایست ابتدا آن تگ را انتخاب کنید و به قول معروف آن را Select کنید . در jquery یک سلکتور فوق العاده کارآمد و عالی تعبیه شده است که شما بسیار با آن راحت هستید ! در ادامه خواهیم دید که این selector ها چگونه شما را به وجد می آورد !

همانطور که قبل تر در آموزش اول گفتیم کلیه کد های jquery درون قطعه کد زیر قرار خواهد گرفت :

[javascript]

$(function){
// Your Jquery Code Here
})

[/javascript]

اما دستور انتخاب المان در jquery به صورت زیر می باشد :

[javascript]

$(selector)

[/javascript]

که در قطعه کد بالا علامت $ به معنای jquery می باشد و کلمه selector نیز نشانگر المانی است که می بایست انتخاب شود . در ادامه با برخی از انتخاب های المان های مختلف آشنا خواهیم شد .

برای انتخاب تمامی تگ های p درون صفحه از دستور زیر استفاده می شود :

[javascript]

$(“p”)

[/javascript]

برای انتخاب تمامی عکس ها یا تگ img درون صفحه از دستور زیر استفاده می شود :

[javascript]

$(“img”)

[/javascript]

برای انتخاب تمامی تگ های div درون صفحه از دستور زیر استفاده می شود :

[javascript]

$(“div”)

[/javascript]

برای انتخاب تمامی تگ ها و اجزای درون صفحه از دستور زیر استفاده می شود :

[javascript]

$(“*”)

[/javascript]

برای انتخاب تمامی المان های درون صفحه که دارای خاصیت class=class1 هستند درون صفحه از دستور زیر استفاده می شود :

[javascript]

$(“.class1”)

[/javascript]

برای انتخاب تمامی المان های درون صفحه که دارای خاصیت id=id1 هستند درون صفحه از دستور زیر استفاده می شود :

[javascript]

$(“#id1”)

[/javascript]

حال بیایید کمی از عجایب این انتخابگر ها مثال بزنیم

این دستور کلیه checkbox های درون صفحه را مورد انتخاب خود قرار می دهد :

[javascript]

$(“:checkbox”)

[/javascript]

این دستور کلیه input های انتخاب فایل درون صفحه را مورد انتخاب خود قرار می دهد :

[javascript]

$(“:file”)

[/javascript]

و باز هم کمی سخت تر !

این دستور تگ div را که دارای خاصیت class با نام myclass را دارد مورد انتخاب قرار می دهد :

[javascript]

$(“div.myclass”)

[/javascript]

این دستور تگ div را که دارای خاصیت id با نام myid را دارد مورد انتخاب قرار می دهد :

[javascript]

$(“div#myid”)

[/javascript]

حال ما تا حدودی از این selector ها را به طور مختصر توضیح دادیم که البته از خودتان انتظار نداشته باشید که کلیه این قطعه کد ها را به این زودی متوجه شده باشید در قسمت های بعدی حتما مفصل تر این انتخابگر ها را پیشرفته تر و عمیق تر خواهیم کرد تا شما به قدرت jquery پی ببرید و به کار خود افتخار کنید . فقط در مورد خوبی این selector ها این نکته را بدانید که به یک از اجزای صفحه که می خواهید می توانید به راحتی با استفاده از این انتخابگر ها دسترسی پیدا کنید و به زودی عاشق کار با آن می شوید . اما یک مثال کوچک که در مورد آن در این قسمت زیاد توضیح نمی دهیم این است که حال ما این المان ها را انتخاب کردیم و باید با از آن ها چگونه استفاده کنیم ؟ جواب شما بسیار ساده است و آن این است که شما باید از متد های عالی jquery بر روی المان خود استفاده کنید , قطعه کد زیر تمامی تگ های img یا عکس های دورن صفحه را مخفی می کند :

[javascript]

$(“img”).hide()

[/javascript]

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

به این ترتیب به پایان قسمت چهارم از سری آموزش های دوران طراحی وب می رسیم و امیدوارم که از این آموزش نهایت استفاده را برده باشید در ضمن ما رو از نظر های خوبتون مطلع کنید .

موفق پیروز و سربلند باشید