Учебники

jQuery — методы выбора CSS

Ноябрь 20, 2018

Библиотека jQuery поддерживает почти все селекторы, включенные в спецификации каскадных таблиц стилей (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 может быть строкой или целым числом.

пример

Ниже приведен пример, который добавляет цвет шрифта ко второму элементу списка.

Live Demo 

<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 как его значение, как описано выше.

пример

Ниже приведен пример, который добавляет цвет шрифта, а также цвет фона ко второму элементу списка.

Live Demo 

<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) можно использовать для установки ширины и высоты соответственно любого элемента.

пример

Ниже приведен простой пример, который устанавливает ширину первого элемента деления, где ширина остальных элементов определяется таблицей стилей.

Live Demo 

<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>

Это даст следующий результат —

Методы JQuery CSS

В следующей таблице перечислены все методы, которые вы можете использовать для игры со свойствами CSS:

Вернуть свойство стиля для первого соответствующего элемента.

Установите для одного свойства стиля значение для всех совпадающих элементов.

Установите объект ключ / значение в качестве свойств стиля для всех соответствующих элементов.

Установите высоту CSS каждого соответствующего элемента.

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

Получает внутреннюю высоту (исключая границу и включает отступы) для первого сопоставленного элемента.

Получает внутреннюю ширину (исключая границу и включает отступы) для первого сопоставленного элемента.

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

Возвращает коллекцию jQuery с позиционированным родителем первого сопоставленного элемента.

Получает внешнюю высоту (по умолчанию включает границы и отступы) для первого сопоставленного элемента.

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

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

Когда передается значение, левое смещение прокрутки устанавливается на это значение для всех соответствующих элементов.

Получает смещение прокрутки влево первого сопоставленного элемента.

Когда передается значение, верхнее смещение прокрутки устанавливается на это значение для всех соответствующих элементов.

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

Установите ширину CSS каждого соответствующего элемента.

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

48
Share: