jQuery - Métodos Seletores CSS

A biblioteca jQuery oferece suporte a quase todos os seletores incluídos nas especificações de Cascading Style Sheet (CSS) 1 a 3, conforme descrito no site do World Wide Web Consortium.

Usando a biblioteca JQuery, os desenvolvedores podem aprimorar seus sites sem se preocupar com navegadores e suas versões, desde que os navegadores tenham o JavaScript ativado.

A maioria dos métodos CSS JQuery não modifica o conteúdo do objeto jQuery e são usados ​​para aplicar propriedades CSS em elementos DOM.

Aplicar propriedades CSS

É muito simples aplicar qualquer propriedade CSS usando o método JQuery css( PropertyName, PropertyValue ).

Aqui está a sintaxe do método -

selector.css( PropertyName, PropertyValue );

Aqui você pode passar PropertyName como uma string javascript e, com base em seu valor, PropertyValue pode ser uma string ou um inteiro.

Exemplo

A seguir está um exemplo que adiciona a cor da fonte ao segundo item da lista.

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

Isso produzirá o seguinte resultado -

Aplicar várias propriedades CSS

Você pode aplicar várias propriedades CSS usando um único método JQuery CSS( {key1:val1, key2:val2....). Você pode aplicar quantas propriedades desejar em uma única chamada.

Aqui está a sintaxe do método -

selector.css( {key1:val1, key2:val2....keyN:valN})

Aqui você pode passar a chave como propriedade e val como seu valor conforme descrito acima.

Exemplo

A seguir está um exemplo que adiciona a cor da fonte e também a cor de fundo ao segundo item da lista.

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

Isso produzirá o seguinte resultado -

Definir a largura e altura do elemento

o width( val ) e height( val ) método pode ser usado para definir a largura e altura respectivamente de qualquer elemento.

Exemplo

A seguir está um exemplo simples que define a largura do elemento da primeira divisão onde, como o resto dos elementos, a largura é definida pela folha de estilo

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

Isso produzirá o seguinte resultado -

Métodos JQuery CSS

A tabela a seguir lista todos os métodos que você pode usar para brincar com as propriedades CSS -

Sr. Não. Método e Descrição
1 css (nome)

Retorne uma propriedade de estilo no primeiro elemento correspondente.

2 css (nome, valor)

Defina uma única propriedade de estilo para um valor em todos os elementos correspondentes.

3 css (propriedades)

Defina um objeto de chave / valor como propriedades de estilo para todos os elementos correspondentes.

4 altura (val)

Defina a altura CSS de cada elemento correspondente.

5 altura ()

Obtenha o atual calculado, pixel, altura do primeiro elemento correspondido.

6 innerHeight ()

Obtém a altura interna (exclui a borda e inclui o preenchimento) para o primeiro elemento correspondente.

7 innerWidth ()

Obtém a largura interna (exclui a borda e inclui o preenchimento) para o primeiro elemento correspondente.

8 Deslocamento( )

Obtenha o deslocamento atual do primeiro elemento correspondente, em pixels, em relação ao documento.

9 offsetParent ()

Retorna uma coleção jQuery com o pai posicionado do primeiro elemento correspondente.

10 outerHeight ([margem])

Obtém a altura externa (inclui a borda e o preenchimento por padrão) para o primeiro elemento correspondente.

11 outerWidth ([margem])

Obtenha a largura externa (inclui a borda e o preenchimento por padrão) para o primeiro elemento correspondente.

12 posição ()

Obtém a posição superior e esquerda de um elemento em relação ao seu pai deslocado.

13 scrollLeft (val)

Quando um valor é passado, o deslocamento da rolagem para a esquerda é definido para esse valor em todos os elementos correspondentes.

14 scrollLeft ()

Obtém o deslocamento de rolagem à esquerda do primeiro elemento correspondido.

15 scrollTop (val)

Quando um valor é passado, o deslocamento do topo da rolagem é definido para esse valor em todos os elementos correspondentes.

16 scrollTop ()

Obtém o deslocamento superior da rolagem do primeiro elemento correspondente.

17 largura (val)

Defina a largura CSS de cada elemento correspondente.

18 largura( )

Obtenha a largura atual calculada, em pixels, do primeiro elemento correspondente.