A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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.

Apresentações semelhantes


Apresentação em tema: "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."— Transcrição da apresentação:

1 JQUERY – PARTE 3 Linguagem de scripts

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

3 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

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

5 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()); });

6 Atributos – attr O exemplo a seguir demonstra como obter o valor do atributo href de um link: $("button").click(function(){ alert($("#w3s").attr("href")); });

7 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

8 Definir conteúdo e atributos $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html(" Hello world! "); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); });

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

10 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 world! (index: " + i + ")"; }); });

11 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"); });

12 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" }); });

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

14 Função Callback para attr $("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });

15 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

16 Adicionando Elementos – append() O método append() insere conteúdo no final de elementos HTML selecionados. $("p").append("Some appended text.");

17 Adicionando Elementos – prepend() O método insere o conteúdo no início de elementos HTML selecionados. $("p").prepend("Some prepended text.");

18 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):

19 Adicionar vários novos elementos com append e prepend function appendText() { var txt1=" Text. "; // Create element with HTML var txt2=$(" ").text("Text."); // Create with jQuery var txt3=document.createElement("p"); // Create with DOM txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // Append the new elements }

20 Métodos after() e before() $("img").after("Some text after"); $("img").before("Some text before");

21 Adicionar vários novos elementos com after e before function afterText() { var txt1=" I "; // Create element with HTML var txt2=$(" ").text("love "); // Create with jQuery var txt3=document.createElement("big"); // Create with DOM txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // Insert new elements after img }

22 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


Carregar ppt "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."

Apresentações semelhantes


Anúncios Google