{"id":784,"date":"2014-10-17T12:08:31","date_gmt":"2014-10-17T03:08:31","guid":{"rendered":"http:\/\/www.freesens.com\/x\/?p=784"},"modified":"2024-01-16T09:33:44","modified_gmt":"2024-01-16T00:33:44","slug":"jquery-performance-tips-tricks","status":"publish","type":"post","link":"http:\/\/www.freesens.com\/x\/?p=784","title":{"rendered":"jQuery Performance Tips &#038; Tricks"},"content":{"rendered":"<p>\uc774 \uae00\uc740\u00a0<a title=\"Decoding jQuery series\" href=\"http:\/\/addyosmani.com\/jqprovenperformance\/\" target=\"_blank\" rel=\"noopener\">jQuery Proven Performance Tips And Tricks<\/a>\u00a0\ub97c \ubcf4\uace0 \uacf5\ubd80\ud55c \uc810\uc744 \uc815\ub9ac\ud55c \uae00\uc785\ub2c8\ub2e4. \uc6d0\ubb38\uc758 \ub0b4\uc6a9\uacfc \ub611\uac19\uc740 \ubd80\ubd84\ub3c4 \uc788\uace0 \uc81c\uac00 \uc54c\uace0 \uc788\ub294 \ub0b4\uc6a9\uc744 \ub530\ub85c \ub367\ubd99\uc778 \ubd80\ubd84\ub3c4 \uc788\uc73c\ub2c8\u00a0<a href=\"http:\/\/addyosmani.com\/jqprovenperformance\/\" target=\"_blank\" rel=\"noopener\">\uc6d0\ubb38<\/a>\uc744 \uaf2d \ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n<p>\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2013<\/p>\n<h1>jQuery Proven Performance Tips And Tricks<\/h1>\n<h2><\/h2>\n<h2>\ud37c\ud3ec\uba3c\uc2a4 \ud5a5\uc0c1 \ud328\ud134\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc65c \uc911\uc694\ud55c\uac00\uc694?<\/h2>\n<ul>\n<li>\ud504\ub85c\uadf8\ub7a8 \ucf54\ub4dc\ub294 \uac04\ub2e8 \uba85\ub8cc\ud574\uc57c\uc9c0 \uc5c9\uc131\ud558\uac8c \ub9cc\ub4e4\uba74 \uc548\ub429\ub2c8\ub2e4.<\/li>\n<li>\uc88b\uc740 \ucf54\ub529 \uc2b5\uad00\uc740 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\ub294\ub370 \uc801\ud569\ud55c \ubc29\ubc95\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/li>\n<li>\ud37c\ud3ec\uba3c\uc2a4\uc5d0 \uc88b\uc740 \ud328\ud134\uc744 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uace0 \ucf54\ub529\uc744 \ud55c\ub2e4\uba74 \ube0c\ub77c\uc6b0\uc800\uac00 \uadf8 \ub9cc\ud07c \uc77c\uc744 \ub354 \ub9ce\uc774 \ud558\uac8c \ub429\ub2c8\ub2e4.<\/li>\n<\/ul>\n<div><strong>\ub354 \ub9ce\uc740 \uc77c = \ub354 \ub9ce\uc740 \uba54\ubaa8\ub9ac \uc0ac\uc6a9 = \ub290\ub9b0 \ud504\ub85c\uadf8\ub7a8<\/strong><\/div>\n<h2>..<\/h2>\n<h2><\/h2>\n<h2>\ud37c\ud3ec\uba3c\uc2a4 \ud5a5\uc0c1 Tip 1<\/h2>\n<p>\ud56d\uc0c1 \ucd5c\uc2e0 \ubc84\uc804\uc758 jQuery\ub97c \uc0ac\uc6a9\ud558\uc138\uc694<\/p>\n<ul>\n<li>\uac00\ub2a5\ud558\ub2e4\uba74 \ud56d\uc0c1 \ucd5c\uc2e0 \ubc84\uc804\uc758 jQuery\ub97c \uc0ac\uc6a9\ud558\uc138\uc694<\/li>\n<li>\ucd5c\uc2e0 \ubc84\uc804\uc740 \uc774\uc804 \ubc84\uc804\uc5d0 \ube44\ud574 \uc131\ub2a5\uc774 \ud5a5\uc0c1\ub418\uace0 \ubc84\uadf8\uac00 \uc218\uc815\ub41c \uacbd\uc6b0\uac00 \ub9ce\uc2b5\ub2c8\ub2e4.<\/li>\n<li>jQuery \ud30c\uc77c\uc744 \ucd5c\uc2e0 \ubc84\uc804\uc73c\ub85c \uad50\uccb4\ud574\ub3c4 \ubb38\uc81c\uac00 \uc0dd\uae30\ub294 \uacbd\uc6b0\ub294 \ub9ce\uc9c0 \uc54a\uc740\ud3b8\uc785\ub2c8\ub2e4.<\/li>\n<\/ul>\n<div>\n<h2><\/h2>\n<h2>\ud37c\ud3ec\uba3c\uc2a4 \ud5a5\uc0c1 Tip 2<\/h2>\n<p>\uc140\ub809\ud130\ub97c \uc5b4\ub5bb\uac8c \uc0ac\uc6a9\ud558\ub290\ub0d0\uc5d0 \ub530\ub77c \uc131\ub2a5\uc774 \ud5a5\uc0c1\ub429\ub2c8\ub2e4.<\/p>\n<ul>\n<li>\ubaa8\ub4e0 \uc140\ub809\ud130\uac00 \uac19\uc740 \ubc29\ubc95\uc73c\ub85c jQuery \uac1d\uccb4\ub97c \uc0dd\uc131\ud558\ub294 \uac83\uc740 \uc544\ub2d9\ub2c8\ub2e4.<\/li>\n<li>jQuery\ub294 \uc140\ub809\ud130\ub97c \uc0ac\uc6a9\ud558\ub294 \ub2e4\uc591\ud55c \ubc29\ubc95\uc744 \uc81c\uacf5\ud558\uc9c0\ub9cc, \uac01 \ubc29\ubc95\ubcc4\ub85c \ub0b4\ubd80\uc801 \ucc98\ub9ac\uac00 \ub2e4\ub974\uae30 \ub54c\ubb38\uc5d0 \uc5b4\ub5a4 \uac83\uc740 \ube60\ub974\uace0 \uc5b4\ub5a4 \uac83\uc740 \ub290\ub9bd\ub2c8\ub2e4.<\/li>\n<li>jQuery\ub294 DOM \ub178\ub4dc\ub97c \ud0d0\uc0c9\ud560 \ub54c, \uac00\ub2a5\ud558\uba74 \ube0c\ub77c\uc6b0\uc800 \ub0b4\uc7a5 \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud574\uc11c \ud0d0\uc0c9\ud574\uc11c \uc18d\ub3c4\ub97c \ud5a5\uc0c1\uc2dc\ud0a4\uc9c0\ub9cc \ube0c\ub77c\uc6b0\uc800 \ub0b4\uc7a5 \uba54\uc11c\ub4dc\uac00 \uc9c0\uc6d0\uc774 \uc548\ub418\ub294 \uacbd\uc6b0 \ubaa8\ub4e0 DOM \ub178\ub4dc\ub97c \uc21c\ud68c\ud574\uc57c \ud558\uae30 \ub54c\ubb38\uc5d0 \ub290\ub824\uc9d1\ub2c8\ub2e4.<\/li>\n<\/ul>\n<div><b>ID &amp; Element \uc140\ub809\ud130\uac00 \uac00\uc7a5 \ube60\ub985\ub2c8\ub2e4.<\/b><\/div>\n<div>\n<ul>\n<li>$(\u2018#Element, form, input\u2019)<\/li>\n<li>\uc774 \uc140\ub809\ud130\ub4e4\uc740 \ub0b4\ubd80\uc801\uc73c\ub85c \ube0c\ub77c\uc6b0\uc800 \ub0b4\uc7a5 \uba54\uc11c\ub4dc\uc778 getElementById(), getElementsByTagName()\uc744 \uc0ac\uc6a9\ud558\uae30 \ub54c\ubb38\uc5d0 \uac00\uc7a5 \ube60\ub985\ub2c8\ub2e4.<\/li>\n<li>\uaf2d \uc140\ub809\ud130\uc758 \uacbd\uc6b0\uac00 \uc544\ub2c8\ub354\ub77c\ub3c4 \ucf54\ub529\uc744 \ud560 \ub54c \uac00\ub2a5\ud55c \uacbd\uc6b0 \ube0c\ub77c\uc6b0\uc800 \ub0b4\uc7a5 \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uac00\uc7a5 \ube60\ub985\ub2c8\ub2e4.<\/li>\n<\/ul>\n<div><b>Class \uc140\ub809\ud130\ub294 \ub290\ub9bd\ub2c8\ub2e4.<\/b><\/div>\n<div>\n<ul>\n<li>$(\u2018.element\u2019)<\/li>\n<li>\ud074\ub798\uc2a4\ub97c \uc120\ud0dd\ud560 \uc218 \uc788\ub294 \ube0c\ub77c\uc6b0\uc800 \ub0b4\uc7a5 \uba54\uc11c\ub4dc\uc778 getElementsByClassName()\uc740 IE5~8\uc5d0\uc11c\ub294 \uc9c0\uc6d0\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li>\n<li>\uadf8\ub798\uc11c \ud074\ub798\uc2a4 \uc140\ub809\ud130\ub97c \uc0ac\uc6a9\ud558\uba74 IE5~8\uc5d0\uc11c\ub294 \ub290\ub9bd\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ub0b4\uc7a5 \uba54\uc11c\ub4dc \ub300\uc2e0 jQuery\uac00 \uc9c1\uc811(\ubaa8\ub4e0 DOM \ub178\ub4dc \uc21c\ud68c) \ud074\ub798\uc2a4\ub97c \ucc3e\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.<\/li>\n<\/ul>\n<div><b>Pseudo &amp; Attribute \uc140\ub809\ud130\ub294 \uac00\uc7a5 \ub290\ub9bd\ub2c8\ub2e4.<\/b><\/div>\n<div>\n<ul>\n<li>$(\u2018:visible, :hidden\u2019)<\/li>\n<li>$(\u2018[attribute=value]\u2018)<\/li>\n<li>\uc774 \uc140\ub809\ud130\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 \ub0b4\uc7a5 \uba54\uc11c\ub4dc\uac00 \uc5c6\uae30 \ub54c\ubb38\uc5d0 jQuery\uac00 \uc9c1\uc811 \ucc3e\uc544\uc57c \ud574\uc11c \ub290\ub9bd\ub2c8\ub2e4.<\/li>\n<li>\ucd5c\uc2e0 \ube0c\ub77c\uc6b0\uc800\ub4e4 \uc911 CSS \uc140\ub809\ud130\ub85c DOM \ud0d0\uc0c9\uc774 \uac00\ub2a5\ud55c querySelector(), querySelectorAll() \uc744 \uc9c0\uc6d0\ud558\ub294 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub294 \ube60\ub985\ub2c8\ub2e4.<\/li>\n<li>Pseudo &amp; Attribute \ub294 \ub9e4\uc6b0 \ud3b8\ub9ac\ud558\uc9c0\ub9cc \uac00\ub2a5 \ub290\ub9b4\uc218 \ub3c4 \uc788\uae30 \ub54c\ubb38\uc5d0 \uc0ac\uc6a9\uc5d0 \uc8fc\uc758\ub97c \uae30\uc6b8\uc5ec\uc57c \ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<div>\n<h2><\/h2>\n<h2>\ud37c\ud3ec\uba3c\uc2a4 \ud5a5\uc0c1 Tip 3<\/h2>\n<p>Parent and Children \uc140\ub809\ud130\ub97c \uc0ac\uc6a9\ud560 \ub54c \uc88b\uc740 \ud328\ud134\uc5d0 \ub300\ud574 \uc54c\uc544\ubd05\ub2c8\ub2e4. \uc544\ub798 \ud328\ud134\uc5d0\uc11c $parent\ub294 $(\u2018#parent\u2019) \ub97c \ub2f4\uc544\ub193\uc740 \ubcc0\uc218\uc785\ub2c8\ub2e4. $(\u2018#parent\u2019) \uc744 \ubbf8\ub9ac \ucc98\ub9ac\ud588\uc73c\ubbc0\ub85c \uc5ec\uae30\uc5d0 \uc218\ud589\ub418\ub294 \uc2dc\uac04\uc740 \uace0\ub824\ud558\uc9c0 \uc54a\ub294\ub2e4\ub294 \uc758\ubbf8\uc785\ub2c8\ub2e4.<\/p>\n<ol>\n<li>$(\u2018.child\u2019, $parent).show(); \u00a0 \u00a0\/\/ context<\/li>\n<li>$parent.find(\u2018.child\u2019).show(); \u00a0 \u00a0\/\/ find()<\/li>\n<li>$parent.children(\u2018.child\u2019).show(); \u00a0 \u00a0\/\/ immediate children<\/li>\n<li>$(\u2018#parent &gt; .child\u2019).show(); \u00a0 \u00a0\/\/ child combinator selector<\/li>\n<li>$(\u2018#parent .child\u2019).show(); \u00a0 \u00a0\/\/ class selector<\/li>\n<li>$(\u2018.child\u2019, $(\u2018#parent\u2019)).show(); \u00a0 \u00a0\/\/ created context<\/li>\n<\/ol>\n<div><b>1) $(\u2018.child\u2019, $parent).show();<\/b><\/div>\n<div>\n<ul>\n<li>\uc774 \ud328\ud134\uc740 \ub0b4\ubd80\uc801\uc73c\ub85c\u00a0$parent.find(\u2018.child\u2019).show(); \uc73c\ub85c \ubcc0\ud658\ub418\uc5b4 \ucc98\ub9ac\ub429\ub2c8\ub2e4.<\/li>\n<li>\uac00\uc7a5 \ube60\ub978 \ubc29\ubc95\uc5d0 \ube44\ud574 ~5-10% \ub290\ub9bd\ub2c8\ub2e4.<\/li>\n<\/ul>\n<div><b>2)\u00a0$parent.find(\u2018.child\u2019).show();<\/b><\/div>\n<div>\n<ul>\n<li>\uc774 \ubc29\ubc95\uc774 \uac00\uc7a5 \ube60\ub985\ub2c8\ub2e4.<\/li>\n<li>\uc5ec\uae30\uc5d0 \ub300\ud55c \uc124\uba85\uc740 \uace7 \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n<div><b>3)\u00a0$parent.children(\u2018.child\u2019).show();<\/b><\/div>\n<div>\n<ul>\n<li>\uc774 \ubc29\ubc95\uc740 \ub0b4\ubd80\uc801\uc73c\ub85c $.sibling \uacfc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 nextSibling() \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/li>\n<li>\uac00\uc7a5 \ube60\ub978 \ubc29\ubc95\uc5d0 \ube44\ud574 ~50% \ub290\ub9bd\ub2c8\ub2e4.<\/li>\n<\/ul>\n<div>\u00a0 \u00a0 \u00a0 \u00a0\u00a0<b>4) $(\u2018#parent &gt; .child\u2019).show();<\/b><\/div>\n<div>\n<ul>\n<li>jQuery\ub294 \ub0b4\ubd80\uc801\uc73c\ub85c Sizzle \uc774\ub77c\ub294 CSS \uc140\ub809\ud130 \uc5d4\uc9c4\uc744 \uc0ac\uc6a9\ud558\ub294\ub370 Sizzle\uc740 \uc140\ub809\ud130\ub97c \uc624\ub978\ucabd\uc5d0\uc11c \uc67c\ucabd\uc73c\ub85c \uc77d\uc5b4\uc11c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/li>\n<li>\uc989, .child \ub97c \uba3c\uc800 \ub2e4 \ucc3e\uace0 \uadf8 \uc911\uc5d0\uc11c \ubd80\ubaa8\uac00 #parent \ub97c \uac00\uc9c4 \uac83\uc744 \ucc3e\ub294 \uc2dd\uc785\ub2c8\ub2e4.<\/li>\n<li>\uac00\uc7a5 \ube60\ub978 \ubc29\ubc95\uc5d0 \ube44\ud574 ~70% \ub290\ub9bd\ub2c8\ub2e4.<\/li>\n<\/ul>\n<div><b>5)\u00a0$(\u2018#parent .child\u2019).show();<\/b><\/div>\n<div>\n<ul>\n<li>4\ubc88\uacfc \ub9c8\ucc2c\uac00\uc9c0\ub85c .child\ub97c \ucc3e\uace0 #parent\ub97c \ucc3e\uc2b5\ub2c8\ub2e4.<\/li>\n<li>\ub0b4\ubd80\uc801\uc73c\ub85c .find() \uba54\uc11c\ub4dc\ub3c4 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/li>\n<li>\uac00\uc7a5 \ube60\ub978 \ubc29\ubc95\uc5d0 \ube44\ud574 ~77% \ub290\ub9bd\ub2c8\ub2e4.<\/li>\n<\/ul>\n<div><b>6)\u00a0$(\u2018.child\u2019, $(\u2018#parent\u2019)).show();<\/b><\/div>\n<div>\n<ul>\n<li>\ub0b4\ubd80\uc801\uc73c\ub85c $(\u2018#parent\u2019).find(\u2018.child\u2019) \ub85c \ub3d9\uc791\ud569\ub2c8\ub2e4.<\/li>\n<li>2\ubc88 \uac00\uc7a5 \ube60\ub978 \ubc29\ubc95\uacfc \ube44\uc2b7\ud558\uac8c \uc0dd\uacbc\uc9c0\ub9cc 2\ubc88 \ubc29\ubc95\uc740 \ubbf8\ub9ac $(\u2018#parent\u2019)\ub97c \uacc4\uc0b0\ud574 \ub193\uc740 $parent \ubcc0\uc218\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\uc5b4\uc11c \ub354 \ube60\ub985\ub2c8\ub2e4.<\/li>\n<li>\uac00\uc7a5 \ube60\ub978 \ubc29\ubc95\uc5d0 \ube44\ud574 ~23% \ub290\ub9bd\ub2c8\ub2e4.<\/li>\n<\/ul>\n<div>\uac00\uc7a5 \ube60\ub978 \ubc29\ubc95\uc740\u00a02)\u00a0$parent.find(\u2018.child\u2019).show(); \uc785\ub2c8\ub2e4. $parent \ub294 $(\u2018#parent\u2019) \ub97c \ubcc0\uc218\uc5d0 \ub2f4\uc544\ub193\uc740 \uac83\uc785\ub2c8\ub2e4. \uc774\ub7f0 \ud328\ud134\uc744 \uce90\uc2f1\uc774\ub77c\uace0 \ud569\ub2c8\ub2e4. \uc989, \uc790\uc8fc \uc0ac\uc6a9\ud560 jQuery\uac1d\uccb4\ub97c \ubcc0\uc218\uc5d0 \ub2f4\uc544\ub193\uc544\uc11c \ub098\uc911\uc5d0 \uc0ac\uc6a9\ud560 \ub54c \ub2e4\uc2dc jQuery \uac1d\uccb4\ub97c \ub9cc\ub4dc\ub294\ub370 \uc0ac\uc6a9\ud560 \uc2dc\uac04\uc744 \uc808\uc57d\ud558\ub294 \uac83\uc785\ub2c8\ub2e4.<\/div>\n<div>\ubb34\uc5c7\ubcf4\ub2e4 getElementById \uc640 \uac19\uc740 \ube0c\ub77c\uc6b0\uc800 \ub0b4\uc7a5 \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uac00\uc7a5 \ube60\ub985\ub2c8\ub2e4. \uac00\ub2a5\ud558\ub2e4\uba74 \uc774 \uac83\uc744 \uc0ac\uc6a9\ud558\uc138\uc694<\/div>\n<div>\uc704\uc5d0\uc11c .find() \uba54\uc11c\ub4dc\ub97c \ub9ce\uc774 \uc0ac\uc6a9\ud558\uace0 \uc788\ub294\ub370 .find() \uba54\uc11c\ub4dc\ub294 \uc704\uc5d0\uc11c \uc544\ub798\ub85c \uc7ac\uadc0\uc801\uc73c\ub85c \ud0d0\uc0c9\uc744 \ud55c\ub2e4\ub294 \uc0ac\uc2e4\ub3c4 \uc54c\uc544\ub450\uc138\uc694<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2><\/h2>\n<h2>\ud37c\ud3ec\uba3c\uc2a4 \ud5a5\uc0c1 Tip 4<\/h2>\n<p>\uaf2d \ud544\uc694\ud55c \uacbd\uc6b0\uac00 \uc544\ub2c8\ub77c\uba74 jQuery\ub97c \uc0ac\uc6a9\ud558\uc9c0 \ub9c8\uc138\uc694<\/p>\n<ul>\n<li>$() \ub97c \ud55c\ubc88 \uc218\ud589\ud560 \ub54c\ub9c8\ub2e4 \ub2f9\uc5f0\ud788 \uc2dc\uac04\uc774 \uc18c\uc694\ub429\ub2c8\ub2e4. \ud544\uc694\ud558\uc9c0 \uc54a\uc740 \uacbd\uc6b0\ub77c\uba74 \uc548\uc4f0\ub294 \uac83\uc774 \uc131\ub2a5\ud5a5\uc0c1\uc5d0 \uc88b\uc2b5\ub2c8\ub2e4. jQuery \ub300\uc2e0 \u201c\ubcf4\ud1b5\uc758\u201d \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc138\uc694<\/li>\n<li>jQuery\ub85c \uc791\uc131\ub41c \uc18c\uc2a4\ucf54\ub4dc\uc5d0 \ubcf4\ud1b5 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub97c \uc0ac\uc6a9\ud558\uba74 \uc548\ub420 \uac83 \uac19\uc740 \ub290\ub08c\uc774 \ub4dc\uc2e0\ub2e4\uba74 \uc804\ud600 \uac71\uc815\ud558\uc9c0 \uc54a\uc73c\uc154\ub3c4 \ub429\ub2c8\ub2e4. jQuery\ub3c4 \uadf8\ub0e5 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \ub9cc\ub4e4\uc5b4\uc9c4 \ud568\uc218\uc785\ub2c8\ub2e4. jQuery\uc640 \ubcf4\ud1b5 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc11e\uc5b4\uc4f0\uc154\ub3c4 \uc544\ubb34 \ubb38\uc81c\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n<div>\n<ol>\n<li>$(&#8216;a&#8217;).bind(&#8216;click&#8217;,\u00a0function\u00a0()\u00a0{<\/li>\n<li>\u00a0 \u00a0 console.log(&#8216;You clicked: &#8216;\u00a0+\u00a0$(this).attr(&#8216;id&#8217;));<\/li>\n<li>});<\/li>\n<\/ol>\n<\/div>\n<p>\uc774\ub807\uac8c \uc791\uc131\ud558\uc2dc\uc9c0 \ub9c8\uc2dc\uace0<\/p>\n<div>\n<ol>\n<li>$(&#8216;a&#8217;).bind(&#8216;click&#8217;,\u00a0function\u00a0()\u00a0{<\/li>\n<li>\u00a0 \u00a0 console.log(&#8216;You clicked: &#8216;\u00a0+\u00a0this.id);<\/li>\n<li>});<\/li>\n<\/ol>\n<\/div>\n<p>\uc774\ub807\uac8c \uc791\uc131\ud558\uc138\uc694. function () {} \uc548\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 this \ub294 a \ud0dc\uadf8\uac00 \ub9cc\ub4e0 DOM \uac1d\uccb4\uc785\ub2c8\ub2e4. \uc5ec\uae30\uc5d0\uc11c id \uc5b4\ud2b8\ub9ac\ubdf0\ud2b8\uc5d0 \uc811\uadfc\ud558\uae30 \uc704\ud574 $(this).attr(\u2018id\u2019); \ub97c \ud560 \ud544\uc694\ub294 \uc5c6\uc2b5\ub2c8\ub2e4. \uadf8\ub0e5 this.id \uc640 \uac19\uc774 DOM \uac1d\uccb4 \u2013 \ud504\ub85c\ud37c\ud2f0 \uc811\uadfc\ubc29\ubc95\uc744 \uc0ac\uc6a9\ud558\uc2dc\uba74 \ub418\uace0, \ub354 \ube60\ub985\ub2c8\ub2e4.<\/p>\n<h2><\/h2>\n<h2>\ud37c\ud3ec\uba3c\uc2a4 \ud5a5\uc0c1 Tip 5<\/h2>\n<p>\uce90\uc2f1(Caching) \uc744 \uc0ac\uc6a9\ud558\uc138\uc694. \uc704\uc5d0\uc11c\ub3c4 \uc7a0\uae50 \ub9d0\uc500\ub4dc\ub838\uc9c0\ub9cc \uce90\uc2f1\uc740 \ub2e8\uc9c0 \ub098\uc911\uc5d0 \ub2e4\uc2dc \uc0ac\uc6a9\ud560 \uac83 \uac19\uc740 \u201c\uc880 \uc2dc\uac04\uc774 \uac78\ub838\ub358 \uc791\uc5c5\u201d \uc744 \ubcc0\uc218\uc5d0 \uc800\uc7a5\ud574\uc11c \ub098\uc911\uc5d0 \uc0ac\uc6a9\ud560 \ub54c\ub294 \uadf8 \uc2dc\uac04\uc774 \uac78\ub838\ub358 \uc791\uc5c5\uc744 \ub2e4\uc2dc \uc548\ud574\ub3c4 \ub418\uac8c \ud574\uc8fc\ub294 \ud328\ud134\uc785\ub2c8\ub2e4.<\/p>\n<p>\uc774 \uae00\uc5d0\uc11c \ub9d0\ud558\ub294 \uce90\uc2f1\uc740 \uc140\ub809\ud130\ub97c \uc0ac\uc6a9\ud574 jQuery \uac1d\uccb4\ub97c \ub9cc\ub4dc\ub294 \uc791\uc5c5\uc744 \uce90\uc2f1\ud558\ub294 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<div>\n<ol>\n<li>var\u00a0parents\u00a0=\u00a0$(&#8216;.parents&#8217;),\u00a0\u00a0 \u00a0\/\/ caching<\/li>\n<li>\u00a0 \u00a0 children\u00a0=\u00a0$(&#8216;.parents&#8217;).find(&#8216;.child&#8217;),\u00a0\u00a0 \u00a0\/\/ bad<\/li>\n<li>\u00a0 \u00a0 kids\u00a0=\u00a0parents.find(&#8216;.child&#8217;);\u00a0\u00a0\/\/ good<\/li>\n<\/ol>\n<\/div>\n<p>\uc704 \ucf54\ub4dc\uc5d0\uc11c children \ubcc0\uc218\ub294 \uce90\uc2f1\ud574\ub193\uc740 parents \ubcc0\uc218\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uace0 $(\u2018.parents\u2019)\ub97c \ub610 \ub9cc\ub4e4\uc5c8\uc2b5\ub2c8\ub2e4. kids \ubcc0\uc218\ub294 \uce90\uc2f1\ud574\ub193\uc740 parents \ubcc0\uc218\ub97c \uc0ac\uc6a9\ud558\uace0 \uadf8\ub798\uc11c children \ubcf4\ub2e4 \ube60\ub985\ub2c8\ub2e4.<\/p>\n<div>\n<ol>\n<li>var\u00a0foo\u00a0=\u00a0$(&#8216;.item&#8217;).bind(&#8216;click&#8217;,\u00a0function\u00a0()\u00a0{<\/li>\n<li>\u00a0 \u00a0 foo.not(this).addClass(&#8216;bar&#8217;)<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0.removeClass(&#8216;foobar&#8217;)<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0.fadeOut(500);<\/li>\n<li>});<\/li>\n<\/ol>\n<\/div>\n<p>\uc704 \ucf54\ub4dc\ub294 $(\u2018.item\u2019) \uc744 foo \ub77c\ub294 \ubcc0\uc218\uc5d0 \uce90\uc2f1\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 $(\u2018.item\u2019) \uc5d0 click \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\ub85c \ub4f1\ub85d\ud574 \ub193\uc740 \ud568\uc218\uc548\uc5d0\uc11c foo \ubcc0\uc218\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. item \uc774\ub77c\ub294 \ud074\ub798\uc2a4\ub97c \uac00\uc9c4 \uc5d8\ub9ac\uba3c\ud2b8\ub4e4\uc774 \ud074\ub9ad\ub418\uc5c8\uc744 \ub54c \uc790\uae30 \uc790\uc2e0\ub9cc \ube7c\uace0 \ub098\uba38\uc9c0 item \ub4e4\uc5d0 \ub300\ud574 addClass, removeClass, fadeOut \ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4. \uce90\uc2f1\uc744 \ud1b5\ud574 \uc131\ub2a5\ub3c4 \ud5a5\uc0c1\ub418\uace0 \uc18c\uc2a4\ucf54\ub4dc\ub3c4 \ub354 \uac04\uacb0\ud574 \ubcf4\uc774\ub294 \uac83 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<h2><\/h2>\n<h2>\ud37c\ud3ec\uba3c\uc2a4 \ud5a5\uc0c1 Tip 6<\/h2>\n<p>\uba54\uc11c\ub4dc \uccb4\uc774\ub2dd\uc744 \uc0ac\uc6a9\ud558\uc138\uc694<\/p>\n<div>\n<ol>\n<li>var\u00a0parents\u00a0=\u00a0$(&#8216;.parents&#8217;).doSomething().doSomethingElse();<\/li>\n<\/ol>\n<\/div>\n<ul>\n<li>\uc704 \ucf54\ub4dc\uc5d0\uc11c doSomething() \uba54\uc11c\ub4dc\ub97c \uc2e4\ud589\ud55c \ub2e4\uc74c\uc5d0 \uc5f0\ub2ec\uc544\uc11c doSomething() \uba54\uc11c\ub4dc\ub97c \uc2e4\ud589\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uac83\uc744 \uba54\uc11c\ub4dc \uccb4\uc774\ub2dd \ub610\ub294 \uadf8\ub0e5 \uccb4\uc774\ub2dd\uc774\ub77c\uace0 \ud569\ub2c8\ub2e4.<\/li>\n<li>$(\u2018.parents\u2019).doSomething(); $(\u2018.parents\u2019).doSomethingElse(); \uc774\ub807\uac8c \ub450 \ubc88 \ud55c\uac83\uacfc \uac19\uc740 \uc2e4\ud589\uc744 \ud558\uba74\uc11c \uc18d\ub3c4\ub294 \ub354 \ube60\ub985\ub2c8\ub2e4.<\/li>\n<li>\ub300\ubd80\ubd84\uc758 jQuery \uba54\uc11c\ub4dc\ub4e4\uc740 \uccb4\uc774\ub2dd\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \uccb4\uc774\ub2dd\uc774 \uac00\ub2a5\ud574\uc9c0\ub294 \uc6d0\ub9ac\ub294 \uac04\ub2e8\ud569\ub2c8\ub2e4.\u00a0$(\u2018.parents\u2019).doSomething(); \uc758 \uc2e4\ud589\uacb0\uacfc \ub9ac\ud134\uac12\uc774\u00a0$(\u2018.parents\u2019) \uc774\uae30 \ub54c\ubb38\uc5d0 \uac70\uae30\uc5d0 \uc5f0\ub2ec\uc544\uc11c .\uc744 \ucc0d\uace0\u00a0doSomethingElse(); \ub97c \uc2e4\ud589\ud574\ub3c4 \ub418\ub294 \uac83\uc785\ub2c8\ub2e4.<\/li>\n<li>\ucf54\ub4dc\ub3c4 \uc9e7\uc544\uc9c0\uace0 \uac00\ub3c5\uc131\ub3c4 \ub192\uc544\uc9d1\ub2c8\ub2e4. \uc544\ub798\uc758 \ucf54\ub4dc\ucc98\ub7fc \uc5d4\ud130\ub97c \uba87 \ubc88 \uccd0\uc8fc\uba74 \uac00\ub3c5\uc131\uc740 \ub354 \uc88b\uc544\uc9d1\ub2c8\ub2e4.<\/li>\n<\/ul>\n<div>\n<ol>\n<li>\/\/ Without chaining<\/li>\n<li>$(&#8216;#notification&#8217;).fadeIn(&#8216;slow&#8217;);<\/li>\n<li>$(&#8216;#notification&#8217;).addClass(&#8216;.activeNotification&#8217;);<\/li>\n<li>$(&#8216;#notification&#8217;).css(&#8216;marginLeft&#8217;,\u00a0&#8217;50px&#8217;);<\/li>\n<li><\/li>\n<li>\/\/ With chaining<\/li>\n<li>$(&#8216;#notification&#8217;).fadeIn(&#8216;slow&#8217;)<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0.addClass(&#8216;.activeNotification&#8217;)<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0.css(&#8216;marginLeft&#8217;,\u00a0&#8217;50px&#8217;);<\/li>\n<\/ol>\n<\/div>\n<h2><\/h2>\n<h2>\ud37c\ud3ec\uba3c\uc2a4 \ud5a5\uc0c1 Tip 7<\/h2>\n<p>\uc774\ubca4\ud2b8 \uc704\uc784(event delegation)\uc744 \uc0ac\uc6a9\ud558\uc138\uc694 \uc774\ubca4\ud2b8 \uc704\uc784\uc740 \uc774\ubca4\ud2b8\uc758 bubble \uc18d\uc131\uc744 \uc0ac\uc6a9\ud55c \uac83\uc785\ub2c8\ub2e4. A \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\ub97c \ub4f1\ub85d\ud558\uace0 \uc2f6\uc744 \ub54c \uadf8 \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \ubc14\ub85c \ubd99\uc774\uc9c0 \uc54a\uace0 \uadf8\ubcf4\ub2e4 \uc0c1\uc704 \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 B\uc5d0 \ub4f1\ub85d\ud569\ub2c8\ub2e4. \uc774\ubca4\ud2b8\uac00 A\uc5d0\uc11c \ubc1c\uc0dd\ud588\uc5b4\ub3c4 B\ub85c bubble \ub418\uc5b4 \uc62c\ub77c\uac00\ub294\ub370 \uc774\ub54c B\uc5d0 \ub4f1\ub85d\ub41c \ud578\ub4e4\ub7ec\uc5d0\uc11c A\uc5d0\uc11c \ubc1c\uc0dd\ud55c \uac83\uc778\uc9c0 \uc0b4\ud3b4\ubcf4\uace0 \ub9de\uc73c\uba74 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\ub97c \uc2e4\ud589\ud558\ub294 \ubc29\uc2dd\uc774 \uc774\ubca4\ud2b8 \uc704\uc784\uc785\ub2c8\ub2e4.<\/p>\n<p>\uba87\uba87 \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\ub97c \ub4f1\ub85d\ud560 \ub54c\ub294 \uc774\ubca4\ud2b8 \uc704\uc784\uc774 \ubcc4\ub85c \ud6a8\uacfc\uac00 \uc5c6\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc5b4\ub5a4 ul\uc5d0 li\uac00 100\uac1c \uc788\ub294\ub370 li\uc5d0 click \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\ub97c \ub4f1\ub85d\ud558\ub294 \uacbd\uc6b0\uac00 \uc788\ub2e4\uba74, li \ud558\ub098\ud558\ub098\ub9c8\ub2e4 \ub4f1\ub85d\ud574\uc11c \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec 100\uac1c\ub97c \ub9cc\ub4dc\ub294 \uac83\ubcf4\ub2e4 ul\uc5d0 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec \ud558\ub098\ub97c \ub4f1\ub85d\ud558\ub294 \uac83\uc774 \uc131\ub2a5\uba74\uc5d0\uc11c \uc88b\uc744 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<p>jQuery\uc5d0\uc11c \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\ub97c \ub4f1\ub85d\ud558\ub294\ub370 \uc0ac\uc6a9\ub418\ub294 \uba54\uc11c\ub4dc\ub294 \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \uc9c1\uc811 \ub4f1\ub85d\ud558\ub294 .bind() \uba54\uc11c\ub4dc, \uc774\ubca4\ud2b8 \uc704\uc784\uc744 \uc0ac\uc6a9\ud558\ub294 .live() \uba54\uc11c\ub4dc, .delegate() \uba54\uc11c\ub4dc\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub54c .live() \ubcf4\ub2e4\ub294 .delegate() \uac00 \uc131\ub2a5\uba74\uc5d0\uc11c \ub354 \uc88b\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ucd5c\uadfc\uc5d0 \ub098\uc628 jQuery 1.7 \ubc84\uc804\uc5d0\ub294 \uc774\ubca4\ud2b8\ub97c \ub4f1\ub85d\ud560 \uc218 \uc788\ub294 \uc0c8\ub85c\uc6b4 \uba54\uc11c\ub4dc\uc778 .on() \uba54\uc11c\ub4dc\uac00 \ub098\uc654\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 .bind(), .live(), .delegate() \uba54\uc11c\ub4dc \ubaa8\ub450 jQuery \ub0b4\ubd80\uc801\uc73c\ub85c\ub294 .on() \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uac8c \uc18c\uc2a4\ucf54\ub4dc\uac00 \ubc14\ub00c\uc5c8\uc2b5\ub2c8\ub2e4. \uadf8\ub798\uc11c jQuery 1.7 \uc774\uc0c1 \ubc84\uc804\uc744 \uc0ac\uc6a9\ud558\uc2e0\ub2e4\uba74 \uc5ec\ub7ec \uba54\uc11c\ub4dc\ub4e4 \uc911 \ud558\ub098\ub97c \uc120\ud0dd\ud558\uc2e4 \ud544\uc694\uc5c6\uc774 \uadf8\ub0e5 .on() \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<h2><\/h2>\n<h2>\ud37c\ud3ec\uba3c\uc2a4 \ud5a5\uc0c1 Tip 8<\/h2>\n<p>DOM \uc5d0 \ub178\ub4dc\ub97c \ucd94\uac00\ud558\uac70\ub098 \uc0ad\uc81c\ud558\ub294 \uc791\uc5c5\uc740 \ucd5c\uc18c\ud654\ud558\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li>DOM \uc811\uadfc\uc740 (\uc131\ub2a5\uba74\uc5d0\uc11c) \ube44\uc6a9\uc774 \ub9ce\uc774 \ub4dc\ub294 \uc791\uc5c5\uc785\ub2c8\ub2e4.<\/li>\n<li>\uc774 \uac83\uc740 .append(), .insertBefore(), .insertAfter() \ub4f1\uc758 \uba54\uc11c\ub4dc \uc0ac\uc6a9\uc744 \ucd5c\uc18c\ud654 \ud558\uba74 \uc131\ub2a5\uc774 \ud5a5\uc0c1\ub41c\ub2e4\ub294 \uac83\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4.<\/li>\n<li>\uc815\ubcf4\uc758 \uc800\uc7a5\/\uc870\ud68c \uc6a9\ub3c4\ub77c\uba74 .text(), .html() \ubcf4\ub2e4 .data() \ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n<p><strong>Tip 1: \ub354 \ub098\uc740 .append() \uc0ac\uc6a9\ubc95<\/strong><\/p>\n<ul>\n<li>.append() \ub294 \ud55c \ubc88\ub9cc \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc744 \ucc3e\uc73c\uc2ed\uc2dc\uc624<\/li>\n<li>append\ub97c \uc5ec\ub7ec \ubc88 \ud558\ub294 \uac83\uc740 \ud55c \ubc88 \uc0ac\uc6a9\ud558\ub294 \uac83\ubcf4\ub2e4 90% \uae4c\uc9c0 \ub290\ub824\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uce90\uc2f1\ub418\uc9c0 \uc54a\uc740 jQuery \uac1d\uccb4\uc5d0 append \ud55c\ub2e4\uba74 \ucd94\uac00\ub85c 20%\uae4c\uc9c0 \ub290\ub824\uc9d1\ub2c8\ub2e4.<\/li>\n<\/ul>\n<p><strong>Tip 2: .detach() \ub97c \uc0ac\uc6a9\ud558\uc138\uc694<\/strong><\/p>\n<ul>\n<li>.detach() \ub294 \ub178\ub4dc\ub97c DOM\uc5d0\uc11c \uc81c\uac70\ud558\uba74\uc11c \uce90\uc2f1\ud569\ub2c8\ub2e4. \uadf8\ub798\uc11c \ub098\uc911\uc5d0 \ub2e4\uc2dc DOM\uc5d0 \ub123\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<li>\uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\uac00 \ub9ce\uc774 \uac78\ub824\uc788\ub294 \ub178\ub4dc\ub97c DOM\uc5d0\uc11c \uc81c\uac70\ud588\ub2e4\uac00 \ub098\uc911\uc5d0 \ub2e4\uc2dc \ub123\ub294\ub2e4\uba74, \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\ub97c \ub2e4\uc2dc \ub4f1\ub85d\ud574\uc918\uc57c \ud560\ud150\ub370 .detach() \ub97c \uc0ac\uc6a9\ud558\uba74 \uadf8\ub0e5 \ub2e4\uc2dc DOM\uc5d0 \ub123\uae30\ub9cc \ud558\uba74 \ub429\ub2c8\ub2e4. .detach() \ub85c DOM\uc5d0\uc11c \uc0ad\uc81c\ud558\uba74 \ub178\ub4dc\uc5d0 \ubd99\uc740 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec \uc815\ubcf4\ub97c \uadf8\ub300\ub85c \uac00\uc9c0\uace0 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.<\/li>\n<li>.detach() \ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc740 \uacbd\uc6b0\ubcf4\ub2e4 60%\uae4c\uc9c0 \ube60\ub985\ub2c8\ub2e4.<\/li>\n<\/ul>\n<div>\n<ol>\n<li>\/\/ .detach() example<\/li>\n<li>$(&#8216;p&#8217;).click(function\u00a0()\u00a0{<\/li>\n<li>\u00a0 \u00a0 $(this).toggleClass(&#8216;off&#8217;);<\/li>\n<li>});<\/li>\n<li><\/li>\n<li>var\u00a0p;<\/li>\n<li>$(&#8216;button&#8217;).click(function\u00a0()\u00a0{<\/li>\n<li>\u00a0 \u00a0\u00a0if\u00a0(p)\u00a0{<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0\u00a0\/* ..additional modification *\/<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 p.appendTo(&#8216;body&#8217;);<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 p\u00a0=\u00a0null;<\/li>\n<li>\u00a0 \u00a0\u00a0}\u00a0else\u00a0{<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 p\u00a0=\u00a0$(&#8216;p&#8217;).detach();<\/li>\n<li>\u00a0 \u00a0\u00a0}<\/li>\n<li>});<\/li>\n<\/ol>\n<\/div>\n<p><strong>Tip 3: \ub354 \ub098\uc740 .data() \uc0ac\uc6a9\ubc95<\/strong><\/p>\n<ul>\n<li>\ubcf4\ud1b5 .data() \uba54\uc11c\ub4dc\ub294 $(\u2018#elem\u2019).data(key, value); \uc640 \uac19\uc740 \ud615\ud0dc\ub85c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/li>\n<li>\uc774\ubcf4\ub2e4\ub294 $.data(elem, key, value); \ucc98\ub7fc \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \ub354 \ube60\ub985\ub2c8\ub2e4. \uc5ec\uae30\uc11c \uccab \ubc88\uc9f8 \uc778\uc790\uc778 elem\uc740 var elem = document.getElementById(\u2018#elem\u2019); \uacfc \uac19\uc774 \ub9cc\ub4e4\uc5b4\uc9c4 DOM \uac1d\uccb4\ub97c \uc758\ubbf8\ud569\ub2c8\ub2e4.<\/li>\n<li>(jQuery \uac1d\uccb4).data(..) \ud615\ud0dc\ub85c \uc0ac\uc6a9\ud558\ub294 \uac83\ubcf4\ub2e4 $.data(DOM\uac1d\uccb4, ..) \ud615\ud0dc\ub85c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \ub354 \ube60\ub974\ub2e4\ub294 \uc758\ubbf8\uc785\ub2c8\ub2e4.<\/li>\n<li>\uc704\uc5d0\uc11c \ubcf4\uc2e0 \uac83\ucc98\ub7fc var elem; \uc744 DOM \uac1d\uccb4\ub85c \ub9cc\ub4dc\ub294 \uc218\uace0\uac00 \ud55c \ubc88 \ub354 \ub4e4\uc9c0\ub9cc, \ub9cc\uc57d \ubbf8\ub9ac \ub9cc\ub4e4\uc5b4 \ub193\uc740 \uc0c1\ud669\uc774\ub77c\uba74 $.data() \ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \ub354 \ube60\ub985\ub2c8\ub2e4.<\/li>\n<\/ul>\n<h2><\/h2>\n<h2>\ud37c\ud3ec\uba3c\uc2a4 \ud5a5\uc0c1 Tip 9<\/h2>\n<p>loop\ub97c \uc798 \uc0ac\uc6a9\ud558\uc138\uc694 \u2013 \ubc18\ubcf5\ubb38, jQuery \uc5d0\uc11c\ub294 $.each() \uc640 .each()<\/p>\n<ul>\n<li>jQuery\uc758 $.each() \uc640 .each() \ubcf4\ub2e4 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubcf8\ub798\uc758 for, while \ubb38\uc774 \ub354 \ube60\ub974\ub2e4\ub294 \uac83\uc744 \uc54c\uace0 \uacc4\uc2e0\uac00\uc694?<\/li>\n<li>jQuery\uc758 loop\ub294 \ud3b8\ub9ac\ud558\uc9c0\ub9cc \ud56d\uc0c1 \ucd5c\uace0\uc758 \uc131\ub2a5\uc744 \ubc1c\ud718\ud558\ub294 \uac83\uc740 \uc544\ub2d9\ub2c8\ub2e4.<\/li>\n<li>\uadf8\ub9ac\uace0 \uaf2d jQuery\uc758 loop \uac00 \uc544\ub2c8\ub354\ub77c\ub3c4 \ud504\ub85c\uadf8\ub798\ubc0d\uc744 \ud560 \ub54c \uac00\ub2a5\ud558\ub2e4\uba74 \ubc18\ubcf5\ubb38\uc740 \ud53c\ud558\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4. loop\ub294 \ub290\ub9bd\ub2c8\ub2e4.<\/li>\n<\/ul>\n<h2><\/h2>\n<h2>\ud37c\ud3ec\uba3c\uc2a4 \ud5a5\uc0c1 Tip 10<\/h2>\n<p>\uaf2d \ud544\uc694\ud55c \uacbd\uc6b0\uac00 \uc544\ub2c8\ub77c\uba74 jQuery \uac1d\uccb4\ub97c \ub9cc\ub4e4\uc9c0 \ub9c8\uc138\uc694<\/p>\n<ul>\n<li>\uac1c\ubc1c\uc790\ub4e4\uc740 \ub300\uccb4 \uac00\ub2a5\ud55c \ub354 \uac04\ub2e8\ud55c \ubc29\ubc95\uc774 \uc788\ub294 \uacbd\uc6b0\uc5d0\ub3c4 jQuery \uac1d\uccb4\ub97c \ub9cc\ub4e4\uc5b4 \uc4f0\uace4 \ud569\ub2c8\ub2e4. Tip 4 \uc5d0\uc11c \uc0b4\ud3b4\ubd24\ub358 \uac83\ucc98\ub7fc $(this).attr(\u2018id\u2019) \ubcf4\ub2e4\ub294 this.id \uac00 \ub354 \ube60\ub985\ub2c8\ub2e4.<\/li>\n<li>$.method() \ud615\ud0dc\uac00 $.fn.method() \ubcf4\ub2e4 \ube60\ub985\ub2c8\ub2e4. Tip 8 \uc5d0\uc11c \uc0b4\ud3b4\ubcf8 \uac83\ucc98\ub7fc $.data() \uac00 .data() \ubcf4\ub2e4 \ube60\ub985\ub2c8\ub2e4. \uadf8\ub798\uc11c \uac00\ub2a5\ud558\ub2e4\uba74 \uc774\ub807\uac8c \uc0ac\uc6a9\ud558\uba74 \uc88b\uc2b5\ub2c8\ub2e4.<\/li>\n<li>\ud558\uc9c0\ub9cc $.data() \ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc5ed\uc2dc Tip 8 \uc5d0\uc11c \uc0b4\ud3b4\ubcf8 \uac83\ucc98\ub7fc DOM \uac1d\uccb4\ub97c \ubbf8\ub9ac \ub9cc\ub4e4\uc5b4 \ub194\uc57c \ud558\ubbc0\ub85c, \uc0c1\ud669\uc5d0 \ub530\ub77c \uac00\ub2a5\ud560 \uacbd\uc6b0 \uadf8\ub807\uac8c \ud558\uba74 \ub429\ub2c8\ub2e4.<\/li>\n<\/ul>\n<h2><\/h2>\n<h2>\ubcf4\ub108\uc2a4 Tip<\/h2>\n<p>DRY \ud558\uc138\uc694~ Don\u2019t Repeat Yourself \u2013 \uac19\uc740 \ucf54\ub4dc\ub97c \ubc18\ubcf5\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ubc29\ubc95\uc744 \uc5f0\uad6c\ud558\uba74 \uc88b\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uac04\ub2e8\ud55c \uc608\uc81c \uc18c\uc2a4\ub97c \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<div>\n<ol>\n<li>\/\/ Let&#8217;s store some default values to be read later<\/li>\n<li>var\u00a0defaultSettings\u00a0=\u00a0{};<\/li>\n<li>defaultSettings[&#8216;carModel&#8217;]\u00a0=\u00a0&#8216;Mercedes&#8217;;<\/li>\n<li>defaultSettings[&#8216;carYeasr&#8217;]\u00a0=\u00a02012;<\/li>\n<li>defaultSettings[&#8216;carMiles&#8217;]\u00a0=\u00a05000;<\/li>\n<li>defaultSettings[&#8216;carTint&#8217;]\u00a0=\u00a0&#8216;Metallic Blue&#8217;;<\/li>\n<li><\/li>\n<li>\/\/ Non-DRY code<\/li>\n<li>$(&#8216;.someCheckbox&#8217;).click(function\u00a0()\u00a0{<\/li>\n<li>\u00a0 \u00a0\u00a0if\u00a0(this.checked)\u00a0{<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 $(&#8216;#input_carModel&#8217;).val(defaultSettings.carModel);<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 $(&#8216;#input_carYear&#8217;).val(defaultSettings.carYear);<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 $(&#8216;#input_carMiles&#8217;).val(defaultSettings.carMiles);<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 $(&#8216;#input_carTint&#8217;).val(defaultSettings.carTint);<\/li>\n<li>\u00a0 \u00a0\u00a0}\u00a0else\u00a0{<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 $(&#8216;#input_carModel&#8217;).val(&#8221;);<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 $(&#8216;#input_carYear&#8217;).val(&#8221;);<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 $(&#8216;#input_carMiles&#8217;).val(&#8221;);<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 $(&#8216;#input_carTint&#8217;).val(&#8221;);<\/li>\n<li>\u00a0 \u00a0\u00a0}<\/li>\n<li>});<\/li>\n<li><\/li>\n<li>\/\/ DRY code<\/li>\n<li>var\u00a0props\u00a0=\u00a0[&#8216;carModel&#8217;,\u00a0&#8216;carYear&#8217;,\u00a0&#8216;carMiles&#8217;,\u00a0&#8216;carTint&#8217;];<\/li>\n<li><\/li>\n<li>$(&#8216;.someCheckbox&#8217;).click(function\u00a0()\u00a0{<\/li>\n<li>\u00a0 \u00a0\u00a0var\u00a0checked\u00a0=\u00a0this.checked;<\/li>\n<li><\/li>\n<li>\u00a0 \u00a0\u00a0\/*<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 Non-DRY code \uc5d0\uc11c\ub294 \ubb34\uc5c7\uc744 \ubc18\ubcf5\ud558\uace0 \uc788\ub098\uc694?<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 1. input_ .. \ud615\ud0dc\ub85c \uc0dd\uae34 field \uba85 \ub4e4<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 2. \uac12\uc744 \uc124\uc815\ud558\uae30 \uc704\ud55c $(&#8216;#input_ .. &#8216;).val(defaultSettings. .. );<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 3. \uac12\uc744 \ucd08\uae30\ud654\ud558\uae30 \uc704\ud55c $(&#8216;#input_ .. &#8216;).val(&#8221;);<\/li>\n<li><\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 DRY code \uc5d0\uc11c\ub294 \uc5b4\ub5bb\uac8c \ubc14\uafc0 \uc218 \uc788\ub098\uc694?<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 1. input_ .. \ud615\ud0dc\ub85c \uc0dd\uae34 field \uba85 \ub4e4\uc744 \uc790\ub3d9\uc73c\ub85c \uc0dd\uc131<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 2. $.each \ub85c loop\ub97c \ub3cc\uba74\uc11c key\ub97c \ubc1b\uc544\uc11c defaultSettings[key] \ud615\ud0dc\ub85c \uc0ac\uc6a9<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 3. \uc0bc\ud56d\uc5f0\uc0b0\uc790\ub97c \uc0ac\uc6a9\ud574\uc11c &#8211; checked ? \uc124\uc815 : \ucd08\uae30\ud654 &#8211; \ucf54\ub4dc\ub97c \uac04\ub7b5\ud558\uac8c \ub9cc\ub4ec<\/li>\n<li>\u00a0 \u00a0 *\/<\/li>\n<li><\/li>\n<li>\u00a0 \u00a0 $.each(props,\u00a0function\u00a0(i,\u00a0key)\u00a0{<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0 $(&#8216;#input_&#8217;\u00a0+\u00a0key).val(checked\u00a0?\u00a0defaultSettings[key]\u00a0:\u00a0&#8221;);<\/li>\n<li>\u00a0 \u00a0\u00a0});<\/li>\n<li>});<\/li>\n<\/ol>\n<\/div>\n<p>..<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc774 \uae00\uc740\u00a0jQuery Proven Performance Tips And Tricks\u00a0\ub97c \ubcf4\uace0 \uacf5\ubd80\ud55c \uc810\uc744 \uc815\ub9ac\ud55c \uae00\uc785\ub2c8\ub2e4. \uc6d0\ubb38\uc758 \ub0b4\uc6a9\uacfc \ub611\uac19\uc740 \ubd80\ubd84\ub3c4 \uc788\uace0 \uc81c\uac00 \uc54c\uace0 \uc788\ub294 \ub0b4\uc6a9\uc744 \ub530\ub85c \ub367\ubd99\uc778 \ubd80\ubd84\ub3c4 \uc788\uc73c\ub2c8\u00a0\uc6d0\ubb38\uc744 \uaf2d \ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4. \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2013 jQuery Proven Performance Tips And Tricks \ud37c\ud3ec\uba3c\uc2a4 \ud5a5\uc0c1 \ud328\ud134\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc65c \uc911\uc694\ud55c\uac00\uc694? \ud504\ub85c\uadf8\ub7a8 \ucf54\ub4dc\ub294 \uac04\ub2e8 \uba85\ub8cc\ud574\uc57c\uc9c0 \uc5c9\uc131\ud558\uac8c \ub9cc\ub4e4\uba74 \uc548\ub429\ub2c8\ub2e4. \uc88b\uc740 \ucf54\ub529 \uc2b5\uad00\uc740 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\ub294\ub370 \uc801\ud569\ud55c &hellip; <a href=\"http:\/\/www.freesens.com\/x\/?p=784\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">jQuery Performance Tips &#038; Tricks<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[321,320,322,15],"class_list":["post-784","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-ecma-script","tag-es","tag-java-script","tag-jquery"],"_links":{"self":[{"href":"http:\/\/www.freesens.com\/x\/index.php?rest_route=\/wp\/v2\/posts\/784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.freesens.com\/x\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.freesens.com\/x\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.freesens.com\/x\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.freesens.com\/x\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=784"}],"version-history":[{"count":2,"href":"http:\/\/www.freesens.com\/x\/index.php?rest_route=\/wp\/v2\/posts\/784\/revisions"}],"predecessor-version":[{"id":884,"href":"http:\/\/www.freesens.com\/x\/index.php?rest_route=\/wp\/v2\/posts\/784\/revisions\/884"}],"wp:attachment":[{"href":"http:\/\/www.freesens.com\/x\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.freesens.com\/x\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=784"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.freesens.com\/x\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}