تبلیغات
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.    نظرات() .

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