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.

↰ Previous page Next page ↱