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

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


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

در این قسمت از آموزش jquery به بحث selector ها یا انتخاب کننده ها در jquery می پردازیم.

در قسمت قبل گفته شد که اساس کار jquery با انتخاب عناصر آغاز می شود. در این قسمت مکانیزم های انتخاب عناصر در jquery را معرفی خواهیم کرد. این انتخاب کننده ها به ما اجازه انتخاب تگ و عناصر DOM را به ما می دهند. به یاد داشته باشید که خروجی اغلب این انتخاب کننده ها آرایه ای از اشیا jquery میباشد که طول آن ممکن است صفر، یک و یا بیشتر باشد.

انتخاب عناصر با نام تگ

درکد زیر تمام تگ های 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 () {
            $("p").css("border", "thin solid #ff0000");
        });
    </script>
</head>
<body>
    <p>iranganj</p>
    <p>iranganj</p>
</body>
</html>

در کد زیر با استفاده از ویرگول چندین تگ را می توانیم انتخاب کنیم. همچنین می توانیم دو 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 () {
            $("p,h5").css("border", "thin solid #ff0000").css("font-size", "50px");
        });
    </script>
</head>
<body>
    <p>iranganj</p>
    <p>iranganj</p>
    <h5>iranganj</h5>
</body>
</html>

انتخاب عناصر صفحه با ID و Name

در کد زیر با استفاده از کارکتر # یک عنصر را با استفاده از 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 () {
            $("#site").css("border", "thin solid #ff0000").css("font-size", "50px");
            $("[name=site1]").css("border", "thin solid #ff0000").css("font-size", "50px");
            $("b[name=site2]").css("border", "thin solid #ff0000").css("font-size", "50px");
        });
    </script>
</head>
<body>
    <p id="site">iranganj 1</p>
    <p>iranganj 2</p>
    <p name="site1">iranganj 3</p>
    <b name="site2">iranganj 3</b>

</body>
</html>

انتخاب همه عناصر

در کد زیر با استفاده از کاراکتر ستاره تمام عناصر صفحه را می توانیم انتخاب می کنیم. مانند : تمام تگ ها ، body و هر چیزی که داخل صفحه قرار دارد. 

<!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 () {
            $("*").css("border", "thin solid #ff0000");
        });
    </script>
</head>
<body>
    <p>iranganj</p>
</body>
</html>

انتخاب با نام کلاس

برای انتخاب عناصر با نام کلاس کافیست از یک نقطه و سپس نام کلاس را نوشته تا عناصر مورد نظر را انتخاب کنید.

همچنین برای انتخاب کلاس خاص مثلا ul li.c با این روش فقط قسمتی صفحه را انتخاب می کند که ابتدا یک ul و سپس یک li داشته باشید که نام کلاس آن c باشد. در این صورت تگ p که کلاس c دارد را انتخاب نمی کند.

<!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 () {
            $(".a").css("border", "thin solid #ff0000").css("font-size", "50px");
            $("ul li.c").css("border", "thin solid #ff0000").css("font-size", "50px");
        });
    </script>
</head>
<body>
    <ul>
        <li class="a">iranganj 1</li>
        <li class="b">iranganj 2</li>
        <li class="f">iranganj 3</li>
        <li class="c">iranganj 4</li>
        <li class="b">iranganj 5</li>
        <li class="c">iranganj 5</li>
    </ul>
    <p class="c">iranganj 6</p>
</body>
</html>

انتخاب یک عنصر بعد از یک تگ خاص

در کد زیر  ul + p یعنی اولین تگ p که بعد از ul قرار دارد را انتخاب کن

<!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").css("border", "thin solid #ff0000").css("font-size", "50px");
        });
    </script>
</head>
<body>
    <ul>
        <li>iranganj 1</li>
        <li>iranganj 2</li>
        <li>iranganj 3</li>

    </ul>
    <p>iranganj</p>
    <p>iranganj</p>
    <p>iranganj</p>
    <p>iranganj</p>
</body>
</html>

انتخاب تمام عناصر بعد از یک تگ خاص

در کد زیر  ul ~ p یعنی تمام تگ های p که بعد از ul قرار دارد را انتخاب کن

<!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").css("border", "thin solid #ff0000").css("font-size", "50px");
        });
    </script>
</head>
<body>
    <ul>
        <li>iranganj 1</li>
        <li>iranganj 2</li>
        <li>iranganj 3</li>

    </ul>
    <p>iranganj</p>
    <p>iranganj</p>
    <p>iranganj</p>
    <p>iranganj</p>
    <b>iranganj</b>
</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 () {
            $(".a.b").css("border", "thin solid #ff0000").css("font-size", "50px");
        });
    </script>
</head>
<body>
    <ul>
        <li class="a">iranganj 1</li>
        <li class="b">iranganj 2</li>
        <li class="ab">iranganj 3</li>
        <li class="a b">iranganj 4</li>
        <li class="a">iranganj 5</li>
        <li class="b">iranganj 6</li>
    </ul>
</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>a").css("border", "thin solid #ff0000").css("font-size", "50px");
        });
    </script>
</head>
<body>
    <p>
        <a href="http://iranganj.ir">iranganj</a>
    </p>
    <p>
        <span>
            <a href="http://iranganj.ir">iranganj</a>
        </span>
    </p>
    <p>
        <a href="http://iranganj.ir">iranganj</a>
        <br />
        <span>iranganj</span>
    </p>
    <p>
        <span>
            <a href="http://iranganj.ir">iranganj</a>
        </span>
    </p>
    <p>
        <span>iranganj</span>
        <br />
        <a href="http://iranganj.ir">iranganj</a>
    </p>
</body>
</html>

دانلود

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

نظر / سوال

Captcha

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