A finalidade do uso do jQuery \u00e9 poder controlar o comportamento de todas as partes de um documento HTML. Basicamente, vamos usar o jQuery para identificar os elementos HTML no documento e aplicar seus m\u00e9todos.<\/p>\n
O construtor\u00a0$()<\/strong> \u00e9 encarregado de encontrar os elementos do HTML. Existem outras bibliotecas JavaScript al\u00e9m do jQuery e o uso em conjunto pode gerar conflitos j\u00e1 que muitas dessas bibliotecas tamb\u00e9m usam o $() como construtor. Para contornar este problema voc\u00ea poder\u00e1 fazer uso de jQuery().<\/p>\n Para usar o construtor e selecionar o documento, voc\u00ea usaria $(document)<\/strong>. Para selecionar todos os par\u00e1grafos de um documento voc\u00ea poderia usar $(\u201ch1\u201d),<\/strong>\u00a0 ou seja, passe para a fun\u00e7\u00e3o construtora o elemento que deseja selecionar.<\/p>\n Em JavaScript, quando desejamos executar algum bloco de c\u00f3digo assim que o documento estiver totalmente carregado, usamos window.onload<\/strong>.<\/p>\n O equivalente em jQuery para este m\u00e9todo \u00e9 mostrado a seguir:<\/p>\n <\/p>\n Voc\u00ea tamb\u00e9m pode omitir o par\u00e2metro document da seguinte forma:<\/p>\n <\/p>\n Estas duas abordagens s\u00e3o chamadas de sintaxe formal e sua leitura \u00e9 mais intuitiva. Voc\u00ea tamb\u00e9m pode usar a sintaxe abreviada e aplicar o m\u00e9todo ready:<\/p>\n <\/p>\n O m\u00e9todo ready possui uma grande vantagem em rela\u00e7\u00e3o ao m\u00e9todo em JavaScript. Em JavaScript todos os elementos da p\u00e1gina precisam ser carregados como a marca\u00e7\u00e3o, estilos e imagens. O m\u00e9todo ready necessita apenas que a marca\u00e7\u00e3o da p\u00e1gina esteja dispon\u00edvel.<\/p>\n Vimos que \u00e9 poss\u00edvel selecionar elementos utilizando a fun\u00e7\u00e3o construtora $()<\/strong>. Por\u00e9m, selecionar todos os elementos de um mesmo tipo n\u00e3o \u00e9 muito \u00fatil. Vamos ver em detalhes a sele\u00e7\u00e3o de elementos nos pr\u00f3ximos posts. Por hora vamos ver um exemplo simples onde adicionamos texto e algum estilo css a um elemento div com o atributo id configurado com o valor “box”.<\/p>\n <\/p>\n Ent\u00e3o \u00e9 isso. No pr\u00f3ximo post a gente aprende mais sobre a sele\u00e7\u00e3o de elementos.<\/p>\n Aquele abra\u00e7o!<\/p>\n","protected":false},"excerpt":{"rendered":" A finalidade do uso do jQuery \u00e9 poder controlar o comportamento de todas as partes de um documento HTML. Basicamente, vamos usar o jQuery para identificar os elementos HTML no… <\/p>\n","protected":false},"author":1,"featured_media":377,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[69],"tags":[84,9],"class_list":["post-83","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-e-bivliotecas","tag-conceitos","tag-jquery"],"_links":{"self":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts\/83","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/comments?post=83"}],"version-history":[{"count":5,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts\/83\/revisions"}],"predecessor-version":[{"id":384,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts\/83\/revisions\/384"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/media\/377"}],"wp:attachment":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/media?parent=83"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/categories?post=83"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/tags?post=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}M\u00e9todo Ready<\/h3>\n
$(document).ready(function(){\r\n execute o c\u00f3digo que estiver aqui\r\n});\r\n<\/pre>\n$().ready(function(){\r\n execute o c\u00f3digo que estiver aqui\r\n});\r\n<\/pre>\n$(function(){\r\n execute o c\u00f3digo que estiver aqui\r\n});\r\n<\/pre>\nSelecionando Elementos<\/h3>\n
$(document).ready(function(){\r\n $('#caixa').text('Elemento com classe caixa selecionado!');\r\n $('#caixa').css('color','red')\r\n});\r\n<\/pre>\n