jQuery UI | addClass () Метод
Метод 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