Carregar apresentação
A apresentação está carregando. Por favor, espere
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
Apresentações semelhantes
© 2024 SlidePlayer.com.br Inc.
All rights reserved.