دوره آموزش جی کئوری در حداقل زمان ...

دوره آموزش جی کئوری در حداقل زمان ...بازديد : 371

با سلام امروز تصمیم گرفتم زبان کدنویسی جی کئوری را در حد کامل به شما کاربران آموزش بدم این آموزش ابتدا در سایت شریکم(نسخه گرافیک)

قرار داده شد و تصمیم گرفتیم که در اینجا هم قرار دهیم در این تایپیک سعی میکنم در این تایپیک حدودا 80 الی 90 درصد کل جی کئوری رو آموزش بدم و

اگه لازم شد با استفاده از چند زبان مینویسم کدها رو که کم کم راه بیوفتیم

خوب آموزش شروع شد

امضاي کاربر :

نسخه گرافیک آپدیت شد

تشکر شده:

2 کاربر از manotoweb به خاطر اين مطلب مفيد تشکر کرده اند: whatyouknow / zero /

پاسخ : 1 RE دوره آموزش جی کئوری در حداقل زمان ...

پيام خصوصي نقل قول تشکر کنيد

بخش اول : جی کئوری برای چیست

آموزشات اولیه

............

خب بسم الله

جی کئوری شباهت زیادی با css3 داره که وقتی css3 اومد از جی کئوری کمتر در زمینه افکتهاش استفاده شد

ولی کارا و امکانات jquery به مراتب بیشتر از css هست

و یک زبان ساده برای ساخت برنامه های سادست

............

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

حتما باید کد جی کئوری رو قرار بدیم در وب

در واقع کتاب خانه جی کئروی هستش

که بصورت زیر هست

کد:

<script 
src="https://rozup.ir/up/sourcegraph/jquery-1.9.1.js"></script><script

src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">

در سی اس اس اگر بیاد داشته باشید استایلهای رو بین دو تگ

کد:
<style></style>

میذاشتیم

برای جی کئوری از تگهای

کد:
<script></script>

استفاده میشه

-- اگر یاد داشته باشید در سی اس اس میشد در یک صفحه جداگانه سیو کرد استایلها رو و سپس فراخوانی کرد

در جی کئوری هم همچین امکانی هست

با کد زیر

کد:
<script src="لینک صفحه آپلود شده"></script>

ابتدا و انتهای یه کد جی کئوری هم به شکل زیر هست

کد:

<script>
$(document).ready(function() {
	دستورات
});

</script>

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

1- بدون استایل و سریع

2- اسلاید مانند

3- بصورت محو شونده

ابتدا کد های مشترک بین هر سه اونها رو مینویسیم

قسمت html

کد:

<div class="tabs">
<span id="tab_one">تب شماره 1</span>
<span id="tab_two">تب شماره 2</span>
<div class="text">
<div id="text_one">تب 1</div>
<div id="text_two">تب 2</div>

</div>

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

کد سی اس اس ( من تمرکزم روی آموزش سی اس اس نیست پس یه استایل خیلی ساده بهش میدم)

کد:

<style>
.tabs{ border:1px solid #999; width:450px;}
#tab_one,#tab_two{ background-color:#CCC; color:#000; margin-right:10px;}
.text{ background-color:#CCC;}

</style>

و اما هسته کد ما و مقصود این آموزش

کد جی کئوری

این کدها زیر رو بین دو تگ

کد:
<script></script>

قرار میدیم

کد اول : این کد باعث میشه محتوای قسمت اول نادیده و قسمت دوم نمایش داده بشه

کد:

$(document).ready(function() {
	$("#text_one").hide();
	$("#text_one").show();

});

کد 2 : کد زیر باعث میشه تبها به وظیفشون عمل کنن

روی هر تب که کلیک میکنیم قسمت مورد نظر باز و قسمت دیگر بسته میشود

کد:

$(document).ready(function() {
	$("#tab_one").click(function(){
		$("#text_one").show();
		$("#text_two").hide();
	});

});

نکته : کدها رو بترتیب بذارین در قسمت مورد نظر تا همگی اجرا بشن

قسمت دوم : کد با افکت اسلاید

قسمت جی کئوری

کد:

$(document).ready(function() {
	$("#tab_two").click(function(){
		$("#text_two").slideDown();
		$("#text_one").slideUp();
	});
});
$(document).ready(function() {
	$("#tab_one").click(function(){
		$("#text_one").slideDown();
		$("#text_two").slideUp();
	});
});

تمام کدهای سی اس اس و اچ تی ام ال مثل اول هست فقط قسمت جی کئوری فرق میکنه

که دو کد جی کئوری که برای تبها هستند بصورت بالاست

این کد هم قبل کد بالا قرار میدیم

بدلیل کد 1 قسمت قبل

کد:

$(document).ready(function() {
	$("#text_one").hide();
	$("#text_two").show();

});

خب اگه میخواین زمان بدین به استایل فقط کافیه کد جی کئوری رو به صورت زیر بنویسید

کد:
$("#text_two").slideUp(1000);

کد اون عدد 1000 قابل تعویض به دو عبارت

"fast"

و

"slow"

هست

که معنیشون از کلمه انگلیسی معلومه و حتما باید دو طرفشون " باشه و داخل پرانتز بجای عبارت 1000 باشه

1000 به معنی 1 ثانیه و بر اساس میلی ثانیه هست

قسمت سوم : با افکت محو شدن

کد سی اس اس و اچ تی ام ال مثل اول

فقط جی کئوری متفاوته که بطور زیره

و زمان دهی هم مثل بخش دومه

کد:

$(document).ready(function() {
	$("#tab_two").click(function(){
		$("#text_two").fadeIn();
		$("#text_one").fadeOut();
	});
});
$(document).ready(function() {
	$("#tab_one").click(function(){
		$("#text_one").fadeIn();
		$("#text_two").fadeOut();
	});
});

و کد زیر هم که تکراریه و دلیلشو میدونید

فقط باید قبل کد بالا قرار بگیره

کد:

$(document).ready(function() {
	$("#text_one").hide();
	$("#text_two").show();

});

خب اموزش امروز تموم شد

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

و اگه میدونستید هم دوره ای شده ، ضرری نداشت

درآخر دلیل اون نکته بالا که با رنگ قرمز نوشته بودم توضیح بدم و السلام

دلیلش اینکه که

در کد

کد:

$(document).ready(function() {
	$("#text_one").hide();
	$("#text_two").show();

});

ما قرار میدیم که کدوم تگها نشون داده بشن و کدوم یکی غیر فعال

و یه کد دیگه داریم که اعمال رو انجام میده، اعمال تب

همونطور که میدونید مرورگر ها از بالا به پایین کدها رو میخونن اگه الویتی نداشته باشیم

و اگر کد دستورات تب ها بالای این کد قرار بگیره دیگه عمل نمیکنه و فقط به کد بالا اتکا میکنه

امضاي کاربر :

نسخه گرافیک آپدیت شد

تشکر شده:

3 کاربر از manotoweb به خاطر اين مطلب مفيد تشکر کرده اند: whatyouknow / mattin / admin-mehrdad /

پاسخ : 2 RE دوره آموزش جی کئوری در حداقل زمان ...

پيام خصوصي نقل قول تشکر کنيد

بخش دوم آموزش

-آموزش تگ animate و چند مثال با آن

-ساخت یک ابزار ساده با جی کئوری

-تگ alert

-تگ stop

و چند تگ جایگزین و توضیحات تکمیلی

--------------------

بسم الله الرحمن الرحیم

سلام

از بخش اول موضوعات بالا شروع میکنم امروز و به آخرین موضوع ختم میشه این آموزش

-آموزش animate

این تگ همونطوری که معلومه افکتهای ما رو زیباتر میکنه و مثل خاصیت transtion در css هست

به مثال زیر دقت کنید

کد:

<style>
#vg{ color:#F00}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$("#vg").click(function(){
		$("#vg").animate({opacity:'0.1'},200);
	});
});
</script>

<div id="vg">i love J-query</div>

توضیحات : در کد بالا میبینیم که سه بخش سی اس اس جی کئوری و اچ تی ام ال داریم

بخش سی اس اس رنگ قرمز به متن html ما میده

و بخش جی کئوری دستوری رو به متن میده که اگر کلیک شد روی متن میزان شفافیت آن طی 0.2 ثانیه یک دهم اول بشه

0.1

اعداد همگی طبق خواسته های شما قابل تغیر هستن

-> تگهایی که در بخش animate استفاده میشن محدود تر از css هستند و یکم هم فرق دارن

با استفاده از برنامه dream wever میشه اونا رو مشاهده کرد

و بجای عبارت "#vg" دوم توی کد بالا میشد عبارت this هم استفاده کرد

---- یه اسلاید دو تصویری میسازم برای مثال ( اسلایدر واقعی با دستورات if و ... هست که فعلا زوده و به این شکل نیست )

ابتدا سی اس اس و اچ تی ام ال رو بصورت زیر مینویسیم

کد:

<style>
#slide{ height:150px; width:150px; position:relative; overflow:hidden}
#imgone{ height:150px; width:150px; position:absolute;}
#imgtwo{ height:150px; width:150px; position:absolute;}
</style>

html

کد:

<div id="slide">
<div id="imgone"><img src="http://versiongraphic.rozblog.com/user/Avatar/versiongraphic/alireza.jpg" /></div>
<div id="imgtwo"><img 
src="http://versiongraphic.rozblog.com/user/Avatar/versiongraphic/admin-versiongraphic.png"
 /></div>
</div>
<button id="one">عکس دوم</button>
<button id="two">عکس اول</button>

کد جی کئوری هم به شکل زیر

کد:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$("#one").click(function(){
		$("#imgtwo").animate({opacity:'0',right:'150px'});
	});
});
$(document).ready(function() {
	$("#two").click(function(){
		$("#imgtwo").animate({opacity:'1',right:'0px'});
	});
});

</script>

قسمت اول جی کئوری که کتابخانه جی کئوری میباشد

در قسمت بعد ما 2 دکمه تعریف کردیم

با کلید روی هر کدوم از اونها میشه تصویر رو عوض کرد

مثال بالا رو اگه css رو بلد باشید کاملا ملموسه

و اگر میخواین افکت محو شدن در حرکت به راست و چپ رو نداشته باشه کافیه opacity رو حذف کنید

و عبارت right هم قابل تعویضه

موفق باشید

اگه خاطرتون باشه بالا گفتم که امکانات animate نسبت به css کمتره

ولی میشه بجای انیمیشن از css در جی کئوری استفاده کرد

بصورت زیر

کد:

<script>
$(document).ready(function() {
	$("#two").click(function(){
		$("#imgtwo").css({"opacity":"1"});
	});
});

</script>

فقط یه نکته اینکه نمیشه بهش زمان داد و سریع افکت اجرا میشه

و قابل به ذکره تمام تگها مثل css هست و برای جدا کردنشون از , استفاده میشه

مثل مثال زیر

کد:

<script>
$(document).ready(function() {
	$("#two").click(function(){
		$("#imgtwo").css({"opacity":"1","color":"#000"});
	});
});

</script>

آموزش ساخت ابزار با جی کئوری ، تگ alert

تگ alert چیز خیلی خاصی نداره

و توی مثال ساخت ابزار استفادش میکنم و مطمئنم هیچکس توش مشکل نداره

ما میخوایم یه ابزار بسازیم که اسم و فامیل شخص رو ازش بگیره و بنویسه

"اسم شما : ... و فامیلی شما : ... هست ، لحظات خوبی داشته باشید"

ابتدا یه کد html مینویسیم

توی کد اچ تی ام ال ما دوتا فیلد میخوایم که اسم و فامیل شخص توشون باشه

و یه دکمه که ثبت کنه اطلاعات رو

با یه خط که نتیجه ابزار رو توش نمایش بده

پس دست بکار میشیم

کد:


اسم شما : <input type="text" id="name" value="اسمتان را وارد کنید" /><br />
فامیلی شما : <input type="text" id="family" value="فامیلی خود را وارد کنید" />
<br />
<button id="sub">ثبت</button>

<p id="text"></p>

حال میریم سراغ جی کئوری

کد:

<script>
$(document).ready(function() {
	$("#sub").click(function(){
		$("#text").html("نام شما : "+ $("#name").val()+ "  و فامیلی شما : "
 + $("#family").val()+" میباشد ، لحظات خوبی را برای شما آرزو میکنیم ")
		alert("ممنون از حسن انتخاب شما")
	});
});
</script>

در خط اول تعریف میکنیم وقتی روی دکمه ای که ای دی sub دارد کلیک کردیم متن

های داخل دو باکس رو برداره + یه سری متن که خودمون زدیم نمایش بده

و خط پایینشم که همون پیام alert هست که توضیحی نداره

تبریک ، اولین ابزارتونو با جی کئوری ساختین

فقط برای اینکه عبارت ها و نوشته های کاربران توی فیلدها بهم نچسبه اول و آخر عبارت های خودمون که داخل " هستن اسپیس space میزنیم

تگ stop

این تگ همونطوری که از اسمش معلومه باعث میشه افکت یا دستور لغو یا نگه داشته بشه تا همونجایی که انجام شده

به مثال زیر دقت کنید

بخش html

کد:

<div style="height:100px; width:100px; background-color:#666" id="ab"></div>
<button id="bc">ایستادن</button>

بخش جی کئوری

کد:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$("#ab").click(function(){
		$("#ab").animate({marginLeft:'1000px'},10000);
	});
});
$(document).ready(function() {
	$("#bc").click(function(){
		$("#ab").stop();
	});
});

