در بخش قبلی با حذف محتوا در jQuery آشنا شدیم. در این قسمت از سری آموزش جی کوئری, نحوه دستکاری کلاس CSS با jQuery یا همان حذف یا افزودن کلاس های CSS در جی کوئری می پردازیم.
دستکاری کلاس CSS با jQuery
جی کوئری چندین متد مثل addClass(), removeClass(), toggleClass() و .. برای انجام عملیات روی کلاس های CSS نسبت داده شده به عناصر HTML ارایه داده است.
متد addClass() جی کوئری
متد addClass() در جی کوئری برای افزودن یک یا چند کلاس به المان های انتخابی اسفتاده می شود.
در مثال زیر با کلیک روی دکمه, یک کلاس .page-header را به <h1> و کلاس .highlight را به المان های <p> به همراه کلاس .hint اضافه می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery addClass() Demo</title> <style type="text/css"> .page-header{ color: red; text-transform: uppercase; } .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h1").addClass("page-header"); $("p.hint").addClass("highlight"); }); }); </script> </head> <body> <h1>Demo Text</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <p class="hint"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p> <button type="button">Add Class</button> </body> </html> |
همچنین می توانید چندین کلاس را همزمان به المان ها اضافه کنید. کافی است که لیست آنها را بصورت جداگانه از هم داخل متد addClass() بصورت زیر مشخص کنید :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery addClass() Demo</title> <style type="text/css"> .page-header{ color: red; text-transform: uppercase; } .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h1").addClass("page-header highlight"); }); }); </script> </head> <body> <h1>Hello World</h1> <p>The quick brown fox jumps over the lazy dog.</p> <button type="button">Add Class</button> </body> </html> |
متد removeClass() جی کوئری
مشابه بالا, می توانید کلاس ها را از المان ها با استفاده از متد removeClass() در جی کوئری حذف کنید.
متد removeClass() می تواند یک کلاس, چندین کلاس یا همه کلاس ها را بصورت یکجا از المان های انتخابی حذف کند.
در مثال زیر با کلیک روی دکمه, می توانید کلاس .page-header را از <h1> و کلاس .hint و .highlight را از المان های <p> حذف کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery removeClass() Demo</title> <style type="text/css"> .page-header{ color: red; text-transform: uppercase; } .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h1").removeClass("page-header"); $("p").removeClass("hint highlight"); }); }); </script> </head> <body> <h1 class="page-header">Demo Text</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <p class="hint highlight"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p> <button type="button">Remove Class</button> </body> </html> |
زمانی که متد removeClass() بدون هیچ آرگومانی صدا زده می شود, همه کلاس های المان های انتخابی حذف می شوند. مثال :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery removeClass() Demo</title> <style type="text/css"> .page-header{ color: red; text-transform: uppercase; } .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h1").removeClass(); $("p").removeClass(); }); }); </script> </head> <body> <h1 class="page-header">Demo Text</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <p class="hint highlight"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p> <button type="button">Remove Class</button> </body> </html> |
متد toggleClass() جی کوئری
متد toggleClass() در جی کوئری یک یا چند کلاس را از المان حذف یا به آن اضافه می کند. به اینصورت که اگر کلاس قبلا وجود داشت آن را حذف می کند و در غیر اینصورت اضافه می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery toggleClass() Demo</title> <style type="text/css"> p{ padding: 10px; cursor: pointer; font: bold 16px sans-serif; } .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).toggleClass("highlight"); }); }); </script> </head> <body> <p>Click on me to toggle highlighting.</p> <p class="highlight">Click on me to toggle highlighting.</p> <p>Click on me to toggle highlighting.</p> </body> </html> |
در مورد دستکاری خصوصیات CSS در بخش بعدی بیشتر یاد می گیرید.
امیدوارم در این بخش آموزش جی کوئری, از دستکاری کلاس CSS با jQuery نهایت استفاده را برده باشید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید
