{"id":113,"date":"2023-01-31T10:42:00","date_gmt":"2023-01-31T09:42:00","guid":{"rendered":"https:\/\/josefnemec.cz\/blog\/?p=113"},"modified":"2024-12-31T10:44:05","modified_gmt":"2024-12-31T09:44:05","slug":"co-je-jquery-a-proc-ho-pouzivat","status":"publish","type":"post","link":"https:\/\/josefnemec.cz\/blog\/technologie\/co-je-jquery-a-proc-ho-pouzivat\/","title":{"rendered":"Co je jQuery a pro\u010d ho pou\u017e\u00edvat?"},"content":{"rendered":"\n

jQuery je popul\u00e1rn\u00ed JavaScriptov\u00e1 knihovna, kter\u00e1 v\u00fdrazn\u011b usnad\u0148uje manipulaci s HTML dokumentem, pr\u00e1ci s ud\u00e1lostmi, animacemi a AJAX komunikac\u00ed. Byla vytvo\u0159ena v roce 2006 Johnem Resigem a rychle si z\u00edskala oblibu d\u00edky sv\u00e9 jednoduchosti a \u0161irok\u00e9 podpo\u0159e prohl\u00ed\u017ee\u010d\u016f.<\/p>\n\n\n\n

Hlavn\u00ed v\u00fdhody jQuery<\/h3>\n\n\n\n
    \n
  1. Jednoduch\u00e1 syntaxe:<\/strong> jQuery umo\u017e\u0148uje ps\u00e1t m\u00e9n\u011b k\u00f3du a dos\u00e1hnout v\u00edce.<\/li>\n\n\n\n
  2. Podpora prohl\u00ed\u017ee\u010d\u016f:<\/strong> Umo\u017e\u0148uje jednotn\u00e9 chov\u00e1n\u00ed k\u00f3du nap\u0159\u00ed\u010d r\u016fzn\u00fdmi prohl\u00ed\u017ee\u010di.<\/li>\n\n\n\n
  3. Roz\u0161i\u0159itelnost:<\/strong> jQuery je modul\u00e1rn\u00ed a m\u016f\u017eete snadno p\u0159id\u00e1vat vlastn\u00ed pluginy.<\/li>\n\n\n\n
  4. Velk\u00e1 komunita:<\/strong> D\u00edky sv\u00e9 popularit\u011b m\u00e1 jQuery rozs\u00e1hlou komunitu a spoustu dostupn\u00fdch n\u00e1vod\u016f a roz\u0161\u00ed\u0159en\u00ed.<\/li>\n<\/ol>\n\n\n\n

    Jak jQuery funguje?<\/h3>\n\n\n\n

    Z\u00e1kladn\u00ed koncept jQuery je v\u00fdb\u011br HTML element\u016f pomoc\u00ed CSS selektor\u016f a jejich manipulace. Nap\u0159\u00edklad v\u00fdb\u011br v\u0161ech odstavc\u016f na str\u00e1nce a zm\u011bna jejich barvy:<\/p>\n\n\n\n

    <!DOCTYPE html>\n<html lang=\"cs\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>jQuery P\u0159\u00edklad<\/title>\n    <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n    <script>\n        $(document).ready(function() {\n            $(\"p\").css(\"color\", \"blue\");\n        });\n    <\/script>\n<\/head>\n<body>\n    <p>Toto je odstavec.<\/p>\n    <p>A dal\u0161\u00ed odstavec.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Tento k\u00f3d zajist\u00ed, \u017ee po na\u010dten\u00ed str\u00e1nky budou v\u0161echny odstavce modr\u00e9.<\/p>\n\n\n\n
    P\u0159\u00edklad pou\u017eit\u00ed jQuery<\/h3>\n\n\n\n
    Skryt\u00ed a zobrazen\u00ed element\u016f<\/h4>\n\n\n\n
    Pomoc\u00ed jQuery m\u016f\u017eete snadno manipulovat se zobrazen\u00edm HTML element\u016f:<\/p>\n\n\n\n
    <button id=\"toggle\">Zobrazit\/Skryt<\/button>\n<div id=\"content\">Tento text m\u016f\u017eete skr\u00fdvat a zobrazovat.<\/div>\n\n<script>\n    $(\"#toggle\").click(function() {\n        $(\"#content\").toggle();\n    });\n<\/script><\/code><\/pre>\n\n\n\n
    Kliknut\u00edm na tla\u010d\u00edtko se text zobraz\u00ed nebo skryje.<\/p>\n\n\n\n
    AJAX s jQuery<\/h4>\n\n\n\n
    jQuery zjednodu\u0161uje pr\u00e1ci s AJAX po\u017eadavky:<\/p>\n\n\n\n
    $.ajax({\n    url: \"https:\/\/api.example.com\/data\",\n    method: \"GET\",\n    success: function(response) {\n        console.log(response);\n    },\n    error: function(error) {\n        console.error(\"Chyba: \", error);\n    }\n});<\/code><\/pre>\n\n\n\n
    Tento k\u00f3d na\u010dte data z API a zobraz\u00ed je v konzoli.<\/p>\n\n\n\n
    Pro\u010d pou\u017e\u00edvat jQuery v modern\u00edm v\u00fdvoji?<\/h3>\n\n\n\n
    I kdy\u017e modern\u00ed prohl\u00ed\u017ee\u010de nab\u00edzej\u00ed pokro\u010dil\u00e9 funkce JavaScriptu a mnoho funkcionalit jQuery lze nyn\u00ed prov\u00e9st nativn\u011b, jQuery st\u00e1le nach\u00e1z\u00ed uplatn\u011bn\u00ed v n\u00e1sleduj\u00edc\u00edch p\u0159\u00edpadech:<\/p>\n\n\n\n
      \n
    1. Star\u0161\u00ed projekty:<\/strong> Pokud pracujete na projektu, kter\u00fd ji\u017e jQuery pou\u017e\u00edv\u00e1.<\/li>\n\n\n\n
    2. Rychl\u00fd prototyp:<\/strong> jQuery umo\u017e\u0148uje rychlou implementaci funkcionalit bez hlub\u0161\u00edho pl\u00e1nov\u00e1n\u00ed.<\/li>\n\n\n\n
    3. Jednoduchost:<\/strong> Pro jednoduch\u00e9 manipulace a efekty je jQuery st\u00e1le velmi u\u017eite\u010dn\u00e9.<\/li>\n<\/ol>\n\n\n\n
      Jak za\u010d\u00edt s jQuery?<\/h3>\n\n\n\n
        \n
      1. Zahrnut\u00ed jQuery do projektu:<\/strong><\/li>\n<\/ol>\n\n\n\n
        Pou\u017eijte CDN:<\/p>\n\n\n\n
        <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script><\/code><\/pre>\n\n\n\n
          \n
        1. Za\u010dn\u011bte experimentovat:<\/strong> Vyzkou\u0161ejte z\u00e1kladn\u00ed funkce, jako je v\u00fdb\u011br element\u016f a jejich manipulace.<\/li>\n\n\n\n
        2. Projd\u011bte dokumentaci:<\/strong> Ofici\u00e1ln\u00ed dokumentace je dostupn\u00e1 na https:\/\/jquery.com<\/a>.<\/li>\n<\/ol>\n\n\n\n
          jQuery je st\u00e1le u\u017eite\u010dn\u00fd n\u00e1stroj pro mnoho sc\u00e9n\u00e1\u0159\u016f a jeho jednoduchost z n\u011bj \u010din\u00ed ide\u00e1ln\u00ed volbu pro rychl\u00e9 prototypy a men\u0161\u00ed projekty.<\/p>\n","protected":false},"excerpt":{"rendered":"
          jQuery je popul\u00e1rn\u00ed JavaScriptov\u00e1 knihovna, kter\u00e1 v\u00fdrazn\u011b usnad\u0148uje manipulaci s HTML dokumentem, pr\u00e1ci s ud\u00e1lostmi, animacemi a AJAX komunikac\u00ed. Byla vytvo\u0159ena v roce 2006 Johnem Resigem a rychle si z\u00edskala oblibu d\u00edky sv\u00e9 jednoduchosti a \u0161irok\u00e9 podpo\u0159e prohl\u00ed\u017ee\u010d\u016f. Hlavn\u00ed v\u00fdhody<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[77],"tags":[16,34,29,48],"class_list":["post-113","post","type-post","status-publish","format-standard","hentry","category-technologie","tag-javasript","tag-jquery","tag-latte","tag-webdesign"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/josefnemec.cz\/blog\/wp-json\/wp\/v2\/posts\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/josefnemec.cz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/josefnemec.cz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/josefnemec.cz\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/josefnemec.cz\/blog\/wp-json\/wp\/v2\/comments?post=113"}],"version-history":[{"count":1,"href":"https:\/\/josefnemec.cz\/blog\/wp-json\/wp\/v2\/posts\/113\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/josefnemec.cz\/blog\/wp-json\/wp\/v2\/posts\/113\/revisions\/114"}],"wp:attachment":[{"href":"https:\/\/josefnemec.cz\/blog\/wp-json\/wp\/v2\/media?parent=113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/josefnemec.cz\/blog\/wp-json\/wp\/v2\/categories?post=113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/josefnemec.cz\/blog\/wp-json\/wp\/v2\/tags?post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}