آموزش jQuery با مثال‌های کاربردی – بخش دوم

آموزش jQuery با مثال‌های کاربردی – بخش دوم

jQuery Essential Training – Part2

 

دوستان و همراهان مجله آموزشی محتوا ، به فصل دوم از آموزش جی کوئری خوش آمدید . سرفصل‌های فصل اول سری آموزشی jQuery عبارتند از:

  • معرفی کتابخانه جی کوئری و دانلود آن
  • سلکتورها در jQuery
  • دستورات append و prepend
  • رویدادها (events)
  • انیمیشن ها (animations)

 

سلکتورها در جی‌کوئری (jQuery Selectors):

ابتدا یک فولدر بنام jq_ch_2 ایجاد کنید . سپس فایلی بنام selectors.html بسازید و کتابخانه جی کوئری را مانند فصل اول ، به تگ head این فایل اضافه کنید . حال کدهای زیر را در بدنه فایل html یعنی تگ body وارد کنید :


<h1>
    Using Basic jQuery Selectors
</h1>

<p>
    Selectors are used to do exactly what their name implies: select content within a Web page.
</p>

<p>
    They use a very CSS-like syntax in order to do this. To take a few examples:
</p>

<ul id="list1">
    <li class="a">
        $("<i>tag</i>"): Select all of the <tag> elements
    </li>
    <li class="a">
        $("<i>.className</i>"): Select all elements that have the <i>className</i> class applied
    </li>
    <li class="b">
        $("#identifier"): Select the element with the id of <i>identifier</i>
    </li>
    <li class="b">
        $("<i>tag.className</i>"): Select all <tag> elements that have the <i>className</i> class applied
    </li>
</ul>

<div id="example">
    <p class="a">
        This is paragraph 1
    </p>

    <p id="para1">
        This is paragraph 2
    </p>

    <p class="b">
        This is paragraph 3
    </p>

    <p id="para4" lang="en-us">
        This is paragraph 4
    </p>

    <p id="para5" lang="en-gb">
        This is paragraph 5
    </p>
</div>

سپس کد های جی کوئری زیر را داخل script بعد از کتابخانه جی کوئری اضافه کنید :


$("p").css("border", "3px solid blue");
$(".a").css("border", "3px solid blue ");
$("#example").css("border", "3px solid blue ");
$("p.b").css("border", "3px solid blue ");

 

انواع سلکتورها در جی کوئری:

بهتر است ابتدا انواع سلکتور را در jquery بیان کنیم :

سلکتور

نتیجه

$(“TagName”) مانند $(“p”)

تمام المان های p یعنی پاراگراف ها را انتخاب می کند

