آموزش کامل JQuery به زبان فارسی + بحث و تبادل نظر و سوالات مربوط ×××

Printable View

نمايش 40 تاپيکها در يک صفحه

08-09-2010, 19:03
Bill Gates

آموزش کامل JQuery به زبان فارسی + بحث و تبادل نظر و سوالات مربوط ×××

[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

سلام

به طور اختصاصی امروز حسّ اینکار اومد تا براتون آموزش Jquery قرار بدم به صورت کاملا فارسی ! :)

#1

Jquery یک کتابخانه مربوط به JS هستش که کاربردش امروزه بیش از حدّ تصور رفته . شکل کلی استفاده در صفحات HTML به صورت زیر هستش :

[HTML]
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
// Jquery Script .: MarDak.WordpRess.com :.
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
[/HTML]

در این کد که به صورت آزمایش هستش ما دو قسمت از تگ Script استفاده کردیم در ابتدا کتابخانه Jquery را در صفحه به اجرا در آوردیم و در قسمت دوم که فضای خالی هم قرار داده شده ما از کد های مربوط به کتابخانه Jquery استفاده میکنیم . بقیه کدها هم که باهاش مطمئنا آشنایی لازم رو دارید و نیازی به توضیح نیست .

برای دانلود کتابخانه به سایت زیر مراجعه کنید :

کد:

http://docs.jquery.com/Downloading_jQuery

#2
در قسمت بعدی میخوام شما رو با چند نمونه از کتابخانه Jquery آشنا کنم به کد زیر توجه کنید :

[HTML]window.onload = function(){ alert("welcome"); }[/HTML]

این کدی میباشد که برنامه نویسان جاوا اسکریپت آنرا در برنامه های خود بکار میبرند (منظور سبک نوشتار هستش) . این کد مربوط به Option صفحه ای که اجرا یا درحال اجرا است میباشد یعنی " window " پس این کد مربوط به کار با صفحه میباشد .
کدی که در بالا قرار دادم میاد زمانی که صفحه کاملا بالا اومده (دانلود شده) یک پیغام " Welcome " به صورت alert به ما نشون میده . که با کمی فکر خلاق با همین کد ساده میشه خیلی کارها در آینده انجام داد . مثل نمایش بنر های تبلیغاتی . شما میدانید که بنر های تبلیغاتی در بعضی سایت ها جلو لود شدن محتوا را میگیرند و زمان بسیاری را صرف میکنند شما با اینکار میتونید کاری کنید که وقتی محتوای سایت کامل دانلود شد بنر های تبلیغاتی را نشان دهید
معمولا برای انجام یک عملیات ما کدهامون رو بین function() {} قرار میدم که بعدا توضیح مربوط به این را هم میدهم .

پایان قسمت اول :40:

نوسینده : امیر سلیمانی

تا کامل شدن آموزش تاپیک قفل ...
08-09-2010, 21:24
Bill Gates

قسمت دوم :

#1
الان میخوایم آموزش قبلی که درباره محتوای صفحه نوشتیم رو کاملتر کنیم و با کدهای بیشتری آشنا بشیم . وقت های زیادی شده که بخوایم وقتی روی یکی از تگ ها مورد نظر ما کلیک میکنیم یا دابل کلیک یا ... بخوایم رویداد خاصی انجام بگیره خیلی وقت ها از تگ a استفاده میکردم و خیلی وقت ها هم از روش های دیگه استفاده میکردیم . اما کتابخانه Jquery یک امکان جالب را در اختیار ما میزاره تا با محتوای صفحه ( تگ ها و ... (سورس)) بتونیم بهتر کار و مدیریت کنیم به عنوان مثال :

[HTML] $(document).ready(function(){
// Your code here
});
[/HTML]در کد بالا در قسمتی که نوشته شده ما باید کد هایی که میخوایم رو قرار بدیم که یک مثال ساده در پایین براتون قرار میدم :

[HTML]
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
[/HTML]در اینجا ما اومدیم براش تعریف کردیم که برای تگ " a " در هرجای صفحه که مربوط به لینکدهی هم هست کلیک شد ( .click ( این بیاد یک Alert به ما نشون بده . مثال کامل :

[HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
});
});

