khateratean
چهارشنبه 04 دی 1392, 15:06 عصر
منبع از سایت بیاموز (http://www.beyamooz.com)
گزینشگرها در jQuery
$("p").hide() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_hide_p)
پنهان کردن تمام عناصر <p>
$("#test").hide() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_hide_id)
پنهان کردن عنصر با شناسه "test"
$(".test").hide() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_hide_class)
پنهان کردن تمام عناصر با کلاس "test"
$(this).hide() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_sel_this)
پنهان کردن عنصر جاری
توضیح مثال ها (http://beyamooz.com/jquery/109-basic/592-%DA%AF%D8%B2%DB%8C%D9%86%D8%B4%DA%AF%D8%B1%D9%87%D 8%A7%DB%8C-jQuery)
رویدادها در jQuery
jQuery click() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_click)
نشان دادن چگونگی استفاده از رویداد ()click در jQuery
jQuery dblclick() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dblclick)
نشان دادن چگونگی استفاده از رویداد ()dblclick در jQuery
jQuery mouseenter() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_mouseenter)
نشان دادن چگونگی استفاده از رویداد ()mouseenter در jQuery
jQuery mouseleave() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_mouseleave)
نشان دادن چگونگی استفاده از رویداد ()mouseleave در jQuery
jQuery mousedown() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_mousedown)
نشان دادن چگونگی استفاده از رویداد ()mousedown در jQuery
jQuery mouseup() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_mouseup)
نشان دادن چگونگی استفاده از رویداد ()mouseup در jQuery
jQuery hover() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_hover)
نشان دادن چگونگی استفاده از رویداد ()hover در jQuery
jQuery focus() & blur() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_focus_blur)
نشان دادن چگونگی استفاده از رویدادهای ()focus و ()blur در jQuery
توضیح مثال ها (http://beyamooz.com/jquery/109-basic/593-%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7-%D8%AF%D8%B1-jQuery)
پنهان و نمایان کردن عناصر در jQuery
jQuery hide() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_hide)
نشان دادن چگونگی استفاده از متد ()hide در jQuery
jQuery hide() & show() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_hide_show)
نشان دادن چگونگی استفاده از متدهای ()hide و ()show در jQuery
jQuery toggle() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_toggle)
متد ()toggle بین متدهای ()hide و ()show حرکت می کند
jQuery hide() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_hide_explanations)
یک مثال دیگر از متد ()hide
توضیح مثال ها (http://beyamooz.com/jquery/188-effect/594-%D9%BE%D9%86%D9%87%D8%A7%D9%86-%D9%88-%D9%86%D9%85%D8%A7%DB%8C%D8%A7%D9%86-%DA%A9%D8%B1%D8%AF%D9%86-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D8%AF%D8%B1-jQuery)
محو کردن عناصر در jQuery
jQuery fadeIn() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_fadein)
نشان دادن چگونگی استفاده از متد ()fadeIn در jQuery
jQuery fadeOut() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_fadeout)
نشان دادن چگونگی استفاده از متد ()fadeOut در jQuery
jQuery fadeToggle() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_fadetoggle)
نشان دادن چگونگی استفاده از متد ()fadeToggle در jQuery
jQuery fadeTo() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_fadeto)
نشان دادن چگونگی استفاده از متد ()fadeTo در jQuery
توضیح مثال ها (http://beyamooz.com/jquery/188-effect/595-%D9%85%D8%AD%D9%88-%DA%A9%D8%B1%D8%AF%D9%86-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1)
پنهان و نمایان کردن عناصر بصورت اسلایدی در jQuery
jQuery slideDown() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_slide_down)
نشان دادن چگونگی استفاده از متد ()slideDown در jQuery
jQuery slideUp() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_slide_up)
نشان دادن چگونگی استفاده از متد ()slideUp در jQuery
jQuery slideToggle() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_slide_toggle)
نشان دادن چگونگی استفاده از متد ()slideToggle در jQuery
توضیح مثال ها (http://beyamooz.com/jquery/188-effect/596-%D9%BE%D9%86%D9%87%D8%A7%D9%86-%DA%A9%D8%B1%D8%AF%D9%86-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D8%A8%D8%B5%D9%88%D8%B1%D8%AA-%D8%A7%D8%B3%D9%84%D8%A7%DB%8C%D8%AF%DB%8C)
متحرک سازی در jQuery
jQuery animate() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_animation1)
یک مثال ساده از چگونگی استفاده از متد ()animate
jQuery animate() - CSS properties (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_animation1_multicss)
چگونه با استفاده از متد ()animate، چندین خصوصیت CSS را روی عنصر انتخاب شده اعمال نماییم
jQuery animate() - relative values (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_animation1_relative)
می توان خصوصیت ها را نسبت به مقادیر فعلی شان، مقدار دهی نمود (مقدار دهی نسبی در متد ()animate)
jQuery animate() - using pre-defined values (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_animation1_toggle)
می توان خصوصیت ها را با مقادیر "show", "hide" و یا "toggle" مقداردهی نمود
jQuery animate() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_animation)
اگر از متد ()animate چندین بار پشت سر هم استفاده کنید، jQuery یک صف داخلی از آنها ایجاد می کند. سپس آنها را یکی بعد از دیگری فراخوانی می کند
jQuery animate() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_animation2)
در این مثال، ابتدا عنصر <div> به سمت راست حرکت می کند و سپس اندازه متن داخل آن افزایش می یابد
توضیح مثال ها (http://beyamooz.com/jquery/188-effect/597-%D9%85%D8%AA%D8%AD%D8%B1%DA%A9-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%AF%D8%B1-jQuery)
متوقف کردن متحرک سازی در jQuery
jQuery stop() sliding (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_stop_slide)
نشان دادن چگونگی استفاده از متد ()stop در jQuery
jQuery stop() animation (with parameters) (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_stop_params)
نشان دادن چگونگی استفاده از متد ()stop در jQuery (همراه با پارامتر)
توضیح مثال ها (http://beyamooz.com/jquery/188-effect/598-%D9%85%D8%AA%D9%88%D9%82%D9%81-%DA%A9%D8%B1%D8%AF%D9%86-%D9%85%D8%AA%D8%AD%D8%B1%DA%A9-%D8%B3%D8%A7%D8%B2%DB%8C-)
برگرداندن محتوی یک عنصر و یا مقدار یک خصوصیت در jQuery
jQuery text() and html() - Get content (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_html_get)
برگردان محتوی یک عنصر HTML با استفاده از متدهای ()text و ()html
jQuery val() - Get content (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_val_get)
برگردان محتوی یک فیلد با استفاده از متد ()val
jQuery attr() - Get attribute value (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_attr_get)
برگرداندن مقدار یک خصوصیت با استفاده از متد ()attr
توضیح مثال ها (http://beyamooz.com/jquery/189-html/601-%D8%A8%D8%B1%DA%AF%D8%B1%D8%AF%D8%A7%D9%86%D8%AF%D 9%86-%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D8%AF%D8%B1-jQuery)
تنظیم محتوایِ عناصر و یا مقدار خصوصیت ها در jQuery
jQuery text(), html(), and val() - Set content (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_html_set)
تنظیم محتوی با استفاده از متدهای ()text و ()html و ()val
jQuery text() and html() - Set content with a callback function (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_html_callback)
تنظیم محتوی با استفاده از متدهای ()text و ()html همراه با تابع callback
jQuery attr() - Set attribute value (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_attr_set)
تنظیم مقدار یک خصوصیت با استفاده از متد ()attr
jQuery attr() - Set multiple attribute values (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_attr_set2)
تنظیم مقدار برای چند خصوصیت بصورت همزمان با استفاده از متد ()attr
jQuery attr() - Set attribute value with a callback function (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_attr_callback)
تنظیم مقدار خصوصیت با استفاده از متد ()attr همراه با تابع callback
توضیح مثال ها (http://beyamooz.com/jquery/189-html/602-%D9%85%D9%82%D8%AF%D8%A7%D8%B1%D8%AF%D9%87%DB%8C-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D8%AF%D8%B1-jQuery)
اضافه کردن محتوی یا عنصر جدید در jQuery
jQuery append() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_html_append)
اضافه کردن محتوی در انتهای عناصر انتخاب شده
jQuery prepend() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_html_prepend)
اضافه کردن محتوی در ابتدای عناصر انتخاب شده
jQuery append() - Insert several new elements (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_html_append2)
در این مثال، به سه روش مختلف، سه عنصر <p> ایجاد کرده ایم و سپس با استفاده از متد ()append آنها را به انتهای عنصر <body> اضافه کرده ایم
jQuery after() & before() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_html_after)
اضافه کردن محتوای قبل و بعد از عناصر انتخاب شده
jQuery after() - Insert several new elements (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_html_after2)
در این مثال، به سه روش مختلف، سه عنصر جدید ایجاد کرده ایم و سپس با استفاده از متد ()after آنها را بعد از عنصر <img> اضافه کرده ایم
توضیح مثال ها (http://beyamooz.com/jquery/189-html/603-%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-%D9%85%D8%AD%D8%AA%D9%88%DB%8C)
حذف کردن محتوی یا عنصر HTML در jQuery
jQuery remove() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_remove)
حذف کردن عنصر/عناصر انتخاب شده
jQuery empty() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_empty)
حذف کردن تمام فرزندان عنصر/عناصر انتخاب شده
jQuery remove() - with a parameter (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_remove2)
فیلتر کردن عناصر انتخاب شده برای حذف شدن
توضیح مثال ها (http://beyamooz.com/jquery/189-html/604-%D8%AD%D8%B0%D9%81-%DA%A9%D8%B1%D8%AF%D9%86-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1)
دستکاری ظاهر عناصر HTML
jQuery addClass() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_addclass)
اضافه کردن یک کلاس به عناصر انتخاب شده
jQuery addClass() - Multiple classes (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_addclass2)
اضافه کردن چند کلاس به عنصر انتخاب شده
jQuery removeClass() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_removeclass)
حذف کردن یک یا چند کلاس از عنصر/عناصر انتخاب شده
jQuery toggleClass() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_toggleclass)
حرکت بین متدهای ()addClass و ()removeClass
توضیح مثال ها (http://beyamooz.com/jquery/189-html/605-%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C-%D8%B8%D8%A7%D9%87%D8%B1-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-)
متد ()css در jQuery
jQuery css() - return CSS property (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_css_getcolor)
این مثال، مقدار خصوصیت "background-color" تنظیم شده روی اولین تگ <p> را برمی گرداند
jQuery css() - set CSS property (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_css_setcolor)
در این مثال، خصوصیت "background-color" روی تمام تگ های <p> با مقدار "yellow" تنظیم می شود
jQuery css() - set CSS properties (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_css_set_multiple)
تنظیم چندین خصوصیت CSS
توضیح مثال ها (http://beyamooz.com/jquery/189-html/606-%D9%85%D8%AA%D8%AF-%28%29css-%D8%AF%D8%B1-jQuery)
متدهای کار با ابعاد در jQuery
jQuery - return width() and height() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dim_width_height)
در این مثال، مقدار خصوصیت های width و height عنصر با شناسه "div1" نمایش داده می شود
jQuery - return innerWidth() and innerHeight() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dim_innerwidth_height )
در این مثال، مقدار خصوصیت های width و height عنصر با شناسه "div1" نمایش داده می شود، این مقدار شامل اندازه padding نیز هست
jQuery - return outerWidth() and outerHeight() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dim_outerwidth_height )
در این مثال، مقدار خصوصیت های width و height عنصر با شناسه "div1" نمایش داده می شود، این مقدار شامل اندازه padding و border نیز هست
jQuery - return outerWidth(true) and outerHeight(true) (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dim_outerwidth_height 2)
اگر مقدار "true" به متد ()outerHeight ارسال شود، مقدار خصوصیت height شامل مقادیر padding و border و margin نیز خواهد شد
jQuery - return width() and height() of document and window (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dim_width_height2)
در این مثال، مقدار خصوصیت های width و height عنصر "document" (سند HTML) و عنصر "window" (پنجره مرورگر) نمایش داده می شود
jQuery - set width() and height() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dim_width_height_set)
در این مثال، مقدار خصوصیت های width و height عنصر با شناسه "div1" با مقدار "500" تنظیم شده است
توضیح مثال ها (http://beyamooz.com/jquery/189-html/607-%D9%85%D8%AA%D8%AF%D9%87%D8%A7%DB%8C-%DA%A9%D8%A7%D8%B1-%D8%A8%D8%A7-%D8%A7%D8%A8%D8%B9%D8%A7%D8%AF-%D8%AF%D8%B1-jQuery%20%20)
متد ()load در jQuery
jQuery load() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_ajax_load)
در این مثال، محتوای فایل "demo_test.txt" داخل عنصر با شناسه "div1" بارگذاری می شود
jQuery load() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_ajax_load2)
در این مثال، محتوای عنصر با شناسه "p1" در فایل "demo_test.txt" داخل عنصر با شناسه "div1" بارگذاری می شود
jQuery load() - with callback (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_ajax_load_callback)
استفاده از متد ()load همراه با تابع callback
توضیح مثال ها (http://beyamooz.com/jquery/190-ajax/609-%D9%85%D8%AA%D8%AF-%28%29load-%D8%AF%D8%B1-jQuery%20%20)
درخواست اطلاعات از سرور: GET در مقابل POST
jQuery get() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_ajax_get)
در این مثال، با استفاده از متد ()get.$ داده ها را از یک فایل PHP روی سرور بازیابی می کنیم
jQuery post() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_ajax_post)
در این مثال، با استفاده از متد ()post.$ دو متغییر name و city را همراه درخواست به سرور ارسال کرده و با توجه به مقادیر آنها داده ها را از یک فایل PHP روی سرور بازیابی می کنیم
توضیح مثال ها (http://beyamooz.com/jquery/190-ajax/610-%D9%85%D8%AA%D8%AF%D9%87%D8%A7%DB%8C-%28%29get-%D9%88-%28%29post)
مثال های متفرقه
map hilight (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_maphilight)
در این مثال، با استفاده از پلاگین jquery.maphilight.js زمانی که موس روی نواحی مشخص شده ای از عکس قرار می گیرد، آن قسمت hilight می شود.
منبع از سایت بیاموز (http://www.beyamooz.com)
گزینشگرها در jQuery
$("p").hide() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_hide_p)
پنهان کردن تمام عناصر <p>
$("#test").hide() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_hide_id)
پنهان کردن عنصر با شناسه "test"
$(".test").hide() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_hide_class)
پنهان کردن تمام عناصر با کلاس "test"
$(this).hide() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_sel_this)
پنهان کردن عنصر جاری
توضیح مثال ها (http://beyamooz.com/jquery/109-basic/592-%DA%AF%D8%B2%DB%8C%D9%86%D8%B4%DA%AF%D8%B1%D9%87%D 8%A7%DB%8C-jQuery)
رویدادها در jQuery
jQuery click() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_click)
نشان دادن چگونگی استفاده از رویداد ()click در jQuery
jQuery dblclick() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dblclick)
نشان دادن چگونگی استفاده از رویداد ()dblclick در jQuery
jQuery mouseenter() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_mouseenter)
نشان دادن چگونگی استفاده از رویداد ()mouseenter در jQuery
jQuery mouseleave() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_mouseleave)
نشان دادن چگونگی استفاده از رویداد ()mouseleave در jQuery
jQuery mousedown() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_mousedown)
نشان دادن چگونگی استفاده از رویداد ()mousedown در jQuery
jQuery mouseup() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_mouseup)
نشان دادن چگونگی استفاده از رویداد ()mouseup در jQuery
jQuery hover() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_hover)
نشان دادن چگونگی استفاده از رویداد ()hover در jQuery
jQuery focus() & blur() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_focus_blur)
نشان دادن چگونگی استفاده از رویدادهای ()focus و ()blur در jQuery
توضیح مثال ها (http://beyamooz.com/jquery/109-basic/593-%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7-%D8%AF%D8%B1-jQuery)
پنهان و نمایان کردن عناصر در jQuery
jQuery hide() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_hide)
نشان دادن چگونگی استفاده از متد ()hide در jQuery
jQuery hide() & show() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_hide_show)
نشان دادن چگونگی استفاده از متدهای ()hide و ()show در jQuery
jQuery toggle() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_toggle)
متد ()toggle بین متدهای ()hide و ()show حرکت می کند
jQuery hide() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_hide_explanations)
یک مثال دیگر از متد ()hide
توضیح مثال ها (http://beyamooz.com/jquery/188-effect/594-%D9%BE%D9%86%D9%87%D8%A7%D9%86-%D9%88-%D9%86%D9%85%D8%A7%DB%8C%D8%A7%D9%86-%DA%A9%D8%B1%D8%AF%D9%86-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D8%AF%D8%B1-jQuery)
محو کردن عناصر در jQuery
jQuery fadeIn() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_fadein)
نشان دادن چگونگی استفاده از متد ()fadeIn در jQuery
jQuery fadeOut() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_fadeout)
نشان دادن چگونگی استفاده از متد ()fadeOut در jQuery
jQuery fadeToggle() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_fadetoggle)
نشان دادن چگونگی استفاده از متد ()fadeToggle در jQuery
jQuery fadeTo() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_fadeto)
نشان دادن چگونگی استفاده از متد ()fadeTo در jQuery
توضیح مثال ها (http://beyamooz.com/jquery/188-effect/595-%D9%85%D8%AD%D9%88-%DA%A9%D8%B1%D8%AF%D9%86-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1)
پنهان و نمایان کردن عناصر بصورت اسلایدی در jQuery
jQuery slideDown() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_slide_down)
نشان دادن چگونگی استفاده از متد ()slideDown در jQuery
jQuery slideUp() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_slide_up)
نشان دادن چگونگی استفاده از متد ()slideUp در jQuery
jQuery slideToggle() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_slide_toggle)
نشان دادن چگونگی استفاده از متد ()slideToggle در jQuery
توضیح مثال ها (http://beyamooz.com/jquery/188-effect/596-%D9%BE%D9%86%D9%87%D8%A7%D9%86-%DA%A9%D8%B1%D8%AF%D9%86-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D8%A8%D8%B5%D9%88%D8%B1%D8%AA-%D8%A7%D8%B3%D9%84%D8%A7%DB%8C%D8%AF%DB%8C)
متحرک سازی در jQuery
jQuery animate() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_animation1)
یک مثال ساده از چگونگی استفاده از متد ()animate
jQuery animate() - CSS properties (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_animation1_multicss)
چگونه با استفاده از متد ()animate، چندین خصوصیت CSS را روی عنصر انتخاب شده اعمال نماییم
jQuery animate() - relative values (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_animation1_relative)
می توان خصوصیت ها را نسبت به مقادیر فعلی شان، مقدار دهی نمود (مقدار دهی نسبی در متد ()animate)
jQuery animate() - using pre-defined values (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_animation1_toggle)
می توان خصوصیت ها را با مقادیر "show", "hide" و یا "toggle" مقداردهی نمود
jQuery animate() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_animation)
اگر از متد ()animate چندین بار پشت سر هم استفاده کنید، jQuery یک صف داخلی از آنها ایجاد می کند. سپس آنها را یکی بعد از دیگری فراخوانی می کند
jQuery animate() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_animation2)
در این مثال، ابتدا عنصر <div> به سمت راست حرکت می کند و سپس اندازه متن داخل آن افزایش می یابد
توضیح مثال ها (http://beyamooz.com/jquery/188-effect/597-%D9%85%D8%AA%D8%AD%D8%B1%DA%A9-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%AF%D8%B1-jQuery)
متوقف کردن متحرک سازی در jQuery
jQuery stop() sliding (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_stop_slide)
نشان دادن چگونگی استفاده از متد ()stop در jQuery
jQuery stop() animation (with parameters) (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_stop_params)
نشان دادن چگونگی استفاده از متد ()stop در jQuery (همراه با پارامتر)
توضیح مثال ها (http://beyamooz.com/jquery/188-effect/598-%D9%85%D8%AA%D9%88%D9%82%D9%81-%DA%A9%D8%B1%D8%AF%D9%86-%D9%85%D8%AA%D8%AD%D8%B1%DA%A9-%D8%B3%D8%A7%D8%B2%DB%8C-)
برگرداندن محتوی یک عنصر و یا مقدار یک خصوصیت در jQuery
jQuery text() and html() - Get content (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_html_get)
برگردان محتوی یک عنصر HTML با استفاده از متدهای ()text و ()html
jQuery val() - Get content (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_val_get)
برگردان محتوی یک فیلد با استفاده از متد ()val
jQuery attr() - Get attribute value (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_attr_get)
برگرداندن مقدار یک خصوصیت با استفاده از متد ()attr
توضیح مثال ها (http://beyamooz.com/jquery/189-html/601-%D8%A8%D8%B1%DA%AF%D8%B1%D8%AF%D8%A7%D9%86%D8%AF%D 9%86-%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D8%AF%D8%B1-jQuery)
تنظیم محتوایِ عناصر و یا مقدار خصوصیت ها در jQuery
jQuery text(), html(), and val() - Set content (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_html_set)
تنظیم محتوی با استفاده از متدهای ()text و ()html و ()val
jQuery text() and html() - Set content with a callback function (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_html_callback)
تنظیم محتوی با استفاده از متدهای ()text و ()html همراه با تابع callback
jQuery attr() - Set attribute value (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_attr_set)
تنظیم مقدار یک خصوصیت با استفاده از متد ()attr
jQuery attr() - Set multiple attribute values (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_attr_set2)
تنظیم مقدار برای چند خصوصیت بصورت همزمان با استفاده از متد ()attr
jQuery attr() - Set attribute value with a callback function (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_attr_callback)
تنظیم مقدار خصوصیت با استفاده از متد ()attr همراه با تابع callback
توضیح مثال ها (http://beyamooz.com/jquery/189-html/602-%D9%85%D9%82%D8%AF%D8%A7%D8%B1%D8%AF%D9%87%DB%8C-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D8%AF%D8%B1-jQuery)
اضافه کردن محتوی یا عنصر جدید در jQuery
jQuery append() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_html_append)
اضافه کردن محتوی در انتهای عناصر انتخاب شده
jQuery prepend() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_html_prepend)
اضافه کردن محتوی در ابتدای عناصر انتخاب شده
jQuery append() - Insert several new elements (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_html_append2)
در این مثال، به سه روش مختلف، سه عنصر <p> ایجاد کرده ایم و سپس با استفاده از متد ()append آنها را به انتهای عنصر <body> اضافه کرده ایم
jQuery after() & before() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_html_after)
اضافه کردن محتوای قبل و بعد از عناصر انتخاب شده
jQuery after() - Insert several new elements (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_html_after2)
در این مثال، به سه روش مختلف، سه عنصر جدید ایجاد کرده ایم و سپس با استفاده از متد ()after آنها را بعد از عنصر <img> اضافه کرده ایم
توضیح مثال ها (http://beyamooz.com/jquery/189-html/603-%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-%D9%85%D8%AD%D8%AA%D9%88%DB%8C)
حذف کردن محتوی یا عنصر HTML در jQuery
jQuery remove() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_remove)
حذف کردن عنصر/عناصر انتخاب شده
jQuery empty() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_empty)
حذف کردن تمام فرزندان عنصر/عناصر انتخاب شده
jQuery remove() - with a parameter (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_remove2)
فیلتر کردن عناصر انتخاب شده برای حذف شدن
توضیح مثال ها (http://beyamooz.com/jquery/189-html/604-%D8%AD%D8%B0%D9%81-%DA%A9%D8%B1%D8%AF%D9%86-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1)
دستکاری ظاهر عناصر HTML
jQuery addClass() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_addclass)
اضافه کردن یک کلاس به عناصر انتخاب شده
jQuery addClass() - Multiple classes (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_addclass2)
اضافه کردن چند کلاس به عنصر انتخاب شده
jQuery removeClass() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_removeclass)
حذف کردن یک یا چند کلاس از عنصر/عناصر انتخاب شده
jQuery toggleClass() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dom_toggleclass)
حرکت بین متدهای ()addClass و ()removeClass
توضیح مثال ها (http://beyamooz.com/jquery/189-html/605-%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C-%D8%B8%D8%A7%D9%87%D8%B1-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-)
متد ()css در jQuery
jQuery css() - return CSS property (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_css_getcolor)
این مثال، مقدار خصوصیت "background-color" تنظیم شده روی اولین تگ <p> را برمی گرداند
jQuery css() - set CSS property (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_css_setcolor)
در این مثال، خصوصیت "background-color" روی تمام تگ های <p> با مقدار "yellow" تنظیم می شود
jQuery css() - set CSS properties (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_css_set_multiple)
تنظیم چندین خصوصیت CSS
توضیح مثال ها (http://beyamooz.com/jquery/189-html/606-%D9%85%D8%AA%D8%AF-%28%29css-%D8%AF%D8%B1-jQuery)
متدهای کار با ابعاد در jQuery
jQuery - return width() and height() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dim_width_height)
در این مثال، مقدار خصوصیت های width و height عنصر با شناسه "div1" نمایش داده می شود
jQuery - return innerWidth() and innerHeight() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dim_innerwidth_height )
در این مثال، مقدار خصوصیت های width و height عنصر با شناسه "div1" نمایش داده می شود، این مقدار شامل اندازه padding نیز هست
jQuery - return outerWidth() and outerHeight() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dim_outerwidth_height )
در این مثال، مقدار خصوصیت های width و height عنصر با شناسه "div1" نمایش داده می شود، این مقدار شامل اندازه padding و border نیز هست
jQuery - return outerWidth(true) and outerHeight(true) (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dim_outerwidth_height 2)
اگر مقدار "true" به متد ()outerHeight ارسال شود، مقدار خصوصیت height شامل مقادیر padding و border و margin نیز خواهد شد
jQuery - return width() and height() of document and window (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dim_width_height2)
در این مثال، مقدار خصوصیت های width و height عنصر "document" (سند HTML) و عنصر "window" (پنجره مرورگر) نمایش داده می شود
jQuery - set width() and height() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_dim_width_height_set)
در این مثال، مقدار خصوصیت های width و height عنصر با شناسه "div1" با مقدار "500" تنظیم شده است
توضیح مثال ها (http://beyamooz.com/jquery/189-html/607-%D9%85%D8%AA%D8%AF%D9%87%D8%A7%DB%8C-%DA%A9%D8%A7%D8%B1-%D8%A8%D8%A7-%D8%A7%D8%A8%D8%B9%D8%A7%D8%AF-%D8%AF%D8%B1-jQuery%20%20)
متد ()load در jQuery
jQuery load() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_ajax_load)
در این مثال، محتوای فایل "demo_test.txt" داخل عنصر با شناسه "div1" بارگذاری می شود
jQuery load() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_ajax_load2)
در این مثال، محتوای عنصر با شناسه "p1" در فایل "demo_test.txt" داخل عنصر با شناسه "div1" بارگذاری می شود
jQuery load() - with callback (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_ajax_load_callback)
استفاده از متد ()load همراه با تابع callback
توضیح مثال ها (http://beyamooz.com/jquery/190-ajax/609-%D9%85%D8%AA%D8%AF-%28%29load-%D8%AF%D8%B1-jQuery%20%20)
درخواست اطلاعات از سرور: GET در مقابل POST
jQuery get() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_ajax_get)
در این مثال، با استفاده از متد ()get.$ داده ها را از یک فایل PHP روی سرور بازیابی می کنیم
jQuery post() (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_ajax_post)
در این مثال، با استفاده از متد ()post.$ دو متغییر name و city را همراه درخواست به سرور ارسال کرده و با توجه به مقادیر آنها داده ها را از یک فایل PHP روی سرور بازیابی می کنیم
توضیح مثال ها (http://beyamooz.com/jquery/190-ajax/610-%D9%85%D8%AA%D8%AF%D9%87%D8%A7%DB%8C-%28%29get-%D9%88-%28%29post)
مثال های متفرقه
map hilight (http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_maphilight)
در این مثال، با استفاده از پلاگین jquery.maphilight.js زمانی که موس روی نواحی مشخص شده ای از عکس قرار می گیرد، آن قسمت hilight می شود.
منبع از سایت بیاموز (http://www.beyamooz.com)