$(“#identifier”) مانند $(“#myParag”)

پاراگرافی که id آن myParag می باشد را انتخاب می کند

$(“.ClassName”) مانند $(“.myClass”)

تمام پاراگرافهایی که کلاس myClass دارند انتخاب می شوند

 

مشاهده می کنید که بطور کلی سلکتور ها در جی کوئری به سه بخش تقسیم می شوند:

  • انتخاب المان توسط نام تگ (Tag name)
  • انتخاب المان توسط آیدی (Identifier)
  • انتخاب المان توسط نام کلاس (Class name)

 

انتخاب تمام پاراگرافهای صفحه:

اکنون به سراغ توضیح اولین مثال فصل دوم می رویم . در بخش script خطوط دوم به بعد را کامنت کنید تا فقط خط اول اجرا شود یعنی :


  $("p").css("border", "3px solid blue");

بعد از باز کردن فایل selectors.html واقع در فولدر jq_ch_2 ، با خروجی زیر روبرو می شویم :

سلکتورها در jquery

همانطور که مشاهده می کنید تمام پاراگرافهای صفحه انتخاب شده اند و دستور حاشیه آبی روی آنها اعمال شده است .

انتخاب پاراگرافهای دارای کلاس مشخص:

در حالت بعدی ، دستور زیر را اجرا کنید (سایر خطوط را کامنت کنید) :


  $("p.b").css("border", "3px solid blue");

توضیح : این سلکتور بدین معنی است که تمام پاراگرافهایی که دارای کلاس b هستند را انتخاب کن . با توجه به اینکه تنها یک پاراگراف با این خاضیت در صفحه وجود دارد ، خروجی بصورت زیر خواهد شد :

نتیجه استفاده از سلکتورهای جی کوئری

 

 

فیلترها در جی‌کوئری (jQuery Filters):

خاصیتی که برای فیلتر کردن المان های انتخابی در صفحه بکار می روند مانند last و first و odd و even .

 

انواع فیلترهای جی کوئری :

فیلتر

نتیجه

:first  ,  :last

اولین یا آخرین المان موجود در صفحه

:odd  ,  :even

المان های زوج یا فرد

:gt() , :lt() , :eq()

المان های کوچکتر-مساوی-بزرگتر از ایندکس

:animated

المان هایی که در پروسه انمیشن می باشند

:focus

المان هایی که در حال فوکوس هستند

:not(expr)

المان هایی که با عبارت داخل پرانتز مطابقت ندارند

 

برای تمرین در زمینه فیلترها ، فایل جدید  بنام filters.html در فولدر jq_ch_2 بسازید و پس از افزودن رفرنس جی کوئری به head آن ، کدهای زیر را به بدنه صفحه اضافه کنید :

<h1>
    Using Basic jQuery Filters
</h1>

<p>
    jQuery filters are used to refine the results that are returned from selectors.
</p>

<p>
    A few examples:
</p>

<ul id="list1">
    <li class="a">
        $("p:first"): of the returned <p> tags, select the first one
    </li>
    <li class="a">
        $("p:even"): select the even-number <p> tags
    </li>
    <li class="b">
        $("a:gt(1)"): of the <a> tags, select all those after the 0th and 1st
    </li>
    <li class="b">
        $("p:not(p:eq(2))"): select all the <p> tags except the one at index 2
    </li>
</ul>

<div id="example">
    <p class="a">
        This is paragraph 1
    </p>

    <p id="para1">
        This is paragraph 2
    </p>

    <p class="b">
        This is paragraph 3
    </p>

    <p id="para4" lang="en-us">
        This is paragraph 4
    </p>

    <p id="para5" lang="en-gb">
        This is paragraph 5
    </p>

</div>
 

مثالی از فیلترهای first و last در jQuery

سپس کدهای زیر را در بخش script بنویسید :


    $("document").ready(function () {
        $("#example p:first").css("border", "3px solid green");
        $("#example p:last").css("border", "3px solid green ");
    });

توضیح : در خط اول که در script فوق نوشتیم ، سلکتور را بصورت پیچیده تری نسبت به قبل بیان کرده ایم : $(“#example p:first”) این سلکتور بدین معنیست که ابتدا محدوده انتخاب را به div با آیدی example محدود کرده ایم و سپس توسط فیلترها گفتیم اولین پاراگراف این div را انتخاب کن و border آنرا سبزرنگ کن . در دومین دستور جی کوئری فوق ، سلکتور جی کوئری دقیقا مانند اولی است با این تفاوت که آخرین پاراگراف (last) را انتخاب می کند . بنابراین خروجی بصورت تصویر زیر می شود (پاراگرافهای اول و آخر حاشیه سبزرنگ دارند) :

خروجی فیلترها در جی کوئری 

مثالی از فیلترهای even و odd در jQuery

برای تمرین بعدی دو خط زیر را به دستورات جی کوئری اضافه کنید (دستورات first و last را comment کنید) :


$("#example p:even").css("border", "3px solid red");
$("#example p:odd").css("border", "3px solid red");

ابتدا خط دوم یعنی odd را کامنت کنید و سپس فایل filters.html را در مرورگر خود اجرا کنید . خروجی زیر را خواهید دید :

فیلترها در جی کوئری

توضیح : سلکتور این مثال بدین معنی می باشد که پاراگراف های با ایندکس زوج را که در div با آیدی example وجود دارند را انتخاب کن .

نکته : ایندکس ها از عدد صفر شروع می شوند پس پاراگراف اول که ایندکس ۰ (عدد زوج) دارد انتخاب شده است .

فیلتر odd نیز به همین ترتیب عمل می کند با این تفاوت که ایندکس های ۱ و ۳ را انتخاب می کند .

در تمرین بعدی دستورات زیر را داریم :


$("#example .a:first").css("border", "3px solid green");
$("#example .b:even").css("border", "3px solid green");

توضیح : سلکتور $(“#example .a:first”) بدین مفهوم است که اولین المانی را انتخاب کن که اولا داخل div با آیدی example باشد و دوما کلاس a داشته باشد .

مثالی از فیلترهای gt و lt و equal و not

تمرین بعدی درباره فیلترهای بزرگتر-مساوی-کوچکتر می باشد . دستورات زیر را در بخش script فایل خود بنویسید و سایر دستورات را کامنت کنید :


$("#example p:gt(1)").css("border", "3px solid green");
$("#example p:not(p:eq(2))").css("border", "3px solid green");

توضیح : سلکتور اول یعنی #example p:gt(1) می گوید تمام پاراگراف هایی را انتخاب کن که اولا در محدوده div با آیدی example باشند دوما ایندکس آنها از یک بزرگتر باشد (یعنی پاراگرافهای سوم به بعد) . بنابراین خروجی دستور اول به شکل زیر خواهد بود :

فیلترها در jquery

توضیح دستور دوم : در این سلکتور یعنی $(“#example p:not(p:eq(2))) قضیه را کمی پیچیده کردیم !

این selector بدین معنی است که اولا مانند سایر مثال های این بخش درون تگ div با آیدی example باشد . ثانیا با عبارت (expression) داخل فیلتر not مطابقت نداشته باشد یعنی ایندکس پاراگراف ۲ نباشد . بنابراین بجز پاراگراف سوم (ایندکس ۲) سایر پاراگراف ها را انتخاب می کند . خروجی بصورت زیر است :

filter ها در جی کوئری

 

سلکتورهای پیشرفته در جی کوئری:

در این قسمت می خواهیم سلکتور های پیچیده تر (سلسله مراتبی-Hierarchy) را با هم بررسی کنیم .

 

سلکتور فزرند بی واسطه (Child Selector) :

برای انتخاب فرزند مستقیم یک والد (Parent) بکار میرود که توسط کاراکتر < مشخص می شود . به مثال زیر توجه کنید :

فایلی بنام advanced_selectors.html در فولدر jq_ch_2 بسازید و مانند مثالهای قبل ، به کتابخانه جی کوئری رفرنس بدهید . کدهای زیر را در بخش بدنه صفحه بنویسید :

<h1>
    jQuery Hierarchy Selectors
</h1>

<p>
    To select elements based on their position in the document tree, use the Hierarchy Selectors.
</p>

<p>
    The Hierarchy Selectors work by examining the position of target elements relative to other elements:
</p>

<ul id="list1">
    <li>
        $(parent > child): selects child elements that are immediate descendants of the parent
    </li>
    <li>
        $(ancestor descendant): selects descendant elements as long as they have an ancestor element somewhere above them
    </li>
    <li>
        $(prev + next): selects the next element if it is immediately preceded by a prev element
    </li>
    <li>
        $(prev ~ siblings): selects all siblings elements that come after a prev element
    </li>
</ul>

<div id="example">
    <p class="a">
        This is paragraph 1
    </p>

    <p id="para1">
        This is paragraph 2
    </p>

    <p class="b">
        This is paragraph 3
    </p>

    <p id="para4" lang="en-us">
        This is paragraph 4
    </p>

    <p id="para5" lang="en-gb">
        This is paragraph 5
    </p>
</div>

 و در بخش head آن ، script جی کوئری را مطابق زیر تعریف کنید :


$("document").ready(function () {
    $("div > p").css("border", "3px solid yellow");
});

توضیح : در اسکریپت جی کوئری فوق، گفتیم که پاراگراف هایی را انتخاب کن که فرزند بی واسطه (مستقیم) تگ div باشند سپس رنگ border آنها را زرد کن (مطابق تصویر زیر) :

سلکتور های سلسله مراتبی

 

سلکتور اولاد (Descendant Selector) :

بیانگر فرزندان یک والد و نیز نوه ها و نتیجه ها و … می باشد ! بدین معنی که مهم نیست المان بصورت بی واسطه فرزند والد باشد و فقط باید زیرمجموعه والد باشد . مثال زیر را بررسی کنید :

دستور جی کوئری زیر را به بخش head اضافه کنید و دستور قبلی را کامنت کنید :


$("document").ready(function () {
    $("div > p").css("border", "3px solid yellow");
});

توضیح : سلکتور $(“div p.a”) بدین مفهوم است که تمام پاراگرافهایی که دارای کلاس a هستند و نیز زیرمجموعه تگ div باشند را انتخاب کن .

 

سلکتور مجاور (Adjacent Selector) :

برای انتخاب المانی که دقیقا بعد از المان اول آمده است . بطور مثال در سلکتور $(“a + b”) گفته شده که المان b را که دقیقا مجاور به المان a می باشد را انتخاب کن . به مثال واضح تر زیر دقت کنید :

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


  $("ul + div").css("border", "3px solid yellow");

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

سلکتور مجاور

مشاهده می کنید که کل div با آیدی example انتخاب شده است (زیرا مجاور تگ ul می باشد)

 

سلکتور هم‌خانواده‌های بعد (Next Siblings Selector) :

به این معنی است که تمام هم خانواده های بعد از المان اول را انتخاب کن . با مرور مثال زیر ، مطلب کاملا برایتان روشن خواهد شد :

دستور زیر را در script بنویسید :


  $("#para1 ~ p").css("border", "3px solid yellow");

سلکتور $(“#para1 ~ p”) بدین معنی است که تمام پاراگرافهایی که هم خانواده (sibling) المانی با آیدی para1 می باشند و بعد از آن تعریف شده اند را انتخاب کن . خروجی بصورت زیر می شود :

سلکتور siblings

 

 

فیلترهای پیشرفته در جی کوئری:

در بخش قبل ، در مورد سلکتورهای پیشرفته (Advanced Selectors) در جی کوئری (Jquery) صحبت کردیم . در این بخش موضوع مورد بررسی ما ، فیلترهای پیشرفته می باشد .

ابتدا فایلی بنام advanced_filters.html در فولدر jq_ch_2 بسازید و در آن به کتابخانه جی کوئری رفرنس بدهید . کدهای زیر را به بدنه صفحه اضافه کنید :

<h1>
    Using Attribute Filters
</h1>

<p>
    Attribute filters are used to select elements in the Web page that have attribute values matching a given set of criteria.
</p>

<p>
    Some examples include:
</p>

<ul id="list1">
    <li class="a">
        [attr]: element has an attribute named <i>attr</i>
    </li>
    <li class="a">
        [attr=val]: element has an attribute whose value is "val"
    </li>
    <li class="b">
        [attr^=val]: element has an attribute whose value starts with "val"
    </li>
</ul>

<div id="example">
    <p class="a">
        This is paragraph 1
    </p>

    <p id="para1">
        This is paragraph 2
    </p>

    <p class="b">
        This is paragraph 3
    </p>

    <p id="para4" lang="en-us">
        This is paragraph 4
    </p>

    <p id="para5" lang="en-gb">
        This is paragraph 5
    </p>
</div>
 

و اسکریپت زیر را بعد از رفرنس کتابخانه جی کوئری اضافه کنید :


        $("document").ready(function () {
            $("p[class]").css("border", "3px solid orange");
            $("p[id=para1]").css("border", "3px solid orange");
            $("p[id^=para]").css("border", "3px solid orange");
            $("p[id^=para][lang*=en-]").css("border", "3px solid orange");
        });

توضیح : لطفا خطوط دوم تا چهارم را کامنت کنید تا فقط دستور اول اجرا شود .

انتخاب المان‌های دارای اتریبیوت class:

در اولین سلکتور یعنی $(“p[class]”)  گفتیم پاراگراف هایی را انتخاب کن که اتریبیوت کلاس دارند (مهم نیست مقدار آن چیست) . بنابراین با توجه به کد داخل بدنه صفحه ، دو پاراگراف دارای این خاصیت هستند (خروجی تصویر زیر) :

فیلتر پیشرفته - مثال اول

 

سلکت المان با آیدی مشخص در جی کوئری:

در دستور جی کوئری بعدی یعنی کد زیر ، مقدار اتریبیوت را بطور صریح اعلام کرده ایم :


    $("p[id=para1]").css("border", "3px solid orange");

توضیح : در سلکتور $(“p[id=para1]”) گفتیم پاراگرافی را انتخاب کن که آیدی آن para1 باشد .

سلکت پاراگراف هایی که آیدی شان با عبارتی مشخص شروع می شود:

در دستور بعدی داریم :


   $("p[id^=para]").css("border", "3px solid orange");

علامت فلش به سمت بالا (up arrow) بدین معنیست که میخواهیم پاراگراف هایی را انتخاب کنیم که id آنها با عبارت para شروع شوند . بنابراین خروجی زیر را خواهیم داشت :

فیلتر پیشرفته - مثال دوم

 

انتخاب پاراگرافهایی که اتریبیوت lang آنها شامل عبارت خاصی باشد:

در مثال بعدی از فیلترهای جی کوئری ، دستور زیر را داریم :


    $("p[id^=para][lang*=en-]").css("border", "3px solid orange");

در این فیلتر ما دنبال المانی با دو اتریبیوت مذکور می گردیم . گفتیم که پاراگرافهایی را انتخاب کن که اولا آیدی آنها با para شروع شوند . ثانیا اتریبیوت lang آنها شامل عبارت en- باشد .

نکته : فیلتر ^= به معنی شروع شدن با (starts with) و عبارت *= به معنی شامل عبارت (contains) بودن می باشد .

بنابراین خروجی به شکل زیر خواهد بود :

فیلتر پیشرفته - مثال سوم

 

فیلترهای فرزند و محتوا (Child and Content Filters) :

ابتدا فایلی بنام child_and_content.html در فولدر jq_ch_2  ایجاد کرده و مطابق معمول ، در تگ فایل ، به کتابخانه jquery  رفرنس بدهید .

در بدنه (body) صفحه ، کدهای زیر را بنویسید :

<h1>
    Using Child and Content Filters
</h1>

<p>
    These selectors are used to retrieve content that matches certain conditions, such as whether they contain certain content, whether they are visible/hidden, or whether they are in a certain position within their parent.
</p>

<ul id="list1">
    <li class="a">
        :contains('text'): select elements that contain specific text
    </li>
    <li class="a">
        :parent: select elements have at least one child node (element or text)
    </li>
    <li class="a">
        :has(<i>selector</i>): select elements that contain at least one element that matches the selector
    </li>
    <li class="a">
        :first-child: select elements that are the first child of their parents
    </li>
    <li class="a">
        :last-of-type: select elements that are the last of their type among siblings
    </li>
    <li class="a">
        :nth-child(): select elements that are the nth child of their parent
    </li>
</ul>

<div id="example">
    <p class="a">
        This is paragraph 1
    </p>

    <p id="para1">
        This is paragraph 2
    </p>

    <p class="b">
        This is paragraph 3
    </p>

    <p id="para4" lang="en-us">
        This is paragraph 4
    </p>

    <p id="para5" lang="en-gb">
        This is paragraph 5
    </p>
</div>

و برای بخش script کدهای زیر را تعریف کنید :


        $("document").ready(function () {

            $("p:contains('3')").css("border", "3px solid blue");

            $("p:parent").css("border", "3px solid blue");

            $("div:has(p[class=a])").css("border", "3px solid blue");

        });

دستورات دوم و سوم را فعلا کامنت کنید تا دستور اول اجرا شود .

فیلتر contains در جی کوئری:

 در سلکتور ('۳')p:contains از فیلتر contains استفاده شده است که به این مفهوم است که پاراگرافی را select کن که شامل عدد ۳ باشد . بنابراین خروجی زیر را داریم :

Content Filter in Jquery

فیلتر parent در جی کوئری:

در مثال بعدی از فیلتر والد (parent) استفاده کرده ایم :


    $("p:parent").css("border", "3px solid blue");

سلکتور $(“p:parent”) به این معنی است که پاراگراف هایی را انتخاب کن که والد حداقل یک فرزند باشند یعنی حداقل یک فرزند داشته باشند . با اجرای دستور فوق ، خروجی زیر در انتظارتان خواهد بود :

parent filter in jquery

نکته : همانطور که مشاهده می کنید هیچیک از پاراگراف های این صفحه دارای فرزند نمی باشند ولی دستور جی کوئری روی آنها اعمال شده است . این بدین خاطر است که فیلتر parent ، نوشته داخل تگ p را نیز یک فرزند تلقی می کند و بنابراین به اطراف تمام پاراگراف های این صفحه حاشیه آبی رنگ داده است .

فیلتر has در جی کوئری:

در مثال بعدی از فیلتر has استفاده کرده ایم :


   $("div:has(p[class=a])").css("border", "3px solid blue");

سلکتور $(“div:has(p[class=a])”) به این معنی است : به دنبال div بگرد که شامل حداقل یک پاراگراف با کلاس a باشد .

 

فیلترهای فرزند (child) در jQuery:

اکنون سراغ فیلترهای child می رویم . دستورات زیر را در بخش script بنویسید :


    $("div p:first-child").css("border", "3px solid blue");
    $("div p:last-of-type").css("border", "3px solid blue");
    $("div p:nth-child(3)").css("border", "3px solid blue");
    $("div p:nth-child(2n)").css("border", "3px solid blue");

فیلتر first-child در جی کوئری:

ابتدا سه خط آخر را کامنت کنید تا فقط دستور جی کوئری زیر اجرا شود :


   $("div p:first-child").css("border", "3px solid blue");

سلکتور $(“div p:first-child”) بدین معنی می باشد که پاراگرافی را انتخاب کن که اولین فرزند تگ div باشد . با توجه به اینکه در بدنه صفحه کدهای زیر را داریم :

<div id="example">
    <p class="a">
        This is paragraph 1
    </p>

    <p id="para1">
        This is paragraph 2
    </p>

    <p class="b">
        This is paragraph 3
    </p>

    <p id="para4" lang="en-us">
        This is paragraph 4
    </p>

    <p id="para5" lang="en-gb">
        This is paragraph 5
    </p>
</div>

پاراگراف اول (که کلاس a دارد) انتخاب (select) می شود . حال اگر بین تگ div و اولین تگ p یک تگ دیگر مانند <h1> تعریف کنیم ، دیگر آن پاراگراف انتخاب نخواهد شد . زیرا اولین فرزند div نیست .

فیلتر last-of-type در جی کوئری:

در تمرین بعدی دستور زیر را داریم :


  $("div p:last-of-type").css("border", "3px solid blue");

فیلتر last-of-type در بالا بدین معنی می باشد که آخرین پاراگرافی را انتخاب کن که در تگ div باشد . پس پاراگراف آخر یعنی عبارت زیر انتخاب می شود :

<p id="para5" lang="en-gb">
    This is paragraph 5
</p>

فیلتر nth-child در جی کوئری:

در دستور بعدی داریم :


   $("div p:nth-child(3)").css("border", "3px solid blue");

فیلتر (nth-child(3 بدین معنی است که سومین فرزند از نوع داده شده (پاراگراف) را انتخاب کن . ایندکس در این فیلتر از عدد ۱ شروع می شود یعنی مطابق تصویر زیر ، پاراگراف سوم انتخاب می شود :

jquery child filters

انتخاب پاراگراف های با مضرب ۲:

سلکتور آخر در این بخش بصورت زیر تعریف شده است :


     $("div p:nth-child(2n)").css("border", "3px solid blue");

مجدد از فیلتر nth-child استفاده شده است با این تفاوت که عبارتی را به آن اضافه کردیم . کلمه ۲n اینگونه کار می کند که فرزندان با ایندکس ۰و۲و۴و۶و…… (مضرب ۲) انتخاب می شوند . پس خروجی زیر را داریم :

jquery child filters 2

اگر بجای ۲n بنویسیم ۲n+1 ایندکس های فرد را انتخاب می کند مانند ۱و۳و۵و…  این فیلتر شبیه فیلتر odd و even عمل می کند . اگر بخواهیم مضارب عدد ۳ انتخاب شوند (۳و۶و۹و…) باید بنویسیم ۳n .

 

 

پیمایش درختی در جی کوئری (jQuery Traversing Tree):

همانطور که می دانید یک فایل html دارای تگ هایی است که بصورت زیرشاخه ای و درختی به هم مرتبط هستند . <html> والد <body> و تگ های <title> و <body> هم نژاد (sibling) هم می باشند . برای واضح تر شدن مطلب به تصویر زیر دقت کنید :

پیمایش درختی در جی کوئری

 

ایجاد یک فایل بنام traversing.html:

برای شروع کار ، یک فایل بنام traversing.html در فولدر jq_ch_2 بسازید و بعد از اضافه کردن کتابخانه جی کوئری ، کدهای زیر را به body صفحه اضافه کنید :

<h1>
    Using jQuery Document Traversal Features
</h1>

<p>
    The DOM of a Web page is organized as a tree structure. The elements in the page have family-like names to refer to their positions relative to other elements.
</p>

<p>
    For example, the HEAD and BODY tags are "children" of the HTML tag, and are "siblings" of each other. They have the HTML tag as their "parent". jQuery provides functions for navigating the document tree and processing sets of elements, such as:
</p>

<ul id="list1">
    <li>
        children(): Retrieves all the child elements of the matched elements, except text nodes
    </li>
    <li>
        prev(), next(), parent(): used to traverse the family relationships of an element
    </li>
    <li>
        find(): search within a given element to find elements that match a selector expression
    </li>
    <li>
        each(): loops over a set of matched elements and calls a function for each one
    </li>
</ul>

<div id="example">
    <p class="a">
        This is paragraph 1
    </p>

    <p id="para1">
        This is paragraph 2
    </p>

    <p class="b">
        This is paragraph 3
    </p>

    <p id="para4" lang="en-us">
        This is paragraph 4
    </p>

    <p id="para5" lang="en-gb">
        This is paragraph 5
    </p>
</div>

تعریف تابع ()children برای انتخاب فرزندان در jQuery:

حال اسکریپت زیر را اضافه کنید :


    $("#example").children().css("border", "3px solid purple");

مشاهده می کنید که از تابع children() برای انتخاب فرزندان المان با آیدی example استفاده شده است . بنابراین border تمام فرزندان به رنگ بنفش در می آید . تصویر زیر :

پیمایش درختی jquery

توابع prev() و next()

در مثال بعدی از prev() و next() استفاده می کنیم :


    var elem = $("#para1");
    elem.prev().css("border", "3px solid red");
    elem.next().css("border", "3px solid green");
    elem.parents().css("border", "3px solid blue");

توضیح : ابتدا المان با آیدی para1 را در متغیری بنام elem میریزد و سپس به عنصر قبلی یعنی prev حاشیه قرمزرنگ می دهد و به المان بعدی یعنی next حاشیه سبز و در نهایت توسط parents() کل والدین و اجداد para1 انتخاب می شوند و حاشیه آبی رنگ می گیرند . خروجی زیر را مشاهده کنید :

prev و next در جی کوئری

همانطور که مشاهده می کنید ، حاشیه آبی رنگ بر روی اجداد المان #para1 اعمال شده است یعنی روی #example و body و html .

دستور ParentsUntil در جی کوئری:

اگر بخواهیم این حاشیه به باکس #example محدود شود باید از دستور ParentsUntil استفاده کنیم و دستور قبلی را کامنت کنیم :


  elem.parentsUntil($("body")).css("border", "3px solid blue");

توضیح : فیلتر parentsUntil(“body”) بدین معنیست که والدین تا تگ body را انتخاب کن یعنی فقط div با آیدی example . پس خروجی در این حالت بشکل زیر خواهد شد :

پیمایش درختی

به گراف زیر که در زمینه prev , next , parent , parentsUntil می باشد توجه کنید :

jquery traversing tree

 

فیلتر find در jQuery:

فیلتر find ، همانطور که از نامش پیداست ، عمل پیدا کردن المان را انجام می دهد . به مثال زیر دقت کنید :

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


  ("#example").find("#para4").css("border", "3px solid red");

این سلکتور در درخت زیرشاخه #example می گردد و المان با آیدی #para4 را پیدا می کند و border آنرا  قرمز رنگ می کند .

 

فیلتر each در jQuery:

دستور زیر را در بخش script بنویسید :


    var leftmargin = 0;
    var border = 3;
    $("#example p").each(function (index, element) {
        $(element).css("border", border + "px solid red")
                    .css("margin-left", leftmargin);
        border += 2;
        leftmargin += 10;
    });

این مثال کمی پیچیده تر از مثالهای قبل می باشد . تابع each روی المانهای سلکتور حلقه میزند . در این مثال روی پاراگراف های واقع در #example حلقه میزند . تابع each دو آرگومان می گیرد که اولی index و دومی element می باشد . در هربار اجرای حلقه ، دو بار css فراخوانی می شود که در اولی border المان را ۲ واحد ضخیم تر می کنیم و در دومی فاصله از چپ یعنی margin-left را ۱۰ واحد زیاد می کنیم . خروجی تابع فوق بصورت زیر خواهد بود :

تابع each در جی کوئری

 

فصل دوم از آموزش Jquery در اینجا به پایان میرسد .در مقاله بعد ، فصل سوم را شروع میکنیم که موضوع بحث آن ، تولید و تغییر محتوای صفحه وب توسط جی کوئری می باشد .


برچسب‌ها:

آموزش سلکتور جی کوئریسلکتورها در jqueryسلکتورهای جی کوئریفیلتر containsفیلتر eachفیلتر equalفیلتر findفیلتر firstفیلتر first-childفیلتر gtفیلتر hasفیلتر last-type-ofفیلتر nextفیلتر oddفیلتر parentsفیلتر ParentsUntilفیلتر prevفیلتر جی کوئری

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

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

9 − 1 =