آموزش وردپرس
خانه / طراحی سایت / تکنولوژی های طراحی وب : قسمت چهارم – جی کوئری (Jquery)

تکنولوژی های طراحی وب : قسمت چهارم – جی کوئری (Jquery)

جی کوئری - jquery
جی کوئری – Jquery

جی کوئری یک کتابخانه از جاوااسکریپت ( یا به عبارتی یک فریم ورک برای نوشتن جاوااسکریپت ) است ، که برای سهولت در استفاده از جاوااسکریپت از این کتابخانه استفاده می کنیم ، با استفاده از این کتابخانه می توانید برای زیباسازی سایت خود ،افکت های بسیار زیبایی در وب اعمال نمایید . امروزه افکت های جی کوئری جایگزین مناسبی برای فلش در دنیای وب شده است به گونه ای که اندک اندک فلش در وب سایت ها حذف گردید . توابع و کدهای جی کوئری را می توان با جاوا اسکریپت هم نوشت اما اگر به شعار ” Write less, Do more ” , ”  نوشته ی کمتر ، کارایی بیشتر ”  دقت کنید کاملا متوجه می شوید که برای سهولت در کدنویسی و بهینه سازی کدها ، این فریم ورک و کتابخانه به عرصه ی کدنویسی وارد شده است.

شما می توانید جی کوئری را به صورت یک لایه انتزاعی توصیف کنید زیرا قابلیت های بسیاری را که می باید در خطوط بیشماری از کد جاوا اسکریپت می نوشتید گرفته و آنها را در توابعی (functions) که می توانید تنها در یک خط کد فراخوانی کنید پنهان می کنند.

جی کوئری جایگزینی برای جاوا اسکریپت نیست و با این که برخی میانبرهای نحوی نوشتاری را در اختیارتان می گذارد اما کدی که هنگام استفاده از جی کوئری خواهید نوشت هنوز هم جاوا اسکریپت می باشد.

آموزش جی کوئری تلاش می کند تا بسیاری از دستورات پیچیده  جاوا اسکریپت نظیر فراخوانی های  ای جکس (AJAX) و عملیاتهای DOM را ساده تر کند تا بتوانید این اعمال را بدون این که دانش زیادی درباره جاوا اسکریپت داشته باشید به اجرا بگذارید. شما می توانید  تقریباً برای انجام هر کاری یک پلاگین جی کوئری را پیدا نمائید.

 کاربرد ها و ویژگی های جی کوئری :

یکی از کاربرد های مهم jquery داشتن دستورات بسیار ساده و قابل درک در زمینه بکار گیری تکنولوژِی ای جکس می باشد. به طوری که  می توانید یک طراحی سایت را با کمک jquery به صورت فول ای جکس طراحی کنید.

– ایجاد امکان دسترسی به بخشهایی از یک صفحه بدون نیاز به ابزارهای جاوا اسکریپت و عدم نیاز به کد نویسی های زیاد.
– جی کوئری مکانیسم سریع و موثری برای جستجو ، یافتن و انتخاب بخشهای مورد نظر از یک صفحه را بدون نیاز به ابزار جاوا اسکریپت، در اختیار ما قرار میدهد.
– امکان تغییر ظاهر یک صفحه؛ البته  آموزش CSS ابزار قدرتمندی در تغییر صفحات بما میدهد اما قادر به انجام اینکار در مرورگرهای مختلف که استانداردهای متفاوتی دارند، نیست. اما جی کوئری براحتی میتواند هر نوع مرورگری را ساپورت کند و حتی قادر است که مختصات ویژه صفحات وب را، حتی بعد از دستکاری و تغییر ساختاری و ظاهر، دوباره تغییر دهد.
– جی کوئری نه تنها تغییرات ظاهری و ناچیز را، بلکه صرفا با چند کلیک ساده، می‌تواند محتوای صفحات مورد نظر کاربر را هم تغییر کلی بدهد و مثلا متن یا عکسی را تغییر داده و یا تصویر یا لیستی را درون متنهای آن صفحه اضافه و یا از آن حذف کند. حتی میتواند تمام ساختار HTML صفحات را کاملا تغییر دهد.
– یکی از امکانات کتابخانه جی کوئری کنترل و جلوگیری از اتفاقات غیرمنتظره ایست که بهنگام کلیک کردن یک کاربر بر یک لینک رخ میدهند و مثلا باعث کند شدن یا درهمریختگی مرورگرها میشوند. ابزار event-handler در جی کوئری این وظیفه را بسادگی و بدون نیاز به استفاده از جاوا اسکریپت انجام میدهد.
– افزودن انیمیشن (Fade) به یک صفحه؛ کسب فیدبک از (یا به) کاربران، امری بسیار مهم است و جی کوئری این ویژگی را بسادگی با استفاده از امکاناتی همچون Fade و غیره بما میدهد.
– کسب اطلاعات از یک سرور بدون نیاز به ریفرش کردن آن صفحه (که اصطلاحا به آن AJAX می‌گویند) جی کوئری اینکار را بدون نیاز به دانستن مختصات ویژه هر سرور و صرفا با مراجعه مستقیم به نتایج آن صفحه (محتویات سرور) انجام میدهد.
– ساده سازی عملکردهای مشترک / تکراری جاوا اسکریپت : جی کوئری علاوه بر انجام بسیار ساده تغییرات کلی در متن و ظاهر صفحات وب، حتی قادر به ساده تر کردن عملیات ساختار سازی همچون Iteration And Array Manipulation هم هست.

