مثال های jQuery

گزینشگرها در jQuery

$("p").hide()

پنهان کردن تمام عناصر <p>

$("#test").hide()

پنهان کردن عنصر با شناسه "test"

$(".test").hide()

پنهان کردن تمام عناصر با کلاس "test"

$(this).hide()

پنهان کردن عنصر جاری

توضیح مثال ها

رویدادها در jQuery

jQuery click()

نشان دادن چگونگی استفاده از رویداد ()click در jQuery

jQuery dblclick()

نشان دادن چگونگی استفاده از رویداد ()dblclick در jQuery

jQuery mouseenter()

نشان دادن چگونگی استفاده از رویداد ()mouseenter در jQuery

jQuery mouseleave()

نشان دادن چگونگی استفاده از رویداد ()mouseleave در jQuery

jQuery mousedown()

نشان دادن چگونگی استفاده از رویداد ()mousedown در jQuery

jQuery mouseup()

نشان دادن چگونگی استفاده از رویداد ()mouseup در jQuery

jQuery hover()

نشان دادن چگونگی استفاده از رویداد ()hover در jQuery

jQuery focus() & blur()

نشان دادن چگونگی استفاده از رویدادهای ()focus و ()blur در jQuery

توضیح مثال ها

پنهان و نمایان کردن عناصر در jQuery

jQuery hide()

نشان دادن چگونگی استفاده از متد ()hide در jQuery

jQuery hide() & show()

نشان دادن چگونگی استفاده از متدهای ()hide و ()show در jQuery

jQuery toggle()

متد ()toggle بین متدهای ()hide و ()show حرکت می کند

jQuery hide()

یک مثال دیگر از متد ()hide

توضیح مثال ها

محو کردن عناصر در jQuery

jQuery fadeIn()

نشان دادن چگونگی استفاده از متد ()fadeIn در jQuery

jQuery fadeOut()

نشان دادن چگونگی استفاده از متد ()fadeOut در jQuery

jQuery fadeToggle()

نشان دادن چگونگی استفاده از متد ()fadeToggle در jQuery

jQuery fadeTo()

نشان دادن چگونگی استفاده از متد ()fadeTo در jQuery

توضیح مثال ها

پنهان و نمایان کردن عناصر بصورت اسلایدی در jQuery

jQuery slideDown()

نشان دادن چگونگی استفاده از متد ()slideDown در jQuery

jQuery slideUp()

نشان دادن چگونگی استفاده از متد ()slideUp در jQuery

jQuery slideToggle()

نشان دادن چگونگی استفاده از متد ()slideToggle در jQuery

توضیح مثال ها

متحرک سازی در jQuery

jQuery animate()

یک مثال ساده از چگونگی استفاده از متد ()animate

jQuery animate() - CSS properties

چگونه با استفاده از متد ()animate، چندین خصوصیت CSS را روی عنصر انتخاب شده اعمال نماییم

jQuery animate() - relative values

می توان خصوصیت ها را نسبت به مقادیر فعلی شان، مقدار دهی نمود (مقدار دهی نسبی در متد ()animate)

jQuery animate() - using pre-defined values

می توان خصوصیت ها را با مقادیر  "show", "hide" و یا "toggle" مقداردهی نمود

jQuery animate()

اگر از متد ()animate چندین بار پشت سر هم استفاده کنید، jQuery یک صف داخلی از آنها ایجاد می کند. سپس آنها را یکی بعد از دیگری فراخوانی می کند

jQuery animate()

در این مثال، ابتدا عنصر <div> به سمت راست حرکت می کند و سپس اندازه متن داخل آن افزایش می یابد

توضیح مثال ها

متوقف کردن متحرک سازی در jQuery

jQuery stop() sliding

نشان دادن چگونگی استفاده از متد ()stop در jQuery

jQuery stop() animation (with parameters)

نشان دادن چگونگی استفاده از متد ()stop در jQuery (همراه با پارامتر)

توضیح مثال ها

برگرداندن محتوی یک عنصر و یا مقدار یک خصوصیت در jQuery

jQuery text() and html() - Get content

برگردان محتوی یک عنصر HTML با استفاده از متدهای ()text و ()html

jQuery val() - Get content

برگردان محتوی یک فیلد با استفاده از متد ()val

jQuery attr() - Get attribute value

برگرداندن مقدار یک خصوصیت با استفاده از متد ()attr

توضیح مثال ها

تنظیم محتوایِ عناصر و یا مقدار خصوصیت ها در jQuery

jQuery text(), html(), and val() - Set content

تنظیم محتوی با استفاده از متدهای ()text و ()html و ()val

jQuery text() and html() - Set content with a callback function

تنظیم محتوی با استفاده از متدهای ()text و ()html همراه با تابع callback

jQuery attr() - Set attribute value

