سینتکس جی کوئری و کار با Selector ها در jQuery

در این قسمت می آموزید که چطور با jQuery کدنویسی کنید. سینتکس جی کوئری را می بینید و در ادامه به سراغ Selector ها می رویم.

سینتکس جی کوئری

یک عبارت jQuery معمولا با علامت $ آغاز می شود و با ; پایان می پذیرد. در واقع علامت $ در کدها یک نام جایگزین برای jQuery است. در کد مثال زیر استفاده از سینتکس جی کوئری را در یک حالت ابتدایی مشاهده می کنید:

<script>
    $(document).ready(function(){
        // Some code to be executed...
        alert("Hello World!");
    });
</script>

کد مثال بالا، عبارت "Hello World" را به کاربر نشان می دهد.

شرح کد

اگر به تازگی کار با jQuery را آغاز کرده اید، احتمالا می خواهید بدانید که قسمت های مختلف کد مثال قبل چه وظایفی برعهده دارند. بنابراین به شرح قسمت های مختلف کد بالا می پردازیم:

تگ <script>
به دلیل آن که jQuery یک کتابخانه جاوا اسکریپت است، شما باید کدهای این کتابخانه را بین تگ های script بنویسید. البته اگر کدهای jQuery در یک فایل جداگانه و خارجی قرار گرفته باشند، باید تگ های script را از ساختار jQuery حذف کنید. (فایل خارجی با پسوند js.)

;(document).ready(handler)$
از این عبارت نوعا به عنوان رویداد ready نام می برند. در یک حالت ساده ابتدایی می توان گفت که در واقع handler یک تابع است که نتیجه آن به متد ()ready منتقل می شود تا زمانی که اطمینان حاصل شد صفحه یا document در حالت ready قرار دارد، اجرا شود و در حقیقت document را دستکاری کند و موجب تغییراتی در آن شود. البته همان طور که گفته شد این عملکرد در رویداد ready رخ می دهد (یعنی هنگامی که سلسله مراتب DOM ساخته شده باشند).

متد ()ready نوعا با یک تابع ناشناس بکارگرفته می شود، بنابرانی کد مثال بالا را می توانید به صورت زیر بنویسید:

<script>
    $(function(){
        // Some code to be executed...
        alert("Hello World!");
    });
</script>

نکته: شما می توانید از هر دو نوع روشی که در مثال های بالا آورده شده است، استفاده کنید. اما بکار بردن عبارت document.ready موجب خوانایی بیشتر کد می گردد.

علاوه بر موارد آورده شده در بالا، می توانید در کنترل کننده (handler) رویداد، کدهای jQuery را به فرمت سینتکس پایه بنویسید تا اجرا شوند، فرمت هایی مانند: ;(selector).(action)$

زمانی که selector با یک شیوه ساده از درخت DOM عناصر Html را انتخاب یا select می کند، می تواند این عناصر را با استفاده از action دستکاری کند. به عنوان مثال تغییر مقدار یک ویژگی css مربوط به آن عناصر یا تغییر محتوای عناصر و...

حالا در کد زیر مثالی را مشاهده می کنید که متن پاراگرف، بعد از آن که document یا صفحه وب در حالت ready قرار گرفت، تغییر می کند:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Document Ready Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jQuery-1.11.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>

در کد بالا P توسط Selector در کد jQuery انتخاب شده است. سپس متنی به عنوان متن تگ های <p> صفحه ای که در رویداد ready قرار گرفته است، با استفاده از متد ()text اعمال می شود.

متن پاراگرف در مثال بالا به صورت خودکار وقتی که document در حالت ready باشد، تنظیم می شود یا در حقیقت با متن قبلی اش جایگزین می شود. اما در حقیقت اتفاقی که رخ می دهد به این صورت است که ما به عنوان کاربر قبل از تغییرات این چنینی تعاملاتی با آن صفحه خواهیم داشت و معمولا چیزی اتوماتیک تغییر نمی کنند و این تغییرات به صورت تعاملی و در راستای درخواست کاربر تنظیم شده اند. در کد مثال زیر این موضوع بررسی شده است:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Click Handler Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jQuery-1.11.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("Hello World!");
            });            
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
    <button type="button">Replace Text</button>
</body>
</html>

در کد مثال بالا وقتی که کاربر بر روی دکمه "Replace Text" کلیک می کند، متن پاراگرف تغییر می کند. در واقع تغییر متن پاراگرف پاسخی است به عملکرد کاربر، که با این کار تعامل کاربر با مرورگر فراهم می گردد.

تا اینجا شما با مقدمه و ساختار jQuery آشنا شده اید و می توانید با آموزشی که از سینتکس آن پیدا کرده اید، کار کردن با آن را شروع کنید. در ادامه آموزش ها روی مطالبی عمیق تر می شویم که قبلا از آن ها نام برده شده است.

نکته: در حقیقت، قرار دادن کد در document.ready بدین معناست که کد زمانی اجرا می شود که صفحه مرورگر بارگذاری و یا به عبارتی دیگر درخت DOM ساخته شده باشد.

Selector ها در jQuery

اکنون می آموزید که چطور با Selector ها کار کنید و با استفاده از jQuery عناصر Html را انتخاب کنید. اینکه از جاوا اسکریپت به عنوان ابزاری برای دریافت یا تغییر محتوا و یا مقدار عناصر Html استفاده شود، بسیار متداول است. همچنین از آن برای اعمال افکت هایی مانند Show ،Hide ،Animations و... استفاده می شود اما لازمه همه این کارها به کنترل گرفتن عناصر مربوطه در Html به کمک Selector ها است. یعنی طی مکانیزمی باید عناصر DOM توسط جاوا اسکریپت Select یا انتخاب شوند.

استفاده مستقیم از جاوا اسکریت جهت اجرای مکانیزم استفاده از Selector ها کاری عذاب آور و دشوار است. یکی از ویژگی های فوق العاده jQuery در همین رابطه است که کار با Selctor ها را بسیار آسان کرده است و این یکی از قدرتمندترین ویژگی های jQuery می باشد.

نکته: jQuery همه Selector هایی را که در CSS3 تعریف شده است، پشتیبانی می کند. همچنین می توانید برای خود Selector بسازید و از این Selector های سفارشی سازی شده استفاده کنید. استفاده از Selector های شخصی توانایی انتخاب عناصر یا تگ های Html را افزایش می دهد.

در بخش های زیر شیوه های معمول Select کردن عناصر و کار با jQuery در استفاده از این مکانیزم شرح داده شده است:

انتخاب عناصر با استفاده از ID

می توانید از ID ها جهت انتخاب یک عنصر Html خاص از صفحه استفاده کنید. برای مثال در کد زیر عنصر که مقدار ID آن برابر است با mark انتخاب می شود و سپس هنگامی که document در حالت ready باشد، دستکاری ها و اعمال مربوطه روی آن صورت می گیرد:

<script>
$(document).ready(function(){
    // Highlight element with id mark
    $("#mark").css("background", "yellow");
});
</script>

در کد بالا، قطعه کدی که در ساختار document.ready می آید، هنگامی اجرا می شود که DDOM ساخته شده باشد. در قسمت های آینده مطالب بیش تری راجع به event ها را مشاهده خواهید کرد.

انتخاب عناصر Html با استفاده کلاس

jQuery می تواند عناصری از صفحه با یک Class خاص را انتخاب و تغییرات لازم را روی آن اعمال کند. به عنوان مثال در کد زیر همه عناصری از Html که مقدار خاصیت class در آن ها برابر mark می باشد، انتخاب می شوند و هنگامی که document در حالت ready قرار گرفت، کد درون ready اجرا می شود:

<script>
$(document).ready(function(){
    // Highlight elements with class mark
    $(".mark").css("background", "yellow");
});
</script>

انتخاب عناصر با استفاده از نام آن ها

شما می توانید با استفاده از نام عناصر Html آن ها را انتخاب کنید. برای مثال در کد زیر همه عناصر P در صفحه هنگامی که document در حالت ready باشد، هایلایت می شوند:

<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $("p").css("background", "yellow");
});
</script>

انتخاب عناصر با استفاده از attribute ها

می توانید از attribute های عناصر Html بهره بگیرید و آن ها را انتخاب کنید. مثلا می توانید همه لینک هایی را که دارای Target خاصی هستند یا همه فیلدهای input که دارای "type="text هستند، انتخاب کنید.

مثلا در کد مثال زیر همه input هایی که در آن ها "type="text هست، انتخاب می شوند و هنگامی که document در حالت ready بود، هایلایت می شوند:

<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $('input[type="text"]').css("background", "yellow");
});
</script>

انتخاب عناصر با بهره گیری از Selector های پیچیده CSS

می توانید Selector های مختلف را با یکدیگر ترکیب کنید تا به انتخاب دقیق تری از عناصر برسید. برای مثال در کد زیر می توانید Class Selector را با Element Seelctor ترکیب کنید تا عناصری را در صفحه پیدا کنید که کلاس و نوع مشخص مشابهی دارند:

<script>
$(document).ready(function(){
    // Highlight only paragraph elements with class mark
    $("p.mark").css("background", "yellow");
  
    // Highlight only span elements inside the element with ID mark
    $("#mark span").css("background", "yellow");
  
    // Highlight li elements inside the ul elements
    $("ul li").css("background", "red");
  
    // Highlight li elements only inside the ul element with id mark
    $("ul#mark li").css("background", "yellow");
  
    // Highlight li elements inside all the ul element with class mark
    $("ul.mark li").css("background", "green");
  
    // Highlight all anchor elements with target blank
    $('a[target="_blank"]').css("background", "yellow");
});
</script>

Selector های سفارشی سازی شده jQuery

علاوه بر استفاده از Selector های پیش فرض CSS، شما می توانید Selctor های سفارشی سازی شده خود را بسازید و با این کار قدرت انتخاب عناصر را بالا ببرید:

<script>
$(document).ready(function(){
    // Highlight table rows appearing at odd places
    $("tr:odd").css("background", "yellow");
  
    // Highlight table rows appearing at even places
    $("tr:even").css("background", "orange");
  
    // Highlight first paragraph element
    $("p:first").css("background", "red");
  
    // Highlight last paragraph element
    $("p:last").css("background", "green");
  
    // Highlight all input elements with type text inside a form
    $("form :text").css("background", "purple");
  
    // Highlight all input elements with type password inside a form
    $("form :password").css("background", "blue");
  
    // Highlight all input elements with type submit inside a form
    $("form :submit").css("background", "violet");
});
</script>

بعد از آشنایی با سینتکس جی کوئری و چگونه کد زدن با استفاده از آن، با Selctor ها در جی کوئری نیز آشنا شده اید. در قسمت بعدی به سراغ event ها یا رویداد می رویم.