انواع جی کوئری

با توجه به نیاز خود ، میتوان از جی کوئری های مختلف استفاده کرد . در حال حاضر از سه نوع کتابخانه جی کوئری استفاده می کنیم :

۱-کتابخانه Jquery که عموم از این کتابخانه استفاده می کنند . این کتابخانه را می توانید از سایت www.jquery.com دانلود کنید و در سایت خود استفاده کنید .

۲-کتابخانه jquery-ui که برخی افراد از آن استفاده می کنند . این کتابخانه را می توانید از سایت http://jqueryui.com  دانلود کنید و در سایت خود استفاده کنید .

۳-کتابخانه  jquery mobile که برای موبایل و انواع smartphone استفاده می شود . این فریم ورک و کتابخانه را می توانید از http://jquerymobile.com دریافت نمایید .

کتابخانه Jquery :

حتما تا به حال این مورد برای شما پیش آمده است که بخواهید یک پیغام بصورت Alert روی سایتتان نمایش دهید و یا بخواهید از اسلایدر های تصویری و متنی و یا پلاگین های مختلف دیگر استفاده نمایید .  برای این موارد می توانید با استفاده از کتابخانه Jquery و یک سری توابع جی کوئری که از این کتابخانه فراخوانی می شوند به راحتی پلاگین های مختلف جی کوئری را در سایت خود بکار ببرید . حتی می توانید افکت های مختلفی را در سایت خود لحاظ کنید .

نکته : کتابخانه جی کوئری نسخه های مختلف دارد که هر پلاگین ممکن است تنها با ورژن خاصی از کتابخانه همخوانی داشته باشد . در ورژن های جدید کتابخانه توابع جدید اضافه می شود و ممکن است پلاگینی که با ورژن پایین کتابخانه نوشته شده است با ورژن جدید دچار تداخل شود و یا برعکس ممکن است پلاگینی که با توجه به ورژن جدید کتابخانه نوشته شده است با ورژن های پایین تر هم خوانی نداشته باشد و به اصطلاح کار نکند و یا حتی ممکن است یک پلاگین با چندین ورژن هماهنگی داشته باشد و به درستی عمل کند . پس هنگام استفاده از پلاگین های مختلف به ورژن کتابخانه آن نیز دقت کنید .

 کتابخانه Jquery-ui :

این کتابخانه برگرفته از همان کتابخانه Jquery است ، با این تفاوت که در این کتابخانه توابع خاص تعریف شده است که به کمک آن شما به راحتی می توانید افکت هایی مانند  Draggable , Droppable , Resizable , Selectable , Sortable و … را در سایت خود پیاده سازی کنید . فقط کافیست این کتابخانه را فراخوانی کنید. برای آشنایی با Jquery UI و توابع آن می توانید به سایت http://jqueryui.com رجوع کرده و با استفاده از توابع و پلاگین های موجود بهترین افکت ها را در سایت خود پیاده سازی کنید .

کتابخانه  jquery mobile:

از این فریم ورک برای طراحی سایت و application های  موبایل  , smartphone  و Tablet استفاده می شود . این فریم ورک این امکان را برای شما فراهم آورده است که با استفاده از یکسری ویجت طراحی رابط کاربری و ایجکس صفحاتی را ایجاد کنید که animation ها و  transition ها را پشتیبانی می کنند .

بنمایه : http://www.iranweblearn.com

درباره ی seonim

همچنین ببینید

mvc

تکنولوژی های طراحی وب : قسمت هشتم – معماری MVC

             MVC مخفف سه کلمه Model (مدل ) و View(نمایشگر) و controller( کنترلگر) است. …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *