Manipulation در جی کوئری | کار با کلاس‌های CSS

این قسمت از آموزش Manipulation در جی کوئری را با این سوال آغاز می کنیم که چگونه عناصر و atrribute ها را از DOM به کمک jQuery حذف کنیم؟ jQuery دسته ای از متدها را جهت حذف عناصر و یا محتوا از DOM آماده کرده است، متدهایی مانند ()empty() remove() ،unwrap و ...

متد ()empty در jQuery

متد ()empty همه محتوای عنصر و عناصر فرزندش و محتوای عناصر فرزند را حذف می کند. در کد مثال زیر ملاحظه می کنید که بعد از کلیک روی دکمه، محتوای داخل همه عناصری که دارای کلاسی به نام container می باشند، حذف می شود:

<script>
$(document).ready(function(){
    // Empty container element
    $("button").click(function(){
       $(".container").empty();
    });
});
</script>

نکته: با توجه به استانداردهای کنسرسیوم جهانی وب و یا همان W3C، هر رشته متن درون یک عنصر فرزند آن عنصر محسوب می شود.

متد ()remove در jQuery

متد ()remove در jQuery هر عنصری را که در ورودی به آن داده شود، به همراه محتوای داخلی آن عنصر را از DOM حذف می کند. علاوه بر عنصر، تمامی رویدادهایی که در رابطه با عنصر هستند (رویدادها روی آن عنصر بی اثر می شوند)، دیتاها و اطلاعات آن ها و همچنین مواردی که توسط jQuery نیز اضافه شده باشد، کاملا حذف می شوند.

در کد مثال زیر مشاهده می کنید که تمامی عناصر <p> که دارای کلاسی تحت عنوان hint. هستند، با کلیک روی دکمه از DOM حذف می گردند. عناصر تو در تو میان این پاراگراف ها نیز حذف می گردند:

<script>
$(document).ready(function(){
    // Removes paragraphs with class "hint" from DOM
    $("button").click(function(){
       $("p.hint").remove();
    });
});
</script>

متد ()remove همچنین می تواند شامل یک پارامتر اختیاری به عنوان selector باشد. به عنوان مثال کد قسمت قبل را می توان با همان کارکرد به صورت زیر بازنویسی کرد:

<script>
$(document).ready(function(){
    // Removes paragraphs with class "hint" from DOM
    $("button").click(function(){
       $("p").remove(".hint");
    });
});
</script>

نکته: شما می توانید چندین selector را به متد ()remove ارسال کنید که جهت فیلتر کردن چند عنصر کاربرد دارد. برای مثال: ("remove(".hint, .demo که روی عناصری که دارای کلاس hint. و یا عناصری که دارای کلاس demo. می باشند، تأثیر می گذارند.

متد ()unwrap در jQuery

متد ()unwrap همه عناصر والدِ عناصری را که توسط Selector ها انتخاب شده اند، از DOM حذف می کند. این عمل دقیقا مخالف عمل متد ()wrap که قبلا راجع به آن توضیح داده شده است، می باشد.

در کد مثال زیر مشاهده می کنید که عناصر والد پاراگراف ها یا همان تگ های <p> با کلیک روی دکمه حذف می شوند:

<script>
$(document).ready(function(){
    // Removes the paragraph's parent element
    $("button").click(function(){
       $("p").unwrap();
    });
});
</script>

متد ()removeAttr در jQuery

متد ()removeAttr، یک صفت یا attribute را از عناصر انتخاب شده حذف می کند. در کد مثال زیر مشاهده می کنید که با کلیک روی دکمه، صفت href از لینک ها یا همان تگ های <a> حذف می شوند:

<script>
$(document).ready(function(){
    // Removes the hyperlink's href attribute
    $("button").click(function(){
       $("a").removeAttr("href");
    });
});
</script>

حذف و اضافه کردن کلاس های CSS با jQuery

در jQuery، شما می توانید متدهایی را برای manipulation بیابید که با آن ها می توانید به حذف و یا اضافه کردن کلاسی به عنصری اقدام کنید. متدهایی از جمله: ()addClass() ،removeClass() ،toggleClass و... تا به دستکاری و تغییر یا manipulate کردن کلاس های css ای که در عناصر Html وجود دارند، اقدام کنید.

متد ()addClass در jQuery

متد ()addClass در jQuery یک یا چند کلاس را به عناصر انتخاب شده اضافه می کند. در کد مثال زیر کلاس page-header. به تگ های <h1> و کلاس highlight. به آن دسته از تگ های <p> که خود دارای کلاس hint. می باشند، با کلیک روی دکمه اضافه می گردند:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery addClass() Demo</title>
<style>
    .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>
$(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 چند کلاس را همزمان به عناصر انتخاب شده اضافه کنید. مثلا در کد زیر مشاهده می کنید که لیستی از کلاس ها به تگ <h1> اضافه می شوند:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery addClass() Demo</title>
<style>
    .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>
$(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 در jQuery

به طریق مشابه می توانید با استفاده از متد ()removeClass در jQuery می توانید به حذف یک یا چند یا همه کلاس های عناصر انتخاب شده در یک زمان اقدام کنید. در کد زیر با کلیک روی دکمه، کلاس page-header از تگ <h1>، کلاس hint. و highlight. را از تگ <p> حذف کنید:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery removeClass() Demo</title>
<style>
    .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>
$(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 آرگومانی در ورودی ندهید، این متد اقدام به حذف همه کلاس های عناصر انتخاب شده می کند. کد زیر یک مثال از این عمل می باشد:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery removeClass() Demo</title>
<style>
    .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>
$(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>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery removeClass() Demo</title>
<style>
    .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>
$(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 در jQuery

متد ()toggleClass به طرز جالبی اقدام به حذف و اضافه کردن یک یا چند کلاس به عناصر انتخاب شده می کند. به این صورت که اگر کلاس در عنصر انتخاب شده موجود باشد، آن کلاس حذف می شود. اگر کلاس مورد نظر در عنصر انتخاب شده وجود نداشته باشد، آن کلاس به ان عنصر خاص اضافه می گردد. مثال زیر یک نمونه کامل از کارکرد متد ()toggleClass را ارائه می دهد:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery toggleClass() Demo</title>
<style>
    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>
$(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>

هم اکنون که با ویژگی remove در jQuery آشنا شده اید و مثال هایی از Manipulation در جی کوئری در رابطه با کلاس های css را مشاهده نمودید، چند مبحث دیگر از manipulation در jQuery باقی مانده است، که آن ها را در قسمت بعد بررسی می کنیم.