![\"aprenda](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Info-Jquery-3-.png\")
<\/a><\/p>\njQuery Template nos d\u00e1 uma op\u00e7\u00e3o ou suporte para exibi\u00e7\u00e3o e manipula\u00e7\u00e3o do conte\u00fado no navegador. Usando o jQuery Templating podemos renderizar a string JSON para os elementos HTML. Vamos considerar um exemplo simples, podemos usar o jQuery Template para exibir algum conjunto de registros que obtivemos de uma solicita\u00e7\u00e3o do Ajax.<\/p>\n
Um exemplo b\u00e1sico de templates jQuery<\/h2>\n
Agora criamos uma p\u00e1gina simples usando modelos jQuery. Usaremos apenas o plugin jQuery. Neste exemplo, mostraremos como criar um modelo e renderizar o conte\u00fado do JSON.<\/p>\n
Exig\u00eancia<\/h2>\n
Vamos entender o requisito primeiro. Suponha que tenhamos que criar uma p\u00e1gina web como o site KnowBand para vender os m\u00f3dulos para a plataforma de e-commerce como Opencart, Prestashop etc. Temos alguns m\u00f3dulos ou plugins de e-commerce que queremos listar no site KnowBand. Assim, na p\u00e1gina de listagem, mostraremos o nome, a imagem e o pre\u00e7o do m\u00f3dulo. Usaremos a string JSON abaixo para listar os dados:<\/p>\n
[ { \"name\": \"Guias de produtos- PrestashopAddons\", \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Product-Tabs-logo-1000- x-1000.jpg\", \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-product-tabs\", \"price\": \"$25\" }, { \"name\": \"Prestashop Mobile App builder\", \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Mobile-app-prestashop-plugin-500-X-500.jpg\", \" module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-mobile-app-builder\", \"price\": \"$30\" }, { \"name\": \"Return Manager - Magento Extensions\", \"image_url \": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/return-manager.png\", \"module_url\": \"https:\\\/\\\/www.knowband.com \\\/magento-return-manager\", \"price\": \"$50\" }, { \"name\": \"Web Push Notification - PrestashopAddons\", \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image \\\/data\\\/Plugin%20Logo\\\/Web-Push-Notification-plugin.jpg\", \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-web-push-notifications\", \"price \": \"$43\" } ]<\/pre>\n![\"Temos](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Info-Jquery-2-.png\")
<\/a><\/h2>\n\n- \n
Usando a Tag de Script HTML<\/h3>\n
Neste m\u00e9todo, escreveremos o c\u00f3digo HTML na tag script. O c\u00f3digo completo \u00e9 dado abaixo:<\/li>\n<\/ol>\n
<html>\n <head>\n <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css">\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js"><\/script>\n <\/head>\n <body>\n <div class=\"container\">\n <script id=\"blog\" type=\"template\">\n <div class=\"col-md-3\">\n <a href=\"{{module_url}}\">\n <div class=\"thumbnail\">\n <imgsrc=\"{{image_url}}\" class=\"img-rounded img-responsive\" width=\"100%\"><\/img>\n <div class=\"caption\">\n <p class=\"lead\">{{price}}<\/p>\n <p>{{name}}<\/p>\n <\/div>\n <\/div>\n <\/a>\n <\/div>\n <\/script>\n <\/div>\n <script>\n $(function () {\n varknoband_data = [\n {\n \"name\": \"Product tabs- PrestashopAddons\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Product-Tabs-logo-1000-x-1000.jpg\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-product-tabs\",\n \"price\": \"$25\"\n },\n {\n \"name\": \"Prestashop Mobile App builder\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Mobile-app-prestashop-plugin-500-X-500.jpg\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-mobile-app-builder\",\n \"price\": \"$30\"\n },\n {\n \"name\": \"Return Manager - Magento Extensions\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/return-manager.png\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/magento-return-manager\",\n \"price\": \"$50\"\n },\n {\n \"name\": \"Web Push Notification - PrestashopAddons\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Web-Push-Notification-plugin.jpg\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-web-push-notifications\",\n \"price\": \"$43\"\n }\n ];\n var temp = $.trim($('#blog').html());\n $.each(knoband_data, function (index, obj) {\n var x = temp.replace(\/{{name}}\/ig, obj.name);\n x = x.replace(\/{{image_url}}\/ig, obj.image_url);\n x = x.replace(\/{{price}}\/ig, obj.price);\n x = x.replace(\/{{module_url}}\/ig, obj.module_url);\n $('.container').append(x);\n });\n });\n <\/script>\n <\/body>\n <\/html><\/pre>\nCriamos uma miniatura dentro da tag script, ou seja, a tag script #blog e ela foi usada como modelo. No c\u00f3digo acima, usamos {{ }} para vari\u00e1veis \u200b\u200bcuringa. Vamos entender de fato o que fizemos no c\u00f3digo acima:<\/p>\n
var temp = $.trim($('#blog').html()); \/\/ Ele carregar\u00e1 todo o conte\u00fado da tag de script #blog em uma vari\u00e1vel tempor\u00e1ria. var x = temp.replace(\/{{nome}}\/ig, obj.nome); \/\/ Substituiu a vari\u00e1vel curinga {{name}} pelos dados correspondentes do JSON. x = x.replace(\/{{image_url}}\/ig, obj.image_url); \/\/ Substituiu a vari\u00e1vel curinga {{image_url}} pelos dados correspondentes do JSON. x = x.substituir(\/{{pre\u00e7o}}\/ig, obj.pre\u00e7o); \/\/ Substituiu a vari\u00e1vel curinga {{price}} pelos dados correspondentes do JSON. x = x.replace(\/{{module_url}}\/ig, obj.module_url); \/\/ Substituiu a vari\u00e1vel curinga {{module_url}} pelos dados correspondentes do JSON. $('.container').append(x); \/\/ anexou o conte\u00fado ao container div.<\/pre>\n\n- \n
Usando a t\u00e9cnica de espa\u00e7o reservado<\/h3>\n<\/li>\n<\/ol>\n
Nesta t\u00e9cnica, anexaremos o conte\u00fado no HTML ap\u00f3s preencher os dados usando a t\u00e9cnica de espa\u00e7o reservado do jQuery. O c\u00f3digo completo \u00e9 dado abaixo:<\/p>\n
\n \n \n \n \n \n \n \n $(function() {\n varknoband_data = [\n {\n \"name\": \"Product tabs- PrestashopAddons\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%3.3.7Logo\\\/Product-Tabs-logo-3.2.1-x-20.jpg\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-product-tabs\",\n \"price\": \"$1000\"\n },\n {\n \"name\": \"Prestashop Mobile App builder\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%1000Logo\\\/Mobile-app-prestashop-plugin-25-X-20.jpg\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-mobile-app-builder\",\n \"price\": \"$500\"\n },\n {\n \"name\": \"Return Manager - Magento Extensions\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%500Logo\\\/return-manager.png\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/magento-return-manager\",\n \"price\": \"$30\"\n },\n {\n \"name\": \"Web Push Notification - PrestashopAddons\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Web-Push-Notification-plugin.jpg\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-web-push-notifications\",\n \"price\": \"$50\"\n }\n ];\n $.each(knoband_data, function(index, obj) {\n $('.container').append(\n `\n \n \n \n \n ${obj.price}\n ${obj.name}\n \n \n \n `\n );\n });\n });\n \n \n<\/pre>\nNo exemplo acima, usamos ` (back-tick) como literal de modelo\ufffde ${ } como um espa\u00e7o reservado. Quando comparamos o m\u00e9todo 1 com o m\u00e9todo 2, podemos facilmente dizer que o modelo literal e o espa\u00e7o reservado facilitam nossa tarefa. Neste exemplo, escrevemos o c\u00f3digo do modelo em um loop e substitu\u00edmos nossos espa\u00e7os reservados por seus dados correspondentes.<\/p>\n
Resumo<\/h2>\n
Para saber mais sobre jQuery Templates, recomendo que voc\u00ea veja a documenta\u00e7\u00e3o de jQuery Templates no site oficial do jQuery.<\/p>\n","protected":false},"excerpt":{"rendered":"
Este artigo \u00e9 sobre como criar um modelo HTML usando jQuery. Vamos saber sobre o jQuery jQuery \u00e9 uma biblioteca JavaScript r\u00e1pida, pequena e rica em recursos. Ele torna as coisas como a passagem e manipula\u00e7\u00e3o de documentos HTML, manipula\u00e7\u00e3o de eventos, anima\u00e7\u00e3o e Ajax muito mais simples com uma API f\u00e1cil de usar que […]<\/p>\n","protected":false},"author":15,"featured_media":816736,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kbui_enabled":"","footnotes":""},"categories":[],"tags":[13483,27046,13481,27044,13484,27045,13482,13485,16744,8804],"class_list":["post-28153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-criao-de-modelo-usando-jquery","tag-criao-de-templates-usando-jquery","tag-criar-modelo-de-html","tag-criar-modelo-html","tag-criar-modelo-html-de-comrcio-eletrnico-usando-jquery","tag-criar-modelo-html-usando-jquery","tag-criar-template-html-usando-jquery","tag-modelo-html-usando-jquery","tag-vantagens-e-desvantagens-do-opencart"],"acf":[],"yoast_head":"\n
Como criar seu pr\u00f3prio modelo HTML usando jQuery? - Knowband Blog | Ecommerce Modules<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr\u00f3prio-template-html-usando-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como criar seu pr\u00f3prio modelo HTML usando jQuery? - Knowband Blog | Ecommerce Modules\" \/>\n<meta property=\"og:description\" content=\"Este artigo \u00e9 sobre como criar um modelo HTML usando jQuery. Vamos saber sobre o jQuery jQuery \u00e9 uma biblioteca JavaScript r\u00e1pida, pequena e rica em recursos. Ele torna as coisas como a passagem e manipula\u00e7\u00e3o de documentos HTML, manipula\u00e7\u00e3o de eventos, anima\u00e7\u00e3o e Ajax muito mais simples com uma API f\u00e1cil de usar que […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr\u00f3prio-template-html-usando-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Knowband Blog | Ecommerce Modules\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Knowband\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-30T07:00:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-14T13:21:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Main-Banner-Jquery.png\" \/>\n\t<meta property=\"og:image:width\" content=\"760\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sunny Saurabh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@KnowbandPlugin\" \/>\n<meta name=\"twitter:site\" content=\"@KnowbandPlugin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sunny Saurabh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/nao-categorizado\\\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/nao-categorizado\\\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\\\/\"},\"author\":{\"name\":\"Sunny Saurabh\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/person\\\/57eba27850520f4c8de3853ee8755a55\"},\"headline\":\"Como criar seu pr\u00f3prio modelo HTML usando jQuery?\",\"datePublished\":\"2018-10-30T07:00:56+00:00\",\"dateModified\":\"2022-07-14T13:21:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/nao-categorizado\\\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\\\/\"},\"wordCount\":447,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/nao-categorizado\\\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/Main-Banner-Jquery.png\",\"keywords\":[\"cria\u00e7\u00e3o de modelo usando jquery\",\"cria\u00e7\u00e3o de templates usando jquery\",\"criar modelo de html\",\"criar modelo html\",\"criar modelo HTML de com\u00e9rcio eletr\u00f4nico usando JQuery\",\"criar modelo html usando jquery\",\"criar template html usando jquery\",\"modelo html usando jquery\",\"modelo html usando jquery\",\"vantagens e desvantagens do OpenCart\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/nao-categorizado\\\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\\\/\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/nao-categorizado\\\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\\\/\",\"name\":\"Como criar seu pr\u00f3prio modelo HTML usando jQuery? - Knowband Blog | Ecommerce Modules\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/nao-categorizado\\\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/nao-categorizado\\\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/Main-Banner-Jquery.png\",\"datePublished\":\"2018-10-30T07:00:56+00:00\",\"dateModified\":\"2022-07-14T13:21:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/nao-categorizado\\\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/nao-categorizado\\\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/nao-categorizado\\\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/Main-Banner-Jquery.png\",\"contentUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/Main-Banner-Jquery.png\",\"width\":760,\"height\":300,\"caption\":\"How to create your own HTML template using jQuery?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/nao-categorizado\\\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como criar seu pr\u00f3prio modelo HTML usando jQuery?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/\",\"name\":\"Knowband Blog | Ecommerce Modules\",\"description\":\"Magento, Prestashop, Opencart, Shopify\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#organization\",\"name\":\"Knowband Blog | Ecommerce Modules\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/cropped-knowband_logo-v2.png\",\"contentUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/cropped-knowband_logo-v2.png\",\"width\":153,\"height\":61,\"caption\":\"Knowband Blog | Ecommerce Modules\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Knowband\",\"https:\\\/\\\/x.com\\\/KnowbandPlugin\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/person\\\/57eba27850520f4c8de3853ee8755a55\",\"name\":\"Sunny Saurabh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/IMG_20181029_123810-150x150.jpg\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/IMG_20181029_123810-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/IMG_20181029_123810-150x150.jpg\",\"caption\":\"Sunny Saurabh\"},\"description\":\"Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as an expert as a PHP developer. He has also expert in database design, server maintenance and security. He has achieved this goal only in the short span of 3yrs and still looking forward to achieving more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/pt-br\\\/author\\\/ssaurabh\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como criar seu pr\u00f3prio modelo HTML usando jQuery? - Knowband Blog | Ecommerce Modules","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr\u00f3prio-template-html-usando-jquery\/","og_locale":"pt_BR","og_type":"article","og_title":"Como criar seu pr\u00f3prio modelo HTML usando jQuery? - Knowband Blog | Ecommerce Modules","og_description":"Este artigo \u00e9 sobre como criar um modelo HTML usando jQuery. Vamos saber sobre o jQuery jQuery \u00e9 uma biblioteca JavaScript r\u00e1pida, pequena e rica em recursos. Ele torna as coisas como a passagem e manipula\u00e7\u00e3o de documentos HTML, manipula\u00e7\u00e3o de eventos, anima\u00e7\u00e3o e Ajax muito mais simples com uma API f\u00e1cil de usar que […]","og_url":"https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr\u00f3prio-template-html-usando-jquery\/","og_site_name":"Knowband Blog | Ecommerce Modules","article_publisher":"https:\/\/www.facebook.com\/Knowband","article_published_time":"2018-10-30T07:00:56+00:00","article_modified_time":"2022-07-14T13:21:42+00:00","og_image":[{"width":760,"height":300,"url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Main-Banner-Jquery.png","type":"image\/png"}],"author":"Sunny Saurabh","twitter_card":"summary_large_image","twitter_creator":"@KnowbandPlugin","twitter_site":"@KnowbandPlugin","twitter_misc":{"Written by":"Sunny Saurabh","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\/#article","isPartOf":{"@id":"https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\/"},"author":{"name":"Sunny Saurabh","@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/person\/57eba27850520f4c8de3853ee8755a55"},"headline":"Como criar seu pr\u00f3prio modelo HTML usando jQuery?","datePublished":"2018-10-30T07:00:56+00:00","dateModified":"2022-07-14T13:21:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\/"},"wordCount":447,"commentCount":0,"publisher":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#organization"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Main-Banner-Jquery.png","keywords":["cria\u00e7\u00e3o de modelo usando jquery","cria\u00e7\u00e3o de templates usando jquery","criar modelo de html","criar modelo html","criar modelo HTML de com\u00e9rcio eletr\u00f4nico usando JQuery","criar modelo html usando jquery","criar template html usando jquery","modelo html usando jquery","modelo html usando jquery","vantagens e desvantagens do OpenCart"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\/","url":"https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\/","name":"Como criar seu pr\u00f3prio modelo HTML usando jQuery? - Knowband Blog | Ecommerce Modules","isPartOf":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Main-Banner-Jquery.png","datePublished":"2018-10-30T07:00:56+00:00","dateModified":"2022-07-14T13:21:42+00:00","breadcrumb":{"@id":"https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\/#primaryimage","url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Main-Banner-Jquery.png","contentUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Main-Banner-Jquery.png","width":760,"height":300,"caption":"How to create your own HTML template using jQuery?"},{"@type":"BreadcrumbList","@id":"https:\/\/www.knowband.com\/blog\/pt-br\/nao-categorizado\/como-criar-seu-pr%c3%b3prio-template-html-usando-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.knowband.com\/blog\/fr\/"},{"@type":"ListItem","position":2,"name":"Como criar seu pr\u00f3prio modelo HTML usando jQuery?"}]},{"@type":"WebSite","@id":"https:\/\/www.knowband.com\/blog\/fr\/#website","url":"https:\/\/www.knowband.com\/blog\/fr\/","name":"Knowband Blog | Ecommerce Modules","description":"Magento, Prestashop, Opencart, Shopify","publisher":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.knowband.com\/blog\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.knowband.com\/blog\/fr\/#organization","name":"Knowband Blog | Ecommerce Modules","url":"https:\/\/www.knowband.com\/blog\/fr\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/09\/cropped-knowband_logo-v2.png","contentUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/09\/cropped-knowband_logo-v2.png","width":153,"height":61,"caption":"Knowband Blog | Ecommerce Modules"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Knowband","https:\/\/x.com\/KnowbandPlugin"]},{"@type":"Person","@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/person\/57eba27850520f4c8de3853ee8755a55","name":"Sunny Saurabh","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/IMG_20181029_123810-150x150.jpg","url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/IMG_20181029_123810-150x150.jpg","contentUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/IMG_20181029_123810-150x150.jpg","caption":"Sunny Saurabh"},"description":"Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as an expert as a PHP developer. He has also expert in database design, server maintenance and security. He has achieved this goal only in the short span of 3yrs and still looking forward to achieving more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.","url":"https:\/\/www.knowband.com\/blog\/pt-br\/author\/ssaurabh\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/28153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/comments?post=28153"}],"version-history":[{"count":0,"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/28153\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/media\/816736"}],"wp:attachment":[{"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=28153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=28153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=28153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}