</script>

در مثال زیر وقتی روی مربع کلیک میکنیم شروع میکنه به حرکت

و وقتی روی دکمه "ایستادن" کلیک میکنیم در هر جایی که هست وای میسه

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

یکی از مثالهاش توی اسلایدر های افقی هست که دارای متن طولانی هستن

باید این دکمه باشه که کاربر بتونه نگه داره اسلاید رو و متن رو بخونه

حال حتما نباید دکمه بذاریم

میشه با بردن موس روی اسلاید ، اسلاید از کار بیوفته

من همین کار رو با مثال بالا میکنم

بخش html

کد:


<div style="height:100px; width:100px; background-color:#666" id="ab"></div>

و بخش J-query

کد:

<script>
$(document).ready(function() {
	$("#ab").click(function(){
		$("#ab").animate({marginLeft:'1000px'},10000);
	});
});
$(document).ready(function() {
	$("#ab").hover(function(){
		$("#ab").stop();
	});
});
</script>

اگر با سی اس اس آشنایی داشته باشید حتما تگ hover رو میشناسید و با اون آشنا هستید

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

همچنین میشه بجای تگ 'click' از 'dblclick' استفاده کرد که استایل با دوبار کلیک اجرا میشه

که همه این تگها رو اگر یه نرم افزار خوب برای کد نویسی داشته باشید میتونید ببینید و آشنا بشید

پایان جلسه دوم

امضاي کاربر :

نسخه گرافیک آپدیت شد

تشکر شده:

3 کاربر از manotoweb به خاطر اين مطلب مفيد تشکر کرده اند: mattin / admin-mehrdad / whatyouknow /

پاسخ : 3 RE دوره آموزش جی کئوری در حداقل زمان ...

پيام خصوصي نقل قول تشکر کنيد

ادامه جلسه سوم

مروز تگ mouse move رو کار میکنیم

خب بنام او ...

این تگ مربوط به رویداد های موس میباشد

lمثل مختصات موس

مقدار حرکت روی صفحه و...

و در بخش بعد آموزش قصد دارم یکم برنامه نویسی ساده کار کنم

---

mouse move

ابتدا اسکریپت جی کئوری اون رو بشکل زیر مینویسیم

کد:

<script> 
$(document).ready(function(e) { 
$("#one").mousemove(function(){ 
}); 
});

</script>

خب این تگ المنتای مختلفی داره که به شرح زیره

و معنی و مفهموم هر کدوم از اسمش پیداست و من فقط به تگ اصلی mouse move و یک مثال از تگهای زیر اکتفا میکنم

mouse down

mouse leave

mouse enter

mouse out

mouse over

mouse up

و این المنتها بجای عبارت mousemove بالا قرار میگیره

با یبار امتحان کردن هر کدوم میتونین بفهمین کارایی هر کدوم رو

یه مثال از تگهای بالا میزنم

قسمت جی کئوری

کد:

<script> 
$(document).ready(function(){ 
$("#p1").mouseleave(function(){ 
    alert("I love j query!"); 
}); 
});

</script>

خب در قسمت بالا میبینیم که معلوم کردیم هر موقع موس روی پاراگراف رفت

موقع حرکت موس بقدری که از پاراگراف تعین شده بیرون رفت پیغام "i love jquery " رو بده

و قسمت اچ تی ام ال به این صورته

کد:
<p id="p1">This is a paragraph.</p> 

اما بحث اصلی ما mouse move هست

یکی از پارامتر های اصلی این تگ نمایش مختصات موس هست که بسیار بدرد بخور هست

و میشه مختصات رو بشکل زیر نمایش داد

کد:

<script> 
$(document).ready(function() { 
$(document).mousemove(function(e){ 
$("#one").css({"background-position" : e.pageX +'px'+ e.pageY+'px'}); 
}); 
});

</script>

مختصات محور y های موس رو به عدد نشون میشه

و e.pageX مختصات محور x ها رو

این کد بالا در شرایط فعلی نقطه قرار گیری بکگراند رو با حرکت موس تغیر میده

مثل قالب 404 شماره 1 که اخیرا قرار گرفت در وب

و اگه میخواین مهارت بیشتری داشته باشید در این المنت توصبه من سایتw3schools.com هست که کاملا دقیق توضیح داده و کم و کسری ندیدم من

امضاي کاربر :

نسخه گرافیک آپدیت شد

تشکر شده:

1 کاربر از manotoweb به خاطر اين مطلب مفيد تشکر کرده اند: whatyouknow /