آموزش JQuery

[حسین نیک پور]

با سلام
در این تاپیک قصد دارم آموزش jQuery رو از ابتدا قرار بدم



جی کوئری چیست ؟
جی‌کوئری یا jQuery یک کتابخانه جاوااسکریپت سبک وزن چند مرورگری می‌باشد که برای ساده کردن نوشتن اسکریپ‌های سمت-مشتری دراچ تی ام‌ال (HTML) طراحی شده است. جی کوئری امروزه محبوبترین کتابخانه جاوااسکریپت در حال استفاده است.
جی کوئری نرم‌افزار بازمتن و رایگان است که تحت دو پروانه GPL و MIT منتشر می‌شود. دستور زبان جی کوئری به گونه‌ای طراحی شده است که عمل هدایت یه پرونده را آسان تر کرده باشد، بدین صورت که می‌توان حرکات انیمیشین ایجاد کرد و رویدادهای صفحه استفاده کند و به وسیله آن می‌توان نرم‌افزارهای مبتنی بر ای‌جکس را ایجاد و توسعه داد.
جی کوئری همچنین این اختیار را به برنامه نویسان می‌دهد که افزایه‌هایی برای کتابخانه جاوااسکریپت ایجاد کنند.
جدا از این‌ها جی کوئری به توسعه دهندگان این اختیار را می‌دهد که تکه برنامه‌های سطح پایین مبادله‌ای (ارتباط مرورگر با کاربر) و یا انیمیشنی و حتی افکت‌های پیشرفته و سطح بالا و ایجاد اشیا فرضی را ایجاد کنند. به کارگیری همه این اجزای جی کوئری کمک می‌کند صفحات وب قدرتمند و داینامیک (پویا) داشته باشیم.


خوب حالا با jQuery چی کارا میشه کرد؟
· به عناصر موجود در پرونده دسترسی پیدا کرد و ان‌ها تغییر و دستکاری نمود.
· کنترل اسان و قدرتمند تر رویدادها(Events)
· دستکاری CSS
· ایجاد افکت و حرکات انیمیشین
· توسعه دادن افزایه‌ها
· برنامه‌های کوچک سودمند

[حسین نیک پور]

استفاده از jQuery

کتابخانه جی‌کوئری معمولاً تنها یک فایل حاوااسکریپت است که شامل همه DOMها و Eventها و افکت‌های و تابع‌های مربوط به ای‌جکس می‌شود. فایل جی‌کوئری را می‌توان به طرق مختلفی به صفحه وب متصل کرد که در ادامه این روش‌ها را معرفی می‌کنیم.

1.میتوانید آخرین نسخه رو از سایت jQuery (http://jquery.com/download/) دانلود کرده و فایل Js مربوطه را در پروژه خود اضافه کرده و در صفحه مربوطه آدرس دهید

<script type="text/javascript" src="jQuery.js"></script>

2. جی‌کوئری همچنین می‌تواند از طریق شبکه توزیع محتوای (http://fa.wikipedia.org/wiki/CDN) گوگل (http://fa.wikipedia.org/wiki/%DA%AF%D9%88%DA%AF%D9%84) در صفحه بارگذاری شود.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script>
google.load("jquery", "1.4.2");
</script>


3.از طریق HTTP
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

مایکروسافت همچنین جی کوئری را بر روی سرویس شبکه توزیع محتوای (http://fa.wikipedia.org/wiki/CDN) CDN میزبانی می‌کند.
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

[حسین نیک پور]

سینتکس jQuery
سینتکس جی‌کوئری بسیار ساده می باشد
$(selector).action()
فقط باید selector را با عنصر یا عناصر مورد نظر و action را با ایونت یا متد مورد نظر جایگزین کنید
به زودی راجع به selector ها به صورت مفصل صحبت خواهیم کرد ولی فعلا برای درک مطلب به مثال های زیر توجه کنید
$("p").hide();
در مثال بالا selector ما p و action ما hide است.
این کد تمام تگ های p موجود در صفحه را Hide می کند.

سلکتور ها در جی کوئری به 3 روش کلی می باشند
1. انتخاب با نام تگ
2. انتخاب با کلاس
3. انتخاب با ای دی

$("a").hide(); تمام تگ های a موجود در صفحه را مخفی می کند

$(".test").hide() - همه المنت هایی که کلاس تست دارند را مخفی میکند
$("#test").hide() – المنت با ایدی تست را مخفی میکند

[حسین نیک پور]

Actions
اکشن ها در واقع ایونت یا متد هایی هستند که بر روی یه ابجکت اتفاق می افتن برای مثال
$("p").click();

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



Mouse Events

Keyboard Events

Form Events

Document/Window Events



click

keypress

submit

load



dblclick

keydown

change

resize



mouseenter

keyup

focus

scroll



mouseleave



blur

unload





خب برای استفاده از action ها 2 روش وجود دارد
1.استفاده ساده : که بیشتر برای متد ها به کار می رود
$("p").click();


2.استفاده از تابع:
$("p").click(function(){
// کد های جی کوئری
});


مثال

$("#btn1").click(function(){
$(“#p1”).hide();
});


در این مثال اگر ما بر روی المنتی با ایدی btn1 کلیک کنیم المنت با ایدی P1 رو مخفی می کند

[حسین نیک پور]

خوب حالا چه جوری از jQuery استفاده کنیم؟؟

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

و بعدش بهتره برای این که توی کارمون مشکلی به وجود نیاد کد ها رو توی (document).ready قرار دهید.دلیلشم که مشخصه دیگه : برای اینکه ابتدا کلیه اجزای صفحه لود شوند و بعد دستورات ما اجرا شوند

خوب (document).ready به دو صورت نوشته میشه که هیچ فرقی با هم ندارن

$(document).ready(function(){

// کد های جی کوئری

});

$(function(){


// کد های جی کوئری


});


خب کل سینتکس جی کوئری همین بود از پست بعدی متد ها و ایونت ها و سلکتور ها رو به صورت مفصل بحث خواهیم کرد

[حسین نیک پور]

قبل از ادامه مطلب یه جدول برای سلکتور ها براتون میزارم .ساده ست و آینده خیلی می تونه بهتون کمک کنه



Selector
Example
Selects


* (http://www.w3schools.com/jquery/sel_all.asp)
$("*")
All elements


#id (http://www.w3schools.com/jquery/sel_id.asp)
$("#lastname")
The element with id="lastname"


.class (http://www.w3schools.com/jquery/sel_class.asp)
$(".intro")
All elements with class="intro"


.class,.class (http://www.w3schools.com/jquery/sel_multiple_classes.asp)
$(".intro,.demo")
All elements with the class "intro" or "demo"


element (http://www.w3schools.com/jquery/sel_element.asp)
$("p")
All <p> elements


el1,el2,el3 (http://www.w3schools.com/jquery/sel_multiple_sel.asp)
$("h1,div,p")
All <h1>, <div> and <p> elements







:first (http://www.w3schools.com/jquery/sel_first.asp)
$("p:first")
The first <p> element


:last (http://www.w3schools.com/jquery/sel_last.asp)
$("p:last")
The last <p> element


:even (http://www.w3schools.com/jquery/sel_even.asp)
$("tr:even")
All even <tr> elements


:odd (http://www.w3schools.com/jquery/sel_odd.asp)
$("tr:odd")
All odd <tr> elements







:first-child (http://www.w3schools.com/jquery/sel_firstchild.asp)
$("p:first-child")
All <p> elements that are the first child of their parent


:first-of-type (http://www.w3schools.com/jquery/sel_firstoftype.asp)
$("p:first-of-type")
All <p> elements that are the first <p> element of their parent


:last-child (http://www.w3schools.com/jquery/sel_lastchild.asp)
$("p:last-child")
All <p> elements that are the last child of their parent


:last-of-type (http://www.w3schools.com/jquery/sel_lastoftype.asp)
$("p:last-of-type")
All <p> elements that are the last <p> element of their parent


:nth-child(n) (http://www.w3schools.com/jquery/sel_nthchild.asp)
$("p:nth-child(2)")
All <p> elements that are the 2nd child of their parent


:nth-last-child(n) (http://www.w3schools.com/jquery/sel_nthlastchild.asp)
$("p:nth-last-child(2)")
All <p> elements that are the 2nd child of their parent, counting from the last child


:nth-of-type(n) (http://www.w3schools.com/jquery/sel_nthoftype.asp)
$("p:nth-of-type(2)")
All <p> elements that are the 2nd <p> element of their parent


:nth-last-of-type(n) (http://www.w3schools.com/jquery/sel_nthlastoftype.asp)
$("p:nth-last-of-type(2)")
All <p> elements that are the 2nd <p> element of their parent, counting from the last child


:only-child (http://www.w3schools.com/jquery/sel_onlychild.asp)
$("p:only-child")
All <p> elements that are the only child of their parent


:only-of-type (http://www.w3schools.com/jquery/sel_onlyoftype.asp)
$("p:only-of-type")
All <p> elements that are the only child, of its type, of their parent







parent > child (http://www.w3schools.com/jquery/sel_parent_child.asp)
$("div > p")
All <p> elements that are a direct child of a <div> element


parent descendant (http://www.w3schools.com/jquery/sel_parent_descendant.asp)
$("div p")
All <p> elements that are descendants of a <div> element


element + next (http://www.w3schools.com/jquery/sel_previous_next.asp)
$("div + p")
The <p> element that are next to each <div> elements


element ~ siblings (http://www.w3schools.com/jquery/sel_previous_siblings.asp)
$("div ~ p")
All <p> elements that are siblings of a <div> element







:eq(index) (http://www.w3schools.com/jquery/sel_eq.asp)
$("ul li:eq(3)")
The fourth element in a list (index starts at 0)


:gt(no) (http://www.w3schools.com/jquery/sel_gt.asp)
$("ul li:gt(3)")
List elements with an index greater than 3


:lt(no) (http://www.w3schools.com/jquery/sel_lt.asp)
$("ul li:lt(3)")
List elements with an index less than 3


:not(selector) (http://www.w3schools.com/jquery/sel_not.asp)
$("input:not(:empty)")
All input elements that are not empty







:header (http://www.w3schools.com/jquery/sel_header.asp)
$(":header")
All header elements <h1>, <h2> ...


:animated (http://www.w3schools.com/jquery/sel_animated.asp)
$(":animated")
All animated elements


:focus (http://www.w3schools.com/jquery/sel_focus.asp)
$(":focus")
The element that currently has focus


:contains(text) (http://www.w3schools.com/jquery/sel_contains.asp)
$(":contains('Hello')")
All elements which contains the text "Hello"


:has(selector) (http://www.w3schools.com/jquery/sel_has.asp)
$("div:has(p)")
All <div> elements that have a <p> element


:empty (http://www.w3schools.com/jquery/sel_empty.asp)
$(":empty")
All elements that are empty


:parent (http://www.w3schools.com/jquery/sel_parent.asp)
$(":parent")
All elements that are a parent of another element


:hidden (http://www.w3schools.com/jquery/sel_hidden.asp)
$("p:hidden")
All hidden <p> elements


:visible (http://www.w3schools.com/jquery/sel_visible.asp)
$("table:visible")
All visible tables


:root (http://www.w3schools.com/jquery/sel_root.asp)
$(":root")
The document's root element


:lang(language) (http://www.w3schools.com/jquery/sel_lang.asp)
$("p:lang(de)")
All <p> elements with a lang attribute value starting with "de"







[attribute] (http://www.w3schools.com/jquery/sel_attribute.asp)
$("[href]")
All elements with a href attribute


[attribute=value] (http://www.w3schools.com/jquery/sel_attribute_equal_value.asp)
$("[href='default.htm']")
All elements with a href attribute value equal to "default.htm"


[attribute!=value] (http://www.w3schools.com/jquery/sel_attribute_notequal_value.asp)
$("[href!='default.htm']")
All elements with a href attribute value not equal to "default.htm"


[attribute$=value] (http://www.w3schools.com/jquery/sel_attribute_end_value.asp)
$("[href$='.jpg']")
All elements with a href attribute value ending with ".jpg"


[attribute|=value] (http://www.w3schools.com/jquery/sel_attribute_prefix_value.asp)
$("[title|='Tomorrow']")
All elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen


[attribute^=value] (http://www.w3schools.com/jquery/sel_attribute_beginning_value.asp)
$("[title^='Tom']")
All elements with a title attribute value starting with "Tom"


[attribute~=value] (http://www.w3schools.com/jquery/sel_attribute_contains_value.asp)
$("[title~='hello']")
All elements with a title attribute value containing the specific word "hello"


[attribute*=value] (http://www.w3schools.com/jquery/sel_attribute_contains_string_value.asp)
$("[title*='hello']")
All elements with a title attribute value containing the word "hello"







:input (http://www.w3schools.com/jquery/sel_input.asp)
$(":input")
All input elements


:text (http://www.w3schools.com/jquery/sel_input_text.asp)
$(":text")
All input elements with type="text"


:password (http://www.w3schools.com/jquery/sel_input_password.asp)
$(":password")
All input elements with type="password"


:radio (http://www.w3schools.com/jquery/sel_input_radio.asp)
$(":radio")
All input elements with type="radio"


:checkbox (http://www.w3schools.com/jquery/sel_input_checkbox.asp)
$(":checkbox")
All input elements with type="checkbox"


:submit (http://www.w3schools.com/jquery/sel_input_submit.asp)
$(":submit")
All input elements with type="submit"


:reset (http://www.w3schools.com/jquery/sel_input_reset.asp)
$(":reset")
All input elements with type="reset"


:button (http://www.w3schools.com/jquery/sel_input_button.asp)
$(":button")
All input elements with type="button"


:image (http://www.w3schools.com/jquery/sel_input_image.asp)
$(":image")
All input elements with type="image"


:file (http://www.w3schools.com/jquery/sel_input_file.asp)
$(":file")
All input elements with type="file"


:enabled (http://www.w3schools.com/jquery/sel_input_enabled.asp)
$(":enabled")
All enabled input elements


:disabled (http://www.w3schools.com/jquery/sel_input_disabled.asp)
$(":disabled")
All disabled input elements


:selected (http://www.w3schools.com/jquery/sel_input_selected.asp)
$(":selected")
All selected input elements


:checked (http://www.w3schools.com/jquery/sel_input_checked.asp)
$(":checked")
All checked input elements

[حسین نیک پور]

افکت ها در جی کوئری

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



نام پارامتر
مغادیر مورد قبول


speed
· milliseconds
· "slow"
· "fast"


easing
· "swing"
· "linear"


callback
در اینده بحث خواهیم کرد


opacity
between 0.00 and 1.00




Hide

سینتکس :

$(selector).hide(speed,easing,callback)

مثال

$("button").click(function(){
$("p").hide(1000);
});



Show

سینتکس :


$(selector).show(speed,easing,callback)

مثال

$("button").click(function(){
$("p").show("fast");
});


نکته این که قبل از این که از این متد استفاده کنیم ابجکت ما باید مخفی باشد
Toggle

سینتکس :

$(selector).toggle(speed,easing,callback)

مثال

$("button").click(function(){
$("p").toggle();
});




FadeIn

سینتکس :

$(selector).fadeIn(speed,easing,callback)

مثال

$("button").click(function(){
$("#div1"). fadeIn ();
$("#div2"). fadeIn ("slow");
$("#div3"). fadeIn (3000, "linear");
});



FadeOut

سینتکس :

$(selector).fadeOut(speed,easing,callback)

مثال

$("button").click(function(){
$("#div1"). fadeOut();
$("#div2"). fadeOut ("slow");
$("#div3"). fadeOut (3000, "linear");
});


FadeToggle

سینتکس :

$(selector).fadeToggle(speed,easing,callback)

مثال

$("button").click(function(){
$("#div1"). fadeToggle ();

});

fadeTo

سینتکس :

$(selector).fadeTo(speed,opacity,easing,callback)

مثال

$("button").click(function(){
$("p").fadeTo(1000,0.4);

});
نکته مهم: opacity در اینجا الزامیست

[miladheydari]

ببخشید این fadeout ,fade in , fadeToggle,... چیکار میکنن؟؟ و اگه میشه این پارامترای ک گفتینو یه توضیح بدین

[miladheydari]

اگه میشه یه کد ساده html واسه همین hide بزارین ممنون میشم

[حسین نیک پور]

ببخشید این fadeout ,fade in , fadeToggle,... چیکار میکنن؟؟ و اگه میشه این پارامترای ک گفتینو یه توضیح بدین

دوست عزیز
افکت fadeOut
باعث می شود تا عنصر مورد اثر آن به تدریج از حالت نمایان به حالت مخفی در بیاید

و در مورد پارامتر ها هم از اسمش معلومه speed سرعت افکت و easing هم نوع محو یا ظاهر شدن افکت و opacity شفافیت آن می باشد

[حسین نیک پور]

اگه میشه یه کد ساده html واسه همین hide بزارین ممنون میشم

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>


<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

[sajjad2]

پست ویرایش شد تا مطابق آموزش باشه
آیا اکشنها کاربردی مانند فانکشنها دارند ؟ میشه اکشن هایی مثل hide() رو تعریف کرد ؟ اینجا تابعی برای تبدیل تاریخ میلادی به شمسی داریم میشه اون ور مثل اکشنها فراخوانی کرد ؟
پست اصلی
ممنون بابت آموزشها و میشه این مشکل من رو هم برسی کنین . الان مشغول شمسی سازی پیک دیت هستم کدهای شمسی رو از اینجا
http://hasheminezhad.com/datepicker?page=6 گرفتم .
این تابع رو در فایل pickdate دارم
d=new Date(b.year,b.month,b.date+a);c.set("highlight",[d.getFullYear(),d.getMonth(),d.getDate()]
الان احتیاج دارم تا به جای استفاده از getFullYear() اصلی موجود در کد از این کد استفاده کنه
this.getFullYear = function() { return jalaliDate[0]; };

فایل کامل رو پیوست کردم .
ممنون

[Gh-Moradi]

ممنون بابت آموزشها و میشه این مشکل من رو هم برسی کنین . الان مشغول شمسی سازی پیک دیت هستم کدهای شمسی رو از اینجا
http://hasheminezhad.com/datepicker?page=6 گرفتم .
این تابع رو در فایل pickdate دارم
d=new Date(b.year,b.month,b.date+a);c.set("highlight",[d.getFullYear(),d.getMonth(),d.getDate()]
الان احتیاج دارم تا به جای استفاده از getFullYear() اصلی موجود در کد از این کد استفاده کنه
this.getFullYear = function() { return jalaliDate[0]; };

فایل کامل رو پیوست کردم .
ممنون

آقای محترم این یک تاپیک آموزشیه لطفآ عنوان رو بخونید..! سوال و جوابهایی که فقط به این آموزش مربوط میشه رو درج کنید و خواهشآ نظم تاپیک رو بهم نزنید
پس لطفآ برای درخواست خود تاپیک جدید ایجاد نمایید (دوستان سعی کنید خیلی سوال نکنید یا حتی المقدور بعد از اتمام آموزشها سوال کنید تا تاپیک حالت آموزشی خودش رو حفظ کنه)
آقای نیک پور اگر ممکنه بعد از هر آموزش (ترجیحآ آخر هر ارسال) یک سورس هم قرار دهید (مثل ارسال شماره 11#) چون به آموزش خیلی کمک میکنه
با تشکر از آموزشهای شما
روز خوش

[حسین نیک پور]

با سلام خدمت دوستان
سعی می کنم در آخر هر تاپیک مثال مربوط به اون درس رو هم بزارم
دوستان در رابطه با افکت ها بیشتر توضیح نمیشه داد .بهتره که مثال رو اجرا کنید و نحوه کارشو ببینید

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

سینتکس
$(selector).slideDown(speed,easing,callback);
$(selector).slideUp(speed,easing,callback);
$(selector).slideToggle(speed,easing,callback);

مثال
<!DOCTYPE html><html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>

<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>

[حسین نیک پور]

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

(selector).animate({styles},speed,easing,callback)

همین طور که می بینید پارا متر های این متد (به جز style) مثل افکت های قبلی است و راجع به آنها صحبتی نمی کنم ولی پارامتر style :

1. الزامی ست
2. به جای آن می نوان یک یا چند پراپرتی css را قرار داد

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

<!DOCTYPE html><html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>

<body>
<button>Start Animation</button>


<div style="background:#98bf21;height:100px;width:100px;positi on:absolute;">
</div>


</body>
</html>

3. به جای یک پراپرتی css می توان از چندین پراپرتی نیز استفاده کرد

<script> $(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>


4.پراپرتی های css را به صورت camel-cased نوشت یعنی به جای padding-left از paddingLeft استفاده کرد.

5.همه دستورات css را نمی توان در animate استفاده کرد . تنها موارد عددی را میتوان به کار برد

backgroundPositionX
backgroundPositionY
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent

6. برای relative کردن میتوانید از "+=" یا "-=" استفاده کنید.

$(document).ready(function(){ $("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

});