ایجاد شده در ۱۱ مرداد ۱۴۰۴
📚 جزوه مقدمه jQuery
1. معرفی jQuery
- jQuery یک کتابخانه‌ی جاوااسکریپت است که کار با DOM، رویدادها، انیمیشن‌ها و AJAX را ساده‌تر می‌کند.
- کدها کوتاه‌تر و خواناتر از جاوااسکریپت خام هستند.
- Cross-Browser است (در مرورگرهای مختلف یکسان عمل می‌کند).
2. اضافه کردن jQuery به پروژه
📌 روش 1: استفاده از CDN (پیشنهادی)
html
CopyEdit
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
- بهتر است انتهای <body> قرار گیرد.
3. تفاوت قرار دادن در <head> یا <body>
📍 قرار دادن در انتهای <head>
html
CopyEdit
<head> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> </head>
- قبل از بارگذاری کامل HTML اجرا می‌شود.
- اگر به المانی که هنوز لود نشده اشاره کنیم → خطا یا عملکرد اشتباه.
- باید حتماً از $(document).ready() استفاده کنیم.
📍 قرار دادن در انتهای <body> (پیشنهادی)
html
CopyEdit
<body> <!-- محتوای صفحه --> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> </body>
- بعد از لود کامل HTML اجرا می‌شود.
- حتی بدون $(document).ready() هم می‌توان به المان‌ها دسترسی داشت.
- سرعت نمایش صفحه بیشتر است.
4. ساختار اجرای کد jQuery
روش کامل
javascript
CopyEdit
$(document).ready(function(){ // کدهای jQuery اینجا });
روش کوتاه‌تر
javascript
CopyEdit
$(function(){ // کدهای jQuery اینجا });
5. انتخاب‌گرها در jQuery
| انتخاب‌گر | مثال | توضیح |
|---|---|---|
| ID | $("#idName") | انتخاب بر اساس id |
| کلاس | $(".className") | انتخاب بر اساس کلاس |
| تگ | $("tagName") | انتخاب بر اساس نوع تگ |
| المان جاری | $(this) | انتخاب همان المانی که رویداد روی آن اجرا شده |
6. متدهای نمایش و مخفی کردن
javascript
CopyEdit
$(".test").hide(); // مخفی کردن المان $(".test").show(); // نمایش المان $(this).hide(); // مخفی کردن المانی که روی آن کلیک شده $("span").show(); // نمایش همه span ها
7. مثال عملی – مخفی شدن خودکار المان
HTML:
html
CopyEdit
<div class="test">به صورت خودکار مخفی می‌شم!!</div>
jQuery:
javascript
CopyEdit
$(document).ready(function(){ $(".test").hide(); });
💡 نتیجه: المان با کلاس .test بلافاصله بعد از لود شدن صفحه مخفی می‌شود.
📌 نکات مهم:
- همیشه بهتر است فایل jQuery را قبل از فایل جاوااسکریپت خودمان لود کنیم.
- برای جلوگیری از مشکلات بارگذاری، فایل jQuery را ترجیحاً انتهای <body> بگذارید.
- اگر در <head> قرار دادید → حتماً کدها را داخل $(document).ready() بنویسید.