</script>
</head>
<body>
<a href="http://mardak.wordpress.com/">jQuery</a>
</body>
</html>[/HTML]
ما در این مثال کتابخانه را باز کردیم آموزشی که اکنون دادیم رو استفاده کردیم . و وقتی روی jQuery کلیک میکنیم یک پیغام حاوی " As you can see , ... " به ما نشان داده میشود و پس از زدن OK ما به صفحه لینک شده وارد میشویم .
تعریف های دیگری نیز به جای تگ "a" میتوان انجام داد که در آینده آموزش میدهیم . طبق گفته های آموزش قبلی نیز کارهای که میخوایم انجام بدیم در function() {} قرار میگیرد . و قبل از آن یک بررسی رویداد میباشد
.onclick یا ... که به اونها Event میگوییم میتونید در لینک زیر با اونها آشنا بشین :

کد:

http://api.jquery.com/category/events

البته در آموزش های بعدی تمامی این مطالب که در صفحه بالا است فارسی آموزش داده میشود .
پس در این آموزش یاد گرفتیم که چطور میتونیم برای تگ ها یا ... دستوراتی تعریف کنیم . مثلا وقتی که میخوایم بگیم تمامی لینک ها در یک صفحه ی کوچک توی صفحه ما ( حالت lightbox ( باز شود و خیلی کارهای دیگه که بستگی به سلیقه و تفکر خودتون داره .

پایان قسمت دوم
نویسنده : امیر سلیمانی [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
08-09-2010, 22:14
Bill Gates

سلام
قسمت سوم :

#1
ما الان قصد داریم تا CSS را با کتابخانه Jquery ترکیب کنیم و این دو را به هم دیگر پیوند بزنیم . برای اینکار میخوام از یک مثال ساده شروع کنم تا هدف مارو کاملا درک کنید .
برای شروع اول ما در قسمت Head استایل زیر را تعریف میکنیم :
[HTML] <style type="text/css">
a.test { font-weight: bold; }
</style>[/HTML]در اینجا بر روی تگ " a " یک کلاس استایل به نام test ساختیم و فونت آن را Bold کردیم کد بالا نیز در تگ Head در HTML قرار میگیرد .
در مرحله بعدی ما میام به وسیله کد زیر :
[HTML]$("a").addClass("test");[/HTML]استایل test رو به تمامی تگ های "a" انتقال میدیم و الان که تست کنیم میبینیم که هرجا از این تگ استفاده شده باشه به حالتی که در استایل تعریف کردیم ( در اینجا bold شدن فونت ) در می آید .
برای افزودن و ترکیب چندین کلاس تعریف شده در استایل نیز تنها کافیست به شکل زیر عمل کنیم :
[HTML]$("a").addClass("test test2 test3 test4");[/HTML]فکر کنم متوجه شده باشید که چطور عمل میکنه ! . با اینکار ما یک صرفه جویی در حجم و محتوای صفحه انجام دادیم دیگه لازم نیست تا برای تمامی تگ ها کلاس استایل تعریف کنیم و تنها با این کد ساده میتونیم یک صرفه جویی مناسب در کدنویسی خودمون انجام بدیم .
یک سری تنظیمات دیگری هم برای این کد ما وجود دارد مثال :
[HTML]<script> $("p:first").addClass("selected"); </script>[/HTML]در اینجا مشاهده میکنید که جلوی P یک first نوشتم . خب منظور اینجا در این میباشد که اولین تگ P یا هر تگی که تعریف کردم رو فقط بهش استایلی که وارد کردم قرار داده بشه . حال میتوان جای first از کلماتی مانند :
last : اولین تگ تعریف شده قبل از کد جاوا اسکریپتی که اجرا شده .
first : اولین تگ تعریف شده در کد ما
end و ... دیگر کلماتی که خودتان باید فهمیده باشین چه چیز هایی میتونند باشند .
یک مثال کامل از این آموزش :
[HTML]<!DOCTYPE html>
<html>
<head>
<style>

p { margin: 8px; font-size:16px; }
.selected { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>$("p:last").addClass("selected");</script>

</body>
</html>[/HTML]برای استفاده از چند استایل :
[HTML]<!DOCTYPE html>
<html>
<head>
<style>

p { margin: 8px; font-size:16px; }
.selected { color:red; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>$("p:last").addClass("selected highlight");</script>

</body>
</html>
[/HTML]پایان قسمت سوم
نویسنده : امیر سلیمانی :40:
08-09-2010, 22:57
Bill Gates

سلام
* یک نکته ای بود که میخواستم بهتون بگم که دچار اشتباه نشید برای تست مثال ها نیازی به Apache یا ... ندارید و به طوری ساده میتونید در یک فایل .html آنرا آزمایش کنید .

قسمت چهارم

#1

ممکن هستش تا الان شما فقط در رابطه با افکت های خاصی که در این کتابخانه وجود داره شنیده باشید و چیز هایی که در آموزش های قبلی یاد دادم براتون کاملا آشنا نبوده و قدرت کامل این کتابخانه رو به شما نرسونده . الان میخوام براتون یک سری از افکتهایی که در Jquery وجود داره رو آموزش بدم .
[HTML] $("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});[/HTML]خب به خط اول این کد که آشنایی دارید در خط دوم یک event اضافه شده که در آموزش بخش دوم به شما گفتم و لینکی برای لیست event ها دادم . این میاد کاری که قرار انجام بشه رو خنثی میکنه یعنی لینک خنثی میشه و عملیاتی که میخوایم انجام میگیره
در خط بعد که کد :
[HTML]$(this).hide("slow");[/HTML]استفاده شده hide یک افکت در این کتابخانه میباشد و $(this) منظور این میباشد که این رویداد برروی شیء که تعریف کردیم انجام بگیرد نه جای دیگه . Slow هم سرعت hide شدن شیء مربوطه میباشد .
کد اصلی به طور کل افکت Hide رو به طور Slow به تگ های " a " قرار میده و جلوه زیبایی در صورت کاربر مناسب به سایت میبخشد .

مثال کامل :

[HTML]<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
<script>

$("p").hide();
$("a").click(function () {
$(this).hide();
return true;
});
</script>

</body>
</html>[/HTML]افکت ها به طور کلی به این صورت نوشته میشوند :
[HTML]$('.target').effectname();[/HTML]-----
میخوام در وسط این آموزش در رابطه با Tag های که در بین آموزش ها میگم بنویسم . همیشه ممکن هستش تگ نباشه و به وسیله ID بخوایم شناسایی کنیم مثلا :
[HTML]<div id="mardak"> Salam! </div>
<script>
$('#mardak').hide('slow', function() {
alert('Halllooooo');
});
</script>[/HTML]در اینجا ما فهمیدیم که برای ارتباط به وسیله ID در قسمت target میتونیم به این صورت عمل کنیم : #target و تنها یک # قبل از نام آن اضافه میکنیم . مانند قبل بعد از مشخص کردن تنظیمات اصلی با اضافه کردن یک " , " و استفاده از function() {} کاری که پس از پایان کار مد نظر ما بود را قرار میدهیم
-----
برای مشاهده و توضیحات انواع افکت ها به صفحه زیر مراجعه کنید :

کد:

http://api.jquery.com/category/effects

+ همراه مثال برای استفاده کنندگاه Jquery

پایان قسمت چهارم
نویسنده : امیر سلیمانی :40:
08-09-2010, 22:58
Ultimator

دوستان لطفا تا تکمیل شدن آموزش ها از ارسال پست خود داری کنید

سپاس
24-09-2010, 03:26
Bill Gates

سلام

تاپیک برای پرسش و پاسخ و بحث و بررسی کتابخانه JQuery باز شده است .

تشکر// :40:
10-10-2010, 11:07
aref_nk2010

این jquery به چه دردی می خوره ! کجا بکار می برند ؟! :13:
10-10-2010, 18:13
Bill Gates

سلام

کد:

http://forum.p30world.com/showthread.php?t=445957
07-02-2011, 12:33
DaRiOuShJh

نقل قول:

آخرین پست این تاپیک مربوط به 120 روز قبل است و جزو تاپیک های قدیمی انجمن محسوب میشود!

ای ماشالله:31:
حیفه این تاپیکه بخوابه

من تو فکره کلا یه سایت فارسی برای جاوااسکریپت و مخصوصا این library ها بودم ولی دیدم خودم تکی نمیرسم هر کاری کنم
دست تنها نمیشه از این حرکت ها زد
20-08-2013, 22:10
Phoenix_17

سلام خدمت همه.
من می خواستم این قسمت رو دوباره راه بندازم و آموزش jQuery رو از اول برای دوستان بزارم.
البته قرار نیست مطالب رو از خودم بنویسم و از سایت w3schools.com براتون ترجمه می کنم.
فقط من تو این سایت، تازه شروع به کار کردم و نمی دونم باید تو این تاپیک بزارمشون یا یه تاپیک جدید درست کنم.
اگه تو این تاپیک بزارم، قفل کردن تاپیک چی میشه؟

نمايش 40 تاپيکها در يک صفحه