با سلام به همه دوستان . امروز به ذکر یک مثال ساده به بررسی چند تابع ابتدایی jquery می پردازیم که امیدوارم مفید واقع شود .

ابتدا یک فایل html ساده با محتویات زیر بسازید :

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

در قسمت body هم سه پاراگراف به شکل زیر اضافه کنید :

با اجرای فایل در مرورگر چنین شکلی خواهید داشت :

با حرکت ماوس روی هر کدام از پاراگراف ها رنگ پس زمینه به زرد تبدیل می شود و نکته جالبتر با کلیک روی هرکدام از آنها می توان حذفش کرد.

بررسی کدها :

بخش آبی : کدهای جی کوئری در این بخش قرار می گیرند . البته می توانید این بخش را حذف کنید ولی بعد از اینکار باید کدهای جی کوئری را بعد از پاراگراف ها قرار دهید تا اجرا شود.

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

بخش سبز : این کد جی کوئری در واقع وقتی ماوس روی یک پاراگراف پیمایش می کند (hover) یک کلاس به پاراگراف اضافه می کند( hilite اسم کلاسی است که قبلا در قسمت head نوشته ایم) و وقتی از روی آن عبور می کند کلاس را حذف می کند.

برای دانلود نمونه برنامه اینجا کلیک کنید.