آموزش طراحی سایت-آموزش جی کوئری

سلام با دوره آموزش طراحی سایت در خدمت شما دوستان هستم

در قسمت قبل با jQuery جی کوئری آشنا شدید و استفاده از jQuery در صفحات وب را یاد گرفتید در ضمن چند مثال هم زدیم و رخداد Ready در Jquery را یا دادیم.حال ادامه دوره :

آموزش فراخوانی متدها به صورت زنجیر وار در Jquery:

زنجیره سازی متدها یا فراخوانی متدها به صورت زنجیر وار (Method chaining):

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

آموزش طراحی سایت

مثال:

<div id="divTest1" style="color: blue;">Hello, world!</div>

<script type="text/javascript">

$("#divTest1").text("Hello, world!").css("color", "blue");

</script>

در این مثال، یک شی جدید jQuery نمونه سازی می کنیم و المانی که شناسه ی آن divTest1 می باشد را با کاراکتر $ انتخاب می نماییم. این علامت یک میانبر بوده و جایگزینی برای کلاس jQuery می باشد. در نتیجه یک شی jQuery دریافت می کنیم که به ما این امکان را می دهد تا المان انتخابی را مطابق نیاز ویرایش کنیم. ما از آن شی برای فراخوانی متدtext() استفاده می کنیم. این متد متن المان انتخابی را تنظیم می کند. متد ذکر شده بار دیگر شی jQuery را بازمی گرداند و به ما اجازه می دهد متد یا عملیات دیگری (متد css()) را بر روی مقدار برگشتی، اجرا کنیم. می توانیم بسته به نیاز خود توابع دیگری را به انتهای تابع دیگر متصل کرده و فراخوانی کنیم، اما در کل باید از طولانی کردن بیش از حد کد خودداری نمود. خوشبختانه، جاوا اسکریپت در خصوص دستور نگارشی (syntax) خیلی سخت گیر نیست، بنابراین شما می توانید آن را مطابق میل فرمت دهی کنید. به عنوان مثال، می توان دستور ذکر شده در بالا را به صورت زیر نیز نوشت:

مثال 2:

<div id="divTest2" class="bold" style="color: blue;">Hello, world!</div>

<script type="text/javascript">

$("#divTest2").text("Hello, world!")

.removeClass("blue")

.addClass("bold")

.css("color", "blue");

</script>

جاوا اسکریپت خود فضای های بی مورد در کد را در زمان تفسیر دور انداخته و آن را به عنوان یک خط طولانی کد با تعداد زیادی فراخوانی تابع (method call) اجرا می کند (کدی که تعداد زیادی تابع در آن صدا زده شده اجرا می کند). توجه داشته باشید که برخی از متدهای به عنوان نتیجه، شی برنمی گردانند. این درحالی است که برخی دیگر از متدها بسته به پارامترهای ارسالی به آن، یا شی برمی گرداند و یا هیچ شی ای برنمی گرداند. به عنوان نمونه، می توان به متد text() اشاره کرد. در صورت عدم ارسال آرگومان به آن، متن جاری المان انتخابی بجای شی بازگردانده می شود، اما اگر فقط یک پارامتر به آن پاس دهید، متن شی jQuery تنظیم شده و یک شی جدید jQuery بازگردانده می شود.

آموزش طراحی سایت

معرفی انتخابگرهای jQuery:

یکی از عملیات رایج که برای انجام آن از جاوا اسکریپت استفاده می شود، خواندن و ویرایش محتویات صفحه می باشد. برای این منظور، ابتدا بایستی المانی که قصد دستکاری آن را دارید پیدا کنید. در اینجا است که انتخابگر (selector) jQuery به کمک شما می آید. با کد خالص جاوا اسکریپت، پیدا کردن المان ها و تغییر آن ها بسیار دشوار می باشد. مگر اینکه قصد یافتن تنها یک المان را داشته باشید که دارای شناسه ی منحصربفرد باشد. jQuery به شما این امکان را می دهد تا المان ها را بر اساس شناسه، کلاس ها، نوع (type)، مقدار attribute ها و غیره گزینش نموده و بازیابی کنید. این روش در واقع مبتنی بر selector های jQuery می باشد. از آنجایی انتخاب المان ها با jQuery یک فعل بسیار رایج است، constructor در اشکال و فرم های مختلف به کار می آید، بدین صورت که سازنده با پذیرفتن یک selector query به عنوان آرگومان، با کم ترین میزان کد، المان مد نظر را یافته و بیشترین کارایی را ارائه می دهد. شما می توانید با نوشتن دستورjQuery() و یا درج میانبر و جایگزین آن $()، یک شی jQuery نمونه سازی نمایید. بنابراین، انتخاب یک مجموعه المان به آسانی نمونه ی زیر می باشد:

$(<query here="">) </query>

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

آموزش انتخاب المان ها بر اساس شناسه و کلاس در Jquery:

انتخابگر #id:

