J query

‫وب‬ ‫بر‬ ‫مبتنی‬ ‫نویسی‬ ‫برنامه‬
Web Programming
‫خدا‬ ‫نام‬ ‫به‬
1
jQuery

jQuery‫چیست؟‬
jQuery‫یک‬‫کتابخانه‬‫سبک‬‫جاوا‬‫اسکریپت‬‫است‬‫که‬‫امکان‬‫انجام‬‫کارهای‬‫بیشتر‬‫با‬‫ک‬‫د‬‫نویسی‬
‫کمتر‬‫را‬‫می‬‫دهد‬.‫هدف‬jQuery‫استفاده‬‫آسانتر‬‫از‬JavaScript‫در‬‫وب‬‫سایت‬‫است‬.
2

‫کردن‬ ‫اضافه‬jQuery‫به‬‫وب‬ ‫صفحه‬
3
‫چندین‬‫راه‬‫برای‬‫استفاده‬‫از‬jQuery‫وجود‬‫دارد‬:
‫دانلود‬‫کتابخانه‬jQuery‫از‬‫سایت‬http://jquery.com/‫و‬‫لینک‬‫کردن‬‫آن‬‫به‬‫صفحه‬‫وب‬‫توسط‬
‫تگ‬<script>
‫استفاده‬‫از‬‫یک‬CDN‫مانند‬Google‫و‬‫اضافه‬‫کردن‬URL‫آن‬‫به‬‫صفحه‬‫وب‬‫توسط‬‫تگ‬
<script>

‫دانلود‬jQuery
4
‫دو‬‫نسخه‬‫از‬jQuery‫برای‬‫دانلود‬‫در‬‫دسترس‬‫است‬:
‫نسخه‬Production:‫این‬،‫نسخه‬‫یک‬‫فایل‬‫فشرده‬‫از‬jQuery‫است‬‫و‬‫برای‬‫وب‬‫سایت‬‫های‬‫درحال‬
‫کار‬‫مناسب‬‫است‬.
‫نسخه‬Development:‫این‬،‫نسخه‬‫یک‬‫فایل‬‫بدون‬‫فشرده‬‫سازی‬‫و‬‫قابل‬‫خواندن‬‫است‬‫و‬‫برای‬‫زمان‬‫ی‬
‫که‬‫در‬‫حال‬‫آماده‬‫سازی‬‫وب‬‫سایت‬‫هستید‬‫مناسب‬‫است‬.

‫فایل‬ ‫با‬ ‫دادن‬ ‫ارتباط‬ ‫نحوه‬html
5
‫کتابخانه‬jQuery،‫تنها‬‫یک‬‫فایل‬JavaScript‫است‬‫و‬‫همانطور‬‫که‬‫گفته‬‫شد‬‫می‬‫توانید‬‫توسط‬
‫تگ‬<script>‫آن‬‫را‬‫به‬‫صفحه‬‫وب‬‫لینک‬‫کنید‬.
‫خصوصیت‬src‫باید‬‫با‬‫آدرس‬‫فایل‬‫دانلود‬‫شده‬‫تنظیم‬،‫شود‬‫در‬‫مثال‬،‫باال‬‫فایل‬jQuery
ً‫ا‬‫دقیق‬‫در‬‫همان‬‫مسیر‬‫صفحه‬‫جاری‬‫قرار‬‫دارد‬.‫اگر‬‫فایل‬jQuery‫در‬‫آدرسی‬‫غیر‬‫از‬‫آدرس‬
‫صفحه‬‫جاری‬‫وجود‬‫دارد‬‫باید‬‫آنرا‬‫در‬‫نظر‬‫بگیرید‬.

jQuery CDN‫جایگزینی‬‫دانلود‬ ‫برای‬
6
‫اگر‬‫نمی‬‫خواهید‬‫فایل‬jQuery‫را‬‫در‬‫بین‬‫فایل‬‫های‬‫پروژه‬‫تان‬‫قرار‬،‫دهید‬‫می‬‫توانید‬‫با‬‫استف‬‫اده‬
‫از‬‫یک‬CDN‫آن‬‫را‬‫به‬‫صفحه‬‫وب‬‫لینک‬‫کنید‬.
Google‫و‬Microsoft‫هر‬‫دو‬‫میزبان‬jQuery‫هستند‬.

