آموزش addClass و removeClass و toggleClass در جی کوئری

هدایت عباسی آموزش جی کوئری

آموزش ویدئویی addClass و removeClass و toggleClass در جی کوئری

دانلود فیلم و آموزش ویدئویی addClass و removeClass و toggleClass در جی کوئری. در این فیلم با این دستورات آشنا می شوید و نحوه کار با آنها را فرا می گیرید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش جی کوئری (Jquery tutorial) از تاپ سایت 98 قصد داریم به آموزش دستورات addClass و removeClass و toggleClass در جی کوئری با ذکر مثال بپردازیم.

توجه : کدها همه تست شده می باشد و کاملا صحیح است. چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

خطا

چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

در صورتی که کد بالا اجرا نمی شود می توانید بجای cdn از فایل جی کوئری استفاده نمایید.

بایستی فایل جی کوئری را دانلود کرده باشید.

آموزش دانلود جی کوئری

آموزش دستور و متد addClass در جی کوئری

در این قسمت به آموزش دستور و متد addClass در جی کوئری می پردازیم.

متد addClass در جی کوئری برای اضافه کردن کلاس به یک یا چند عنصر بکار می رود.

ما ابتدا یک کلاس با نام top ایجاد کرده ایم که رنگ متن ، سایز متن و توپری متن را تغییر می دهد.

در مثال زیر با کلیک روی دکمه add ، کلاس top به تگ h1 اضافه می شود.

آموزش دستور و متد removeClass در جی کوئری

در این قسمت به آموزش دستور و متد removeClass در جی کوئری می پردازیم.

متد removeClass در جی کوئری برای حذف کلاس از تگ ها و عناصر html بکار می رود.

در مثال زیر با کلیک روی دکمه remove ، کلاس top به تگ h1 حذف می شود.

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#add").click(function(){
$("h1").addClass("top");
});

$("#rem").click(function(){
$("h1").removeClass("top");
});
});
</script>
<style>
.top {
font-weight: bold;
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<button id="add">Add class</button>
<button id="rem">remove class</button>
</body>
</html>

آموزش دستور و متد toggleClass در جی کوئری

در این قسمت به آموزش دستور و متد toggleClass در جی کوئری می پردازیم.

متد toggleClass در جی کوئری برای اضافه یا حذف کلاس از تگ ها و عناصر html بکار می رود.

با کلیک روی دکمه کلاس اضافه می شود و با کلیک دوم کلاس حذف می شود.

در مثال زیر با کلیک روی دکمه toggle ، کلاس top با کلیک اول به تگ h1 اضافه و با کلیک بعدی حذف می شود.

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#add").click(function(){
$("h1").toggleClass("top");
});

$("#rem").click(function(){
$("h1").removeClass("top");
});
});
</script>
<style>
.top {
font-weight: bold;
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<button id="toggle">toggle</button>
</body>
</html>

امیدواریم این آموزش برای شما مفید باشد. کدهای بالا تست شده می باشند.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید