تبلیغات
6 تایی - مقدمه معرفی jQuery

امروز:

مقدمه معرفی jQuery

مقدمه معرفی jQuery

آموزش jquery

آموزش jquery

jQuery چیست ؟

jQuery یک کتابخانه استاندارد آماده حاوی تعدادی متد و توابع نوشته شده به زبان JavaScript است . از توابع متدهای این کتابخانه برای کار با عناصر و تگ های موجود در صفحات HTML , ASP.Net یا PHP استفاده می شود . به طور کلی با مصرف از این متدهای از پیش تعریف شده می توانید تغییراتی را در عناصر تگ های HTML ایجاد کرده یا روش نمایش آنها را تغییر دهید . جهت مثال می توانید عنصر HTML را با کلیک بر روی یک دکمه فرمان پنهان کرده یا در صورت مخفی بودن آن را نمایش دهید .
زبان jQuery دارای شعار زیاد دیده شده است . این شعار می گوید کمتر بنویسید بیشتر انجام دهید ( write less , do more ) . به طور کلی کتابخانه jQuery حاوی موارد زیر است :
در مصرف از jQuery شما نیاز ندارید برای انجام کارهای مورد نظرتان تابع نو بنویسید . تنها کافی است عنصر مورد نظر خود را انتخاب کرده پس متد مورد نظر را فراخوانی کرده تا آن عنصر را تغییر دهد .
قبل از مطالعه و استفاده از بخش jQuery ، شما می بایست با مطالب زیر آشنایی کامل داشته باشید :

HTML
CSS
JavaScript
نحوه مصرف از کتابخانه 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 > کاری ندارد .
جهت مشاهده عملکرد مثال بر روی دکمه فرمان خروجی کلیک نمایید .





This is a heading




This is a paragraph .




This is another paragraph.


Click me



Example
< html >
< head >
< script type="text/javascript" src="jquery.js" > < /script >
< script type="text/javascript" >
$ (document). ready ( function( )
$ ("button") . click ( function( )
$ ( " p " ) . hide( );
);
);

کد
This is a heading

This is a paragraph .

This is another paragraph.


نوشته شده در : یکشنبه 3 مرداد 1395  توسط : مطالب علمی 2015.    نظرات() .

 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر