آموزش جی کوئری – سینتکس jQuery

در این بخش از آموزش جی کوئری با شکل نوشتاری کدهای jQuery یا همان سینتکس jQuery آشنا می شوید.

استاندارد سینتکس jQuery

یک دستور جی کوئری معمولا با یک علامت دلار ($) شروع و با یک نقطه-ویرگول (;) تمام می شود.

در جی کوئری, علامت دلار ($) یک مستعار (alias) برای jQuery است.

بیاید کد مثال پایین را به عنوان ساده ترین دستور برای جی کوئری در نظر بگیریم :

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

$(document).ready(function(){

// Some code to be executed...

alert("Hello World!");

});

</script>

در مثال بالا ما به سادگی یک پیام alert حاوی “Hello World!” را به کاربر نمایش دادیم.

توضیح کد jQuery بالا

اگر کاملا در بحث جی کوئری جدید هستید, احتمالا فک کنید که اصلا کد بالا در مورد چی بود. اما بیاییم هر بخش را یک به یک بررسی کنیم.

المان <script> – از آنجا که جی کوئری فقط یک کتابخانه جاوا اسکریپت است بنابراین کد جی کوئری می تواند داخل المان <script> قرار بگیرد. به هر حال, اگر قصد داشتید آن را در یک فایل جاوااسکریپت خارجی قرار بدید کافی است این بخش را حذف کنید.
$(document).ready(handler); – این دستور معمولا به عنوان رویداد ready شناخته می شود. مقدار handler نیز یک تابع است که به متد ready() پاس داده می شود که آن را بصورت امن زمانی که DOM کاملا لود شده است اجرا کند.

متد ready() در جی کوئری معمولا برای یک تابع anonymous به کارر می رود. بنابراین مثال بالا بصورت کوتاه می تواند بصورت زیر نوشته شود.

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

$(function(){

// Some code to be executed...

alert("Hello World!");

});

</script>

نکته: می توانید از هر دو سینتکس jQuery بالا استفاده کنید. به هر حال رویداد ready هنگام خواندن کدها ساده تر قابل درک است.

بنابراین می توانید داخل یک تابع مدیریت رویداد یک دستور jQuery را برای انجام هر عملیاتی بنویسید : $(selector).action();

از آنجا که $(selector) بطور ساده المان های HTML را از درخت DOM انتخاب می کند بنابراین می توانید آن را دستکاری کنید و action() نیز بعضی عملیات مانند تغییر مقدار CSS یا ست کردن محتوای المان و غیره.. روی المان سلکت شده اعمال می کند.

یک مثال دیگر از ست کردن متن پاراگراف را بعد آماده بودن DOM را ببینید :

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

<!DOCTYPE html>

<html>

<head>

<title>jQuery Document Ready Demo</title>

$(document).ready(function(){

$("p").text("Hello World!");

});

</script>

</head>

<body>

<p>Not loaded yet.</p>

</body>

</html>

در دستور jQuery بالا (خط ۱۰) p یک سلکتور جی کوئری است که همه پاراگراف ها (المان های <p>) را انتخاب می کند و سپس متد text() محتوای متن پاراگراف را ست می کند.

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Click Handler Demo</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(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>

<!DOCTYPE html>

<html>

<head>

<title>jQuery Click Handler Demo</title>

$(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” المان <button> ایجاد و کلیک شود.

حالا یک درک پایه از نحوه کار جی کوئری را بدست آوردید, در فصل های بعدی با جزییات بیشتری در مورد اصطلاحات استفاده شده آموزش می دهیم.

امیدوارم در این بخش آموزش جی کوئری, از سینتکس jQuery نهایت استفاده را برده باشید.

در بخش بعدی با متغیرها در جی کوئری آشنا می شوید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

آموزش جی کوئری – سینتکس jQuery

استاندارد سینتکس jQuery

توضیح کد jQuery بالا

آموزش جی کوئری – مقدمه

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه