Métodos JQuery para manipulação de página

Uma página em HTML (document) pode ser facilmente manipulada através de métodos JQuery. Cada um dos métodos nativos da biblioteca é capaz de editar uma determinada propriedade, na sequência eles serão apresentados para que você, desenvolvedor, possa utilizá-los no seu dia a dia, ganhando tempo!

.addClass()

O método addClass(classe) adiciona a classe especificada ao elemento selecionado.

.css()

O método css possui dois formatos de utilização:

  • css( propriedade) : obtém o valor da propriedade especificada;
  • css(propriedade, valor) : atribui valor à propriedade CSS.

.removeClass

O método .removeClass(classe) Remove uma classe, uma lista de classes, ou todas as classes dos elementos selecionados.

.toggleClass()

Esse método adiciona ou remove um ou mais classes de cada elemento selecionado. Se a classe existir no elemento, remove, se não existir, adiciona.

.hasClass()

O método .hasClass(nomeDaClasse) retorna true caso o elemento tenha atribuído à propriedade class a classe especificada.

.height()

Obtém ou seta a altura do elemento selecionado. A diferença entre .css(‘height’) e .height() é que o último retorna somente o valor (por exemplo: 400), enquanto o primeiro retorna o valor precedido de px (por exemplo: 400px).

Importante observar que o tamanho se refere ao tamanho interno do elemento sem considerar padding, border e margin.

. width()

Obtém ou seta a largura do elemento selecionado. A diferença entre .css(‘width’) e .width() é que o último retorna somente o valor (por exemplo: 400), enquanto o primeiro retorna o valor precedido de px (por exemplo: 400px).

Novamente, importante observar que o tamanho se refere ao tamanho interno do elemento sem considerar padding, border e margin.

.innerHeight()

Retorna à altura do elemento especificado, incluindo o padding top e bottom, em pixels. Esse método não se aplica ao objeto window e document, para estes, utilize o método .height().

.innerWidth()

Retorna a largura do elemento, incluindo o padding (preenchimento) à esquerda e à direita. É dado em pixels. Esse método não se aplica ao objeto window e document, para estes, utilize o método .width().

.outerHeight()

Obtém o valor da altura do primeiro elemento selecionado incluindo padding, border e opcionalmente margin. Para incluir margin usar .outerHeitght(true). Esse método não se aplica aos objetos window e document. Para tais, usar o método height().

.outerWidth()

Obtém o valor da largura do primeiro elemento selecionado, incluindo o padding, border e opcionalmente a margin. É dado em pixels. Para incluir a margin na medida total usar .outerWidth(true).

Para os objetos document e window usar .width().

.position()

Retorna um objeto contendo as propriedades top e left contendo a as coordenadas do primeiro objeto da seleção efetuada.

A coordenada retornada é relativa ao objeto pai. Diferente de .offset() que retorna a coordenada relativa ao documento.

.offset()

Retorna as coordenadas relativas ao documento, muito útil quando queremos posicionar um item em relação a janela. Retorna um objeto contendo as propriedades top e left.

Para setar as coordenadas de um elemento devemos usar o formato .offset( {top: x, left: y } ) onde x e y são as coordenadas no documento. Não suporta elementos do tipo hidden.

.scrollTop()

Obtém ou seta o valor da posição da barra vertical de scroll do primeiro elemento em um conjunto de elementos.

Para setar o valor da posição da barra de scroll usar .scrollTop(n).

.scrollLeft()

Obtém o valor da posição da barra de scrollHorizontal do primeiro elemento do conjunto selecionado.

Para setar o valor usar .scrollLeft(n).

A seguir serão apresentados alguns exemplos práticos de utilização destes métodos em diversas situações, manipulando objetos HTML e também o próprio documento.

Exemplo 1: Exibe a cor das divs criadas ao clicar sobre elas:

<style>

div { width:60px; height:60px; margin:5px; float:left; }

</style>

<span id=”result”>&nbsp;</span>

<div style=”background-color:blue;”></div>

<div style=”background-color:rgb(15,99,30);”></div>

<div style=”background-color:#123456;”></div>

<div style=”background-color:#f11;”></div>

<script>

$(“div”).click(function () {

var color = $(this).css(“background-color”);

$(“#result”).html(“Esta div é <span style=’color:” +

color + “;’>” + color + “</span>.”);

});

</script>

Exemplo 2: Exibe a coordenada das divs ao clicarmos sobre elas.

<style>

p {

margin-left: 10px;

color: blue;

width: 200px;

cursor: pointer;

}

span {

color: red;

cursor: pointer;

}

div.abs {

width: 50px;

height: 50px;

position: absolute;

left: 220px;

top: 35px;

background-color: green;

cursor: pointer;

}

</style>

<div id=”result”>Clique em um elemento.</div>

<p>Este é a melhor maneira de <span>descobrir</span> o offset.</p>

<div class=”abs”></div>

<script>

$(“*”, document.body).click(function (e) {

var offset = $(this).offset();

e.stopPropagation();

$(“#result”).text(this.tagName + ” coords ( ” + offset.left + “, ” +

offset.top + ” )”);

});

</script>

Exemplo 3: Exibe a altura de um elemento, documento e janela.

<style>

body {

background: yellow;

}

button {

font-size: 12px;

margin: 2px;

}

p {

width: 150px;

border: 1px red solid;

}

div {

color: red;

font-weight: bold;

}

</style>

<button id=”getp”>Obter altura do parágrafo</button>

<button id=”getd”>Obter altura do documento</button>

<button id=”getw”>Obter altura da janela</button>

<div>&nbsp;</div>

<p>Parágrafo teste para testar a altura.</p>

<script>

function showHeight(ele, h) {

$(“div”).text(“A altura de ” + ele +

” é ” + h + “px.”);

}

$(“#getp”).click(function () {

showHeight(“paragraph”, $(“p”).height());

});

$(“#getd”).click(function () {

showHeight(“document”, $(document).height());

});

$(“#getw”).click(function () {

showHeight(“window”, $(window).height());

});

</script>

6

Source: scriptcase / Métodos JQuery para manipulação de página

Comments

comments

Greg

Old school developer with a passion for food, bikes and a whole lot of weird things.

Leave a Reply

Your email address will not be published.