خواندن ۲ دقیقه·۵ سال پیش

7- معرفی jQuery به زبان ساده

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

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

برای سازگار کردن js با انواع مرورگر ها و divice های مختلف هم باید وقت زیادی بگذارید ولی jQuery یک راهکار رایگان برای شماست.

روش های نصب jQuery:

1- لوکال: دانلود کنید و توی فایل html تون آدرس شو بدید.

2- بصورت cdn استفاده کنید. بازم باید توی فایل html تون آدرس مجازی شو بدید.

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

<!DOCTYPE html> <html>
 <head>
 <title>عنوان را اینجا بنویسید</title> 
<script src=&quotfilename.js&quot>   
</head>
 <body> 
</body> 
</html>

نکته برای آدرس دهی :در html های قدیمی باید اَتریبیوت "type="text/javascript را هم می گذاشتیم ولی در نسخه html 5 دیگه نمی خواد.

جمع بندی: پس برای آدرس دهی js باید در تگ head داخل تگ آدرس دهی کنیم (مثل بالا)

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

آشنایی با مفهوم Selector در jQuery:

از اسمش پیداست، به کمک اون می تونید عناصر دلخواد html تون رو انتخاب کنید. توی jQuery هم کاربردش اینه که می تونید مثلا یک کلاس html رو انتخاب کنید و و تغیرات دلخواه رو فقط روی اون مورد خاص اعمال کنید.

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

$()

مثال 1: وقتی کاربر روی دکمه ای کلیک می کنه همه h3 هامون محو بشن:

$(document).ready(function(){
$(&quotbutton&quot).click(function(){
$(&quoth3&quot).hide();
});
});

مثال 2 : وقتی کاربر روی هر پاراگراف کلیک می کنه اون پاراگراف محو میشه

$(document).ready(function(){
    $(&quotp&quot).click(function(){
        $(this).hide();
    });
    });

اصول نوشتن در جی کوئری:

$(selector).action()

علامت $ برای تعریف jQuery است.

بجای selector باید عنصر مورد نظر تون رو انتخاب کنید. در مورد سلکتور پایین این آموزش صحبت کردیم.

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

مفهوم Event در جی کوئری:

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

کلیک کردن موس روی یک دکمه عبور
موس از روی تگ ها h3
وقتی کاربر روی یک عنصری دابل کلیک می کنه
همین اسکرول به بالا

مثال و نمونه کد برای Event: در این کد اگه کاربر روی یک المان با آی دی yekiddelhkah# کلیک کرد رنگش بشه قرمز.

$(document).ready(function () {
$('#yekiddelhkah').click(function(){ 
$(this).css('color', 'red'); 
});
});

لینک توضیحات بیشتر از سایت مرجع

رقبای jQuery :
1- reactjs
2- vuejs

بیشتر بخوانید:

آموزش jQuery به زبان انگلیسی

آموزش jQuery به زبان فارسی

کدjsjqueryفرانت اند

parsrtl

عاشق محتوا و کد خوش حال می شوم اگر پروفایل من را ببینید https://stackoverflow.com/users/13114202/ali-jasemi

شاید از این پست‌ها خوشتان بیاید