همه ی دوروبریات از اینجا شروع کردن…. تو هم شروع کن !

نقطه شروع چیه ؟

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

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

۱-به پلتفرم بوی اعتماد کن که در این صفحه تو به خواسته ات میرسی !

۲-سخت تمرین کن و نگران زیاد بودن محتوای آموزشی نباش !

چارت نکات قبل از شروع به یادگیری

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

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

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

 

آموزش شروع به کار جی کوئری

پیش نیاز یادگیری شروع جی کوئری

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

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

قبل از هرچیزی جی کوئری یک زبان نیست ، یک کتابخانه است !

کتابخانه jQuery یک نسخه ی بسیار سبک برای کدنویسی زبان جاواسکریپت است که می گوید : “کمتر بنویسید ، بیشتر کار کنید”.

هدف از jQuery آسان سازی استفاده از زبان JavaScript در وب سایت شماست . jQuery بسیاری از کارهای معمول را انجام می دهد که برای انجام آنها به خطوط زیادی از کد JavaScript احتیاج دارید. بنابراین در نهایت قطعه کد های بهینه شده را می توانید در بسیاری از پروژه های خود استفاده کنید. jQuery همچنین بسیاری از موارد پیچیده JavaScript ، مانند ارتباط ها با AJAX و دستکاری DOM را ساده می کند. کتابخانه jQuery شامل ویژگی های زیر است:

  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animation
  • AJAX
  • Utilities

جی‌کوئری همچنین این اختیار را به برنامه نویسان می‌دهد که افزونه‌هایی برای این کتابخانه جاوااسکریپت ایجاد کنند.

چرا باید از جی کوئری استفاده کنیم ؟

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

  • Netflix
  • IBM
  • Google
  • Microsoft

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

لازم به ذکر است این کتابخانه به طور کامل روی تمام مروگرهای دنیا پشتیبانی می شود .

شروع به کار با جی کوئری

دسترسی به جی کوئری

به طور معمول جی کوئری در دستان شماست ! بله در مرورگر خود اگر همین الان یک فایل ویرایش شده با جی کوئری را آدرس دهی کنید به راحتی کد ها را اجرا کرده و نتیجه را نمایش می دهد .

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

  • Notepad
  • Visual Studio
  • Eclipse
  • Aptana Studio
  • Ultra edit

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

همچنین برای کسب اطلاعات بیشتر همیشه می توانید از مستندات سایت جی کوئری نیز استفاده کنید .

دریافت جی کوئری

روش های مختلفی برای شروع استفاده از jQuery در وب سایت شما وجود دارد.

می توانید: کتابخانه jQuery را از jQuery.com بارگیری کنید.

یا مانند Google از jQuery از CDN استفاده کنید.

دریافت جی کوئری

دو نسخه از jQuery برای بارگیری در دسترس است:

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

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

برای استفاده از نسخه آماده :

ابتدا کتابخانه jQuery را از jQuery.com بارگیری کنید.

آخرین نسخه را دریافت کرده و از حالت پوشه خارج کنید .

 

سپس درون یک فایل خالی یا یک فایل HTML کد زیر را قرار دهید :

<head><script src="jquery-3.5.1.min.js"></script></head>

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

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

استفاده از شبکه تحویل محتوا cdn

اگر نمی خواهید jQuery را خودتان بارگیری و میزبانی کنید ، می توانید آن را از CDN (شبکه تحویل محتوا) وارد کنید. Google نمونه ای از سایت هایی است که میزبان jQuery است:

پیشنهاد ما به شما استفاده از CDN است .خیلی راحت و بی دردسر است و همیشه از آخرین نسخه استفاده می کند و نیازی به بروزرسانی کتابخانه نیست .

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

مزیت بزرگ استفاده از jQuery از سایت Google

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

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

یک فایل HTML ساده (test.html) ایجاد کنید و کتابخانه jQuery بارگیری شده را به عنوان یک فایل جاوا اسکریپت معمولی (.js) قرار دهید.یا همانطور که اعلام شد از cdn استفاده کنید که خیلی بهتر است .

سپس درون فایل خود کد زیر را قرار دهید (پیشنهاد می کنیم کد را خودتان تایپ کنید)

نگران کدها نباشید . فعلا فقط تست کنید ما بعدا همه ی موارد را توضیح می دهیم .

<html>

<head>
    <title>jQuery Hello World</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <script type="text/javascript">
        $(document).ready(function(){$("#msgid").html("This is Hello World by JQuery");});
    </script>This is Hello World by HTML
    <div id="msgid"></div>
</body>

</html>

خروجی قطعه کد بالا به شکل زیر است :

This is Hello World by JQuery

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

با استفاده از jQuery شما عناصر HTML  را انتخاب کرده و “Action” را روی آنها انجام می دهید.

نحوه ی jQuery برای انتخاب عناصر HTML و انجام برخی اقدامات روی عناصر (موارد) ساخته شده است به این شکل است :

$(selector).action()
  1. علامت $ برای تعریف / دسترسی به jQuery
  2. (selector) برای “(یا پیدا کردن)” عناصر HTML
  3. و اکشن هم عمل (action) جی کوئری که باید روی عنصر (ها) اعمال شود را انجام می دهد

به طور مثال به موارد زیر دقت کنید :

$(this).hide() 
$("p").hide() 
$(".test").hide() 
$("#test").hide()

خط اول : المنت فعلی را پنهان می کند

خط دوم : تمام المنت های <p> را پیدا کرده و پنهان می کند

خط سوم : المنت همه ی کلاس هایی که test باشد را پنهان می کند

خط چهارم : آی دی یا شناسه ای که test باشد را پنهان می کند

استفاده از Document Ready Event

شاید متوجه شده باشید در اکثر مثال های jQuery از رویداد Document Ready Event استفاده شده است :

$(document).ready(function () { 
  // jQuery methods go here...
});

این دستور خط کد برای جلوگیری از اجرای هرگونه کد jQuery قبل از اتمام بارگیری سند است .یعنی Document Ready Event ابتدا صبر می کند که صفحه به طور کامل بارگیری شود و سپس به کد های جی کوئری اجازه اجرا شدن می دهد . منظور از بارگیری کامل یعنی تمام کد های صفحه به همراه تصاویر ، ویدیو ، متن و سایر المان های html است .

این رویداد همچنین به شما این امکان را می دهد که کدهای JavaScript خود را قبل از متن سند خود ، یعنی در بخش head داشته باشید. پس بنابراین با رویداد Ready هر کدی که درون این تابع قرار بگیرد بعد از بارگیری صفحه اجرا می شود . این رویداد به دلایل زیر کاربرد دارد :

  1. تلاش برای پنهان کردن المانی که هنوز ایجاد نشده است
  2. تلاش برای بدست آوردن اندازه تصویری که هنوز بارگیری نشده است

در زیر مثال استفاده از رویداد ready زده شده است .

$ ( document ).ready ( function ) ;

شما همچنین بدون صدا زدن اسم تابع می توانید به این شکل از آن استفاده کنید :

$(function(){
  // jQuery methods go here...
});

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

انتخابگرهای جی کوئری

انتخاب کنندگان jQuery یکی از مهمترین قسمتهای کتابخانه jQuery هستند . انتخاب کنندگان jQuery به شما امکان می دهد عناصر HTML را انتخاب و دستکاری کنید. انتخابگرهای jQuery برای “یافتن” (یا انتخاب) عناصر HTML بر اساس نام ، شناسه ، کلاس ها ، انواع ، ویژگی ها ، مقادیر و موارد دیگر استفاده می شوند . همچنین با انتخابگرهای می توانید موارد درون css را هم دستگاری کنید . همه انتخاب کنندگان در jQuery با علامت $ و پرانتز شروع می شوند :

$("p")

به طور مثال کد زیر نشان می دهد ، وقتی کاربر روی یک دکمه کلیک می کند ، همه عناصر <p> پنهان می شوند :

$(document).ready(function(){$("button").click(function(){$("p").hide();});});

اتخابگر ID

انتخابگر id jQuery از ویژگی id یک برچسب HTML برای یافتن عنصر خاص استفاده می کند. یک شناسه باید در یک صفحه منحصر به فرد باشد ، بنابراین هنگامی که می خواهید یک عنصر منحصر به فرد پیدا کنید باید از انتخابگر #id استفاده کنید. برای یافتن عنصری با شناسه خاص ، یک کاراکتر هش بنویسید و سپس شناسه عنصر HTML را وارد کنید :

$(document).ready(function(){$("button").click(function(){$("#test").hide();});});

انتخابگر class

انتخابگر jcuery .class عناصر یک کلاس خاص را پیدا می کند. برای یافتن عناصر با یک کلاس خاص ، یک نام عنصر را بنویسید و سپس نام کلاس را دنبال کنید:

$(document).ready(function(){$("button").click(function(){$(".test").hide();});});

سایر انتخابگر ها

  1. $ (“*”) همه عناصر را انتخاب می کند
  2. $ (this) عنصر HTML فعلی را انتخاب می کند
  3. $ (“p.intro”) همه عناصر <p> با کلاس = “intro” را انتخاب می کند
  4. $ (“p:first”) اولین عنصر <p> را انتخاب می کند
  5. $ (“ul li: first”) اولین عنصر <li> اولین <ul> را انتخاب می کند
  6. $ (“ul li: first-child”) اولین عنصر <li> از هر <ul> را انتخاب می کند
  7. $ (“[href]”) همه عناصر دارای ویژگی href را انتخاب می کند
  8. $ (“a[target = ‘_ blank’]”) همه عناصر <a> با مقدار صفت هدف برابر با “_blank” را انتخاب می کند
  9. $ (“a[target! = ‘_ blank’]”)) همه عناصر <a> با مقدار مشخصه هدف را که برابر با “_blank” نیست انتخاب می کند
  10. $ (“:button”) همه عناصر <button> و عناصر <input> type = “button” را انتخاب می کند
  11. $ (“tr:even”) همه عناصر even در <tr> را انتخاب می کند
  12. $ (“tr:odd”) همه عناصر odd در <tr> را انتخاب می کند

توابع در یک پرونده جداگانه

اگر وب سایت شما حاوی صفحات زیادی است و می خواهید توابع jQuery شما به آسانی در دسترس باشد ، می توانید توابع jQuery خود را در یک پرونده جداگانه .js قرار دهید. به این شکل توابع مستقیماً به قسمت <head> اضافه می شوند.

<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="my_jquery_functions.js"></script></head>

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

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

یک رویداد بیانگر لحظه دقیق وقوع یک اتفاق توسط کاربر است.

مثال برای انواع رویدادهای متداول :

  • حرکت ماوس روی یک عنصر
  • با کلیک بر روی یک عنصر
  • انتخاب یک دکمه رادیویی

در اینجا برخی از رویدادهای مشترک DOM وجود دارد:

برای اختصاص یک رویداد کلیک به تمام پاراگرافهای یک صفحه ، می توانید این کار را انجام دهید:

$("p").click();

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

$("p").click(function(){// action goes here!!});

به فرض مثال :

$("p").click(function(){$(this).hide();});

مثال زیر با کلیک کردن بر روی هر پاراگراف حذف می شود :

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>click demo</title><style>p {color: red;margin: 5px;cursor: pointer;}p:hover {background: yellow;}</style><script src="https://code.jquery.com/jquery-3.5.0.js"></script></head><body><p>First Paragraph</p><p>Second Paragraph</p><p>Yet one more Paragraph</p><script>$( "p" ).click(function() {$( this ).slideUp();});</script></body></html>

مدیریت رویداد دوبار کلیک کردن

$("p").dblclick(function(){$(this).hide();});

مدیریت رویداد mouseenter

$("#p1").mouseenter(function(){alert("You entered p1!");});

مدیریت رویداد mouseleave

$("#p1").mouseleave(function(){alert("Bye! You now leave p1!");});

مدیریت رویدادmousedown 

$("#p1").mousedown(function(){alert("Mouse down over p1!");});

مدیریت رویداد mouseup

$("#p1").mouseup(function(){alert("Mouse up over p1!");});

مدیریت رویداد hover

رویداد hover دو عملکرد را در بر می گیرد و ترکیبی از روش mouseenter و mouseleave است.

$("#p1").hover(function(){alert("You entered p1!");},function(){alert("Bye! You now leave p1!");});

مدیریت رویداد focus

رویداد focus وقتی کاربر جایی کلیک می کند و تمرکز (نقطه یا مکان اننتخاب شده ) تغییر می کند، فراخوانی می شود . به طور کلی این تابع هنگامی که قسمت فرم متمرکز شود اجرا می شود:

$("input").focus(function(){$(this).css("background-color", "#cccccc");});

مدیریت رویداد blur

یک نغییر گرافیکی ایجاد می کند .

$("input").blur(function(){$(this).css("background-color", "#ffffff");});
تا همینجا فعلا کافیه ...

خسته شدید ؟ برای یادگیری هیچ عجله ای نداشته باشید

حدود یک الی دو دقیقه استراحت کنید و سپس ادامه دهید …

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

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

jQuery روشهای زیادی را برای تأثیرات انیمیشنی یا افکتی در یک صفحه وب فراهم می کند. لیست کاملی از افکت ها jQuery در زیر آورده شده است:

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

۱) animate () انیمیشن را اجرا می کند .
۲) clearQueue () برای حذف تمام توابع صف باقی مانده از عناصر انتخاب شده استفاده می شود.
۳) delay () اجرای تأخیر را برای همه توابع صف در عناصر انتخاب شده تنظیم می کند.
۴ dequeue () برای حذف عملکرد بعدی از صف استفاده می شود و سپس عملکرد فعلی را اجرا می کند.
۵) fadein () عناصر تطبیق داده شده را با محو شدن به حالت مات نشان می دهد. به عبارت دیگر ، در عناصر انتخاب شده محو می شود.
۶) fadeout () عناصر مطابق را با محو شدن به حالت شفاف نشان می دهد. به عبارت دیگر ، عناصر انتخاب شده را محو می کند.
۷) fadeto () میزان کدورت را برای عنصر همسان تنظیم می کند. به عبارت دیگر ، عناصر انتخاب شده را از بین می برد.
۸) fadetoggle () عنصر مطابق را نشان می دهد یا پنهان می کند. به عبارت دیگر ، بین روشهای fadeIn () و fadeOut () جابجا می شود.
۹) finish () تمام انیمیشن های صف بندی شده را برای عناصر انتخاب شده متوقف ، حذف و تکمیل می کند.
۱۰) hide () عناصر مطابق یا انتخاب شده را پنهان می کند.
۱۱) queue () صف افکت ها را نشان می دهد یا آنها را دستکاری می کند یعنی روی عناصر انتخاب شده اجرا می شود.
۱۲) show () عناصر انتخاب شده را نمایش می دهد .
۱۳) slidedown () عناصر همسان را با اسلاید نشان می دهد.
۱۴) slidetoggle () عناصر همسان را با اسلاید نشان می دهد یا پنهان می کند. به عبارت دیگر ، برای جابجایی بین روش های slideUp () و slideDown () استفاده می شود.
۱۵) slideup () عناصر همسان را با اسلاید پنهان می کند.
۱۶) stop () انیمیشن را که روی عناصر همسان اجرا می شود متوقف می کند.
۱۷) toggle () عناصر همسان را نشان می دهد یا پنهان می کند. به عبارت دیگر ، بین روشهای hide () و show () تغییر مکان می دهد.

با استفاده از jQuery می توانید عناصر HTML را با روش های hide () و show () پنهان کرده و نشان دهید:

$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});

می توانید با سرعت خاصی یک افکت را انجام دهید :

مثال زیر پارامتر سرعت را با hide () نشان می دهد:

$("button").click(function(){$("p").hide(1000);});

یک مثال کامل برای پنهان سازی در جی کوئری

* پیشنهاد می شود کد زیر را به طور کامل خودتان تایپ و اجرا کنید .

<!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>$(document).ready(function(){$("#hide").click(function(){$("p").hide();});});</script></head><body><p><b>This is a little poem: </b><br/>Twinkle, twinkle, little star<br/>How I wonder what you are<br/>Up above the world so high<br/>Like a diamond in the sky<br/>Twinkle, twinkle little star<br/>How I wonder what you are</p><button id="hide">Hide</button></body></html>

speed: یک پارامتر اختیاری است. سرعت تاخیر را مشخص می کند.

callback: همچنین یک پارامتر اختیاری است. این تابعی را مشخص می کند که پس از اتمام اثر hide () فراخوانی شود.

خروجی قطعه کد بالا به صورت زیر خواهد بود :

This is a little poem:
Twinkle, twinkle, little star
How I wonder what you are
Up above the world so high
Like a diamond in the sky
Twinkle, twinkle little star
How I wonder what you are

همچنین برای نشان دادن افکت () jQuery fadeIn مثالی می زنیم.

<!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);});});</script></head><body><p>See the fadeIn() method example with different parameters.</p><button>Click to fade in boxes</button><br><br><div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div></body></html>

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

روش های اسلاید jQuery عناصر را به سمت بالا و پایین می کشد. کلیک کنید تا به پایین یا بالا اسلاید شود

روی من کلیک کن !
Hidden content

از روش jQuery slideDown () برای کشویی یک عنصر استفاده می شود.

$("#flip").click(function(){$("#panel").slideDown();});

قطعه کد زیر یک مثال برای اسلاید هادر جی کوئری است :

<!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>$(document).ready(function(){$("#flip").click(function(){$("#panel").slideDown("slow");});});</script><style>#panel, #flip {padding: 5px;text-align: center;background-color: #00FFFF;border: solid 1px #c3c3c3;}#panel {padding: 50px;display: none;}</style></head><body><div id="flip">Click to slide down panel</div><div id="panel">Hello javatpoint.com!It is the best tutorial website to learn jQuery and other languages.</div></body></html>

یادآوری : پارامتر سرعت اختیاری است و مدت زمان اجرای افکت را مشخص می کند. این می تواند مقادیر زیر را بگیرد: “slow” ، “fast” به صورت میلی ثانیه.

مثال عکس اسلاید به پایین اسلاید به بالا است یعنی slideUp .

<!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>$(document).ready(function(){$("#flip").click(function(){$("#panel").slideUp("slow");});});</script><style>#panel, #flip {padding: 5px;text-align: center;background-color: #00FFFF;border: solid 1px #c3c3c3;}#panel {padding: 50px;}</style></head><body><div id="flip">Click to slide up panel</div><div id="panel">Hello javatpoint.com!It is the best tutorial website to learn jQuery and other languages.</div></body></html>

دستورات Get و Set در جی کوئری

jQuery شامل روشهای قدرتمندی برای تغییر و دستکاری عناصر و ویژگیهای HTML را در خود دارد .یک قسمت بسیار مهم jQuery امکان دستکاری در DOM است. jQuery همراه با دسته ای از روش های مربوط به DOM است که دسترسی و دستکاری عناصر و ویژگی ها را آسان می کند.

یادآوری : DOM چیست ؟

 استاندارد DOM دسترسی به اسناد HTML و XML را تعریف می کند:

  Document Object Model (DOM) یک پلت فرم و رابط خنثی با زبان تحت وب است که به برنامه ها و اسکریپت ها امکان دسترسی پویا و به روزرسانی محتوا را می دهد . 

سه روش ساده ، اما مفید در jQuery برای دستکاری DOM عبارتند از:

text () – محتوای متن عناصر انتخاب شده را تنظیم یا برمی گرداند
html () – محتوای عناصر انتخاب شده را تنظیم یا برمی گرداند (از جمله نشانه گذاری HTML)
val () – مقدار فیلدهای فرم را تنظیم یا برمی گرداند

مثال برای استفاده از روش GET در جی کوئری

مثال زیر نحوه بدست آوردن محتوا با استفاده از متدهای jQuery text و html را نشان می دهد:

$("#btn1").click(function(){alert("Text: " + $("#test").text());});$("#btn2").click(function(){alert("HTML: " + $("#test").html());});

مثال زیر نحوه بدست آوردن مقدار یک فیلد ورودی را با روش jQuery val () نشان می دهد:

$("#btn1").click(function(){alert("Value: " + $("#test").val());});

مثال زیر نحوه بدست آوردن مقدار ویژگی href را در یک پیوند نشان می دهد:

$("button").click(function(){alert($("#w3s").attr("href"));});

مثال زیر نحوه تنظیم محتوا را با استفاده از متدهای jQuery text () ، html () و val () نشان می دهد:

$("#btn1").click(function(){$("#test1").text("Hello world!");});$("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){$("#test3").val("Dolly Duck");});

مثال برای استفاده از روش Set در جی کوئری

همانند روش get ما برای تنظیم محتوا از سه روش مشابه قبلی استفاده خواهیم کرد:

text () – محتوای متن عناصر انتخاب شده را تنظیم یا برمی گرداند
html () – محتوای عناصر انتخاب شده را تنظیم یا برمی گرداند (از جمله نشانه گذاری HTML)
val () – مقدار فیلدهای فرم را تنظیم یا برمی گرداند
مثال زیر نحوه تنظیم محتوا را با استفاده از متدهای jQuery text () ، html () و val () نشان می دهد:

$("#btn1").click(function(){$("#test1").text("Hello world!");});$("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){$("#test3").val("Dolly Duck");});

استفاده از تابع بازگشتی

هر سه روش text ، html  و val  نیز با عملکرد تابع بازگشتی ارائه می شوند.تابع بازگشتی دارای دو پارامتر است:

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

مثال زیر text () و html () را با عملکرد تابع بازگشتی نشان می دهد:

$("#btn1").click(function(){$("#test1").text(function(i, origText){return "Old text: " + origText + " New text: Hello world!(index: " + i + ")";});});$("#btn2").click(function(){$("#test2").html(function(i, origText){return "Old html: " + origText + " New html: Hello <b>world!</b>(index: " + i + ")";});});

خروجی قطعه کد بالا پس از کلیک بر روی دکمه های تعریف شده به شکل زیر خواهد شد :

Old text: This is a bold paragraph. New text: Hello world! (index: 0)

Old html: This is another bold paragraph. New html: Hello world! (index: 0)

قطعه کد کامل این مثال را در قسمت زیر می توانید مشاهده کنید :

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>$(document).ready(function(){$("#btn1").click(function(){$("#test1").text(function(i, origText){return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";});});$("#btn2").click(function(){$("#test2").html(function(i, origText){return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";});});});</script></head><body><p id="test1">This is a <b>bold</b> paragraph.</p><p id="test2">This is another <b>bold</b> paragraph.</p><button id="btn1">Show Old/New Text</button><button id="btn2">Show Old/New HTML</button></body></html>

استفاده از زنجیره اتصال در جی کوئری

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

Chaining به ما امکان می دهد چندین دستور jQuery (روی همان عنصری که در ابتدای خط کد مشخص کرده ایم ) را در یک خط کد اجرا کنیم.

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

نکته: به این ترتیب ، مرورگرها مجبور نیستند بیش از یک بار همان عنصر را پیدا کنند.

مثال زیر متدهای css () ، slideUp () و slideDown () را به هم متصل می کند. عنصر انتخاب شده ی  “p1” ابتدا به رنگ قرمز تغییر می کند ، سپس به سمت بالا اسلاید می شود و سپس به پایین می لغزد:

به این مثال خوب دقت کنید :

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

البته این تنها یک اتصال کوچک بود و می توانستیم از دستورهای بیشتری هم استفاده کنیم .

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

مثلا این مورد توضیحات ما را کامل مشخص می کند :

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

همان قطعه کد در چند خط نوشته شده است .

 

 

 

 

بعد از اتمام آموزش چه کاری انجام بدیم ؟

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

پرسش های بعد از اتمام آموزش

از چه منابع ای برای یادگیری استفاده کنیم ؟

می توانید از سایت های Udemy ، GitHub ، tutorialspoint ، CodeAcademy و سایر منابع آموزشی فارسی زبان استفاده کنید .

چقدر زمان بین هر آموزش بزاریم ؟

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

آیا یادگیری زبان ها اولویت دارند ؟

در حال حاضر خیر . شما بر اساس نیاز یا آشنایی قبلی که با آن زبان دارید آموزش را شروع کنید . همچنین نیم نگاهی به وضعیت بازار کار آن زبانی که قصد یادگیریش را دارید بهتر است .

بعد از آموزش چکار کنیم ؟

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

به طور مثال یک پروژه کوچک مثل دفترچه یادداشت یا ماشین حساب که بسیار ساده هستند و در صورتی که دیدید علاقمندتر شدید پروژه تان را گسترش دهید .

فراموش نکنید : تمرین ، تکرار و پروژه !

آیا نقطه شروع تمام موارد را آموزش داده است ؟

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

آیا استفاده از آموزش های بعدی هزینه دارد ؟

خیر .

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

در رابطه با آموزش های نقطه شروع سوالی دارید ؟

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

با ما در ارتباط باشید !