jQuery UI | addClass () Метод

Опубликовано: 5 Января, 2022

Метод addClass () - это встроенный метод в jQuery UI framework, который используется для управления визуальными эффектами пользовательского интерфейса. Этот метод добавляет класс ко всем выбранным элементам вместе с анимацией всех определенных стилей в свойствах CSS. Он в основном управляет методами анимации для отступов текста, ширины, высоты, отступов, полей, размеров шрифта и межбуквенного интервала, обеспечивая плавные переходы эффектов.

Синтаксис:

 $ (селектор) .addClass (имя класса, параметры);

Параметры: этот метод принимает два параметра, как указано выше и описано ниже:

className: этот параметр содержит имя класса, который необходимо добавить.
options: это необязательный параметр.

Возвращаемое значение: возвращает выбранные элементы с добавленным новым именем класса.

Параметры:

duration: этот параметр позволяет вам выбрать продолжительность визуального эффекта в миллисекундах. Тип - число или строка, значение по умолчанию - 400.
Синтаксис:
$( ".selector" ).addClass(className, "fast" );
замедление: этот параметр указывает, какое замедление или прогресс вы хотите для визуального эффекта. Тип - строка, значение по умолчанию - качели .
Синтаксис:
$( ".selector" ).addClass(className, "easeOutBounce" );
complete: этот параметр является методом обратного вызова, который вызывается для каждого совпадающего элемента после завершения визуального эффекта. Тип есть функция.
children: этот параметр указывает, применяется ли визуальный эффект или анимация ко всем его потомкам. Тип является логическим, а значение по умолчанию - false .
очередь: этот параметр указывает, помещается ли визуальный эффект или анимация в очередь эффектов. Тип - логический или строковый, а значение по умолчанию - истина .

Ссылки для jQuery UI:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”></script>
<link
href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css” rel=”stylesheet” type=”text/css” />

Код jQuery для демонстрации работы этого метода с одним классом:
Пример 1:

 <!DOCTYPE html>
 < html >
 
< head >
    < meta charset = "utf-8" >
    < meta name = "viewport" content =
        "width=device-width,initial-scale=1" >
     
    < title >jQuery UI addClass() Example</ title >
     
    < link href =
 " https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css "
        rel = "stylesheet" >
         
    < script src =
 " https://code.jquery.com/jquery-1.10.2.js " ></ script >
    < script src =
 " https://code.jquery.com/ui/1.10.4/jquery-ui.js " ></ script >
     
    < style >
        .welcomeClass {
            width: 200px;
            height: 50px;
            text-align:center;
            padding :10px 10px 10px 10px;
            background-color: lightgreen;
            border: 2px solid green;
        }
        .newClass {
            font-size: 40px;
            background-color: #cccccc;
            color: red;
        }
        .highlight {
            color:#090;
            font-family:Calibri;
            font-size:2em;
            text-shadow:2px 2px #FF0000;
        }
        .height{ height: 10px;}
        .square {
            width: 100px;
            height: 100px;
            text-align: center;
            padding :8px 10px 8px 10px;
            background-color: #cccccc;
        }
         
        .easing-square {
            width: 200px;
            height: 200px;
            padding: 20px;
            background-color: lightgreen;
            border: 2px solid green;
        }
    </ style >
     
    < script type = "text/javascript" >
     
        $(document).ready(function() {
            $('.btnClass').click(function() {
                if (this.id == "addID") {
                    $('#welcomeId').addClass(
                            "newClass", "fast")
                }
                else {
                    $('#welcomeId').removeClass(
                            "newClass", "fast")
                }
            })
             
            $( ".square" ).click(function() {
                $( this ).addClass( "easing-square",
                                    700, "swing" );
                $( this ).text("addclass() method "
                        + "executed successfully!");
            });
        });
    </ script >
 </ head >
 
< body >
    < h1 style = "color:green" >
        GeeksforGeeks
    </ h1 >
     
    < b class = "highlight" >
        jQuery UI addClass method
    </ b >
     
    < div class = "height" ></ div >< br >
     
    < div id = welcomeId class = "welcomeClass" >
        Welcome !
    </ div >
    < div class = "height" ></ div >< br >
     
    < button class = "btnClass" id = "addID" >
        Add Class
    </ button >
     
    < button class = "btnClass" id = "removeID" >
        Remove Class
    </ button >
     
    < div class = "height" > </ div >< br >
    < div class = "square" >Click this </ div >
 </ body >
 
</ html > 

В приведенном выше примере выбранные элементы: «b» и «div» . Класс «подсветка» применяется к элементу «b» . Класс «newClass» применяется к элементу «div» с идентификатором welcomeId . Класс «easing-square» применяется к элементу «div» с классом square с помощью метода .addClass () пользовательского интерфейса jQuery.
Выход:

Код jQuery для демонстрации работы этого метода с несколькими классами:

Проектирование структуры: В следующем коде выбирается элемент «p» и добавляются классы, а именно «красный» , «шрифт» , «отступы» и «граница» с помощью метода .addClass () пользовательского интерфейса jQuery. Следующий код CSS предназначен для определения всех классов для элемента «p», а также для разработки части пользовательского интерфейса. Следующий код jQuery предназначен для управления событием щелчка и добавления нескольких классов к выбранному элементу.

Примечание . В методе addClass () несколько классов разделяются пробелом.