تنظیم مقدار یک خصوصیت با استفاده از متد ()attr

jQuery attr() - Set multiple attribute values

تنظیم مقدار برای چند خصوصیت بصورت همزمان با استفاده از متد ()attr

jQuery attr() - Set attribute value with a callback function

تنظیم مقدار خصوصیت با استفاده از متد ()attr همراه با تابع callback

توضیح مثال ها

اضافه کردن محتوی یا عنصر جدید در jQuery

jQuery append()

اضافه کردن محتوی در انتهای عناصر انتخاب شده

jQuery prepend()

اضافه کردن محتوی در ابتدای عناصر انتخاب شده

jQuery append() - Insert several new elements

در این مثال، به سه روش مختلف، سه عنصر <p> ایجاد کرده ایم و سپس با استفاده از متد ()append آنها را به انتهای عنصر <body> اضافه کرده ایم

jQuery after() & before()

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

jQuery after() - Insert several new elements

در این مثال، به سه روش مختلف، سه عنصر جدید ایجاد کرده ایم و سپس با استفاده از متد ()after آنها را بعد از عنصر <img> اضافه کرده ایم

توضیح مثال ها

حذف کردن محتوی یا عنصر HTML در jQuery

jQuery remove()

حذف کردن عنصر/عناصر انتخاب شده

jQuery empty()

حذف کردن تمام فرزندان عنصر/عناصر انتخاب شده

jQuery remove() - with a parameter

فیلتر کردن عناصر انتخاب شده برای حذف شدن

توضیح مثال ها

دستکاری ظاهر عناصر HTML

jQuery addClass()

اضافه کردن یک کلاس به عناصر انتخاب شده

jQuery addClass() - Multiple classes

اضافه کردن چند کلاس به عنصر انتخاب شده

jQuery removeClass()

حذف کردن یک یا چند کلاس از عنصر/عناصر انتخاب شده

jQuery toggleClass()

حرکت بین متدهای ()addClass و ()removeClass

توضیح مثال ها

متد ()css در jQuery

jQuery css() - return CSS property

این مثال، مقدار خصوصیت "background-color" تنظیم شده روی اولین تگ <p> را برمی گرداند

jQuery css() - set CSS property

در این مثال، خصوصیت "background-color" روی تمام تگ های <p> با مقدار "yellow" تنظیم می شود

jQuery css() - set CSS properties

تنظیم چندین خصوصیت CSS

توضیح مثال ها

متدهای کار با ابعاد در jQuery

jQuery - return width() and height()

در این مثال، مقدار خصوصیت های width و height عنصر با شناسه "div1" نمایش داده می شود

jQuery - return innerWidth() and innerHeight()

در این مثال، مقدار خصوصیت های width و height عنصر با شناسه "div1" نمایش داده می شود، این مقدار شامل اندازه padding نیز هست

jQuery - return outerWidth() and outerHeight()

در این مثال، مقدار خصوصیت های width و height عنصر با شناسه "div1" نمایش داده می شود، این مقدار شامل اندازه padding و border نیز هست

jQuery - return outerWidth(true) and outerHeight(true)

اگر مقدار "true" به متد ()outerHeight ارسال شود، مقدار خصوصیت height شامل مقادیر padding و border و margin نیز خواهد شد

jQuery - return width() and height() of document and window

در این مثال، مقدار خصوصیت های width و height عنصر "document" (سند HTML) و عنصر "window" (پنجره مرورگر) نمایش داده می شود

jQuery - set width() and height()

در این مثال، مقدار خصوصیت های width و height عنصر با شناسه "div1" با مقدار "500" تنظیم شده است

توضیح مثال ها

متد ()load در jQuery

jQuery load()

در این مثال، محتوای فایل "demo_test.txt" داخل عنصر با شناسه "div1" بارگذاری می شود

jQuery load()

در این مثال، محتوای عنصر با شناسه "p1" در فایل "demo_test.txt" داخل عنصر با شناسه "div1" بارگذاری می شود

jQuery load() - with callback

استفاده از متد ()load همراه با تابع callback

توضیح مثال ها

درخواست اطلاعات از سرور: GET در مقابل POST

jQuery get()

در این مثال، با استفاده از متد ()get.$ داده ها را از یک فایل PHP روی سرور بازیابی می کنیم

jQuery post()

در این مثال، با استفاده از متد ()post.$ دو متغیر name و city را همراه درخواست به سرور ارسال کرده و با توجه به مقادیر آنها داده ها را از یک فایل PHP روی سرور بازیابی می کنیم

توضیح مثال ها

مثال های متفرقه

map hilight

در این مثال، با استفاده از پلاگین jquery.maphilight.js زمانی که موس روی نواحی مشخص شده ای از عکس قرار می گیرد، آن قسمت hilight می شود.