مقدمه و معرفی jQuery
jQuery چیست ؟
jQuery یک کتابخانه استاندارد و آماده شامل تعدادی متد و توابع نوشته شده به زبان JavaScript
می باشد . از توابع و متدهای این کتابخانه برای کار با عناصر و تگ های موجود در صفحات
HTML , ASP.Net و یا PHP استفاده می شود . به طور کلی با استفاده از این متدهای از
پیش تعریف شده ، می توانید تغییراتی را در عناصر و تگ های HTML ایجاد کرده و یا نحوه
نمایش آنها را تغییر دهید . برای مثال می توانید یک عنصر HTML را با کلیک بر روی یک
دکمه فرمان پنهان کرده و یا در صورت مخفی بودن آن را نمایش دهید .
زبان jQuery دارای یک شعار معروف است . این شعار می گوید کمتر بنویسید ، بیشتر انجام
دهید ( write less , do more ) . به طور کلی کتابخانه jQuery شامل موارد زیر می باشد
:
در استفاده از jQuery شما نیاز ندارید برای انجام کارهای مورد نظرتان یک تابع جدید
بنویسید . فقط کافی است عنصر مورد نظر خود را انتخاب کرده و سپس متد مورد نظر را فراخوانی
نموده تا آن عنصر را تغییر دهد .
قبل از مطالعه و استفاده از بخش jQuery ، شما بایستی با مطالب زیر آشنایی کامل داشته
باشید :
نحوه استفاده از کتابخانه jQuery :
همانطور که گفتیم ، jQuery دارای یک کتابخانه استاندارد و آماده می باشد . شما بایستی
برای استفاده از jQuery ، فایل این کتابخانه را به صفحه خود متصل کنید . کتابخانه jQuery
در یک فایل مجزا که از نوع فایل های JavaScript و با نام jQuery.js است ، نگهداری می
شود . شما برای اتصال فایل این کتابخانه به صفحه مورد نظرتان از 2 روش می توانید استفاده
کنید :
- دانلود فایل کتابخانه jQuery بر روی کامپیوتر و یا سرور سایت خودتان و سپس اتصال آن
به صفحه .
- استفاده از فایل کتابخانه jQuery بر روی سرورهای آنلاین مثل سرور Microsoft یا Google
.
در ادامه به معرفی 2 روش فوق می پردازیم .
روش اول : در روش اول شما بایستی جدیدترین فایل کتابخانه jQuery
را از سایت www.jQuery.com دانلود
کرده و سپس آن را در پوشه اصلی سایت خود قرار دهید . سپس با استفاده از یک تگ
< Script > که در قسمت < Head >
صفحه قرار می دهید ، فایل کتابخانه را به صفحه متصل کنید . در قسمت زیر این روش
را نشان داده ایم :
|
Syntax
|
< head >
< script type = " text/javascript " src="jquery.js"
> < /script >
< /head >
|
روش دوم : در روش دوم ، شما لینک دسترستی به فایل کتابخانه
jQuery ، که بروی سرور مورد نظرتان است را در یک تگ
< Script > و در قسمت < Head >
صفحه قرار می دهید . در این حالت صفحه در هنگام لود شدن ، به سرور وصل شده
و از کتابخانه آنلاین استفاده می کند . در قسمت زیر هر 2 لینک و طریقه استفاده از آنها
را نمایش داده ایم :
|
Syntax ( سرور مایکروسافت )
|
< head >
< script type = " text/javascript " src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js
" > < /script >
< /head >
|
|
Syntax ( سرور گوگل )
|
< head >
< script type = " text/javascript " src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
" > < /script >
< /head >
|
پس از اتصال کتابخانه jQuery به صفحه خودتان ، هر زمان که یک متد jQuery را فراخوانی
می کنید ، برنامه سورس آن متد را از کتابخانه دریافت کرده و سپس اجرا می نماید . در
مثال بخش بعد به روش کلی کار با توابع jQuery و یک نمونه از کاربرد آن اشاره می نماییم
.
یک مثال از کاربرد jQuery :
jQuery کاربردهای جالب و فراوانی دارد و به طراحان وب توانایی های زیادی را برای خلق
جلوه ها و دینامیک کردن صفحات می دهد . در مثال زیر روش کلی استفاده از ساختار jQuery
را نشان داده و یکی از کاربردهای مهم آن یعنی پنهان کردن عناصر موجود بر روی صفحه را
نمایش می دهیم .
در مثال زیر یک صفحه فرضی با 2 پاراگراف و یک تیتر داریم . می خواهیم تا کاربر بتواند
با کلیک بر روی یک دکمه فرمان پارگراف های موجود در صفحه را پنهان کند . روش کار به
این شرح است :
در ابتدا به وسیله یکی از لینک های معرفی شده ، صفحه خود را به کتابخانه jQuery متصل
کرده ایم . سپس یک دکمه فرمان و یک تیتر و 2 پاراگراف را بروی صفحه ایجاد کرده ایم
. با کلیک کاربر بر روی دکمه فرمان ، متد ( ) Hide که یکی از متدهای jQuery است ، اجرا
شده و باعث می شود تا تمام پاراگراف های ( تگ های < p > ) موجود بر روی
صفحه پنهان شوند . همانطور که در خروجی مشاهده می کنید تابع ایجاد شده فقط بر روی عناصری
که تگ آنها از نوع < p > ( پاراگراف ) است ، اثر می گذارد و مثلا با تگ تیتر
< h2 > کاری ندارد .
برای مشاهده عملکرد مثال ، بر روی دکمه فرمان خروجی کلیک نمایید .
< html >
< head >
< script type="text/javascript" src="jquery.js"
> < /script >
< script type="text/javascript" >
$ (document). ready ( function(
) {
$ ("button") . click ( function(
){
$ ( " p " ) . hide(
);
});
});
</script>
</head>
<body>
<h2> This is a heading</h2>
<p> This is a paragraph . </p>
<p> This is another paragraph. </p>
<button> Click me</button>
</body>
</html>
|
This is a heading
This is a paragraph .
This is another paragraph.
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :