آموزش jquery قسمت چهارم کار با Traversing
0 0

آموزش jquery قسمت چهارم کار با Traversing


آموزش jquery قسمت چهارم کار با Traversing

در قسمت  چهارم از آموزش jquery به مفهوم Traversing در jquery می پردازیم.

در قسمت های قبلی در مورد Selector ها و Filter ها صبحت کردیم در صورتی که با این مفاهیم در jquery آشنا نیستید به آموزش های همین دوره مراجعه کنید.

برای این که بتوانید تعداد تگ های را شمارش کنید باید از length و size استفاده کنید.

در مثال زیر  با استفاده از متد alert تعداد تگ های p را نمایش دادیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>iranganj</title>
    <script src="jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            alert("There are" + $("p").length + " <p> tags!");
            alert("There are" + $("p").size() + " <p> tags!");
        });
    </script>
</head>
<body>
    <p>iranganj 1</p>
    <p>iranganj 2</p>
    <p>iranganj 3</p>
    <p>iranganj 3</p>
</body>
</html>

در مثال زیر ابتدا اطلاعات تگ های li را دریافت کردیم و در یک متغیر قرار دادیم و سپس تعداد آن را با استفاده از length توسط متد alert نمایش دادیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>iranganj</title>
    <script src="jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var oElement = $("li").get();
            alert("There are" + oElement.length + " <li> tags!");
        });
    </script>
</head>
<body>
    <ul>
        <li>iranganj 1</li>
        <li>iranganj 3</li>
        <li>iranganj 4</li>
    </ul>
</body>
</html>

با استفاده از متد find می توانید یک مورد خاص را جستجو کرد. این دستور نیز همانند انتخاب کننده ها (selectors) می باشد.

در مثال زیر یک css به عناصر انتخابی اعمال کردیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>iranganj</title>
    <script src="jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("ul").find("li.b").css("border", "thin solid red");
        });
    </script>
</head>
<body>
    <ul>
        <li>iranganj 1</li>
        <li class="b">iranganj 3</li>
        <li>iranganj 4</li>
    </ul>
</body>
</html>

دستور each برای هر عنصر یک بار اجرا می شود. مثلا در کد زیر 4 تگ p داریم این تابع 4 بار اجرا شده و برای هر تگ p کدهای css که نوشتیم اعمال می کند.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>iranganj</title>
    <script src="jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var border = 3;
            var leftMargin = 0;
            $("p").each(function () {
                $(this).css("border", border + "px solid Red");
                $(this).css("margin-left", leftMargin + "px");
                border += 2;
                leftMargin += 10;

            });
        });
    </script>
</head>
<body>
    <p>iranganj 1</p>
    <p>iranganj 2</p>
    <p>iranganj 3</p>
    <p>iranganj 4</p>
</body>
</html>

دانلود

نویسنده حسین فتحی
گروه مطلب Jquery
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۱۳ اردیبهشت ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

این صفحه را می‌پسندم