{"id":28151,"date":"2018-10-30T07:00:56","date_gmt":"2018-10-30T07:00:56","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=22312\/"},"modified":"2022-07-14T13:21:02","modified_gmt":"2022-07-14T13:21:02","slug":"come-creare-il-tuo-modello-html-utilizzando-jquery","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-jquery\/","title":{"rendered":"Come creare il tuo modello HTML usando jQuery?"},"content":{"rendered":"

<\/head>Questo articolo riguarda la creazione di modelli HTML utilizzando jQuery.<\/p>\n

Conosciamo il jQuery<\/h2>\n

jQuery \u00e8 una libreria JavaScript veloce, piccola e ricca di funzionalit\u00e0. Rende cose come l’attraversamento e la manipolazione di documenti HTML, la gestione degli eventi, l’animazione e Ajax molto pi\u00f9 semplici con un’API facile da usare che funziona su una moltitudine di browser. Con una combinazione di versatilit\u00e0 ed estensibilit\u00e0, jQuery ha cambiato il modo in cui milioni di persone scrivono JavaScript.<\/p>\n

Conosciamo il modello jQuery<\/h2>\n

\"scopri<\/a><\/p>\n

jQuery Template ci offre un’opzione o un supporto per la visualizzazione e la manipolazione del contenuto sul browser. Utilizzando il jQuery Template possiamo eseguire il rendering della stringa JSON negli elementi HTML. Consideriamo un semplice esempio, possiamo usare jQuery Template per visualizzare alcuni set di record che abbiamo ottenuto da una richiesta di Ajax.<\/p>\n

Un esempio di base di modelli jQuery<\/h2>\n

Ora creiamo una semplice pagina usando i modelli jQuery. Useremo solo il plugin jQuery. In questo esempio, ti mostreremo come creare un modello e renderizzare il contenuto dal JSON.<\/p>\n

Requisito<\/h2>\n

Cerchiamo di capire prima il requisito. Supponiamo di dover creare una pagina Web come il sito Web di KnowBand per vendere i moduli per la piattaforma di e-commerce come Opencart, Prestashop ecc. Abbiamo alcuni moduli o plug-in di e-commerce che vogliamo elencare sul sito di KnowBand. Quindi, nella pagina dell’elenco, mostreremo il nome, l’immagine e il prezzo del modulo. Useremo la seguente stringa JSON per elencare i dati:<\/p>\n

[ { \"name\": \"Schede prodotto- 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\": \"App Prestashop Mobile 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 - Estensioni Magento\", \"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\", \"prezzo \": \"$43\" } ]<\/pre>\n
\"Abbiamo<\/a><\/h2>\n
    \n
  1. \n
    Utilizzando il tag script HTML<\/h3>\n
    In questo metodo, scriveremo il codice HTML nel tag di script. Il codice completo \u00e8 riportato di seguito:<\/li>\n<\/ol>\n
    <html>\n    <head>\n            <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css&quot;>\n            <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js&quot;&gt;&lt;\/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>\n
    Abbiamo creato una miniatura all’interno del tag script, ad esempio il tag script #blog, ed \u00e8 stato utilizzato come modello. Nel codice sopra, abbiamo usato {{ }} per le variabili jolly. Capiamo in realt\u00e0 cosa abbiamo fatto nel codice sopra:<\/p>\n
    var temp = $.trim($('#blog').html()); \/\/ Caricher\u00e0 tutto il contenuto del tag script #blog in una variabile temporanea. var x = temp.replace(\/{{nome}}\/ig, obj.name); \/\/ Sostituita la variabile jolly {{name}} con i dati corrispondenti dal JSON. x = x.replace(\/{{image_url}}\/ig, obj.image_url); \/\/ Sostituita la variabile jolly {{image_url}} con i dati corrispondenti del JSON. x = x.replace(\/{{prezzo}}\/ig, obj.prezzo); \/\/ Sostituita la variabile jolly {{price}} con i dati corrispondenti del JSON. x = x.replace(\/{{module_url}}\/ig, obj.module_url); \/\/ Sostituita la variabile jolly {{module_url}} con i dati corrispondenti del JSON. $('.container').append(x); \/\/ ha aggiunto il contenuto al contenitore div.<\/pre>\n
      \n
    1. \n
      Usando la tecnica del segnaposto<\/h3>\n<\/li>\n<\/ol>\n
      In questa tecnica, aggiungeremo il contenuto nell’HTML dopo aver popolato i dati utilizzando la tecnica del segnaposto jQuery. Il codice completo \u00e8 riportato di seguito:<\/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>\n
      Nell’esempio sopra, abbiamo usato ` (back-tick) come modello letterale e ${ } come segnaposto. Quando confrontiamo il metodo 1 con il metodo 2, possiamo facilmente dire che il modello letterale e il segnaposto semplificano il nostro compito. In questo esempio, abbiamo scritto il codice del modello in un ciclo e sostituito i nostri segnaposto con i dati corrispondenti.<\/p>\n
      sommario<\/h2>\n
      Per saperne di pi\u00f9 sui modelli jQuery, ti consiglio di guardare la documentazione per i modelli jQuery sul sito Web ufficiale di jQuery.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Questo articolo riguarda la creazione di modelli HTML utilizzando jQuery. Conosciamo il jQuery jQuery \u00e8 una libreria JavaScript veloce, piccola e ricca di funzionalit\u00e0. Rende cose come l’attraversamento e la manipolazione di documenti HTML, la gestione degli eventi, l’animazione e Ajax molto pi\u00f9 semplici con un’API facile da usare che funziona su una moltitudine di […]<\/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":[27041,27039,13472,13474,13471,27040,13473,27042,13475,16493,8798],"class_list":["post-28151","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-crea-un-modello-html-ecommerce-utilizzando-jquery","tag-crea-un-modello-html-usando-jquery","tag-crea-un-template-html-usando-jquery","tag-creare-template-html-ecommerce-usando-jquery","tag-creare-un-modello-html","tag-creazione-di-modelli-tramite-jquery","tag-creazione-di-template-usando-jquery","tag-modello-html-usando-jquery","tag-template-html-usando-jquery","tag-vantaggi-e-svantaggi-di-opencart"],"acf":[],"yoast_head":"\nCome creare il tuo modello 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\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come creare il tuo modello HTML usando jQuery? - Knowband Blog | Ecommerce Modules\" \/>\n<meta property=\"og:description\" content=\"Questo articolo riguarda la creazione di modelli HTML utilizzando jQuery. Conosciamo il jQuery jQuery \u00e8 una libreria JavaScript veloce, piccola e ricca di funzionalit\u00e0. Rende cose come l’attraversamento e la manipolazione di documenti HTML, la gestione degli eventi, l’animazione e Ajax molto pi\u00f9 semplici con un’API facile da usare che funziona su una moltitudine di […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.knowband.com\/blog\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-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:02+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\\\/it\\\/non-categorizzato\\\/come-creare-il-tuo-modello-html-utilizzando-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/it\\\/non-categorizzato\\\/come-creare-il-tuo-modello-html-utilizzando-jquery\\\/\"},\"author\":{\"name\":\"Sunny Saurabh\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/person\\\/57eba27850520f4c8de3853ee8755a55\"},\"headline\":\"Come creare il tuo modello HTML usando jQuery?\",\"datePublished\":\"2018-10-30T07:00:56+00:00\",\"dateModified\":\"2022-07-14T13:21:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/it\\\/non-categorizzato\\\/come-creare-il-tuo-modello-html-utilizzando-jquery\\\/\"},\"wordCount\":419,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/it\\\/non-categorizzato\\\/come-creare-il-tuo-modello-html-utilizzando-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/Main-Banner-Jquery.png\",\"keywords\":[\"crea un modello HTML eCommerce utilizzando JQuery\",\"crea un modello html usando jquery\",\"crea un template html usando jquery\",\"creare template HTML eCommerce usando JQuery\",\"creare un modello html\",\"creazione di modelli tramite jquery\",\"creazione di template usando jquery\",\"modello html usando jquery\",\"template html usando jquery\",\"template html usando jquery\",\"vantaggi e svantaggi di OpenCart\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/it\\\/non-categorizzato\\\/come-creare-il-tuo-modello-html-utilizzando-jquery\\\/\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/it\\\/non-categorizzato\\\/come-creare-il-tuo-modello-html-utilizzando-jquery\\\/\",\"name\":\"Come creare il tuo modello HTML usando jQuery? - Knowband Blog | Ecommerce Modules\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/it\\\/non-categorizzato\\\/come-creare-il-tuo-modello-html-utilizzando-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/it\\\/non-categorizzato\\\/come-creare-il-tuo-modello-html-utilizzando-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:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/it\\\/non-categorizzato\\\/come-creare-il-tuo-modello-html-utilizzando-jquery\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.knowband.com\\\/blog\\\/it\\\/non-categorizzato\\\/come-creare-il-tuo-modello-html-utilizzando-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/it\\\/non-categorizzato\\\/come-creare-il-tuo-modello-html-utilizzando-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\\\/it\\\/non-categorizzato\\\/come-creare-il-tuo-modello-html-utilizzando-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Come creare il tuo modello 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\":\"it-IT\"},{\"@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\":\"it-IT\",\"@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\":\"it-IT\",\"@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\\\/it\\\/author\\\/ssaurabh\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Come creare il tuo modello 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\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-jquery\/","og_locale":"it_IT","og_type":"article","og_title":"Come creare il tuo modello HTML usando jQuery? - Knowband Blog | Ecommerce Modules","og_description":"Questo articolo riguarda la creazione di modelli HTML utilizzando jQuery. Conosciamo il jQuery jQuery \u00e8 una libreria JavaScript veloce, piccola e ricca di funzionalit\u00e0. Rende cose come l’attraversamento e la manipolazione di documenti HTML, la gestione degli eventi, l’animazione e Ajax molto pi\u00f9 semplici con un’API facile da usare che funziona su una moltitudine di […]","og_url":"https:\/\/www.knowband.com\/blog\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-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:02+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\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-jquery\/#article","isPartOf":{"@id":"https:\/\/www.knowband.com\/blog\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-jquery\/"},"author":{"name":"Sunny Saurabh","@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/person\/57eba27850520f4c8de3853ee8755a55"},"headline":"Come creare il tuo modello HTML usando jQuery?","datePublished":"2018-10-30T07:00:56+00:00","dateModified":"2022-07-14T13:21:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.knowband.com\/blog\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-jquery\/"},"wordCount":419,"commentCount":0,"publisher":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#organization"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Main-Banner-Jquery.png","keywords":["crea un modello HTML eCommerce utilizzando JQuery","crea un modello html usando jquery","crea un template html usando jquery","creare template HTML eCommerce usando JQuery","creare un modello html","creazione di modelli tramite jquery","creazione di template usando jquery","modello html usando jquery","template html usando jquery","template html usando jquery","vantaggi e svantaggi di OpenCart"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/www.knowband.com\/blog\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-jquery\/","url":"https:\/\/www.knowband.com\/blog\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-jquery\/","name":"Come creare il tuo modello HTML usando jQuery? - Knowband Blog | Ecommerce Modules","isPartOf":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.knowband.com\/blog\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-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:02+00:00","breadcrumb":{"@id":"https:\/\/www.knowband.com\/blog\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-jquery\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.knowband.com\/blog\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.knowband.com\/blog\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-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\/it\/non-categorizzato\/come-creare-il-tuo-modello-html-utilizzando-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.knowband.com\/blog\/fr\/"},{"@type":"ListItem","position":2,"name":"Come creare il tuo modello 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":"it-IT"},{"@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":"it-IT","@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":"it-IT","@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\/it\/author\/ssaurabh\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.knowband.com\/blog\/it\/wp-json\/wp\/v2\/posts\/28151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.knowband.com\/blog\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.knowband.com\/blog\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/it\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/it\/wp-json\/wp\/v2\/comments?post=28151"}],"version-history":[{"count":0,"href":"https:\/\/www.knowband.com\/blog\/it\/wp-json\/wp\/v2\/posts\/28151\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/it\/wp-json\/wp\/v2\/media\/816736"}],"wp:attachment":[{"href":"https:\/\/www.knowband.com\/blog\/it\/wp-json\/wp\/v2\/media?parent=28151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/it\/wp-json\/wp\/v2\/categories?post=28151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/it\/wp-json\/wp\/v2\/tags?post=28151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}