Jquery – Funções para estilização de elementos

  • seletorJquery.css(propriedade)  – $(‘div’).css(‘width’, ‘130px’)

Altera o valor de uma determinada propriedade css do seletor Jquery em questão. Além de alterar, você pode também retornar o valor de alguma propriedade, omitindo o valor de aplicação.

$(‘div’).css(‘width’)

Você pode ainda estilizar mais de uma propriedade em uma mesma chamada:

$(‘div’).css({

width: ‘130px’,

background: ‘#ooo’

height: ‘100px’

});

  • seletorJquery.offSet() – $(‘div’).offSet()

Acessa o valor das coordenadas top  e left do elemento em relação a sua posição na página. Você pode utilizar os complementos .top  ou .left  quando necessário.

  • seletorJquery.position() – $(‘div’).position()

Acessa o valor das coordenadas top  e left do elemento em relação ao elemento pai. Você pode utilizar os complementos .top  ou .left  quando necessário.

  • seletorJquery.scrollTop() || seletorJquery.scrollLeft()
  • seletorJquery.scrollTop(valor) || seletorJquery.scrollLeft(valor)

Acessa o valor da coordenada top ou left que mede a distâncial em pixel de uma rolagem vertical ou horizontal, respectivamente. Para se acessar o valor, omite-se o valor  dos parenteses, como no primeiro caso. Para dar novos valores, altera-se o conteúdo dos parenteses com algum conteúdo numérico. Se o valor for definido como zero, por exemplo, você fará com que sua barra de rolagem volte a sua posição inicial.

  • seletorJquery.width(valor)  – $(‘div’).width(130px)

Acessa (quando o valor é omitido) ou altera o valor da  largura de um seletorJquery.

  • seletorJquery.height(valor)  – $(‘div’).height(130px)

Acessa (quando o valor é omitido) ou altera o valor da  altura de um seletorJquery.

  • seletorJquery.filter(valor) 

Acessa todos os elementos do seletor Jquerr, mas modifica somente aqueles definidos no filtro. No exemplo abaixo eu alteraria o background de todos os elementos de uma div com a classe .modificar:

$(‘div’).filter(‘.modificar’).css(‘background-color’, ‘#000’);

Para o valor você também tem a opção de utilizar uma função qualquer.

  • seletorJquery.is(valor) ou seletorJquery.not(valor)

Acessa todos os elementos do seletor Jquery e busca se pelo menos um elemento satisfaz a expressão (ou não, caso utilize o .not), que pode ser realmente uma expressão ou uma classe, por exemplo. Retorna um valor true ou false.

  • seletorJquery.slice(inicio, fim) – $(‘div’).slice(1,5).css(‘background’, ‘#000’)

Seleciona todos os elementos do seletor Jquery, desde o da posição início até o da posição fim – o fim não é opcional e se você omiti-lo, será feita a seleção até o último elemento. Lembre-se que a primeira posição é a posição de número 0. Assim, no exemplo acima eu colocaria um background preto do segundo ao sexo elementos de uma div.

  • seletorJquery.add(expressão) – $(‘div’).add(‘.novaClasse’)

Adiciona uma expressão a um seletor Jquery. Essa expressão pode ser uma classe, como no exemplo acima.

  • seletorJquery.children(expressão) – $(‘div’).children(‘span’)

Seleciona os filhos de um seletor Jquery. Se o valor da expressão for omitido, selecionará todos os filhos do seletor, independente do seu tipo. Caso contrário, selecionará somente os filhos do seletor que satisfazem a expressão – no exemplo, somento os que são do tipo span.

  • seletorJquery.find(expressão) – $(‘div’).find(‘p’)

Seleciona todos os elementos descendentes do seletor Jquery que satisfaçam a expressão. Lembre-se que FILHO é diferente de DESCENDENTE!

  • seletorJquery.parent(expressão) – $(‘div’).parent(‘p’)

Seleciona todos os elementos que sejam pais do seletor Jquery. A expressão é opcional e mais uma vez, serve para filtrar o tipo de pai ao qual deseja selecionar.

  • seletorJquery.parents(expressão) – $(‘div’).parents()

Seleciona todos os elementos ancestrais do seletor Jquery que satisfaçam a expressão. A expressão é opcional.

  • seletorJquery.prev(expressão) – $(‘div’).prev(‘p’)

Seleciona o elemento adjacente imediatamente anterior ao seletor Jquery. A expressão é opcional.

  • seletorJquery.prevAll(expressão) – $(‘div’).prevAll(‘p’)

Seleciona todos os elementos adjacentes anteriores ao seletor Jquery. A expressão é opcional.

  • seletorJquery.next(expressão) – $(‘div’).next(‘p’)

Seleciona o elemento adjacente imediatamente posterior ao seletor Jquery. A expressão é opcional.

  • seletorJquery.nextAll(expressão) – $(‘div’).prev(‘p’)

Seleciona todos os elementos adjacentes posteriores ao seletor Jquery. A expressão é opcional.



// Comente!

comentários

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

// Seja o primeiro a comentar!