‫از‬ ‫استفاده‬ ‫بزرگ‬ ‫مزیت‬ ‫یک‬CDN
7
‫زمانی‬‫که‬‫بازدیدکنندگان‬‫سایت‬،‫شما‬ً‫ال‬‫قب‬‫در‬‫سایت‬‫های‬،‫دیگر‬‫فایل‬jQuery‫را‬‫از‬CDN‫های‬
Google‫یا‬Microsoft‫دریافت‬‫کرده‬،‫اند‬‫در‬‫دفعات‬،‫بعدی‬‫فایل‬jQuery‫از‬Cache
‫فراخوانی‬‫می‬‫شود‬‫که‬‫باعث‬‫افزایش‬‫سرعت‬‫می‬‫شود‬.

jQuery Syntax
8
‫اصلی‬‫ترین‬‫دستور‬‫در‬jQuery‫به‬‫صورت‬‫زیر‬‫است‬:
 Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)

‫رویداد‬ready(Document Ready Event)
10
‫تمام‬‫متدهای‬jQuery‫داخل‬‫رویداد‬ready‫آورده‬‫می‬‫شوند‬.‫این‬‫امر‬‫باع‬‫ث‬‫می‬‫شود‬‫تا‬
‫کدهای‬jQuery‫بعد‬‫ازبارگذاری‬‫کامل‬،‫صفحه‬‫اجرا‬‫شوند‬.‫همچنین‬‫با‬‫این‬،‫تکنیک‬‫قادر‬
‫خواهید‬‫بود‬‫کدهای‬JavaScript‫را‬‫در‬‫قسمت‬<head>‫صفحه‬‫قرار‬‫دهید‬.

‫نکته‬
11
‫تیم‬jQuery‫یک‬‫متد‬‫کوتاه‬‫تر‬‫برای‬‫رویداد‬ready‫ایجاد‬‫کرده‬‫است‬:
‫می‬‫توانید‬‫هر‬‫کدام‬‫از‬‫روش‬‫های‬‫باال‬‫را‬‫که‬‫ترجیح‬‫می‬‫دهید‬‫استفاده‬‫کنید‬.‫اما‬‫توجه‬‫داشته‬‫باشید‬‫که‬‫روش‬‫اول‬‫قابل‬‫ف‬‫هم‬‫تر‬‫و‬
‫خواناتر‬‫است‬(easier to understand when reading the code).

