JQUERY – PARTE 3

Linguagem de scripts

Obter conteúdo e atributos do HTML

jQuery contém poderosos métodos para alterar e manipular os elementos e atributos HTML.

Uma parte muito importante da jQuery é a possibilidade de manipular o DOM possuindo diversos métodos relacionados DOM que tornam mais fácil para acessar e manipular os elementos e atributos.

DOM = Document Object Model O DOM define um padrão de acesso a

documentos HTML e XML:

Obter conteúdo – text, html e val Três métodos simples para manipulação

DOM são: text () - Define ou retorna o conteúdo de

elementos selecionados do texto html () - Define ou retorna o conteúdo de

elementos selecionados (incluindo as tags do HTML)

val () - Define ou retorna o valor dos campos do formulário

Obter conteúdo – text, html e val $("#btn1").click(function(){  alert("Text: " + $("#test").text());});$("#btn2").click(function(){  alert("HTML: " + $("#test").html());});

Obter conteúdo – text, html e val O exemplo a seguir demonstra como obter o

valor de um campo de entrada com o método val(): $("#btn1").click(function(){  alert("Value: " + $("#test").val());});

Atributos – attr

O exemplo a seguir demonstra como obter o valor do atributo href de um link:

$("button").click(function(){  alert($("#w3s").attr("href"));});

Definir conteúdo e atributos

Usaremos os mesmos três métodos do slide anterior para definir conteúdo: text () - Define ou retorna o conteúdo de

elementos selecionados do texto html () - Define ou retorna o conteúdo de

elementos selecionados (incluindo a marcação HTML)

val () - Define ou retorna o valor dos campos do formulário

Definir conteúdo e atributos

$("#btn1").click(function(){  $("#test1").text("Hello world!");});$("#btn2").click(function(){  $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){  $("#test3").val("Dolly Duck");});

Função Callback para text(), html() e val()

Todos os três métodos : text (), html () e val (), também vêm com uma função callback.

A função de callback tem dois parâmetros: o índice do elemento atual na lista de elementos selecionados e o valor original (old).

Você, então, retornar a string que você deseja usar como o novo valor da função.

Função Callback para text(), html() e val()

$("#btn1").click(function(){  $("#test1").text(function(i,origText){    return "Old text: " + origText + " New text: Hello world!    (index: " + i + ")";   });});

$("#btn2").click(function(){  $("#test2").html(function(i,origText){    return "Old html: " + origText + " New html: Hello <b>world!</b>    (index: " + i + ")";   });});

Definindo Atributos - attr

O método attr jQuery () também é usado para definir / alterar os valores dos atributos. $("button").click(function(){

  $("#w3s").attr("href","http://www.w3schools.com/jquery");});

Definindo Atributos - attr

O método attr () também permite definir vários atributos ao mesmo tempo.

O exemplo a seguir demonstra como definir a href e atributos de título ao mesmo tempo:

$("button").click(function(){  $("#w3s").attr({    "href" : "http://www.w3schools.com/jquery",    "title" : "W3Schools jQuery Tutorial"  });});

Função Callback para attr

O método jQuery attr (), também vêm com a função callback.

A função de callback tem dois parâmetros: o índice do elemento atual na lista de elementos selecionados e o valor do atributo original (de idade). Você, então, retornar a string que você deseja usar como o novo valor do atributo da função.

Função Callback para attr

$("button").click(function(){  $("#w3s").attr("href", function(i,origValue){    return origValue + "/jquery";   });});

Adicionando Elementos

É fácil adicionar novos elementos e conteúdos utilizando os métodos: append() - Insere conteúdo no final dos

elementos seleccionados prepend() - Insere conteúdo no inicio dos

elementos seleccionados after() – Insere conteúdo após os elementos

selecionados before() - Insere conteúdo antes dos

elementos selecionados

Adicionando Elementos – append() O método append() insere conteúdo no

final de elementos HTML selecionados. $("p").append("Some appended text.");

Adicionando Elementos – prepend() O método insere o conteúdo no início de

elementos HTML selecionados. $("p").prepend("Some prepended text.");

Adicionar vários novos elementos com append e prepend

No exemplo a seguir, criamos vários novos elementos. Os elementos são criados com texto / HTML, jQuery e JavaScript / DOM. Depois, acrescente os novos elementos do texto com o append () método (este teria trabalhado para prepend () também):

Adicionar vários novos elementos com append e prepend

function appendText(){var txt1="<p>Text.</p>";              

// Create element with HTML  var txt2=$("<p></p>").text("Text.");  

// Create with jQueryvar txt3=document.createElement("p"); 

// Create with DOMtxt3.innerHTML="Text.";$("p").append(txt1,txt2,txt3);        

// Append the new elements }

Métodos after() e before()

$("img").after("Some text after");

$("img").before("Some text before");

Adicionar vários novos elementos com after e before

function afterText(){var txt1="<b>I </b>";                   

// Create element with HTML  var txt2=$("<i></i>").text("love ");    

// Create with jQueryvar txt3=document.createElement("big"); 

// Create with DOMtxt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3);         

// Insert new elements after img}

Removendo Elementos

Podemos remover elementos do HTML utilizando os seguintes métodos: remove() – remove o elemento

selecionado(e os seus filhos) empty() - Removes the child elements from

the selected element