آموزش جی‌کوئری(jQuery)[قسمت 4]

دسته بندی ها : آموزش, آموزش جاوا اسکریپت, برنامه‌نویسی 28 فروردین 1399 امیرمحمد جوشقانی 386 بازدید
آموزش جی‌کوئری

توی قسمت قبل، با افکت‌ها در جی‌کوئری بیشتر آشنا شدیم. حالا توی این قسمت افکت‌ها رو کامل یادمیگیریم و میریم سراغ وررفتن با HTML داخل جی کوئری 😀

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

داخل این قسمت می‌پردازیم به دو قسمت جامونده از جلسه قبل!

متد stop

این متد، تمام یا یکی از افکت‌های درحال اجرا (یا صف بندی شده) را متوقف میکند.

سینتکس stop:

stopAll: مقادیر استفاده شده در این پارامتر باید بولین باشد (true یا false). بطور پیشفرض false است. اگر true شود، تمام افکت‌های در صف اجرا نیز غیرفعال میشوند.
goToEnd: یک از دو مقدار true یا false را میگیرد. بطور پیشفرض false است اما اگر true باشد، در هنگام اجرای متد stop، افکت به پایان خود میرسد و تمام میشود.

مثال:

خروجی:

This is a paragraph! click me bellow for doing animation

chaining در جی‌کوئری

chaining به معنی زنجیرکردن است. و بدین منظور، میتوان چندین متد را با یک بار انتخاب کردن، روی یک انتخابگر اجرا نمود. (#ویکی‌پدیا_طور 😀 )

مثال:

خروجی:

HTML در جی‌کوئری

داخل این قسمت، شما میتونید کدهای HTML عناصر رو دستکاری کنید، مقادیر داخلشون رو دریافت کنید و تغییرشون بدید.

دریافت اطلاعات

متدهای موجود:

دریافت کد HTML()html
دریافت متن داخل عنصر()text
دریافت مقدار داخل ورودی‌ها (input)()val
دریافت اتریبیوت‌های عنصر()attr
دریافت اطلاعات

مثال:

خروجی:

جایگذاری اطلاعات

یکی از بیشترین استفاده های جی‌کوئری این قسمتشه. متدهای موجود:

تغییر کد HTML عنصر به “HTML CODE”(“HTML CODE”)html
تغییر متن داخل عنصر به TEXT(“TEXT”)text
تغییر مقدار داخل ورودی به “TEXT”val(“TEXT”)
تغییر یا ایجاد اتریبیوت name و قرار دادن مقدار آن به value(“name”,”value”)attr
جایگذاری اطلاعات

کمی توضیحات بیشتر: در متد های بالا میتوان به جای متن یا HTML، تابع نیز قرار داد. تابعی که خروجی آن جایگزین متن میشود. یعنی شما میتوانید مقدار name در متد attr را با استفاده از یک تابع به صورت مقدار قبلی+مقدار جدید قرار دهید .چطور؟

مثال:

خروجی:

افزودن اطلاعات

متدهای موجود:

اضافه کردن کدهای HTML به انتهای عنصر انتخابیappend
اضافه کردن کدهای HTML به ابتدای عنصر انتخابیprepend
اضافه کردن کدهای HTML بعد از عنصر انتخابیafter
اضافه کردن کدهای HTML قبل از عنصر انتخابیbefore
افزودن اطلاعات

مثال:

خروجی:

Iranian PG

حذف اطلاعات

متدهای موجود:

حذف عنصرremove
تخلیه عنصرempty
حذف اطلاعات

کمی توضیحات بیشتر: در متدهای بالا، میتوان چندین انتخابگر را قرار داد. برای مثال، کد زیر، تمامی تگهای div با کلاسهای ex-div و یا آی‌دی t-div را تخلیه میکند:

کارکردن با css در جی‌کوئری

یکی از نقاط عطف جی‌کوئری، همیجاست. خیلی خیلی راحت میتونید با کدهای css ور برید و دستکاریشون کنید.

متدهای موجود:

افزودن کلاس cssaddClass
حذف کلاس cssremoveClass
حذف/افزودن کلاس csstoggleClass
ایجاد/تغییر ویژگی‌های csscss
css در جی‌کوئری

سینتکس addClass، removeClass و toggleClass:

سینتکس css:

به پایان این قسمت رسیدیم.

اگر قسمت قبل رو ندیدین، اینجاست!

تا قسمت بعد، همراه ما باشید!

امیرمحمد جوشقانی
امیرمحمد جوشقانی

راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) عضویت در کانال

مطالب زیر را حتما بخوانید:

نظرات کاربران

    دیدگاهتان را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    لینک کوتاه :

    عضویت در خبرنامه ویژه مشتریان سیگما پلاس

    با عضویت در خبرنامه ویژه سیگما پلاس از آخرین جشنواره های سایت باخبر شوید!