mmnoody2006
جمعه 04 شهریور 1390, 23:38 عصر
با سلام به همه دوستان . امروز با ذکر یک مثال ساده به بررسی چند تابع ابتدایی jquery می پردازیم که امیدوارم مفید واقع شود .
ابتدا یک فایل html ساده با محتویات زیر بسازید :
http://www.dl.emroozweb.com/dl/007/001/001.JPG
حالا محتویات قسمت head را به شکل زیر ویرایش کنید :
http://www.dl.emroozweb.com/dl/007/001/002.JPG
در قسمت body هم سه پاراگراف به شکل زیر اضافه کنید :
http://www.dl.emroozweb.com/dl/007/001/003.JPG
با اجرای فایل در مرورگر چنین شکلی خواهید داشت :
http://www.dl.emroozweb.com/dl/007/001/004.JPG
با حرکت ماوس روی هر کدام از پاراگراف ها رنگ پس زمینه به زرد تبدیل می شود و نکته جالبتر با کلیک روی هرکدام از آنها می توان حذفش کرد.
بررسی کدها :
http://www.dl.emroozweb.com/dl/007/001/005.JPG
بخش آبی : کدهای جی کوئری در این بخش قرار می گیرند . البته می توانید این بخش را حذف کنید ولی بعد از اینکار باید کدهای جی کوئری را بعد از پاراگراف ها قرار دهید تا اجرا شود.
بخش قرمز : این بخش از جی کوئری به صفحه فرمان می دهد تا بعد از کلیک شدن روی پاراگراف (p) این بخش را بصورت پیمایش بسوی بالا پنهان کند که اینکار بوسیله تابع slideup انجام می شود.
بخش سبز : این کد جی کوئری در واقع وقتی ماوس روی یک پاراگراف پیمایش می کند (hover) یک کلاس به پاراگراف اضافه می کند( hilite اسم کلاسی است که قبلا در قسمت head نوشته ایم) و وقتی از روی آن عبور می کند کلاس را حذف می کند.
برای دانلود نمونه برنامه اینجا (http://www.dl.emroozweb.com/dl/007/001/slidup-256688544.zip)کلیک کنید.
ابتدا یک فایل html ساده با محتویات زیر بسازید :
http://www.dl.emroozweb.com/dl/007/001/001.JPG
حالا محتویات قسمت head را به شکل زیر ویرایش کنید :
http://www.dl.emroozweb.com/dl/007/001/002.JPG
در قسمت body هم سه پاراگراف به شکل زیر اضافه کنید :
http://www.dl.emroozweb.com/dl/007/001/003.JPG
با اجرای فایل در مرورگر چنین شکلی خواهید داشت :
http://www.dl.emroozweb.com/dl/007/001/004.JPG
با حرکت ماوس روی هر کدام از پاراگراف ها رنگ پس زمینه به زرد تبدیل می شود و نکته جالبتر با کلیک روی هرکدام از آنها می توان حذفش کرد.
بررسی کدها :
http://www.dl.emroozweb.com/dl/007/001/005.JPG
بخش آبی : کدهای جی کوئری در این بخش قرار می گیرند . البته می توانید این بخش را حذف کنید ولی بعد از اینکار باید کدهای جی کوئری را بعد از پاراگراف ها قرار دهید تا اجرا شود.
بخش قرمز : این بخش از جی کوئری به صفحه فرمان می دهد تا بعد از کلیک شدن روی پاراگراف (p) این بخش را بصورت پیمایش بسوی بالا پنهان کند که اینکار بوسیله تابع slideup انجام می شود.
بخش سبز : این کد جی کوئری در واقع وقتی ماوس روی یک پاراگراف پیمایش می کند (hover) یک کلاس به پاراگراف اضافه می کند( hilite اسم کلاسی است که قبلا در قسمت head نوشته ایم) و وقتی از روی آن عبور می کند کلاس را حذف می کند.
برای دانلود نمونه برنامه اینجا (http://www.dl.emroozweb.com/dl/007/001/slidup-256688544.zip)کلیک کنید.