یکی از پرکاربردترین انواع selector، انتخابگر #id (گزینش المان ها بر اساس شناسه) می باشد، همان طور که در مثال "Hello, world" نظاره گر آن بودیم. در مثال نام برده، از خصیصه ی ID یک تگ HTML برای یافتن و انتخاب یک المان منحصربفرد استفاده کردیم. جهت مکان یابی یک المان با شناسه ی مشخص، یک کاراکتر هش و به دنبال آن ID المان مورد نظر را درج نمایید:

$("#divTest")

مثال:

<div id="divTest"></div>

<script type="text/javascript">

$(function () {

$("#divTest").text("Test");

});

</script>

اگرچه تنها یک المان در صفحه وجود دارد که با کوئری ذکر شده در این مثال منطبق می باشد، باید توجه داشته باشید که نتیجه ی برگشتی یک لیست است. بدین معنی که ممکن است نتیجه حاوی چندین المان باشد، البته در صورتی که کوئری با بیش از یک المان منطبق باشد. یک مثال رایج در این زمینه، منطبق شدن کوئری با تمامی المان هایی است که از یک یا چند کلاس CSS استفاده می کنند.

انتخابگر .class (گزینش المان بر اساس کلاس آن)

المان هایی که دارای کلاس مشخص هستند را می توان با نوشتن کاراکتر نقطه " . " و اسم کلاس با کوئری منطبق نموده و انتخاب کرد و در نهایت به صورت شی برگرداند.

مثال:

<ul>

<li class="bold">Test 1</li>

<li>Test 2</li>

<li class="bold">Test 3</li>

</ul>

<script type="text/javascript">

$(function () {

$(".bold").css("font-weight", "bold");

});

</script>

انتخاب المان بر اساس اسم آن (element selector)

همچنین می توان المان ها را بر اساس اسم تگ آن ها انتخاب کرد. به عنوان مثال، می توانید تمامی لینک ها یک صفحه را بدین صورت (با ذکر اسم تگ آن ها) انتخاب کرد:

$("a")

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

$("div")

در صورت استفاده از یک انتخاب گر چند-المانه (مانند انتخابگر کلاس که در مثال قبلی بکار گرفته شد) و همچنین آگاهی از نوع دقیق المان های مورد انتخاب، توصیه می شود نوع المان را پیش از انتخابگر مشخص نمایید. نه تنها این روش دقیق تر است، بلکه پردازش آن برای jQuery آسان تر صورت پذیرفته که به واکنش هر چه سریعتر سایت کمک می کند. در زیر نسخه ی بازنویسی شده ی مثال قبلی را مشاهده می کنید:

$("span.bold").css("font-weight", "bold");

این مثال تمامی المان های span که اسم کلاس آن ها bold می باشد را bold می کند. البته، این روش را می توان با دیگر selector ها نیز پیاده سازی کرد.

پیدا کردن و انتخاب المان ها بر اساس attribute:

در آموزش قبلی، دیدیم که چگونه می توان المان ها را با توجه به کلاس یا شناسه ی آن ها انتخاب کرد( به آموزش انتخاب عناصر وب بر اساس کلاس و شناسه با jquery مراجعه کنید). این دو خاصیت (property) به خاطر اینکه برای استایل دهی به المان ها با CSS مورد استفاده قرار می گیرند، با هم مرتبط می باشند. اما با کتابخانه ی jQuery، می توان المان ها را بر اساس هر نوع خصیصه (attribute) پیدا و انتخاب کرد. در کتابخانه ی jQuery چندین انتخابگر خصیصه (attribute selector) وجود دارد که در مقاله ی حاضر به شرح برخی از آن ها می پردازیم.

آموزش طراحی سایت

انتخاب المان بر اساس خصیصه ی معین

می توان المان ها را بر اساس attribute یکسان انتخاب کرد. دقت داشته باشید که مثال بعدی ایجاب نمی کند که attribute مقدار معینی داشته باشد یا حتی آن attribute اصلا مقداری داشته باشد. دستور نگارش برای نوشتن و استفاده از این selector به صورت زیر می باشد:

<span title="Title 1">Test 1</span><br>

<span>Test 2</span><br>

<span title="Title 3">Test 3</span><br>

<script type="text/javascript">

$(function () {

$("[title]").css("text-decoration", "underline");

});

</script>

بنابراین، یک [] درج کرده و داخل آن اسم attribute دلخواه را ذکر می کنید. در نمونه ی بالا، با استفاده از یک انتخاب گر خصیصه (attribute selector)، کلیه ی المان هایی که attribute آن ها title می باشد را گزنیش کرده و سپس با استفاده از تابع .css()به المان های مزبور underline اعمال می کنیم. همان طور که پیشتر گفته شد، این کوئری با تمامی المان هایی که خصیصه ی آن ها title می باشد، صرف نظر از مقدارشان، منطبق می شود. اما گاهی لازم است یک المان را که attribute آن دارای مقدار مشخص است، پیدا کنیم.

انتخاب المان هایی که attribute آن ها دارای مقدار مشخص می باشد

در زیر مثالی را مشاهده می کنید که همه ی المان هایی که خصیصه ی آن ها دارای مقدار مشخص است را پیدا می کند:

<a href="http://www.google.com" target="_blank">Link 1</a><br>

<a href="http://www.google.com" target="_self">Link 2</a><br>

<a href="http://www.google.com" target="_blank">Link 3</a><br>

<script type="text/javascript">

$(function () {

$("a[target='_blank']").append("[new window]");

});

</script>

سلکتور Selector صرفا به jQuery اعلان می کند تمامی لینک هایی (المان های a) که دارای خصیصه ی target هستند و مقدار آن ها برابر رشته ی "_blank" می باشد را پیدا کرده و سپس متن "[new window]" را به آن ها پیوست (append) نماید. حال اگر بخواهیم المان هایی که مقدار attribute آن ها برابر با مقدار ذکر شده نباشند، انتخاب کنیم، چه اقدامی را بایستی اتخاذ کنیم؟ در پاسخ به این سوال باید گفت که کافی است انتخاب گر را با استفاده از عملگر " ! " نقیض نمایید:

$("a[target!='_blank']").append(" [same window]");

تنها فرق این نمونه با مثال قبلی در استفاده از عملگر " ! " پیش از علامت = می باشد. نمونه های دیگر: پیدا کردن المان های input که مقدار خصیصه ی name آن ها با رشته ی معین (مثلا 'txt') شروع می شود (با استفاده از عملگر ^=):

$("input[name^='txt']").css("color", "blue");

پیدا کردن المان های input که مقدار خصیصه ی name آن با رشته ی معین (مثلا letter) پایان می یابد (با استفاده از عملگر $=):

$("input[name$='letter']").css("color", "red");

پیدا کردن المان های input که مقدار خصیصه ی name آن ها برابر با رشته ی 'txt' می باشد:

$("input[name*='txt']").css("color", "blue");

آموزش انتخاب المان ها بر اساس رابطه ی پدر و فرزندی:

جی کوئری jQuery به شما این امکان را می دهد تا المان ها را بر اساس عنصر پدر آن ها انتخاب کنید. دو روش وجود دارد: یکی اینکه تنها المان هایی که فرزند مستقیم عنصر پدر هستند با کوئری منطبق شده و انتخاب شوند، دیگری اینکه تمامی المان هایی که حتی به طور غیر مستقیم با عنصر پدر ارتباط دارند نیز به صورت سلسله مراتبی انتخاب شوند (برای مثال، فرزندِ فرزندِ فرزندِ عنصر پدر). دستور نگارشی برای یافتن تمامی المان هایی که نوادگان مستقیم یک عنصر مشخص هستند، به صورت زیر می باشد:

$("div > a")

این selector تمامی لینک هایی که فرزند مستقیم المان div هستند را انتخاب می کند. حال اگر عملگر < را با یک جای خالی (space) جایگزین نمایید، تمامی لینک های داخل المان div که حتی فرزند غیرمستقیم آن محسوب می شوند نیز انتخاب می شوند.

$("div a")

در اینجا مثالی را می بینید که در آن تگ bold که فرزند مستقیم المان div با شناسه ی TestArea1 است، آبی رنگ می شود:

<div id="divTestArea1">

<b style="color: blue;">Bold text</b>

<i>Italic text</i>

<div id="divTestArea2">

<b style="color: blue;">Bold text 2</b>

<i>Italic text 2</i>

<div>

<b style="color: blue;">Bold text 3</b>

</div>

</div>

</div>

<script type="text/javascript">

$("#divTestArea1 > b").css("color", "blue");

</script>

اگر این مثال را اجرا کنید، می بینید که تنها تگ bold اول آبی رنگ می شود. حال، چنانچه این کد را با روش دوم پیاده سازی کنید، هر دو تگ bold آبی رنگ می گردند. همان طور که در نمونه ی زیر مشاهده می کنید، مثال فوق را با اعمال یک تغییر (جایگزین کردن عملگر < با space) بازنویسی کردیم که در آن هر دو تگ bold انتخاب و آبی رنگ می شوند (نوه یا فرزندان غیرمستقیم المان div نیز دستکاری می شوند):

<div id="divTestArea1">

<b style="color: blue;">Bold text</b>

<i>Italic text</i>

<div id="divTestArea2">

<b style="color: blue;">Bold text 2</b>

<i>Italic text 2</i>

<div>

<b style="color: blue;">Bold text 3</b>

</div>

</div>

</div>

<script type="text/javascript">

$("#divTestArea1 b").css("color", "blue");

</script>

جی کوئری jQuery با ارائه ی تابعی به نام parent() به شما این اجازه را می دهد تا در صورت لزوم به بالای سلسه مراتب (نمودار درختی وراثت) پیمایش کنید. با این تابع می توان پدر یک عنصر فرزند را یافت.

پایان بخش دوم آموزش جی کوئری jQuery

آموزش طراحی سایت ادامه دارد