jQuery - методы селекторов CSS
Библиотека jQuery поддерживает почти все селекторы, включенные в спецификации Cascading Style Sheet (CSS) с 1 по 3, как указано на сайте Консорциума World Wide Web.
Используя библиотеку JQuery, разработчики могут улучшать свои веб-сайты, не беспокоясь о браузерах и их версиях, если в браузерах включен JavaScript.
Большинство методов JQuery CSS не изменяют содержимое объекта jQuery и используются для применения свойств CSS к элементам DOM.
Применить свойства CSS
Очень просто применить любое свойство CSS с помощью метода JQuery. css( PropertyName, PropertyValue ).
Вот синтаксис метода -
selector.css( PropertyName, PropertyValue );Здесь вы можете передать PropertyName как строку javascript, и в зависимости от ее значения PropertyValue может быть строкой или целым числом.
пример
Ниже приведен пример добавления цвета шрифта ко второму элементу списка.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").eq(2).css("color", "red");
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>Это даст следующий результат -
Применить несколько свойств CSS
Вы можете применить несколько свойств CSS с помощью одного метода JQuery CSS( {key1:val1, key2:val2....). Вы можете применить столько свойств, сколько захотите, за один вызов.
Вот синтаксис метода -
selector.css( {key1:val1, key2:val2....keyN:valN})Здесь вы можете передать ключ как свойство и val как его значение, как описано выше.
пример
Ниже приведен пример, который добавляет цвет шрифта, а также цвет фона ко второму элементу списка.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").eq(2).css({"color":"red", "background-color":"green"});
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>Это даст следующий результат -
Установка ширины и высоты элемента
В width( val ) и height( val ) может использоваться для установки ширины и высоты любого элемента соответственно.
пример
Ниже приведен простой пример, который устанавливает ширину первого элемента деления, тогда как остальные элементы имеют ширину, установленную таблицей стилей.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div:first").width(100);
$("div:first").css("background-color", "blue");
});
</script>
<style>
div {
width:70px; height:50px; float:left;
margin:5px; background:red; cursor:pointer;
}
</style>
</head>
<body>
<div></div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
</body>
</html>Это даст следующий результат -
CSS-методы JQuery
В следующей таблице перечислены все методы, которые вы можете использовать для игры со свойствами CSS.
| Sr. No. | Метод и описание |
|---|---|
| 1 | css (имя) Вернуть свойство стиля для первого совпадающего элемента. |
| 2 | css (имя, значение) Установите для единственного свойства стиля значение для всех совпадающих элементов. |
| 3 | css (свойства) Установите объект «ключ-значение» в качестве свойств стиля для всех совпадающих элементов. |
| 4 | высота (val) Установите высоту CSS для каждого совпадающего элемента. |
| 5 | высота( ) Получить текущую вычисленную высоту в пикселях первого совпадающего элемента. |
| 6 | innerHeight () Получает внутреннюю высоту (без границы и с заполнением) для первого совпадающего элемента. |
| 7 | innerWidth () Получает внутреннюю ширину (исключая границу и включает заполнение) для первого совпадающего элемента. |
| 8 | смещение () Получите текущее смещение первого согласованного элемента в пикселях относительно документа. |
| 9 | offsetParent () Возвращает коллекцию jQuery с позиционированным родителем первого совпадающего элемента. |
| 10 | externalHeight ([маржа]) Получает внешнюю высоту (по умолчанию включает границу и отступы) для первого совпадающего элемента. |
| 11 | externalWidth ([маржа]) Получите внешнюю ширину (по умолчанию включая границу и отступы) для первого совпадающего элемента. |
| 12 | должность( ) Получает верхнюю и левую позицию элемента относительно его родительского смещения. |
| 13 | scrollLeft (val) Когда значение передается, смещение прокрутки влево устанавливается на это значение для всех совпадающих элементов. |
| 14 | scrollLeft () Получает смещение прокрутки влево первого совпадающего элемента. |
| 15 | scrollTop (val) Когда значение передается, смещение верха прокрутки устанавливается на это значение для всех совпадающих элементов. |
| 16 | scrollTop () Возвращает верхнее смещение прокрутки первого совпадающего элемента. |
| 17 | ширина (val) Установите ширину CSS для каждого совпадающего элемента. |
| 18 | ширина () Получить текущую вычисленную ширину в пикселях первого согласованного элемента. |