هرز نوشته های یک توسعه دهنده

در قسمت قبلی ، مختصری در مورد $ و همچنین نحوه انتخاب تگهای a گفته شد.jQuery روشهای متنوعی رو برای انتخاب یک ، چند یا همگی اشیای داخل پرونده HTML که حایز شرط خاصی هستند ، ارائه می ده.بعنوان نمونه یکی از اشکال استفاده از $ بصورت زیر هست:

$(selector)

که در اون بجای selector شما باید از عبارات انتخاب استفاده بکنید.همانطور که قبلا گفته شده ، $ به معنای کلاس پایه jQuery یا سازنده کلاس پایه jQuery هست.در واقع عبارت فوق با عبارت زیر یکسان هست:

jQuery(selector)

بعنوان نمونه ، شما می تونید از عبارت زیر برای انتخاب تمامی پیوندها (تگهای a) که در داخل بلاک پاراگراف (تگp) هستند ، در صفحه HTML می تونید از کد زیر استفاده کنید:

$(“p a”)

و البته اینکار تنها انتخاب اون لینکها رو انجام میده و ما هنوز کاری رو با آنچه انتخاب شده انجام ندادیم و اگر به قسمت 1 برگردیم ، بعد از انجام این انتخاب ، شما میتونید تابع های خودتونرو بنویسید که در ادامه در موردش خواهیم گفت.بعنوان نمونه دیگر جهت انتخاب به کد زیر توجه کنید:

$(“div”)

که معنی اون اینست که تمامی تگهای div رو انتخاب بکنه که عملی رو که بعدا کد اونرو می نویسیم در موردش به اجرا بگذاره.حالا این کد رو توسعه میدیم:

$(“div”).html(“this text will displayed!”);

نتیجه عبارت فوق این هست که هرآنچه در بدنه تمامی تگهای div در پرونده HTML وجود داره ، با عبارت this text will displayed جایگزین بشه.ما می تونیم محدوده انتخاب رو با شرایطی محدود کنیم.مثلا برای اینکه فقط محتوای تگ div که کلاس css اون برابر با myclass هست رو با عبارت مورد نظر جایگزین بکنه:

$(“div.myclass”).html(""this text will displayed!");

توجه داشته باشید که باید قبلا یک پرونده از نوع css ساخته باشید و کلاسی با نام myclass در اون تعریف کرده باشید و سرانجام ، این پرونده css رو بصورت link در ابتدای پرونده html تعریف کرده باشید.بعنوان مثال ، فایل aspx باید بصورت زیر باشه:

یک نکته جالب این هست که مقدار برگشتی یا result هر کدوم از متدهاییکه استفاده می کنید ممکنه خود یکسری از element های html باشه.بعنوان مثال به کد زیر توجه کنید:

$(“div.myclass”).fadeout();

کد فوق باعث میشه تا جلوه fadeout در مورد تگهای div که کلاس اونها myclass هست اجرا بشه ، اما مقدار برگشتی تابع fadeout ، همین div هایی هست که کلاسشون myclass هست و در نتیجه شما میتونید بلافاصله پس از اجرای جلوه fadeout کارهای دیگری هم انجام بدین.به کد زیر توجه کنید:

$(“div.myclass”).fadeout().addClass(“mysecondclass”);

کد بالا باعث میشه که بلافاصله پس از اجرای جلوه fadeout ، کلاس این div ها هم تغییر بکنه و مثلا اگر در کلاس mysecondclass رنگ قلم و زمینه ، با کلاس myclass متفاوت باشه ، در اینصورت ، پس از اجرای این جلوه ، رنگ قلم و زمینه هم تغییر خواهد یافت.

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

کد زیر ، اولین element یا تگ که در بلاک یک div با کلاس myclass وجود داره رو انتخاب می کنه:

$(“div.myclass”)[0]

یعنی تمامی تگهای بدنه یک تگ دیگر ، بصورت آرایه ای از element هی هستند که میتونید با ایندکسشون هم به اونها دسترسی پیدا بکنید.در مورد کد بالا ، مثلا میتونید بنویسید:

$(“div.myclass”)[0].innerHTML=”this text will be displayed!”;

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

$(“tr:nth-child(1)”);

کد زیر اولین تگ div موجود در صفحه رو که در ذیل تگ body تعریف شده انتخاب می کنه:

$(“body > div”);

کد زیر تمامی تگهای پیوند a رو که به یک پرونده از نوع zip اشاره می کنن انتخاب می کنه:

$(“a[href$=zip]”);

کد زیر تمامی تگهای div فرزندی body رو که دارای تگ a باشند رو انتخاب می کنه:

$("body > div:has(a)”);

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