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 =
rel = "stylesheet" >
< script src =
< script src =
< 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 =
rel = "stylesheet" >
< script src =
< script src =
</ 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 =
rel = "stylesheet" >
< script src =
< script src =
< 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