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

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

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

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

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

با استفاده از فیلتر odd می توانید پارگراف های (تگ p) زوج را انتخاب کنید.

نکته : شروع شماره تگها ( یا همان Index تگها ) از صفر شروع می شود.

بنابراین در این مثال تگ 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 () {
            $("p:odd").css("border", "thin solid #0000ff").css("font-size", "14px");
        });
    </script>
</head>
<body>
    <p>iranganj 1</p>
    <p>iranganj 2</p>
    <p>iranganj 3</p>
    <p>iranganj 4</p>
    <p>iranganj 5</p>
</body>
</html>

با استفاده از فیلتر even می توانید پارگراف های (تگ 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 () {
            $("p:even").css("border", "thin solid #0000ff").css("font-size", "14px");
        });
    </script>
</head>
<body>
    <p>iranganj 1</p>
    <p>iranganj 2</p>
    <p>iranganj 3</p>
    <p>iranganj 4</p>
    <p>iranganj 5</p>
</body>
</html>

با استفاده از فیلتر first می توانید  اولین پارگراف (تگ 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 () {
            $("p:first").css("border", "thin solid #0000ff").css("font-size", "14px");
        });
    </script>
</head>
<body>
    <p>iranganj 1</p>
    <p>iranganj 2</p>
    <p>iranganj 3</p>
    <p>iranganj 4</p>
    <p>iranganj 5</p>
</body>
</html>

با استفاده از فیلتر last می توانید  آخرین پارگراف (تگ 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 () {
            $("p:last").css("border", "thin solid #0000ff").css("font-size", "14px");
        });
    </script>
</head>
<body>
    <p>iranganj 1</p>
    <p>iranganj 2</p>
    <p>iranganj 3</p>
    <p>iranganj 4</p>
    <p>iranganj 5</p>
</body>
</html>

با استفاده از فیلتر کلاس می توانید پارگراف های (تگ p) که ویژگی کلاس دارند را انتخاب کنید.

<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 () {
            $("p[class]").css("border", "thin solid #0000ff").css("font-size", "14px");
        });
    </script>
</head>
<body>
    <p>iranganj 1</p>
    <p class="a">iranganj 2</p>
    <p>iranganj 3</p>
    <p>iranganj 4</p>
    <p class="b">iranganj 5</p>
</body>
</html>

با استفاده از فیلتر زیر می توانید پارگراف های (تگ p) که Id آن ها با iran شروع شده را انتخاب کنید و اگر به جای کاراکتر ^ از کاراکتر $ استفاده کنید پارگراف های (تگ p) که آخر Id آنها به iran ختم شده را انتخاب می کند.

<!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 () {
            $("p[id^=iran]").css("border", "thin solid #0000ff").css("font-size", "14px");
            $("p[id$=iran]").css("border", "thin solid #0000ff").css("font-size", "14px");
        });
    </script>
</head>
<body>
    <p id="iran">iranganj 1</p>
    <p id="ir">iranganj 2</p>
    <p>iranganj 3</p>
    <p id="iran1">iranganj 4</p>
    <p>iranganj 1</p>
    <p id="goldiran">iranganj 5</p>
</body>
</html>

با استفاده از فیلتر زیر می توانید پارگراف های (تگ p) که Id آن ها با iran شروع شده  و در هر جای lang دو کاراکتر en وجود دارد را انتخاب کنید. از کاراکتر ستاره *  می توانید در Id نیز استفاده کنید.

<!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 () {          
            $("p[id^=iran][lang*=en]").css("border", "thin solid #0000ff").css("font-size", "14px");
        });
    </script>
</head>
<body>
    <p id="iran">iranganj 1</p>
    <p id="ir">iranganj 2</p>
    <p>iranganj 3</p>
    <p id="iran1" lang="en">iranganj 4</p>
    <p>iranganj 5</p>
</body>
</html>

مثال ترکیبی که اولین پارگراف را انتخاب می کند.

<!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~p[id^=iran][lang*=en]:first").css("border", "thin solid #0000ff").css("font-size", "14px");
        });
    </script>
</head>
<body>
    <ul>
        <li>iranganj</li>
        <li>iranganj</li>
        <li>iranganj</li>
        <li>iranganj</li>
        <li>iranganj</li>
    </ul>
    <p id="iran">iranganj 1</p>
    <p id="ir">iranganj 2</p>
    <p>iranganj 3</p>
    <p id="iran1" lang="en">iranganj 4</p>
    <p>iranganj 5</p>
    <p id="iran2" lang="en">iranganj 6</p>
</body>
</html>

با استفاده از فیلتر contains می توانید یک رشته یا کاراکتر را در کل body انتخاب کنید. همچنین می توانید قبل از دو نقطه نام تک ، Id و... بنویسید.

<!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 () {
            $(":contains('iranganj')").css("border", "thin solid #0000ff").css("font-size", "14px");
            $("b:contains('iranganj')").css("border", "thin solid #adff2f").css("font-size", "14px");
        });
    </script>
</head>
<body>
    <p id="iran">iranganj 1</p>
    <p id="ir">iranganj 2</p>
    <p>iranganj 3</p>
    <p id="iran1" lang="en">iranganj 4</p>
    <p>iranganj 5</p>
    <p id="iran2" lang="en">iranganj 6</p>
    <p id="iran2">iranganj 7</p>
    <b>iranganj 8</b>
</body>
</html>

با استفاده از فیلتر parent می توانید  کلیه پارگراف های (تگ p)  که در صفحه قرار دارد را انتخاب کنید چون body پرنت آنهاست و پرنت body نیز html است.

<!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 () {
            $(“p:parent”).css(“border”, “thin solid #0000ff”).css(“font-size”, “14px”);
        });
    </script>
</head>
<body>
    <p id=”iran”>iranganj 1</p>
    <p id=”ir”>iranganj 2</p>
    <p>iranganj 3</p>
    <p id=”iran1” lang=”en”>iranganj 4</p>
    <p>iranganj 5</p>
    <p id=”iran2” lang=”en”>iranganj 6</p>
    <p id=”iran2”>iranganj 7</p>
    <div>
        <p>iranganj 9</p>
    </div>
    <b>iranganj 10</b>
</body>
</html>

با استفاده از فیلتر has (دارد) می توانید دارا بودن چیزی را برسی کنید و انتخاب کنید.

<!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:has(li[class=a])”).css(“border”, “thin solid #0000ff”).css(“font-size”, “14px”);
        });
    </script>
</head>
<body>
    <ul>
        <li class=”a”>iranganj 1</li>
        <li>iranganj 2</li>
    </ul>
    <ul>
        <li>iranganj 3</li>
        <li>iranganj 4</li>
    </ul>
    <p id=”iran”>iranganj 5</p>
    <p id=”ir”>iranganj 6</p>
</body>
</html>

با استفاده از فیلتر nth-child می توانید یک عدد داخل پرانتز وارد کنید و آن را انتخاب کنید.

<!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 li:nth-child(3)”).css(“border”, “thin solid #0000ff”).css(“font-size”, “14px”);
            $(“ul li:nth-child(2n)”).css(“border”, “thin solid #0000ff”).css(“font-size”, “14px”);
        });
    </script>
</head>
<body>
    <ul>
        <li class=”a”>iranganj 1</li>
        <li>iranganj 2</li>
        <li>iranganj 3</li>
    </ul>
    <ul>
        <li>iranganj 4</li>
        <li>iranganj 5</li>
    </ul>
    <p id=”iran”>iranganj 6</p>
    <p id=”ir”>iranganj 7</p>
</body>
</html>

دانلود

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

نظر / سوال

Captcha