{"id":1134,"date":"2022-02-23T13:20:21","date_gmt":"2022-02-23T04:20:21","guid":{"rendered":"http:\/\/mylittleforest.kr\/wordpress\/?p=1134"},"modified":"2022-02-23T13:20:35","modified_gmt":"2022-02-23T04:20:35","slug":"jquery","status":"publish","type":"post","link":"http:\/\/mylittleforest.kr\/wordpress\/blog\/2022\/02\/23\/1134\/","title":{"rendered":"jQuery"},"content":{"rendered":"\n<h2><a href=\"https:\/\/www.w3schools.com\/jquery\/default.asp\" target=\"_blank\" rel=\"noreferrer noopener\">jQuery<\/a><\/h2>\n\n\n\n<ul><li>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub2e8\uc21c\ud654 \ub77c\uc774\ube0c\ub7ec\ub9ac<\/li><li>\ud2b9\uc9d5<ul><li>\ube60\ub974\uace0, \uc791\uace0, \uae30\ub2a5\uc774 \ub9ce\uc740 JavaScript\ub77c\uc774\ube0c\ub7ec\ub9ac<\/li><li>HTML\ubb38\uc11c \uc870\uc791, \uc774\ubca4\ud2b8 \ucc98\ub9ac, \uc560\ub2c8\uba54\uc774\uc158, Ajax\uc640 \uac19\uc740 \uac83\ub4e4\uc744 \uac04\ud3b8\ud558\uac8c \uc0ac\uc6a9\ud558\uac8c \ud568<\/li><li>\uc5c5\uacc4\uc5d0\uc11c\ub294 \ud45c\uc900\uc5d0 \uac00\uae4c\uc6b4 \uc810\uc720\uc728\uc744 \uac00\uc9c0\uace0 \uc788\uc74c<\/li><\/ul><\/li><li>\ub77c\uc774\ube0c\ub7ec\ub9ac<ul><li>\uc790\uc8fc \uc0ac\uc6a9\ub418\ub294 \ud568\uc218, \uae30\ub2a5\ub4e4\uc744 \uc7ac\ud65c\uc6a9 \uac00\ub2a5\ud558\ub3c4\ub85d \ub9cc\ub4e0 \ubb36\uc74c<\/li><li>javascript\ub294 \ub2e4\uc591\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ubcf4\uc720 : jQuery, React, Moment, lodash \ub4f1<\/li><li>jQuery\ub294 javascript \ud504\ub85c\uadf8\ub798\ubc0d \uc2dc\uc5d0 \ub3c4\uc6c0\uc774 \ub418\ub294 \uc5ec\ub7ec \ud568\uc218\ub4e4\uc744 \uc81c\uacf5<\/li><\/ul><\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n$(&quot;#continue&quot;).text(&quot;NextStep...&quot;)\nvs\ndocument.getElementById(&quot;continue&quot;).innerHTML =&quot;Nextstep...&quot;\n<\/pre><\/div>\n\n\n<h3><strong><a href=\"https:\/\/www.w3schools.com\/jquery\/jquery_syntax.asp\" target=\"_blank\" rel=\"noreferrer noopener\">$(selector).action();<\/a><\/strong><\/h3>\n\n\n\n<ul><li>$ : Jquery\ub77c\ub294 \uac83\uc744 \uc815\uc758<\/li><li>(selector) : \uc9c8\uc758\ud558\uac70\ub098 \ucc3e\uc744 html\uc694\uc18c<\/li><li>action() : \uc774 \uc694\uc18c\uac00 \uc218\ud589\ud560 \uae30\ub2a5<\/li><\/ul>\n\n\n\n<h3>Click\ud568\uc218<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n  &lt;head&gt;\n    &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-3.4.1.min.js&quot;&gt;&lt;\/script&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;button id=&quot;alert&quot;&gt;Alert!&lt;\/p&gt;\n    &lt;script src=&quot;.\/0512-example.js&quot;&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n$(&quot;#alert&quot;).click(function() {\n  alert(&quot;Button Clicked!&quot;)\n});\n<\/pre><\/div>\n\n\n<div class=\"wp-block-file\"><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0511-jquery-1.html\">0511-jquery-1<\/a><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0511-jquery-1.html\" class=\"wp-block-file__button\" download>\ub2e4\uc6b4\ub85c\ub4dc<\/a><\/div>\n\n\n\n<div class=\"wp-block-file\"><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0512-example.js\">0512-example<\/a><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0512-example.js\" class=\"wp-block-file__button\" download>\ub2e4\uc6b4\ub85c\ub4dc<\/a><\/div>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n  &lt;body&gt;\n    &lt;button id=&quot;alert&quot;&gt;Alert!&lt;\/p&gt;\n    &lt;button id=&quot;button2&quot;&gt;Click me!&lt;\/p&gt;\n    &lt;script src=&quot;.\/0512-example.js&quot;&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n$(&quot;#alert&quot;).click(function() {\n  alert(&quot;Button Clicked!&quot;);\n});\n\n$(&quot;#button2&quot;).click(function() {\n  $(&quot;#alert&quot;).click();\n});\n<\/pre><\/div>\n\n\n<div class=\"wp-block-file\"><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0513-jquery-2.html\">0513-jquery-2<\/a><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0513-jquery-2.html\" class=\"wp-block-file__button\" download>\ub2e4\uc6b4\ub85c\ub4dc<\/a><\/div>\n\n\n\n<h3><a href=\"https:\/\/www.w3schools.com\/jquery\/jquery_dom_get.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Html \ud568\uc218 <\/a> <\/h3>\n\n\n\n<ul><li>html \ud0dc\uadf8\uc758 \ub0b4\uc6a9\uc744 \uac00\uc838\uc628\ub2e4.<\/li><li>html\ud0dc\uadf8\uc758 \ub0b4\uc6a9\uc744 \ubcc0\uacbd\ud55c\ub2e4.<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n  &lt;body&gt;\n    &lt;div class=&quot;demo-container&quot;&gt;\n      &lt;div class=&quot;demo-box&quot;&gt;Demonstration Box&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;script&gt;\n      alert($(&quot;div.demo-container&quot;).html());\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n<\/pre><\/div>\n\n\n<div class=\"wp-block-file\"><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0514-jquery-html-1.html\">0514-jquery-html-1<\/a><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0514-jquery-html-1.html\" class=\"wp-block-file__button\" download>\ub2e4\uc6b4\ub85c\ub4dc<\/a><\/div>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n  &lt;body&gt;\n    &lt;div class=&quot;demo-container&quot;&gt;\n      &lt;div class=&quot;demo-box&quot;&gt;Demonstration Box&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;button id=&quot;btn&quot;&gt;Click me!&lt;\/p&gt;\n    &lt;script&gt;\n      $(&quot;#btn&quot;).click(function() {\n        $(&quot;div.demo-container&quot;).html(&quot;&lt;div&gt;Button Clicked!&lt;\/div&gt;&quot;);\n      });\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n<\/pre><\/div>\n\n\n<div class=\"wp-block-file\"><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0515-jquery-html-2.html\">0515-jquery-html-2<\/a><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0515-jquery-html-2.html\" class=\"wp-block-file__button\" download>\ub2e4\uc6b4\ub85c\ub4dc<\/a><\/div>\n\n\n\n<h2>text \ud568\uc218<\/h2>\n\n\n\n<ul><li>html \ud0dc\uadf8\uc758 \ud14d\uc2a4\ud2b8 \ub0b4\uc6a9\uc744 \uac00\uc838\uc628\ub2e4.<\/li><li>html\ud0dc\uadf8\uc758 \ud14d\uc2a4\ud2b8 \ub0b4\uc6a9\uc744 \ubcc0\uacbd\ud55c\ub2e4.<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n    &lt;script&gt;\n      $(&quot;#btn&quot;).click(function() {\n        alert($(&quot;div.demo-box&quot;).text());\n      });\n    &lt;\/script&gt;\n<\/pre><\/div>\n\n\n<div class=\"wp-block-file\"><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0516-jquery-text-1.html\">0516-jquery-text-1<\/a><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0516-jquery-text-1.html\" class=\"wp-block-file__button\" download>\ub2e4\uc6b4\ub85c\ub4dc<\/a><\/div>\n\n\n\n<h3><a href=\"https:\/\/www.w3schools.com\/jquery\/jquery_dom_remove.asp\" target=\"_blank\" rel=\"noreferrer noopener\">remove \ud568\uc218<\/a><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n  &lt;body&gt;\n    &lt;div class=&quot;demo-container&quot;&gt;\n      &lt;div class=&quot;demo-box&quot;&gt;Demonstration Box&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;button id=&quot;btn&quot;&gt;Click me!&lt;\/p&gt;\n    &lt;script&gt;\n      $(&quot;#btn&quot;).click(function() {\n        $(&quot;div.demo-box&quot;).remove();\n      });\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n\n\uacb0\uacfc :\n&lt;div class=&quot;demo-container&quot;&gt;&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<div class=\"wp-block-file\"><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0517-jquery-remove-1.html\">0517-jquery-remove-1<\/a><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0517-jquery-remove-1.html\" class=\"wp-block-file__button\" download>\ub2e4\uc6b4\ub85c\ub4dc<\/a><\/div>\n\n\n\n<h3>empty\ud568\uc218<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n    &lt;script&gt;\n      $(&quot;#btn&quot;).click(function() {\n        $(&quot;div.demo-box&quot;).empty();\n      });\n    &lt;\/script&gt;\n\n\uacb0\uacfc:\n    &lt;div class=&quot;demo-container&quot;&gt;&lt;div class=&quot;demo-box&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<div class=\"wp-block-file\"><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0518-jquery-empty-1.html\">0518-jquery-empty-1<\/a><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0518-jquery-empty-1.html\" class=\"wp-block-file__button\" download>\ub2e4\uc6b4\ub85c\ub4dc<\/a><\/div>\n\n\n\n<h3><a href=\"https:\/\/www.w3schools.com\/jquery\/jquery_dom_add.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Append \ud568\uc218<\/a><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n    &lt;script&gt;\n      $(&quot;#btn&quot;).click(function() {\n        $(&quot;div.demo-box&quot;).append(&quot;&lt;p&gt;Append Sample&lt;\/p&gt;&quot;);\n      });\n    &lt;\/script&gt;\n<\/pre><\/div>\n\n\n<div class=\"wp-block-file\"><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0519-jquery-append-1.html\">0519-jquery-append-1<\/a><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0519-jquery-append-1.html\" class=\"wp-block-file__button\" download>\ub2e4\uc6b4\ub85c\ub4dc<\/a><\/div>\n\n\n\n<h3><a href=\"https:\/\/www.w3schools.com\/jquery\/jquery_css_classes.asp\" target=\"_blank\" rel=\"noreferrer noopener\">addClass, removeClass \ud568\uc218<\/a><\/h3>\n\n\n\n<ul><li>addClass : \uc120\ud0dd\ud55c \ud0dc\uadf8\uc5d0 class\ub97c \ucd94\uac00\ud55c\ub2e4<\/li><li>removeClass : \uc120\ud0dd\ud55c \ud0dc\uadf8\uc5d0\uc11c class\ub97c \uc81c\uac70\ud55c\ub2e4.<\/li><li>hasClass : \uc120\ud0dd\ud55c \ud0dc\uadf8\uac00 \ud574\ub2f9 class\ub97c \uac00\uc9c0\uace0 \uc788\ub294\uc9c0 \ud655\uc778\ud55c\ub2e4.<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n  &lt;head&gt;\n    &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-3.4.1.min.js&quot;&gt;&lt;\/script&gt;\n    &lt;style&gt;\n      .red { color: red; }\n      .yellow { color: yellow; }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=&quot;demo-container&quot;&gt;\n      &lt;div class=&quot;demo-box&quot;&gt;Demonstration Box&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;button id=&quot;red_btn&quot;&gt;Red&lt;\/p&gt;\n    &lt;button id=&quot;yellow_btn&quot;&gt;Yellow&lt;\/p&gt;\n    &lt;script&gt;\n      $(&quot;#red_btn&quot;).click(function() {\n        $(&quot;div.demo-box&quot;).removeClass(&quot;yellow&quot;);\n        $(&quot;div.demo-box&quot;).addClass(&quot;red&quot;);\n      });\n      $(&quot;#yellow_btn&quot;).click(function() {\n        $(&quot;div.demo-box&quot;).removeClass(&quot;red&quot;);\n        $(&quot;div.demo-box&quot;).addClass(&quot;yellow&quot;);\n      });\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n<\/pre><\/div>\n\n\n<div class=\"wp-block-file\"><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0520-jquery-addclass-1.html\">0520-jquery-addclass-1<\/a><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0520-jquery-addclass-1.html\" class=\"wp-block-file__button\" download>\ub2e4\uc6b4\ub85c\ub4dc<\/a><\/div>\n\n\n\n<h3><a href=\"https:\/\/www.w3schools.com\/jquery\/jquery_dom_set.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Val\ud568\uc218<\/a><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n  &lt;body&gt;\n    &lt;input type=&quot;text&quot; id=&quot;inputBox&quot;&gt;\n    &lt;select id=&quot;selectBox&quot;&gt;\n      &lt;option value=&quot;1&quot;&gt;option 1&lt;\/option&gt;\n      &lt;option value=&quot;2&quot;&gt;option 2&lt;\/option&gt;\n      &lt;option value=&quot;3&quot;&gt;option 3&lt;\/option&gt;\n      &lt;option value=&quot;4&quot;&gt;option 4&lt;\/option&gt;\n    &lt;\/select&gt;\n    &lt;script&gt;\n      $(&quot;#inputBox&quot;).val(&quot;Hi hi&quot;);\n      $(&quot;#selectBox&quot;).val(3);\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n<\/pre><\/div>\n\n\n<div class=\"wp-block-file\"><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0521-jquery-val-1.html\">0521-jquery-val-1<\/a><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0521-jquery-val-1.html\" class=\"wp-block-file__button\" download>\ub2e4\uc6b4\ub85c\ub4dc<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>jQuery \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub2e8\uc21c\ud654 \ub77c\uc774\ube0c\ub7ec\ub9ac \ud2b9\uc9d5 \ube60\ub974\uace0, \uc791\uace0, \uae30\ub2a5\uc774 \ub9ce\uc740 JavaScript\ub77c\uc774\ube0c\ub7ec\ub9ac HTML\ubb38\uc11c \uc870\uc791, \uc774\ubca4\ud2b8 \ucc98\ub9ac, \uc560\ub2c8\uba54\uc774\uc158, Ajax\uc640 \uac19\uc740 \uac83\ub4e4\uc744 \uac04\ud3b8\ud558\uac8c \uc0ac\uc6a9\ud558\uac8c \ud568 \uc5c5\uacc4\uc5d0\uc11c\ub294 \ud45c\uc900\uc5d0 \uac00\uae4c\uc6b4 \uc810\uc720\uc728\uc744 \uac00\uc9c0\uace0 \uc788\uc74c \ub77c\uc774\ube0c\ub7ec\ub9ac \uc790\uc8fc \uc0ac\uc6a9\ub418\ub294 \ud568\uc218, \uae30\ub2a5\ub4e4\uc744 \uc7ac\ud65c\uc6a9 \uac00\ub2a5\ud558\ub3c4\ub85d \ub9cc\ub4e0 \ubb36\uc74c javascript\ub294 \ub2e4\uc591\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ubcf4\uc720 : jQuery, React, Moment, lodash \ub4f1 jQuery\ub294 javascript \ud504\ub85c\uadf8\ub798\ubc0d \uc2dc\uc5d0 \ub3c4\uc6c0\uc774 \ub418\ub294 \uc5ec\ub7ec \ud568\uc218\ub4e4\uc744 \uc81c\uacf5 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[38],"tags":[],"_links":{"self":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts\/1134"}],"collection":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/comments?post=1134"}],"version-history":[{"count":24,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts\/1134\/revisions"}],"predecessor-version":[{"id":1171,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts\/1134\/revisions\/1171"}],"wp:attachment":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/media?parent=1134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/categories?post=1134"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/tags?post=1134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}