اصول اولیه جی کوئری مقدمه ای بر جی کوئری

مطمئناً در مورد کتابخانه جاوا اسکریپت فوق العاده به نام jQuery شنیده اید. jQuery دقیقا چیست؟

چگونه زندگی یک توسعه دهنده وب را آسان تر کنیم؟ از کجا شروع کنیم؟ jQuery نوشتن را انجام می دهد جاوا اسکریپت جالبهو ساده تر با این کتابخانه، بسیاری از جنبه های نسبتاً پیچیده جاوا اسکریپت را می توان به راحتی در هر برنامه کاربردی پیاده سازی کرد.

درس امروز به شما می گوید که چگونه با jQuery شروع کنید و چگونه اولین اسکریپت خود را بنویسید.

جی کوئری چیست؟

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

jQuery یک کتابخانه سریع و مختصر است که مدیریت رویداد، انیمیشن و تعامل Ajax را برای موارد بیشتر ساده می کند. وب سریعتوسعه. جی کوئری برای تغییر روش ها طراحی شده است نوشتن جاوا اسکریپتکد

مزایای جی کوئری چیست؟

بیایید نگاهی گذرا به برخی از مزایا و ویژگی های این فریم ورک بیندازیم:

مقدار کد (مورد نیاز برای اجرای اسکریپت) در مقایسه با جاوا اسکریپت به میزان قابل توجهی کاهش یافته است که به نوبه خود به معنی زمان کمتر و کد قابل خواندن بیشتر است. در ادامه مقاله به چند نمونه نگاه خواهیم کرد.

درک کد بسیار ساده تر است (برخلاف جاوا اسکریپت). در دنیای ما، هر چه زودتر فرآیند برنامه نویسی را به پایان برسانید، زمان بیشتری را می توانید به اهداف دیگر اختصاص دهید.

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

استفاده از Ajax بسیار ساده تر می شود. برای ایجاد یک درخواست ساده Ajax فقط به 5 خط کد (گاهی کمتر) نیاز دارید.

تعداد زیادی افزونه که با آنها تقریباً هر کاری می توانید انجام دهید.

جی کوئری سرگرم کننده است :)

چگونه شروع کنیم؟

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

از طرف دیگر، می توانید از کمک گوگل بزرگ استفاده کنید و پیوندی به سرور آنها، جایی که همیشه در آن قرار دارند، قرار دهید آخرین نسخه هاهر چارچوب لینک لازم پیدا میشه

آیا سند آماده است؟

برای تحقق ما اولین جی کوئریاسکریپت، باید کل اسکریپت خود را در یک تابع قرار دهیم. این تابع زمانی اجرا می شود که DOM کاملاً آماده باشد (زمانی که "سند آماده است" - ترجمه تحت اللفظی از انگلیسی). توجه داشته باشید که این بسیار شبیه به رویداد محبوب 'onload' است، اما یکسان نیست. بیایید به یک مثال نگاه کنیم:

$(document).ready(function())( //Code here ));

در بالا به jQuery می گوییم که هر کدی را در داخل تابع، با DOM کاملا آماده اجرا کند. اول از همه، استفاده از این تکنیک، جاوا اسکریپت را کاملا از HTML جدا می کنیم. ثانیاً ما نیازی به صبر نداریم بارگذاری کاملصفحه، بارگیری DOM کافی است.

برای کدنویسان تنبل، یا برای کسانی که هر کاراکتری را می شمارند، می توانید کد بالا را بیشتر کوتاه کنید:

$(function())( //Code here ));

اولین اسکریپت جی کوئری شما

ما قبلاً می دانیم که چگونه به کتابخانه ارجاع دهیم. ما همچنین کمی در مورد تابع document.ready درک می کنیم. اکنون زمان نوشتن یک اسکریپت ساده است.

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

$(document).ready(function())(
var myQuote = $("#my_quote");
myQuote.hide();
$(".button"). کلیک کنید(function())(
myQuote.show(500);
});
});

بیایید نگاهی دقیق تر به کل کد بیندازیم.

همانطور که در بالا ذکر شد، تمام کدهایی که باید اجرا شوند را در تابع ()document.ready $ قرار می دهیم.

ما شناسه نقل قول خود (my_quote) را به متغیر myQuote اختصاص می دهیم. اکنون با id my_quote به نقل قول دسترسی داریم.

همین. وقتی دکمه را به مدت 0.5 ثانیه فشار دهید، یک نقل قول نشان داده می شود. خیلی راحته، نه؟

ادامه دارد....

با تشکر از توجه شما! بهترین ها!

03/05/17 1.2K مقدمه

