۴
۱۳۸۹
آموزش جی کوئری -جلسه اول
نویسنده : 
سلام . بنده حسن موحد هستم و قرار از امروز آموزش استفاده از جی کوئری رو در والفا بهتون بدم .
وقتتون بیشتر از این نمیگیرم و میریم به آموزش میرسیم .
نکات که در این جلسه خواهیم آموخت :
- مقدمه :
- جی کوئری چیست ؟
- چرا از جی کوئری باید استفاده کنیم ؟
- از کجا کتابخانه جی کوئری دانلود واز آن استفاده کنم ؟
- یک نمونه کد کوچک برای استفاده از جی کوئری .
مقدمه :
زبان جاوا اسکریپت یک زبان برنامه نویسی منطقی است که در طراحی صفحات وب کاربرد فراوان دارد. این زبان در برنامه نویسی سمت کلاینت مورد استفاده قرار می گیرد. مدیریت خصوصیات اشیاء درون صفحه وب و کنترل رویدادهای آنها از جمله قابلیت های این زبان است.
جی کوئری چیست ؟
به زبان ساده جیکوئری یک کتابخانه جاوا اسکریپت است که روال های جاری برنامه نویسی تحت وب را ساده می کند. این ساده سازی از دسترسی به عناصر و اشیاء وب سایت تا کنترل رویدادهای آن ها می باشد.
چرا باید از جی کوئری استفاده کنیم ؟
به دلیل این که جی کوئری برگرفته شده از جاوا اسکریپ و دارای یک سری توابع آماده است . پس سرعت عمل ما را و همچنین امنیت و دقت بالا میبرد .
از جمله مزیت و ویژگی های جیکوئری میتوان به قابلیت اجرا بر روی اکثر مرورگرها و قابلیت دستکاری خصوصیات سی اس اس و قرار دادن افکت و خصوصیا ت بر روی عناصر وب و مهمترین خسیسه آجکس نام برد
از کجا کتابخانه جی کوئری دانلود و استفاده کنم ؟
برای دانلود کتابخانه بر روی لینک دانلود در زیر کلیک نمایید . به خاطر تحریم بودن ایران برای دانلود این فایل ، والفا فایل را دریافت و برای دانلود عموم قرار داد .
لینک دانلود
بعد از دانلود فایل چگونه از ان استفاده کنیم ؟
برای این منظور باید یک صفحه اچ تی ام ال ایجاد و فایل را به شکل زیر در هدر صفحه پیوست کنید .
مانند نمونه :
<head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery.js"></script> </head>
به همین راحتی که دیدید میشه کتابخانه جیکوئری پیوست نمود و از ان استفاده نمود .
خوب بعد از پیوست فایل ما باید یاد بگیریم که چگونه میشه این کتابخانه صدا زد . برای این کار باید ابتدا تگ script در head صفحه html خودمون ایجاد کنیم و بعد از اون شروع به فراخوانی توابع جیکوئری نماییم .
مانند نمونه :
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
</script>
</head>
برای حرکت بعد ، باید نوع صدا زدن توابع جیکوئری را یاد بگیریم .
یک قطعه کد است که همیشه باید استفاده بشه و کارش هم همین که میگوید توابع فراخوانی کن برای استفاده از کد باید در قسمت script در head قرار بگیرد .
مانند نمونه :
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//کدهای شما در اینجا
});
</script>
</head>
خوب کد رو که در بین تگ اسکریپت قرار گرفته میبینید .
شما میتوانید این کد را به صورت زیر نیز استفاده نمایید .
مانند نمونه :
$(function() { wallfa });
در قسمت که نوشته wallfa میتونید کدهای خودتون بنویسید .
این کد با کد قبلی فرقی نمیکند فقط کوتاه شده اون کد .
تا این لحظه شما دیگه میتونید خود کتابخانه فراخوانی کنید و اون پیوست کنید برای ادامه مثال خواهیم زد که چگونه میشود از این کتابخانه استفاده نمود .
آموزش ساخت متن محو شونده :
برای شروع کار کد تکمیل میگذارم بعد یک به یک قسمت هاش براتون تشریح میکنم :
مانند نمونه :
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
کد اول :
این کد را بالا هم توضی دادم دیگه باید بشناسیدش خوب کار خواندن توابع (هر کدی که به جای wallfa نوشته شده باشه میخونه )
ماننند نمونه :
$(document).ready(function(){wallfa});
کد دوم
این قسمت میگه زمانی که روی p کلیک شد کد هایی که در قسمت wallfa خواسته شده فراخوانی کن
مانند نمونه :
$("p").click(function(){ wallfa });
کد سوم
این کد میگوید که بر روی چه شیئی چه تابعی در چه بازه زمانی اجرا شود .
مانند نمونه :
$(this).hide();
این کد نیاز به مقداری تشریح دارد بنده یک کد دیگه با همین تابع ایجاد میکنم تا بهتر منظور متوجه بشید .
مانند نمونه :
$('#a').hide(100);
خوب در بالا این کد میبینید a# خوب این نشان گر آن است که توابع hide با بازه زمانی ۱۰۰ بر روی id=a (آی دی a شیوه نامه سی اس اس ) اجرا کن .
این جلسه چه نکاتی آموختیم :
- کد جاوا اسکریپت با علامت $ شروع میشوند .
- هر پرانتز با برکت که باز میشود باید در آخر بسته شود .
- کد های جی کوئری و جاوا اسکریپت با ; بسته میشوند .
- ما باید کدهایی که برای جی کوئری یا جاوا اسکریپت نوشته میشود درون تگ script در head صفحات اچ تی ام ال قرار دهیم .
امیدورام که این جلسه بهتون خوش گذشته باشه و در کوتاه ترین مدت تونسته باشم شما با این کدها آشنا کنم ..
موفق پیروز باشید آذر ۱۳۸۹ حسن موحد .
پست های مربط
نمایش ارسال های گوگل پلاس- نمایش نوار مدیریت برای مدیران
- قالب بسیار زیبای وب بیست !
- آموزش ساخت فرم ثبت نام
درباره نویسنده : حسن موحد
من حسن موحد . از بچگی به چیز های غیر عادی عادت داشتم و همیشه دوست داشتم یه کاری بکنم که کسی به فکر نرسید . و حالا که بزرگ شدم دوست دارم همین نظریم ادامه بدم .
۴ نظر + Add Comment
دیدگاهتان را بنویسید
- @rozita_tt @Sormeta بی کاره بنده خدا
- @rozita_tt :) aslan hala ke intor shod bayad emkan video ezafeh koneh
- @rozita_tt اسکایپ نباشه ، اما تویت صدای پرنده مگه نیست ! انسان هم صدا داره معنی نداره این همه نوشته بی روح فقط بنویسی !
- @rozita_tt چرا ای بابا ؟!
- امکان تویت صوتی هم وجود داشت خیلی خوب می شد ! یعنی بشه با صوت خودت ضبط برای دیگران فرستاد ! @twitter
- حداقل به معنای واقعی تویتر می شد
Loading ...امار بازدید کنندگان !
خبر نامه !
با وارد کردن ایمیل خود در لیست زیر و انجام مراحل تایید آن در ایمیل خود از خبر ها و پست های جدید ما سریع تر با خبر شوید !تبلیغات
حامیان
سلام لطفا اموزسش جی کوئری را ادامه بدهید
دوست دارم ولی وقت نمیکنم
دستتون درد نکنه ولی مشکلش اینه سطح بالا آموزش میدین که منه مبتدی جیز زیادی نمیتونم ازش بفهمم.
به حق چیزای نشنیده مگه کتاب خونم جون داره که میشه صداش زد :دی