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

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

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

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

نکته ۱): فرض کنیم می خواهید دکمه یا لینکی را که آیدی btn1 دارد را انتخاب (select) کنید . باید سلکتور را بصورت $(“#btn1”) بنویسیم . علامت # بیانگر آیدی المان می باشد .

نکته ۲): فرض کنید می خواهید المانی در صفحه را که کلاس css ای بنام btn1 دارد را انتخاب کنیم . سلکتور بصورت $(“.btn1”) خواهد بود .

 

برای مثالهای بعدی ، متن زیر را در بخش body فایل selectors.html بنویسید :

<h1 id="intro">Introduction to jQuery Selectors and Filters</h1>

       <p>Selectors and Filters provide a way of finding and extracting information from Web pages.</p>

       <h2 class="selectors">Selectors</h2>

       <p>Selectors are used to select parts of the Web page using a common CSS-style syntax.</p>

       <p>For example, <code>$("p")</code> will select all of the paragraph tags in a document and return them as a list that can be further operated upon.</p>

       <h2 class="filters">Filters</h2>

       <p>Filters are used to further refine the results returned from selectors.</p>

    <p>For example, <code>$("p:first")</code> will select the first paragraph in the returned set from <code>$("p")</code>.</p>

 

بنابراین تا کنون فایل html دارای کدهای زیر است :

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>First Jquery Example !</title>

    <script type="text/javascript" src="jquery-1.12.2.js"></script>

    <script type="text/javascript">

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

            $("body").append("<p>Jquery is Loaded !</p>");

        });

    </script>

</head>

<body>

    <h1 id="intro">Introduction to jQuery Selectors and Filters</h1>

    <p>Selectors and Filters provide a way of finding and extracting information from Web pages.</p>

    <h2 class="selectors">Selectors</h2>

    <p>Selectors are used to select parts of the Web page using a common CSS-style syntax.</p>

    <p>For example, <code>$("p")</code> will select all of the paragraph tags in a document and return them as a list that can be further operated upon.</p>

    <h2 class="filters">Filters</h2>

    <p>Filters are used to further refine the results returned from selectors.</p>

    <p>For example, <code>$("p:first")</code> will select the first paragraph in the returned set from <code>$("p")</code>.</p>

</body>

</html>

  • برای اینکه حاشیه تمام پاراگراف های صفحه را قرمز رنگ کنیم ، عبارت زیر را در بخش script بنویسید :

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

توضیح : برای اعمال استایل های css به سلکتور ، از تابع css استفاده می کنیم که دو پارامتر می گیرد ، اولی نام property و دومی مقدار آن که در اینجا border : 3px solid red می باشد . خروجی بصورت تصویر زیر می باشد :مقدمه آموزش سلکتور در جی کوئری

 

  • برای اینکه استایل بالا روی تمام المان هایی که کلاس selector دارند اعمال شود داریم :

$(".selectors").css("border", "3px solid red");

  • اعمال استایل css روی المانهای با آیدی intro :

$("#intro").css("border", "3px solid red");

  • اعمال حاشیه قرمز رنگ به اولین پاراگراف :

$("p:first").css("border", "3px solid red");

  • انتخاب المان یا المان هایی که دارای کلاس selector نیستند :

$("h2:not(.selectors)").css("border", "3px solid red");

در مقاله بعد ، نحوه تغییر محتوای صفحه توسط Jquery را بررسی می کنیم .


تاریخ انتشار : ۲۲ فروردین ۱۳۹۵



دیدگاه ها :