Код CSS:

 <style>
    . red {
        background : red ;
        width : 400px ;
    }
     
    .font{
        font-size : 3em ;
        text-align : center ;
    }
     
    .padding {
       padding : 1em ;
    }
     
    .border {
        border : solid black 2px ;
        border-radius: 25px ;
    }
 </style>

Код jQuery:

 <script>
    $(document).ready( function () {
        $( '.btnClass' ).click( function () {
            $( "#paraId" ).addClass(
                "red font padding border" , 2500 );
        });
    });
 </script>

Окончательное решение:

 <!DOCTYPE html>
 < html lang = "en" >
      
< head >
    < meta charset = "utf-8" >
    < meta name = "viewport" content =
        "width=device-width, initial-scale=1" >
     
    < title >
        jQuery UI adding multiple classes
    </ title >
     
    < link href =
 " http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css "
        rel = "stylesheet" >
         
    < script src =
 " http://code.jquery.com/jquery-1.10.2.js " ></ script >
 
    < script src =
 " http://code.jquery.com/ui/1.10.4/jquery-ui.js " >
    </ script >
     
    < style >
        .red {
            background: red;
            width:400px;
        }
         
        .font {
            font-size: 3em;
            text-align : center;
        }
         
        .padding {
            padding: 1em;
        }
         
        .border {
            border: 2px solid black;
            border-radius: 25px;
        }
    </ style >
     
    < script >
        $(document).ready(function() {
            $('.btnClass').click(function() {
                $( "#paraId" ).addClass(
                    "red font padding border", 2500 );
            });
        });
    </ script >
 </ head >
 
< body >
    < h1 style = "color:green" >
        GeeksforGeeks
    </ h1 >
     
    < b >jQuery UI adding multiple classes</ b >
     
    < div class = "height" ></ div >
     
    < p id = "paraId" >GFG website</ p >
     
    < button class = "btnClass" >
        Click this
    </ button >
 </ body >
 
</ html > 

Выход:

Код jQuery для демонстрации работы этого метода с методом обратного вызова:

Код CSS:

 <style>
    .height {
        height : 10px ;
    }
     
    .parent {
        width : 500px ;
        height : 250px ;
        position : relative ;
    }
     
    #btnClick {
        padding : . 5em 1em ;
        text-decoration : none ;
    }
     
    #container {
        width : 380px ;
        height : 210px ;
        padding : 1em ;
        color : #2d2d2d ;
        border : solid black 1px ;
        background : #b3b3b3 ;
    }
     
    .newClass {
        text-indent : 20px ;
        letter-spacing : . 2em ;
        width : 380px ;
        height : 210px ;
        padding : 20px ;
        margin : 10px ;
        font-size : 1.1em ;
    }
 </style>

Код jQuery:

 <script>
    $(document).ready( function () {
        $( "#btnClick" ).on( "click" , function () {
            $( "#container" ).addClass(
                    "newClass" , 4000, callback );
        });
  
        function callback() {
            setTimeout( function () {
                $( "#container" ).removeClass( "newClass" );
            }, 4000 );
        }
    });
 </script>

Окончательное решение:

 <!DOCTYPE html>
 < html >
 
< head >
    < meta charset = "utf-8" >
    < meta name = "viewport" content =
        "width=device-width,initial-scale=1" >
     
    < title >jQuery UI addClass with callback</ title >
     
    < link href =
 " https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css "
        rel = "stylesheet" >
    < script src =
 " https://code.jquery.com/jquery-1.10.2.js " ></ script >
    < script src =
 " https://code.jquery.com/ui/1.10.4/jquery-ui.js " ></ script >
     
    < style >
        .height {
            height: 10px;
        }
         
        .parent {
            width: 500px;
            height: 250px;
            position: relative;
        }
         
        #btnClick {
            padding: .5em 1em;
            text-decoration: none;
        }
         
        #container {
            width: 380px;
            height: 210px;
            padding: 1em;
            color: #2d2d2d;
            border: 1px solid black;
            background: #b3b3b3;
        }
         
        .newClass {
            text-indent: 20px;
            letter-spacing: .2em;
            width: 380px;
            height: 210px;
            padding: 20px;
            margin: 10px;
            font-size: 1.1em;
        }
    </ style >
 
    < script >
        $(document).ready(function() {
            $( "#btnClick" ).on( "click", function() {
                $( "#container" ).addClass(
                        "newClass", 4000, callback );
            });
      
            function callback() {
                setTimeout(function() {
                    $( "#container" ).removeClass( "newClass" );
                }, 4000 );
            }
        });
    </ script >
 </ head >
     
< body >
    < h1 style = "color:green" >GeeksforGeeks</ h1 >
     
    < b >jQuery UI add Class method with callback</ b >
     
    < div class = "height" ></ div >< br >
         
    < div class = "parent" >
        < div id = "container" >
            This is to demonstrate jQuery
            UI addClass method with
            removeClass callback method.
        </ div >
    </ div >
     
    < button id = "btnClick" >
        Click to execute
    </ button >
 </ body >
 
</ html > 

В приведенном выше коде выбирается элемент «div» с контейнером id, и с помощью функции .addClass () к выбранному элементу «div» добавляется новый класс. Функция обратного вызова также выполняется с помощью метода .removeClass () пользовательского интерфейса jQuery.

Выход:
Вопросы о Web технологиях JQuery HTML CSS-Misc HTML-Misc CSS

jQuery UI | addClass () Метод

РЕКОМЕНДУЕМЫЕ СТАТЬИ