کتابخانه jquery
اضافه کردن کتابخانه jQuery به صفحه وب
برای استفاده از یک کتابخانه JavaScript، باید آنرا به صفحه وبتان اضافه نمایید.
برای اضافه کردن کتابخانه، باید از تگ <script> استفاده کنید و خصوصیت src آنرا با URL کتابخانه تنظیم نمایید.
اضافه کردن jQuery
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>
<body>
</body>
</html>
توصیف jQuery
اصلی ترین تابع در jQuery، تابع ()$ است و معادل متد ()document.getElementById در JavaScript عمل می کند. اگر با توجه به مدل DOM در HTML، شناسه یک عنصر به آن ارسال شود، در jQuery به کلیه خصوصیت ها و متدهای آن دسترسی خواهید داشت.
در jQuery برای دسترسی به عناصر HTML و دستکاری آنها از گزینشگرهای CSS استفاده می شود. (CSS selector)
اختصاص یک تابع به رویداد onload:
در JavaScript، می توان یک تابع را به یک رویداد مثل onload اختصاص داد:
روش JavaScript:
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;
معادل کد بالا در jQuery با کمی تفاوت:
روش jQuery:
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);
خط آخر در کد بالا، شیء document را به jQuery ارسال می کند: (document)$
تابع (document)$ یک شیء جدید در jQuery برمی گرداند، که ()ready یکی از متدهای آن است.
چونکه توابع در JavaScript یک نوع از متغیرها هستند، می توان تابع myFunction را به عنوان یک متغیر به متد ()ready ارسال نمود.
 |
تابع ()$، یک شیء jQuery برمی گرداند، که با شیء DOM ارسال شده، متفاوت است. شیء jQuery، خصوصیت ها و متدهایی دارد که با خصوصیت ها و متدهای شیء DOM ارسال شده متفاوت هستند. شما نمی توانید از خصوصیت ها و متدهای DOM در jQuery استفاده کنید. |
|---|
کار کردن با jQuery
مثال زیر را امتحان کنید:
مثال (کتابخانه jquery)
<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)
<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" مراجعه نمایید.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 21713
دیدگاه‌ها
سلام و ارادت
مثال اول این درسنامه برای من هیچ خروجی نشون نمیده.اگه زحمت نمیشه چک بکنید چون بعیده مرورگر من مشکل داشته باشه
سلام، در مثال مذکور، ابتدا باید فایل jQuery از آدرس زیر روی کامپیوتر شما لود، شود، و تا اینکار انجام نشود، دستورات jQuery اجرا نخواهند شد، احتمالا در لود فایل مذکور مشکلی پیش آمده است ...!
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
برای تست می توانید، آدرس بالا را در مرورگرتان مستقیم تایپ کرده و چک کنید که فایل بصورت کامل لود می شود یا خیر.
در این متن :
اگر می خواهید درباره jQuery مطالب بیشتری را بخوانید، لطفاً به لینک "jQuery HOME" مراجعه نمایید.
لینک مشکل داره.
ممنون، لینک jQuery اصلاح شد.
هر دو مثال "خودتان امتحان کنید" در بالا، کد مشابه داره ...
ممنون، اصلاح شد.