JQuery HTML کتابخانه ای است که برای "کمتر نوشتن و انجام بیشتر" طراحی شده است. این یک زبان برنامه نویسی نیست، بلکه ابزاری است که برای ساده سازی پیاده سازی استفاده می شود وظایف مشترکجاوا اسکریپت.

جی کوئری دارد سود اضافی- سازگاری بین مرورگرها می توانید مطمئن باشید که کد شما در هر مرورگر مدرنی تفسیر می شود.

مقایسه نوشتن یک برنامه ساده «سلام، دنیا! " با با استفاده از جاوا اسکریپتو jQuery، می توانید تفاوت بین آنها را ببینید.

جاوا اسکریپت

document.getElementById("demo").innerHTML = "سلام، دنیا!";

جی کوئری

$("#demo").html("سلام، جهان!");

این مثال کوتاهنشان می دهد که چگونه با استفاده از jQueryشما می توانید همان نتیجه را با استفاده از جاوا اسکریپت استاندارد دریافت کنید، اما مختصرتر.

اهداف

این آموزش هیچ دانش اولیه ای از jQuery را در نظر نمی گیرد، اما موضوعات زیر را پوشش می دهد:

• نحوه نصب jQuery در پروژه وب
• مفاهیم مهم توسعه وب مانند API، DOM و CDN را تعریف کنید.
• انتخابگرها، رویدادها و افکت های رایج جی کوئری.
• نمونه هایی برای آزمایش مفاهیم آموخته شده در این مقاله.

راه اندازی جی کوئری

JQuery فایل جاوا اسکریپتی است که در سند خود به آن پیوند خواهید داد. نحوه اتصال JQuery به HTML:

• دانلود نسخه محلی؛
• از طریق شبکه تحویل محتوا (CDN) پیوندی به فایل اضافه کنید.

توجه داشته باشید. شبکه تحویل محتوا (CDN) سیستمی از چندین سرور است که محتوای وب را بر اساس موقعیت جغرافیایی کاربر به کاربر ارائه می‌کند. وقتی از طریق CDN به یک فایل jQuery پیوند می‌دهید، سریع‌تر و کارآمدتر از زمانی که روی سرور خودتان میزبانی می‌شد، به کاربر ارائه می‌شود.

در مثال هایمان از پیوند جی کوئری از طریق CDN استفاده خواهیم کرد. آخرین نسخه jQuery را می توان در گوگل پیدا کرد. اگر به جای آن می خواهید کتابخانه را دانلود کنید، می توانید یک کپی از jQuery را از وب سایت رسمی دریافت کنید.

بیایید یک پروژه وب کوچک ایجاد کنیم. این شامل یک فایل style.css، scripts.js و یک فایل اصلی index.html خواهد بود.

نشانه گذاری اولیه HTML را تنظیم کنید و آن را در index.html ذخیره کنید.

Index.html

نسخه ی نمایشی جی کوئری

Index.html

نسخه ی نمایشی جی کوئری

اسکریپت جاوا اسکریپت (scripts.js) باید در سند زیر کتابخانه jQuery گنجانده شود وگرنه کار نخواهد کرد.

توجه داشته باشید. اگر یک کپی محلی از jQuery دانلود کردید، آن را در پوشه js/ ذخیره کنید و از طریق پیوند js/jquery.min.js آن را متصل کنید.

کتابخانه jQuery به HTML اضافه شد و ما داریم دسترسی کاملبه jQuery API.

با استفاده از jQuery

jQuery برای اتصال به عناصر HTML در مرورگر از طریق DOM استفاده می شود.

Document Object Model (DOM) روشی است که توسط آن جاوا اسکریپت (و jQuery) با HTML در مرورگر تعامل دارند. برای اینکه ببینید DOM چیست، در مرورگر خود، کلیک کنید کلیک راستماوس را روی صفحه وب فعلی قرار دهید و "مشاهده کد" را انتخاب کنید. با این کار پانل «ابزار توسعه‌دهنده» باز می‌شود. کد HTML که در آن مشاهده می کنید DOM است.

هر عنصر HTMLشمارش می کند گره DOM- یک شی که توسط جاوا اسکریپت قابل دسترسی است. این اجسام دارای ساختار درختی هستند که عنصر نزدیک به ریشه و هر عنصر یک شاخه از درخت است. جاوا اسکریپت می تواند هر یک از این عناصر را اضافه، حذف و تغییر دهد.

اگر دوباره راست کلیک کنید و "View Source" را انتخاب کنید، HTML خام را مشاهده خواهید کرد. در ابتدا ممکن است در مورد کد منبع DOM و HTML گیج شوید، اما آنها چیزهای متفاوتی هستند. کد منبع صفحه دقیقاً با آنچه در فایل HTML نوشته شده مطابقت دارد. ایستا و بدون تغییر است و تحت تأثیر جاوا اسکریپت قرار نمی گیرد. به نوبه خود، DOM پویا است و می تواند تغییر کند.

