Jquery – Parte 3 Linguagem de scripts.

Apresentação em tema: "Jquery – Parte 3 Linguagem de scripts."— 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("<b>Hello world!</b>"); }); $("#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 <b>world!</b>     (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"," });

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" : "     "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="<p>Text.</p>";               // Create element with HTML   var txt2=$("<p></p>").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="<b>I </b>";                    // Create element with HTML   var txt2=$("<i></i>").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