گروه برنامه نویسی سافت ایران | مقدمه ای بر جی کوئری

مقدمه ای بر جی کوئری – قسمت اول

مقدمه ای بر جی کوئری و نحوه کار کردن با آن – قسمت اول در این مقاله سعی در دارم با زبان ساده نحوه استفاده کردن جی کوئری را برای افرادی که هنوز تجربه استفاده از این کتابخانه را نداشته اند شرح دهم .
جی کوئری چیست ؟
jQuery یک کتابخانه ساخته شده از زبان جاوا اسکریپت می باشد که با آن میتوانید خیلی سریع تغییراتی روی کد های HTML ، رویداد های مختلف ( مانند فشرده شدن یک کلید در سایت ) اعمال کنید . این کتابخانه هدفش راحتی در استفاده و سرعت در کدنویسی و بهینه بودن کد های مدیریت نشده جاوا اسکریپت می باشد.
طریقه اضافه کردن کتابخانه به صفحه HTML:
برای اضافه کردن کتابخانه جی کوئری شما میتوانید این فایل را دانلود کنید و روی هاست خود قرار داده و مثل زیر استفاده کنید :
لینک دانلود :

http://code.jquery.com/jquery-migrate-1.2.1.min.js

در ضمن می توانید از فایل موجود در سایت اصلی جی کوئری هم استفاده کنید مثل زیر

فرمت کد نویسی :

کد های جاوا اسکریپت باید در بین این تگ نوشته شود

Code

</script>

نگاه مختصر :

در ادامه نگاهی مختصر و سریع به کارهایی که با جی کوئری می توان انجام داد می کنیم .

الف – دستکاری و پیمایش اچ تی ام ال HTML

اگر با پارسر های DOM کار کرده باشید هر المنت HTML را به وسلیه پارامترهای مختلف می توان انتخاب کرد . مثلا یک برای انتخاب یک باتن با دانستن آی دی آن باتن می توان آنرا انتخاب کرد . در جی کوئری هم همین قانون وجود دارد مثلا برای انتخاب Div زیر :

فقط کافی است که این کد را در تگ های جاوا اسکریپت تایپ کنیم :

$('#header');

و برای div زیر کد بعد را :

$('.header');

خوب متوجه شدید که قانون دات و شارپ که در فایهای CSS وجود دارد در جی کوئری هم می باشد.
راه های دیگری برای انتخاب المنت وجود دارد مثلا با صدا کردن نوع المنت مثلا برای لینک زیر

به شرطی که لینک دیگری در صفحه نباشد می توانید از کد زیر استفاده کنید:

$('a')

ولی اگر لینک های دیگری در صفحه باشد این کد نمیتواند بفهمد که منظور شما به کدام لینک بوده است و به همین دلیل کار نمیکند که باید به شکل زیر استفاده شود.

$('a.link')

یعنی لینکی که کلاس آن link می باشد .
در کل برای انتخاب یک المنت باید ویژگی های منحصر به فرد آن المنت را پیدا کنید ولی برای یک مجموعه نیاز به ویژگی های منحصر به فرد اعضا مجموعه ندارید بلکه ویژگی منحصر به فرد مجموعه را کافی است .
به عنوان مثلا همان لینک قبلی مشابه آن 100 لینک دیگر وجود داشت و شما قصد دارید با کلیک روی هر لینک یک اتفاقل رخ دهد با انتخاب ویژگی منحصربه فرد مجموعه ( که در مثلا بالا همان کلاس است ) تمامی لینک ها را یکجا انتخاب می کنید.

ب- رویدادها

رویداد چیست ؟ رویداد به عملی که پس از انجام یک کلیک ، حرکت موس ، فشردن کلید صفحه کلید و ... در سایت انجام می شود.
تقریبا هر نوع رویدادی را با جی کوئری jQuert می شود برنامه ریزی کرد.
فرم کلی دستور جی کوئری را باید شناخته باشید ، دستورات با سلکت و انتخاب یک المنت ( یک مجموعه ) شروع می شود و بسته به نیاز از توابع دیگر استفاده میشود .
به عنوان مثال می خواهید با کلیک روی لینک ما یک پیغام به یوزر داده شود .

$('a.link').click(function() { alert('salam'); } );

همانطور که مشاهده کردید بعد از مشاهد المنت که اینجا مجموعه لینک با کلاس link می باشد و رویداد کلیک تابع داخل رویداد اجرا میشود که در داخل تابع ، تابع Alert وجود دارد.

ج – تکنولوژی Ajax

ای جکس چیست ؟ یک تکنولوژی می باشد که با کمک آن می توان بدون لود شدن کل صفحه ریکوئیستی به سرور فرستاد .حال بسته به نوع برنامه نویسی سرور می توان جواب مناسب را با استاندارد جی سون Json و یا تکس ساده clear text فرستاد و از آن در صفحه سمت کاربر استفاده کرد.
در جی کوئری به سادگی می توان از این تکنولوژی استفاده کرد .

مانند مثال زیر

$.ajax({

url: "/controller.php",

data: {

zipcode: 97201

success: function( data ) {

$('#res').html(data);

}

});

که زیپ کد 97201 به کنترلر فرستاده شده و نتیجه در المنت res نمایش داده شده است.
این قسمت فقط قصد معرفی و آشنا سازی را داشتم که امیدوارم به این هدف رسیده باشم در قسمت های بعدی شروع برنامه نویسی با جی کوئری را داریم .
منتظر سوالات و نظرات شما هستم.

برگشت

	: نـام
نمایش داده نخواهد شـد	: ایـمیـل
	: وب سـایـت
	: کد امنیتی
	: نـظــر