%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (تمدید شد)
سبد (0)

تبلیغات

کتابخانه jquery

اضافه کردن کتابخانه jQuery به صفحه وب

Wiki

برای استفاده از یک کتابخانه JavaScript، باید آنرا به صفحه وبتان اضافه نمایید.

برای اضافه کردن کتابخانه، باید از تگ <script> استفاده کنید و خصوصیت src آنرا با URL کتابخانه تنظیم نمایید.

اضافه کردن jQuery

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
  </script>
</head>
<body>
</body>
</html>

توصیف jQuery

Wiki

اصلی ترین تابع در jQuery، تابع ()$ است و معادل متد ()document.getElementById در JavaScript عمل می کند. اگر با توجه به مدل DOM در HTML، شناسه یک عنصر به آن ارسال شود، در jQuery به کلیه خصوصیت ها و متدهای آن دسترسی خواهید داشت.

در jQuery برای دسترسی به عناصر HTML و دستکاری آنها از گزینشگرهای CSS استفاده می شود. (CSS selector)

اختصاص یک تابع به رویداد onload:

در JavaScript، می توان یک تابع را به یک رویداد مثل onload اختصاص داد:

روش JavaScript:

function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;

معادل کد بالا در jQuery با کمی تفاوت:

روش jQuery:

function myFunction()
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

خط آخر در کد بالا، شیء document را به jQuery ارسال می کند: (document)$

تابع (document)$ یک شیء جدید در jQuery برمی گرداند، که ()ready یکی از متدهای آن است.

چونکه توابع در JavaScript یک نوع از متغیرها هستند، می توان تابع myFunction را به عنوان یک متغیر به متد ()ready ارسال نمود.

lamp تابع ()$، یک شیء jQuery برمی گرداند، که با شیء DOM ارسال شده، متفاوت است.
شیء jQuery، خصوصیت ها و متدهایی دارد که با خصوصیت ها و متدهای شیء DOM ارسال شده متفاوت هستند.
شما نمی توانید از خصوصیت ها و متدهای DOM در jQuery استفاده کنید.

کار کردن با jQuery

Wiki

مثال زیر را امتحان کنید:

مثال (کتابخانه jquery)

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
خودتان امتحان کنید »

مثال زیر را نیز امتحان کنید:

مثال (کتابخانه jquery)

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
خودتان امتحان کنید »

همان طور که در مثال بالا می بینید، jQuery به شما اجازه می دهد که چندین کار را بطور همزمان روی یک شیء انجام دهید. (زنجیره ای کردن یا Chaining)

$("#h01").attr("style","color:red").html("Hello jQuery")

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

دیدگاه‌ها  

+2 # rrramin 1396-05-05 02:07
سلام و ارادت
مثال اول این درسنامه برای من هیچ خروجی نشون نمیده.اگه زحمت نمیشه چک بکنید چون بعیده مرورگر من مشکل داشته باشه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-05-05 08:17
سلام، در مثال مذکور، ابتدا باید فایل jQuery از آدرس زیر روی کامپیوتر شما لود، شود، و تا اینکار انجام نشود، دستورات jQuery اجرا نخواهند شد، احتمالا در لود فایل مذکور مشکلی پیش آمده است ...!
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
برای تست می توانید، آدرس بالا را در مرورگرتان مستقیم تایپ کرده و چک کنید که فایل بصورت کامل لود می شود یا خیر.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # webnoos.com 1394-02-21 18:52
در این متن :
اگر می خواهید درباره jQuery مطالب بیشتری را بخوانید، لطفاً به لینک "jQuery HOME" مراجعه نمایید.

لینک مشکل داره.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1394-02-21 18:59
ممنون، لینک jQuery اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # میلاد نظری 1393-11-28 07:35
هر دو مثال "خودتان امتحان کنید" در بالا، کد مشابه داره ...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1393-11-28 08:06
ممنون، اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی JavaScript

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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