‫گزینشگرهای‬(jQuery Selectors)
12
‫گزینشگرهای‬jQuery‫به‬‫شما‬‫این‬‫اجازه‬‫را‬‫می‬‫دهند‬‫تا‬‫عناصر‬HTML‫را‬‫انتخاب‬‫و‬‫دستکاری‬‫کنید‬.
‫با‬‫گزینشگرهای‬jQuery‫می‬‫توانید‬‫عناصر‬HTML‫را‬‫براساس‬‫شناسه‬،‫کالس‬،‫نوع‬،‫نام‬‫خصوصیت‬،
‫مقدار‬‫خصوصیت‬‫و‬...‫پیدا‬‫کنید‬.‫این‬‫تکنیک‬‫براساس‬‫گزینشگرهای‬CSS‫است‬‫و‬‫عالوه‬‫بر‬،‫این‬
jQuery‫تعدادی‬‫گزینشگر‬‫سفارشی‬‫نیز‬‫دارد‬.
‫تمام‬‫گزینشگرها‬‫در‬jQuery‫با‬‫عالمت‬"$"‫آغاز‬‫و‬‫با‬‫پرانتز‬‫محصور‬‫می‬‫شوند‬.)($

‫نام‬ ‫گزینشگر‬‫تگ‬element Selector
13
‫گزینشگر‬‫نام‬،‫تگ‬‫به‬‫شما‬‫اجازه‬‫می‬‫دهد‬‫تا‬‫عناصر‬‫را‬‫براساس‬‫نام‬‫تگ‬،‫انتخاب‬‫کنید‬.
‫به‬‫عنوان‬‫مثال‬‫می‬‫توانید‬‫تمام‬‫تگ‬‫های‬<p>‫را‬‫در‬‫صفحه‬‫مانند‬‫زیر‬‫انتخاب‬‫کنید‬:

‫شناسه‬ ‫انتخابگر‬#id Selector
15
‫گزینشگر‬،‫شناسه‬‫از‬‫مقدار‬‫خصوصیت‬id‫تگ‬HTML‫برای‬‫پیدا‬‫کردن‬‫عنصر‬‫استفاده‬‫می‬‫کند‬.
‫شناسه‬‫در‬‫یک‬،‫صفحه‬‫باید‬‫یکتا‬‫باشد‬،‫بنابراین‬‫زمانی‬‫که‬‫بخواهید‬‫به‬‫یک‬‫عنصر‬‫منحصر‬‫به‬‫فرد‬‫در‬
‫صفحه‬‫دسترسی‬‫داشته‬‫باشید‬‫از‬‫این‬‫روش‬‫استفاده‬‫نمایید‬.‫برای‬‫پیدا‬‫کردن‬‫یک‬‫عنصر‬‫با‬‫ش‬‫ناسه‬
،‫مشخص‬‫از‬‫کاراکتر‬"#"‫همراه‬‫با‬‫شناسه‬‫مورد‬‫نظر‬‫استفاده‬‫نمایید‬.

‫کالس‬ ‫نام‬ ‫گزینشگر‬.class Selector
17
‫گزینشگر‬‫نام‬،‫کالس‬‫عناصر‬‫با‬‫کالس‬‫مشخص‬‫را‬‫پیدا‬‫می‬‫کند‬.‫برای‬‫پیدا‬‫کردن‬‫عناصر‬‫با‬‫نام‬‫کالس‬
،‫مشخص‬‫از‬‫کاراکتر‬"."‫همراه‬‫با‬‫نام‬‫کالس‬‫مورد‬‫نظر‬‫استفاده‬‫کنید‬.

‫های‬ ‫گزینشگر‬ ‫از‬ ‫بیشتر‬ ‫های‬ ‫مثال‬jQuery
19

‫های‬ ‫گزینشگر‬ ‫از‬ ‫بیشتر‬ ‫های‬ ‫مثال‬jQuery
20

‫مجزا‬ ‫فایل‬ ‫یک‬ ‫در‬ ‫پرکاربرد‬ ‫توابع‬
21
‫اگر‬‫وب‬‫سایت‬‫شما‬‫شامل‬‫تعداد‬‫زیادی‬‫صفحه‬،‫است‬‫و‬‫می‬‫خواهید‬‫توابع‬jQuery‫یکسانی‬‫را‬‫در‬‫آنها‬
‫استفاده‬،‫کنید‬‫می‬‫توانید‬‫این‬‫توابع‬‫را‬‫در‬‫یک‬‫فایل‬‫مجزا‬‫با‬‫پسوند‬js.‫قرار‬‫دهید‬.
‫همانطور‬‫که‬‫در‬‫این‬‫آموزش‬‫دیده‬،‫اید‬‫توابع‬‫به‬‫طور‬‫مستقیم‬‫در‬‫قسمت‬<head>‫صفحه‬‫قرار‬‫داده‬
‫شده‬‫اند‬.‫اما‬‫بعضی‬‫مواقع‬‫مانند‬،‫باال‬‫ترجیح‬‫داده‬‫می‬‫شود‬‫که‬‫آنها‬‫را‬‫در‬‫یک‬‫فایل‬JavaScript
‫جداگانه‬‫با‬‫پسوند‬js.‫ذخیره‬‫کنیم‬‫و‬‫مانند‬،‫زیر‬‫توسط‬‫تگ‬<< script‫به‬‫صفحه‬‫لینک‬‫کرد‬.

‫رویدادها‬jQuery Event Methods
22
‫تمام‬‫کارهایی‬‫که‬‫در‬‫یک‬‫صفحه‬‫وب‬‫اتفاق‬‫می‬‫افتد‬‫و‬‫می‬‫توانیم‬‫به‬‫آنها‬‫پاسخ‬،‫دهیم‬‫رویداد‬(Event)‫گفته‬‫می‬‫شود‬.
‫مثال‬:
‫حرکت‬‫موس‬‫برروی‬‫یک‬‫عنصر‬
‫انتخاب‬‫یک‬radio button
‫کلیک‬‫کردن‬‫برروی‬‫یک‬‫عنصر‬
‫واژه‬"‫اتفاق‬‫افتادن‬"‫اغلب‬‫همراه‬‫با‬‫واژه‬‫ی‬"‫رویداد‬"‫استفاده‬‫می‬‫شود‬.‫مثال‬:‫رویداد‬keypress‫زمانی‬‫اتفاق‬
‫می‬‫افتد‬‫که‬‫یکی‬‫از‬‫دکمه‬‫های‬‫صفحه‬‫کلید‬‫را‬‫فشار‬‫دهید‬.

‫تعدادی‬‫مدل‬ ‫در‬ ‫رایج‬ ‫رویدادهای‬ ‫از‬DOM
23

‫در‬ ‫رویدادها‬ ‫از‬ ‫استفاده‬ ‫نحوه‬jQuery
24
‫بیشتر‬‫رویدادهای‬‫مدل‬DOM،‫یک‬‫متد‬‫معادل‬‫در‬jQuery‫دارند‬.
‫مثال‬
‫برای‬‫اختصاص‬‫دادن‬‫رویداد‬onclick‫به‬‫تمام‬‫تگ‬‫های‬<p>،‫می‬‫توانید‬‫مانند‬‫زیر‬‫عمل‬‫کنید‬:
‫قدم‬،‫بعدی‬‫مشخص‬‫کردن‬‫کاری‬‫است‬‫که‬‫باید‬‫به‬‫ازای‬‫رویداد‬onclick‫اتفاق‬‫بیافتد‬.‫باید‬‫یک‬‫تابع‬‫را‬‫به‬
‫عنوان‬‫پارامتر‬‫به‬‫متد‬click‫ارسال‬‫کنید‬.

‫در‬ ‫رایج‬ ‫رویدادهای‬jQuery
25
 $(document).ready()
 click()
 dblclick()
 mouseenter()
 mouseleave()
 mousedown()
 mouseup()
 hover()
 focus()
 on()

‫متد‬click()
26
‫این‬،‫متد‬‫یک‬‫تابع‬‫را‬‫برای‬‫پاسخ‬‫دادن‬‫به‬‫رویداد‬onclick‫یک‬،‫عنصر‬‫به‬‫آن‬‫اختصاص‬‫می‬‫دهد‬.
‫زمانی‬‫که‬‫کاربر‬‫روی‬‫یک‬‫عنصر‬HTML‫کلیک‬،‫کند‬‫رویداد‬onclick‫اتفاق‬‫می‬‫افتد‬.

‫رویداد‬dblclick()
27
‫این‬،‫متد‬‫یک‬‫تابع‬‫را‬‫برای‬‫پاسخ‬‫دادن‬‫به‬‫رویداد‬double-clicks‫یک‬،‫عنصر‬‫به‬‫آن‬‫اختصاص‬‫می‬
‫دهد‬.‫زمانی‬‫که‬‫کاربر‬‫روی‬‫یک‬‫عنصر‬HTML‫دوبار‬‫کلیک‬،‫کند‬‫رویداد‬dblclick‫اتفاق‬‫می‬
‫افتد‬.

‫رویداد‬mouseenter()
28
‫این‬،‫متد‬‫یک‬‫تابع‬‫را‬‫برای‬‫زمانی‬‫که‬‫موس‬‫کاربر‬‫روی‬‫یک‬‫عنصر‬HTML‫قرار‬‫می‬،‫گیرد‬‫اجرا‬
‫می‬‫کند‬.

‫رویداد‬mouseleave()
29
‫زمانی‬‫که‬‫موس‬‫از‬‫روی‬‫یک‬‫عنصر‬HTML‫خارج‬‫می‬،‫شود‬‫تابع‬‫نوشته‬‫شده‬‫در‬‫این‬‫رویداد‬‫اجرا‬
‫می‬‫شود‬.

‫رویداد‬mousedown()
30
‫زمانی‬‫که‬‫موس‬‫روی‬‫یک‬‫عنصر‬HTML‫قرار‬‫دارد‬‫و‬‫کلید‬،‫چپ‬‫وسط‬‫یا‬‫راست‬(left, middle
or right mouse button is pressed down)‫فشرده‬‫شود‬‫این‬‫رویداد‬‫پاسخ‬‫می‬‫دهد‬.

‫رویداد‬mouseup()
31
‫زمانی‬‫که‬‫موس‬‫کاربر‬‫روی‬‫یک‬‫عنصر‬HTML‫قرار‬‫دارد‬‫و‬‫کلید‬،‫چپ‬‫وسط‬‫یا‬‫راست‬(left,
middle or right mouse button is released)‫را‬‫رها‬‫کند‬،‫این‬‫رویداد‬‫اجرا‬‫می‬
‫شود‬.

‫رویداد‬hover()
32
‫این‬،‫متد‬‫همزمان‬‫دو‬‫تابع‬‫را‬‫برای‬‫پاسخ‬‫دادن‬‫به‬‫رویداد‬mouseenter()‫و‬
mouseleave()‫یک‬،‫عنصر‬‫به‬‫آن‬‫اختصاص‬‫می‬‫دهد‬.‫زمانی‬‫که‬‫موس‬‫کاربر‬‫روی‬‫عنصر‬
HTML‫قرار‬،‫گیرد‬‫تابع‬‫اول‬‫اجرا‬‫می‬‫شود‬‫و‬‫زمانی‬‫که‬‫موس‬‫از‬‫روی‬‫آن‬‫خارج‬‫می‬،‫شود‬‫تابع‬
‫دوم‬‫اجرا‬‫خواهد‬‫شد‬.

‫رویداد‬focus()
33
‫این‬،‫متد‬‫یک‬‫تابع‬‫را‬‫برای‬‫پاسخ‬‫دادن‬‫به‬‫رویداد‬onfocus‫یک‬،‫عنصر‬‫به‬‫آن‬‫اختصاص‬‫می‬
‫دهد‬.‫زمانی‬‫که‬‫عالمت‬‫چشمک‬‫زن‬‫مکان‬‫نما‬‫روی‬‫یکی‬‫از‬‫اجزای‬،‫فرم‬‫مانند‬:Text Box‫قرار‬
،‫گیرد‬‫این‬‫رویداد‬‫پاسخ‬‫می‬‫دهد‬.

‫رویداد‬blur()
34
‫زمانی‬‫که‬‫تمرکز‬‫از‬‫روی‬‫یکی‬‫از‬‫اجزای‬‫فرم‬‫خارج‬،‫شود‬‫این‬‫رویداد‬‫پاسخ‬‫خواهد‬‫داد‬.

‫متد‬on()
35
 The on() method attaches one or more event handlers for the
selected elements.
 Attach a click event to a <p> element:

‫ها‬ ‫افکت‬jQuery Effects
37
 Hide and Show
 fade

Hide and Show
38
‫در‬jQuery،‫با‬‫متدهای‬)(hide‫و‬)(show‫می‬‫توانید‬‫عناصر‬HTML‫را‬‫پنهان‬‫و‬‫نمایان‬
‫کنید‬.

‫متد‬)(toggle
40
‫با‬‫متد‬)(toggle‫می‬‫توانید‬‫بین‬‫متدهای‬)(hide‫و‬)(show‫حرکت‬‫کنید‬.‫این‬‫متد‬‫عناصر‬
‫نمایان‬‫را‬‫پنهان‬‫و‬‫عناصر‬‫پنهان‬‫را‬‫نمایان‬‫می‬‫کند‬

‫کردن‬ ‫محو‬‫عناصر‬Fading
41
‫با‬jQuery‫می‬‫توان‬‫عناصر‬‫را‬‫کم‬‫کم‬‫ناپدید‬‫و‬‫یا‬‫نمایان‬‫کرد‬.
 fadeIn()
 fadeOut()
 fadeToggle()
 fadeTo()

‫بصورت‬ ‫عناصر‬ ‫کردن‬ ‫پنهان‬‫اسالیدی‬Sliding
43
‫با‬jQuery‫می‬‫توان‬‫عناصر‬‫را‬‫بصورت‬‫اسالیدی‬‫یا‬‫کشویی‬‫مخفی‬‫و‬‫یا‬‫نمایان‬‫کرد‬.

‫متحرک‬‫سازی‬Animation
44
‫متد‬)(animate‫برای‬‫متحرک‬‫سازی‬‫در‬jQuery‫استفاده‬‫می‬‫شود‬.

‫سازی‬ ‫متحرک‬ ‫کردن‬ ‫متوقف‬
46
‫متد‬)(stop‫برای‬‫متوقف‬‫کردن‬‫متحرک‬‫سازی‬‫استفاده‬‫می‬‫شود‬.

‫در‬ ‫متدها‬ ‫کردن‬ ‫ای‬ ‫زنجیره‬jQuery
48
‫با‬jQuery‫می‬‫توانید‬‫متدها‬‫را‬‫به‬‫یکدیگر‬‫زنجیر‬‫کنید‬.‫زنجیره‬‫ای‬‫کردن‬‫به‬‫ما‬‫اجازه‬‫می‬‫دهد‬‫تا‬
‫تنها‬‫با‬‫یک‬،‫دستور‬‫چندین‬‫متد‬‫را‬‫روی‬‫یک‬‫عنصر‬،‫مشخص‬‫اجرا‬‫کنیم‬.‫به‬‫این‬،‫ترتیب‬‫برای‬‫اعمال‬
‫کارهای‬،‫مختلف‬‫مرورگرها‬‫مجبور‬‫نیستند‬‫که‬‫عنصرهای‬‫یکسان‬‫را‬‫بیش‬‫از‬‫یک‬‫مرتبه‬‫شناس‬‫ایی‬‫کنند‬.

‫نکته‬
49
‫زمانی‬‫که‬‫در‬‫حال‬‫زنجیره‬‫ای‬‫کردن‬‫متدها‬،‫هستید‬‫می‬‫توانید‬‫هر‬‫متد‬‫را‬‫در‬‫یک‬‫خط‬‫مانند‬‫زی‬‫ر‬
‫قرار‬‫دهید‬:

J query

More Related Content

Similar to J query (20)

More from M Nemati (20)

J query