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 ширина ()

Получить текущую вычисленную ширину в пикселях первого согласованного элемента.