لایه بیرونی DOM که کل گره را می پوشاند، شی سند است. برای استفاده در صفحه جی کوئری، باید مطمئن شوید که سند "آماده" است.

یک فایل scripts.js در پوشه js/ ایجاد کنید و کد زیر را به آن اضافه کنید:

js/scripts.js

تمام کدهای جی کوئری که در HTML درج شده اند در کد بالا قرار می گیرند. فقط زمانی کار می کند که DOM برای اجرای کد جاوا اسکریپت آماده شود. حتی اگر در برخی موارد جاوا اسکریپت تا زمانی که عناصر ارائه نشده باشند بارگیری نمی شود، از جمله این بلوک بهترین عمل در نظر گرفته می شود.

برای اجرای اسکریپت "Hello, World!" و نمایش متن در مرورگر با استفاده از jQuery، ابتدا یک عنصر پاراگراف خالی ایجاد می کنیم که شناسه نمایشی روی آن اعمال می شود.

Index.html

... ...

JQuery فراخوانی می شود و با علامت دلار ($) نشان داده می شود. ما با استفاده از جی کوئری به DOM دسترسی داریم نحو CSSو عمل را با استفاده از روش اعمال کنید:

$("انتخابگر").method();

از آنجایی که یک شناسه در CSS با نماد (#) نشان داده می شود، ما با استفاده از انتخابگر #demo به شناسه دمو دسترسی پیدا می کنیم. html() متدی است که نشانه گذاری HTML را در یک عنصر تغییر می دهد.

اکنون برنامه «سلام، جهان! "در داخل بسته بندی jQuery ready(). این خط را به تابع موجود در فایل scripts.js خود اضافه کنید:

js/scripts.js

$(document).ready(function() ($("#demo").html("سلام، دنیا!"); ));

پس از ذخیره تغییرات خود، می توانید فایل index.html را در مرورگر خود باز کنید. اگر همه چیز به درستی کار کند، کتیبه "سلام، جهان! »

روی "Hello, World!" راست کلیک کنید. "و "مشاهده کد" را انتخاب کنید. اکنون DOM نمایش داده می شود

سلام دنیا!

. اگر کد منبع صفحه را مشاهده کنید، فقط کد HTML اصلی را خواهید دید که ما نوشته ایم.

انتخابگرها

انتخابگرها همان چیزی هستند که ما برای تعیین آن استفاده می کنیم جی کوئری HTML، با چه عناصری می خواهیم کار کنیم. می توانید مشاهده کنید لیست کاملانتخابگرهای جی کوئری در اسناد رسمی.

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

$("انتخابگر")

خطوط با نقل قول های دوگانهترجیح داده می شوند (طبق کتابچه راهنمای جی کوئری). اگرچه اغلب از رشته هایی با نقل قول تک استفاده می شود.

در زیر آمده است بررسی کوتاهانتخابگرهای پرکاربرد

• $(«*») — عام: هر عنصر را در صفحه انتخاب می کند.
• $(this) - current : عنصر فعلی در حال دستکاری را انتخاب می کند این لحظهداخل یک تابع؛
• $("p") - tag: تمام نمونه های تگ را انتخاب می کند

  ;

• $(.example") - class: تمام عناصری را که کلاس مثال برای آنها اعمال می شود انتخاب می کند.
• $("#example") - identifier: یک نمونه را با یک مثال شناسه منحصر به فرد انتخاب می کند.
• $("") - ویژگی: تمام عناصر موجود را انتخاب می کند نوع ویژگیکه روی متن تنظیم شده اند.
• $("p:first-of-type") - شبه عنصر: اولین عنصر را انتخاب می کند

  .

هنگام اتصال JQuery به HTML، با کلاس ها و شناسه ها سر و کار خواهید داشت. کلاس ها زمانی استفاده می شوند که شما نیاز به انتخاب چندین عنصر دارید و از شناسه ها زمانی استفاده می شود که فقط یک عنصر را انتخاب کنید.

رویدادهای جی کوئری

در مثال "سلام، جهان! «کد زمانی اجرا شد که صفحه بارگیری شد و سند آماده بود، بنابراین نیازی به دخالت کاربر نداشت. در این حالت، می‌توانیم متن را مستقیماً در HTML، بدون jQuery بنویسیم. اما اگر بخواهیم متن پس از کلیک ماوس در صفحه ظاهر شود، باید از jQuery استفاده کنیم.

به فایل index.html خود برگردید و یک عنصر به آن اضافه کنید. ما از این دکمه برای ردیابی رویداد کلیک استفاده می کنیم.

index.html

...مرا کلیک کن

ما از متد click() برای فراخوانی تابعی استفاده می کنیم که حاوی کد "Hello, World! "

js/scripts.js

$(document).ready(function() ($("#trigger").click(); ));

شناسه عنصر trigger است، ما آن را با استفاده از $("#trigger") انتخاب می کنیم. با افزودن click() به رویداد کلیک گوش می دهیم. سپس تابعی را فراخوانی می کنیم که حاوی کد ما در متد click() است.

function() ($("#demo").html("سلام، دنیا!")؛ )

اینجا کد کاملعنصر HTML jQuery.

js/scripts.js

$(document).ready(function() ($("#trigger").click(function() ($("#demo").html("سلام، دنیا!"); )); ));

فایل scripts.js را ذخیره کرده و index.html را در مرورگر خود به روز کنید. اکنون، با کلیک بر روی دکمه، متن "Hello, World!" ظاهر می شود. ".

رویداد هر گونه تعامل کاربر با مرورگر با استفاده از ماوس یا صفحه کلید است. مثالی که ما ایجاد کردیم از یک رویداد کلیک استفاده می کند. برای مشاهده لیست کامل متدهای رویداد jQuery، به مستندات رسمی jQuery مراجعه کنید. در زیر لیستی از رویدادهای رایج استفاده می شود.

• click() - click: با یک کلیک ماوس اتفاق می افتد.
• hover() - hover: زمانی اتفاق می افتد که نشانگر ماوس روی یک عنصر قرار می گیرد.
• submit() - submit: زمانی رخ می دهد که داده های فرم ارسال می شود.
• scroll() - scrolling: هنگام پیمایش یک صفحه یا عنصر اتفاق می افتد.
• keydown() - keypress: زمانی رخ می دهد که کلیدی را روی صفحه کلید فشار دهید.

برای متحرک سازی یا پنهان کردن عناصر در حین پیمایش کاربر، از متد scroll() استفاده کنید.

برای خروج از منو با استفاده از کلیدهای ESC، از متد ()keydown استفاده شده است. برای ایجاد یک منوی کشویی یا افزودن HTML به یک div با استفاده از JQuery، از متد click() استفاده می شود.

جلوه های جی کوئری

جلوه های جی کوئری به شما امکان می دهد انیمیشن اضافه کنید و عناصر را در یک صفحه دستکاری کنید.

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

برداشتن برچسب های موجودو

از فایل index.html و کد زیر را اضافه کنید:

index.html

باز بسته

در فایل style.css، از حداقل مقدار CSS برای پنهان کردن پوشش با استفاده از نمایشگر استفاده می‌کنیم: هیچ‌کدام و آن را روی صفحه وسط قرار می‌دهیم.

css/style.css

پوشش (نمایش: هیچ، موقعیت: ثابت، بالا: 50٪، سمت چپ: 50٪، تبدیل: ترجمه (-50٪، -50٪)، ارتفاع: 200 پیکسل، عرض: 200 پیکسل، پس زمینه: خاکستری، )

در فایل scripts.js از متد toggle() استفاده می کنیم که مقادیر را تغییر می دهد ویژگی های CSSنمایش از هیچ به مسدود کردن و بالعکس، پنهان کردن و نمایش پنجره زمانی که ماوس کلیک می شود.

js/scripts.js

$(document).ready(function() ($(.trigger").click(function() ($(".overlay").toggle(); )); ));

پس از اتصال JQuery به HTML، فایل index.html را به روز کنید. اکنون می توانید با کلیک بر روی دکمه ماوس، قابلیت مشاهده پنجره بازشو را تغییر دهید. می‌توانید متد ()toggle را با fadeToggle() یا slideToggle() جایگزین کنید تا سایر افکت‌های داخلی جی کوئری را تنظیم کنید.

در زیر فهرستی از افکت‌های رایج وجود دارد:

• toggle() - toggle: قابلیت مشاهده یک عنصر یا عناصر را تغییر می دهد. show() and hide() - مجموعه افکت های یکسان؛
• fadeToggle() - Fade Toggle: قابلیت مشاهده را تغییر می دهد و انیمیشن کدورت یک عنصر یا عناصر را تنظیم می کند. ()fadeIn و ()fadeOut افکت های یک طرفه مرتبط هستند.
• slideToggle() - قابلیت مشاهده یک عنصر یا عناصر را با افکت نمایش اسلاید تغییر می دهد. slideDown() و slideUp() - مجموعه افکت های یک نوع؛
• animate() - جلوه های انیمیشن سفارشی را روی ویژگی CSS عنصر انجام می دهد.

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

نتیجه

در این راهنما نحوه انتخاب را یاد گرفتید عناصر جی کوئری HTML و دستکاری آنها، و نحوه عملکرد رویدادها و جلوه ها برای ایجاد یک تجربه وب تعاملی برای کاربر.

این نشریه ترجمه‌ای از مقاله مقدمه‌ای بر jQuery است که توسط تیم پروژه دوستانه تهیه شده است.

خوب بد

jQuery به سرعت تبدیل به یک مهارت ضروری برای توسعه دهندگان فرانت اند می شود. هدف این کتاب ارائه یک نمای کلی از کتابخانه جاوا اسکریپت جی کوئری است. پس از پایان خواندن، باید بتوانید مشکلات اساسی را با استفاده از jQuery حل کنید و پایه محکمی برای ادامه یادگیری داشته باشید. این کتاب به عنوان مواد کلاس درس در نظر گرفته شده است، اما ممکن است برای شما نیز مفید باشد.

این راهنمای عملی. ما کمی برای توصیف مفاهیم صرف خواهیم کرد و سپس شما این فرصت را خواهید داشت که روی فعالیتی مرتبط با آن مفهوم کار کنید. برخی از تمرینات ممکن است ابتدایی به نظر برسند، برخی دیگر، برعکس، کاملا ترسناک هستند. در هر صورت، در اینجا هیچ قضاوتی وجود ندارد، هدف ساده است - راحت کردن شما برای حل مشکلاتی که معمولاً با jQuery حل می شوند. راه حل های نمونه برای همه تمرین ها در کد نمونه گنجانده شده است.

دریافت کد

کدی که در این کتاب استفاده خواهیم کرد در مخزن GitHub قرار دارد. می توانید فایل .zip یا .tar را دانلود کنید، سپس آن را برای استفاده در سرور خود استخراج کنید. اگر شما یک دیوانه git هستید، همیشه می توانید مخزن را شبیه سازی یا فورک کنید.

برنامه ها

برای تکمیل بیشتر آموزش ها به ابزارهای زیر نیاز دارید:

• مرورگر فایرفاکس
• پسوند فایرباگ برای فایرفاکس
• ویرایشگر متن ساده
• برای آژاکس: سرور محلی(مانند MAMP یا WAMP) یا سرویس گیرنده FTPیا SSH برای دسترسی به سرور راه دور.

افزودن جاوا اسکریپت به صفحه

جاوا اسکریپت را می توان مستقیماً به سند یا به عنوان اضافه کرد فایل خارجیاز طریق برچسب سفارش اضافه کردن جاوا اسکریپتمهم است: وابستگی ها باید قبل از اسکریپتی که با آنها مرتبط است درج شود.

به منظور کارایی، جاوا اسکریپت باید تا حد امکان به انتهای HTML شما اضافه شود. چندین فایل جاوا اسکریپت باید در سایت تولید ترکیب شوند.

مثال 1.1. جاوا اسکریپت جاسازی شده

console.log("سلام");

مثال 1.2. جاوا اسکریپت خارجی

اشکال زدایی جاوا اسکریپت

ابزار اشکال زدایی در توسعه جاوا اسکریپت ضروری است. یک دیباگر محبوب برای فایرفاکس است پسوند فایرباگ; سافاری و کروم کنسول‌های داخلی را ارائه می‌کنند.

هر کنسول ارائه می دهد:

• ویرایشگرهای تک خطی و چند خطی برای آزمایش با جاوا اسکریپت.
• بازرس برای مشاهده تولید شده کد منبعصفحات؛
• زبانه های شبکه و منابع برای کاوش درخواست های شبکه.

هنگام نوشتن کد جاوا اسکریپت، می توانید از آن استفاده کنید روش های زیربرای ارسال پیام به کنسول:

• console.log() برای پیام های عمومی;
• console.dir() برای اشیاء مرورگر.
• console.warn() برای هشدارها؛
• console.error() برای خطاها.

سایر روش‌های کنسول نیز در دسترس هستند، اگرچه ممکن است متفاوت باشند مرورگرهای مختلف. علاوه بر این، کنسول ها قابلیت نصب را فراهم می کنند نقاط کنترلو کد مانیتورینگ برای اهداف اشکال زدایی.

تمرینات

اکثر فصول این کتاب شامل یک یا چند تمرین است. برای برخی تمرین‌ها می‌توانید مستقیماً در Firebug کار کنید، برای برخی دیگر باید اسکریپت‌های jQuery را همانطور که در تمرین‌های جداگانه مشخص شده است اضافه کنید.

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

در اینجا چند نکته برای حل چنین مشکلاتی وجود دارد:

• ابتدا مطمئن شوید که مشکلی که از شما خواسته شده است را به طور کامل درک کنید.
• در مرحله بعد، مشخص کنید که برای حل مشکل به چه عناصری نیاز دارید و تعیین کنید که چگونه آن عناصر را به دست خواهید آورد. از Firebug برای بررسی دریافت عناصر استفاده کنید.
• در نهایت بفهمید که برای حل مشکل باید با این موارد چه کار کنید. این می تواند برای افزودن نظراتی مفید باشد که توضیح می دهند قبل از نوشتن کد قرار است چه کاری انجام دهید.

از اشتباه کردن نترسید! سعی نکنید اولین بار کد را کامل کنید! اشتباه کردن و آزمایش راه حل ها بخشی از یادگیری کتابخانه است و شما خواهید شد بهترین توسعه دهنده. راه حل های مثال برای این تمرین ها در پوشه /solutions قرار دارند.

مواد مرجع

مقالات و وبلاگ های بسیاری وجود دارند که شیوه خاصی از نگاه به جی کوئری را توصیف می کنند. برخی از آنها برجسته هستند، برخی اشتباه هستند. هنگام خواندن مقاله ای در مورد jQuery، مطمئن شوید که در مورد همان نسخه ای است که شما استفاده می کنید. وسوسه نشوید که فقط کد را کپی و جایگذاری کنید - برای یادگیری آن وقت بگذارید.

در اینجا چند منبع عالی برای بررسی jQuery وجود دارد. مهمترین آنها خود سایت jQuery است: شامل اسناد کامل کتابخانه به صورت کد می باشد. این یک جعبه سیاه نیست - اگر بارها و بارها برای بازدید از کتابخانه وقت بگذارید، درک شما از کتابخانه به طور تصاعدی افزایش می یابد. و من به شدت توصیه می کنم سایت را به نشانک های مرورگر خود اضافه کنید و به طور منظم به آن دسترسی داشته باشید.

با این انتشار، تصمیم گرفتم یک سری مقاله برای کسانی که می خواهند بر فریم ورک jQuery مسلط شوند باز کنم. مثل همیشه سعی می کنم مختصر باشم و تا حد امکان مثال بزنم. اصولاً مقالات زیر را می توان به عنوان ترجمه رایگان اسناد از http://docs.jquery.com در نظر گرفت.

بنابراین، شما تصمیم گرفتید jQuery را یاد بگیرید، از کجا شروع کنید؟ البته شما از قبل با جاوا اسکریپت آشنا هستید وگرنه تصمیم نمی گرفتید. دانستن چه چیز دیگری برای درک بهتر این چارچوب جادویی مفید است:

• انتخابگرهای CSS (می توانید ببینید)
• XPath (می توانید آن را ببینید)

در نگاه اول، ارتباط واضح نیست، اما واقعیت این است که jQuery مبتنی بر توانایی دسترسی آسانبه هر گره درخت xml، که است سند html، و این دسترسی با استفاده از مکانیزم ها انجام می شود

CSS و XPath. بنابراین، اگر این مفاهیم برای شما آشنا هستند، پس در نظر بگیرید که قبلاً 50٪ با jQuery آشنا هستید و اگر نه، همه چیز در دستان شماست.

بنابراین، برای شروع، خوب است که یاد بگیریم چگونه هر عنصری را که نیاز داریم در یک صفحه یا گروهی از عناصر انتخاب شده بر اساس یک معیار خاص بدست آوریم:

$("div") // همه div های صفحه $("div:first") // فقط اولین div $("div:last") // فقط آخرین $("div:even") // همه حتی divs $("div.myclass") // div دارای class="myclass" $("#mydiv") // عنصر با id="mydiv"، نه لزوما div $("input:text") // همه عناصر ورودی با type="text" $("input:checkbox:checked") // همه چک باکس ها با checked=true $("div", "#myid") // همه div های واقع در ظرف با id=" myid" $("div.myclass img") // img، که در یک div با class="myclass" $("div.myclass, div.my2") // divs با class= "myclass" و class= است. "my2"

لیست می تواند برای مدت طولانی ادامه داشته باشد، اما مستنداتی برای این وجود دارد (خوشبختانه، jQuery مستندات عالی، با مثال ها و بدون نوشتن غیر ضروری دارد)، و ما اکنون در تلاش هستیم تا اصل موضوع را درک کنیم. یک چشم کنجکاو بلافاصله توجه را به ساختار $() در هر مثال جلب کرد. این چیه؟ این یک تابع است: نام $ است (آیا ممنوع است؟)، و در پرانتز- گزینه ها. اکنون مشخص می شود که چرا CSS و XPath مورد نیاز هستند - ساختارهای آنها به عنوان پارامترهایی برای انتخاب عمل می کنند.

تابع $ پایه و اساس jQuery است؛ این تابع با تمام متدهایش به این صورت نامیده می شود. اگر یک تابع است، پس می تواند چیزی را برگرداند. و فقط آرایه ای از عناصر انتخاب شده از سند را بر اساس آن برمی گرداند پارامترهای داده شده، آن

Var tmp = $("div"); // می توانید یک مقدار به alert(tmp.length) // اختصاص دهید و تعداد عناصر آرایه را ببینید

عناصر از این آرایهقابل دستکاری:

$("div").not(".red") // همه div ها به جز آنهایی که دارای کلاس "red" هستند، // یعنی نه تنها class="red"، بلکه class= "myclass red" $(" span.green").add("span.gray") // در در این مورد// یکسان با $("span.green، span.gray")، // اما گاهی اوقات نمی توانید بدون افزودن $("div").filter(".red, :first") // همه div ها را انتخاب کنید ، و سپس // اولین آنها و با کلاس قرمز را انتخاب می کند

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

$("div") //همه divs.not(".red") //compartment divs را با کلاس قرمز برگرداند و rest.add("span.green") //added spans را به انتخاب با کلاس سبز برگرداند. addClass("myclass") //کلاس myclass را به هر عنصر از selection اضافه کرد.removeAttr("title") //removed ویژگی عنوانبرای هر عنصر نمونه (در صورت وجود)

متدها به ترتیبی که فراخوانی می شوند اجرا می شوند (به جز روش های آژاکس، که منتظر پاسخ سرور هستند) از چپ به راست. این را می توان برای استفاده کرد حرکت آزادتوسط درخت DOM:

اینجا متن است

این متن حذف خواهد شد

اما این یکی ندارد

دل

$("#myid").click(function ()($(this).parent().prev().prev().empty(); )); فکر می‌کنم نام روش‌های موجود در مثال قبلی خود گویای این موضوع است؛ در مقاله مربوطه با جزئیات بیشتری در مورد آنها صحبت خواهد شد.

خوب، این احتمالاً همه اصول است - انتخاب کنید عنصر مورد نیاز(یا گروه) و روی آن اجرا کنید اقدامات لازم(استفاده از روش مورد نظر را بخوانید). ساده، مثل همه چیز مبتکرانه! بر اساس این دو چیزهای سادهجی کوئری مکانیزم انعطاف پذیر خاص خود را برای پردازش رویدادها و تعامل آژاکس با سرور دارد که مجموعه ای قابل توجه است. جلوههای بصریو خیلی بیشتر. من سعی خواهم کرد همه اینها را در انتشارات بعدی پوشش دهم.

آخرین به روز رسانی: 11/1/2015

جی کوئری چیست؟

دیگر نمی توان برنامه نویسی وب مدرن و ایجاد وب سایت را بدون استفاده از جاوا اسکریپت تصور کرد. با این حال، امروزه از غیر برهنه به طور فزاینده ای استفاده می شود کد جاوا اسکریپتو چارچوب ها و کتابخانه های جاوا اسکریپت. یکی از این کتابخانه ها و احتمالاً امروزه محبوب ترین آنها، جی کوئری است. بر اساس برخی برآوردها، حداقل نیمی از بزرگترین سایت های اینترنت از این کتابخانه استفاده می کنند.

اگرچه می‌توانیم jQuery را یک کتابخانه بنامیم، اما در واقع شامل یک اکوسیستم کامل از کتابخانه‌های ساخته شده در اطراف کتابخانه اصلی است: jquery.ui، کتابخانه‌ای که برای ایجاد رابط‌های بصری طراحی شده است، و jqyery.mobile که برای توسعه سایت‌های موبایل استفاده می‌شود و غیره.

مزایای استفاده از jQuery چیست؟

ساده سازی کار با کد. jQuery یک نحو ساده و زیبا برای دستکاری عناصر در یک صفحه وب ارائه می دهد.

توسعه پذیری تمام کدهای jQuery برای مشاهده و اصلاح باز هستند و اگر چیزی در کتابخانه مناسب شما نیست، می توان آن را تغییر داد. همچنین می توانید پلاگین های جی کوئری ایجاد کنید.

سازگاری بین مرورگرها jQuery بیشترین پشتیبانی را دارد مرورگرهای معروفاز جمله این موارد مانند IE 7.8. (اگرچه به دلیل اینکه مرورگرهای IE 6-8 به تدریج در حال تبدیل شدن به تاریخ هستند و همچنین برای کاهش حجم کتابخانه، پشتیبانی از IE 6-8 در آخرین نسخه متوقف شد).

اتصال کتابخانه jQuery

برای شروع کار با این کتابخانه، ابتدا باید آن را دانلود کنیم. می توانید آن را در وب سایت رسمی توسعه دهنده https://jquery.com/download/ پیدا کنید. می توانید چندین نسخه از jQuery را در خود صفحه دانلودها پیدا کنید. در زمان نوشتن این فصل، آخرین نسخه موجود 2.0.3 است. اگرچه نسخه ها کمی با یکدیگر تفاوت دارند، اما این تفاوت ها معمولاً چندان قابل توجه نیستند و میله پایه و اصول کلیاکثر نسخه ها در اصل یکسان هستند.

این کتابخانه در دو نسخه ارائه شده است - فشرده یا یکپارچه (به حداقل رسانده) و غیر فشرده (عادی). نسخه‌های کوچک‌شده عملکردی مشابه نسخه‌های معمولی ارائه می‌کنند، اما از این جهت متفاوت هستند که حاوی هیچ کاراکتر اختیاری مانند فاصله، کامنت و غیره نیستند، و بنابراین برای مثال، پسوند min را در نام خود دارند. jquery-1.10.1.min.js. از آنجایی که به دلیل حجم کمتری بهره وری بیشتری دارند، برای استفاده در تولید واقعی توصیه می شود. در عین حال، اگر می خواهید منطق کد جی کوئری را درک کنید، در این صورت می توانید به نسخه معمولیکتابخانه ها

کتابخانه جی کوئری نیز مانند سایرین گنجانده شده است فایل های جاوا اسکریپت. مثلا:

دنیای جی کوئری

در این مورد، من از نسخه کوچک شده کتابخانه jquery - jquery-1.10.1.min.js استفاده کردم. حالا بیایید چند صفحه وب ساده با استفاده از jquery ایجاد کنیم:

دنیای جی کوئری به دنیای جی کوئری خوش آمدید jQuery جاوا اسکریپت $(function())( $("#btn1").click(function())( $(this).css("background-color", "red" هشدار ("دنیای جی کوئری")؛ ))؛ ));

این صفحه وب از یک طرف از کد jquery استفاده می کند و از طرف دیگر تفاوت استفاده از کد جاوا اسکریپت استاندارد را نیز نشان می دهد.

دو دکمه در صفحه تعریف شده است. یک دکمه دارای یک کنترل کننده onclick است که در خود نشانه گذاری دکمه تعریف شده است: onclick="alert("JavaScript World"); ".

دکمه دیگر تقریباً همین کار را انجام می دهد، اما فقط با jquery. این دکمه دارای شناسه (id="btn1") است که از طریق آن توابع جی کوئریما آن را مدیریت خواهیم کرد.

در پایین صفحه یک تابع jquery را تعریف می کنیم:

$(function())($("#btn1"). کلیک کنید(function())($(this).css("background-color", "red"); alert("jQuery World"); )) ;))

عبارت $(function()()); - همین که هست تعریف کوتاهتوابع جی کوئری این تابع معمولاً در انتهای سند قرار می گیرد، مانند این مورد، قبل از بسته شدن برچسب بدن. این تابعشامل همه کدها برای زبان جاوا اسکریپت، که با بارگذاری صفحه اجرا می شود.

معنای کد استفاده شده این است که عنصر دکمه را در عبارت $("#btn1") دریافت می کنیم و سپس یک کنترل کننده کلیک را به آن متصل می کنیم. در واقع عبارت $("#btn1").click مانند استفاده از کنترل کننده onclick در بدنه نشانه گذاری دکمه است. در عین حال، ما نیازی به تغییر نشانه گذاری خود دکمه یا اضافه کردن چیزی در آنجا نداریم. همه چیز در یک تابع jquery انجام می شود.

در مورد ما چه چیزی را شامل می شود؟ ابتدا رنگ دکمه را تنظیم می کنیم: $(this).css("background-color", "red"); . و سپس به سادگی پیام را روی صفحه نمایش می دهیم.

استفاده از CDN ها

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

به عنوان مثال، بیایید کتابخانه jquery واقع در jQuery CDN را به هم وصل کنیم:

دنیای جی کوئری

اتصال این نسخه خاص از کتابخانه ضروری نیست؛ کل مجموعه نسخه های موجود کتابخانه را می توانید در https://code.jquery.com/ پیدا کنید.

همچنین می توانیم از CDN های دیگر استفاده کنیم. مثلا:

Google CDN: ارائه شده است توسط گوگل. همه نسخه های موجودرا می توان در https://developers.google.com/speed/libraries/devguide?hl=ru#jquery پیدا کرد.

Microsoft CDN: ارائه شده است توسط مایکروسافت. همه نسخه‌های موجود را می‌توانید در https://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0 پیدا کنید.

فرمت اتصال به صورت زیر خواهد بود:

Yandex CDN: ارائه شده است شرکت روسییاندکس. تمام نسخه های موجود را می توان در این آدرس یافت