{"id":152,"date":"2013-08-12T21:59:37","date_gmt":"2013-08-12T13:59:37","guid":{"rendered":"http:\/\/weitaoc.com\/?p=152"},"modified":"2013-08-12T22:25:19","modified_gmt":"2013-08-12T14:25:19","slug":"jquery%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96%e7%9a%8428%e4%b8%aa%e5%bb%ba%e8%ae%ae-%e8%bd%ac","status":"publish","type":"post","link":"http:\/\/weitaoc.com\/?p=152","title":{"rendered":"jQuery\u6027\u80fd\u4f18\u5316\u768428\u4e2a\u5efa\u8bae-\u8f6c"},"content":{"rendered":"

\u4e00\u3001\u9009\u62e9\u5668\u6027\u80fd\u4f18\u5316\u5efa\u8bae<\/h2>\n

 <\/p>\n

\u30001. \u603b\u662f\u4ece#id\u9009\u62e9\u5668\u6765\u7ee7\u627f<\/strong><\/p>\n

\u8fd9\u662fjQuery\u9009\u62e9\u5668\u7684\u4e00\u6761\u9ec4\u91d1\u6cd5\u5219\u3002jQuery\u9009\u62e9\u4e00\u4e2a\u5143\u7d20\u6700\u5feb\u7684\u65b9\u6cd5\u5c31\u662f\u7528ID\u6765\u9009\u62e9\u4e86\u3002<\/p>\n

1
<\/div><\/td>
$(<\/span>'#content'<\/span>)<\/span>.hide<\/span>(<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u6216\u8005\u4eceID\u9009\u62e9\u5668\u7ee7\u627f\u6765\u9009\u62e9\u591a\u4e2a\u5143\u7d20:<\/p>\n

1
<\/div><\/td>
$(<\/span>'#content p'<\/span>)<\/span>.hide<\/span>(<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u3000\u30002. \u5728class\u524d\u9762\u4f7f\u7528tag<\/strong><\/p>\n

jQuery\u4e2d\u7b2c\u4e8c\u5feb\u7684\u9009\u62e9\u5668\u5c31\u662ftag\u9009\u62e9\u5668\uff08\u5982$(\u2018head\u2019)\uff09\uff0c\u56e0\u4e3a\u5b83\u548c\u76f4\u63a5\u6765\u81ea\u4e8e\u539f\u751f\u7684Javascript\u65b9\u6cd5getElementByTagName()\u3002\u6240\u4ee5\u6700\u597d\u603b\u662f\u7528tag\u6765\u4fee\u9970class(\u5e76\u4e14\u4e0d\u8981\u5fd8\u4e86\u5c31\u8fd1\u7684ID)<\/p>\n

1
<\/div><\/td>
var<\/span> receiveNewsletter =<\/span> $(<\/span>'#nslForm input.on'<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

jQuery\u4e2dclass\u9009\u62e9\u5668\u662f\u6700\u6162\u7684\uff0c\u56e0\u4e3a\u5728IE\u6d4f\u89c8\u5668\u4e0b\u5b83\u4f1a\u904d\u5386\u6240\u6709\u7684DOM\u8282\u70b9\u3002\u5c3d\u91cf\u907f\u514d\u4f7f\u7528class\u9009\u62e9\u5668\u3002\u4e5f\u4e0d\u8981\u7528tag\u6765\u4fee\u9970ID\u3002\u4e0b\u9762\u7684\u4f8b\u5b50\u4f1a\u904d\u5386\u6240\u6709\u7684div\u5143\u7d20\u6765\u67e5\u627eid\u4e3a\u2019content\u2019\u7684\u90a3\u4e2a\u8282\u70b9\uff1a<\/p>\n

1
<\/div><\/td>
var<\/span> content =<\/span> $(<\/span>'div#content'<\/span>)<\/span>;<\/span> \/\/ \u975e\u5e38\u6162\uff0c\u4e0d\u8981\u4f7f\u7528<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u7528ID\u6765\u4fee\u9970ID\u4e5f\u662f\u753b\u86c7\u6dfb\u8db3\uff1a<\/p>\n

1
<\/div><\/td>
var<\/span> traffic_light =<\/span> $(<\/span>'#content #traffic_light'<\/span>)<\/span>;<\/span> \/\/ \u975e\u5e38\u6162\uff0c\u4e0d\u8981\u4f7f\u7528<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u3000\u30003. \u4f7f\u7528\u5b50\u67e5\u8be2<\/strong><\/p>\n

\u5c06\u7236\u5bf9\u8c61\u7f13\u5b58\u8d77\u6765\u4ee5\u5907\u5c06\u6765\u7684\u4f7f\u7528<\/p>\n

1
2
3
4
<\/div><\/td>
var<\/span> header =<\/span> $(<\/span>'#header'<\/span>)<\/span>;<\/span>
\nvar<\/span> menu =<\/span> header.find<\/span>(<\/span>'.menu'<\/span>)<\/span>;<\/span>
\n\/\/ \u6216\u8005<\/span>
\nvar<\/span> menu =<\/span> $(<\/span>'.menu'<\/span>,<\/span> header)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u6765\u770b\u4e2a\u4f8b\u5b50<\/a><\/p>\n

\u3000\u30004. \u4f18\u5316\u9009\u62e9\u5668\u4ee5\u9002\u7528Sizzle\u7684\u201c\u4ece\u53f3\u81f3\u5de6\u201d\u6a21\u578b<\/strong><\/p>\n

\u81ea\u7248\u672c1.3\u4e4b\u540e\uff0cjQuery\u91c7\u7528\u4e86Sizzle\u5e93\uff0c\u4e0e\u4e4b\u524d\u7684\u7248\u672c\u5728\u9009\u62e9\u5668\u5f15\u64ce\u4e0a\u7684\u8868\u73b0\u5f62\u5f0f\u6709\u5f88\u5927\u7684\u4e0d\u540c\u3002\u5b83\u7528\u201c\u4ece\u5de6\u81f3\u53f3\u201d\u7684\u6a21\u578b\u4ee3\u66ff\u4e86\u201c\u4ece\u53f3\u81f3\u5de6\u201d\u7684\u6a21\u578b\u3002\u786e\u4fdd\u6700\u53f3\u7684\u9009\u62e9\u5668\u5177\u4f53\u4e9b\uff0c\u800c\u5de6\u8fb9\u7684\u9009\u62e9\u5668\u9009\u62e9\u8303\u56f4\u8f83\u5bbd\u6cdb\u4e9b\uff1a<\/p>\n

1
<\/div><\/td>
var<\/span> linkContacts =<\/span> $(<\/span>'.contact-links div.side-wrapper'<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u800c\u4e0d\u8981\u4f7f\u7528<\/p>\n

1
<\/div><\/td>
var<\/span> linkContacts =<\/span> $(<\/span>'a.contact-links .side-wrapper'<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u3000\u30005. \u91c7\u7528find()\uff0c\u800c\u4e0d\u4f7f\u7528\u4e0a\u4e0b\u6587\u67e5\u627e<\/strong><\/p>\n

.find()\u51fd\u6570\u7684\u786e\u5feb\u4e9b\u3002\u4f46\u662f\u5982\u679c\u4e00\u4e2a\u9875\u9762\u6709\u8bb8\u591aDOM\u8282\u70b9\u65f6\uff0c\u9700\u8981\u6765\u56de\u67e5\u627e\u65f6\uff0c\u53ef\u80fd\u9700\u8981\u66f4\u591a\u65f6\u95f4:<\/p>\n

1
2
3
<\/div><\/td>
var<\/span> divs =<\/span> $(<\/span>'.testdiv'<\/span>,<\/span> '#pageBody'<\/span>)<\/span>;<\/span> \/\/ 2353 on Firebug 3.6<\/span>
\nvar<\/span> divs =<\/span> $(<\/span>'#pageBody'<\/span>)<\/span>.find<\/span>(<\/span>'.testdiv'<\/span>)<\/span>;<\/span> \/\/ 2324 on Firebug 3.6 - The best time<\/span>
\nvar<\/span> divs =<\/span> $(<\/span>'#pageBody .testdiv'<\/span>)<\/span>;<\/span> \/\/ 2469 on Firebug 3.6<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u3000\u30006. \u5229\u7528\u5f3a\u5927\u7684\u94fe\u5f0f\u64cd\u4f5c<\/strong><\/p>\n

\u91c7\u7528jQuery\u7684\u94fe\u5f0f\u64cd\u4f5c\u6bd4\u7f13\u5b58\u9009\u62e9\u5668\u66f4\u6709\u6548\uff1a<\/p>\n

1
2
3
4
<\/div><\/td>
$(<\/span>'li.menu-item'<\/span>)<\/span>.click<\/span>(<\/span>function<\/span> (<\/span>)<\/span> {<\/span>alert(<\/span>'test click'<\/span>)<\/span>;<\/span>}<\/span>)<\/span>
\n.css<\/span>(<\/span>'display'<\/span>,<\/span> 'block'<\/span>)<\/span>
\n.css<\/span>(<\/span>'color'<\/span>,<\/span> 'red'<\/span>)<\/span>
\nfadeTo(<\/span>2<\/span>,<\/span> 0.7<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u3000\u30007. \u7f16\u5199\u5c5e\u4e8e\u4f60\u7684\u9009\u62e9\u5668<\/strong><\/p>\n

\u5982\u679c\u4f60\u7ecf\u5e38\u5728\u4ee3\u7801\u4e2d\u4f7f\u7528\u9009\u62e9\u5668\uff0c\u90a3\u4e48\u6269\u5c55jQuery\u7684$.expr[‘:’]\u5bf9\u8c61\u5427\uff0c\u7f16\u5199\u4f60\u81ea\u5df1\u7684\u9009\u62e9\u5668\u3002\u4e0b\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u6211\u521b\u5efa\u4e86\u4e00\u4e2aabovethefold\u9009\u62e9\u5668\uff0c\u7528\u6765\u9009\u62e9\u4e0d\u53ef\u89c1\u7684\u5143\u7d20\uff1a<\/p>\n

1
2
3
4
5
6
<\/div><\/td>
$.extend<\/span>(<\/span>$.expr<\/span>[<\/span>':'<\/span>]<\/span>,<\/span> {<\/span>
\nabovethefold:<\/span> function<\/span>(<\/span>el)<\/span> {<\/span>
\nreturn<\/span> $(<\/span>el)<\/span>.offset<\/span>(<\/span>)<\/span>.top<\/span> &<\/span>lt;<\/span> $(<\/span>window)<\/span>.scrollTop<\/span>(<\/span>)<\/span> +<\/span> $(<\/span>window)<\/span>.height<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span>
\n}<\/span>)<\/span>;<\/span>
\nvar<\/span> nonVisibleElements =<\/span> $(<\/span>'div:abovethefold'<\/span>)<\/span>;<\/span> \/\/ \u9009\u62e9\u5143\u7d20<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u4e8c\u3001\u4f18\u5316DOM\u64cd\u4f5c\u5efa\u8bae<\/h2>\n

\u3000\u30008. \u7f13\u5b58jQuery\u5bf9\u8c61<\/strong><\/p>\n

\u5c06\u4f60\u7ecf\u5e38\u7528\u7684\u5143\u7d20\u7f13\u5b58\u8d77\u6765\uff1a<\/p>\n

1
2
3
<\/div><\/td>
var<\/span> header =<\/span> $(<\/span>'#header'<\/span>)<\/span>;<\/span>
\nvar<\/span> divs =<\/span> header.find<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>
\nvar<\/span> forms =<\/span> header.find<\/span>(<\/span>'form'<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u3000\u30009. \u5f53\u8981\u8fdb\u884cDOM\u63d2\u5165\u65f6\uff0c\u5c06\u6240\u6709\u5143\u7d20\u5c01\u88c5\u6210\u4e00\u4e2a\u5143\u7d20<\/strong><\/p>\n

\u76f4\u63a5\u7684DOM\u64cd\u4f5c\u5f88\u6162\u3002\u5c3d\u53ef\u80fd\u5c11\u7684\u53bb\u66f4\u6539HTML\u7ed3\u6784\u3002<\/p>\n

1
2
3
4
5
6
7
8
9
10
<\/div><\/td>
var<\/span> menu =<\/span> ''<\/span>;<\/span>
\nfor<\/span> (<\/span>var<\/span> i =<\/span> 1<\/span>;<\/span> i &<\/span>lt;<\/span> 100<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>
\nmenu +=<\/span> ''<\/span> +<\/span> i +<\/span> ''<\/span>;<\/span>
\n}<\/span>
\nmenu +=<\/span> ''<\/span>;<\/span>
\n$(<\/span>'#header'<\/span>)<\/span>.prepend<\/span>(<\/span>menu)<\/span>;<\/span>
\n\/\/ \u5343\u4e07\u4e0d\u8981\u8fd9\u6837\u505a\uff1a<\/span>
\n$(<\/span>'#header'<\/span>)<\/span>.prepend<\/span>(<\/span>''<\/span>)<\/span>;<\/span>
\nfor<\/span> (<\/span>var<\/span> i =<\/span> 1<\/span>;<\/span> i &<\/span>lt;<\/span> 100<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>
\n$(<\/span>'#menu'<\/span>)<\/span>.append<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u3000\u300010. \u5c3d\u7ba1jQuery\u4e0d\u4f1a\u629b\u51fa\u5f02\u5e38\uff0c\u4f46\u5f00\u53d1\u8005\u4e5f\u5e94\u8be5\u68c0\u67e5\u5bf9\u8c61<\/strong><\/p>\n

\u5c3d\u7ba1jQuery\u4e0d\u4f1a\u629b\u51fa\u5927\u91cf\u7684\u5f02\u5e38\u7ed9\u7528\u6237\uff0c\u4f46\u662f\u5f00\u53d1\u8005\u4e5f\u4e0d\u8981\u4f9d\u8d56\u4e8e\u6b64\u3002jQuery\u901a\u5e38\u4f1a\u6267\u884c\u4e86\u4e00\u5927\u5806\u6ca1\u7528\u7684\u51fd\u6570\u4e4b\u540e\u624d\u786e\u5b9a\u4e00\u4e2a\u5bf9\u8c61\u662f\u5426\u5b58\u5728\u3002\u6240\u4ee5\u5728\u5bf9\u4e00\u4e2a\u4f5c\u4e00\u7cfb\u5217\u5f15\u7528\u4e4b\u524d\uff0c\u5e94\u5148\u68c0\u67e5\u4e00\u4e0b\u8fd9\u4e2a\u5bf9\u8c61\u5b58\u4e0d\u5b58\u5728\u3002<\/p>\n

\u3000\u300011. \u4f7f\u7528\u76f4\u63a5\u51fd\u6570\uff0c\u800c\u4e0d\u8981\u4f7f\u7528\u4e0e\u4e0e\u4e4b\u7b49\u540c\u7684\u51fd\u6570<\/strong><\/p>\n

\u4e3a\u4e86\u83b7\u5f97\u66f4\u597d\u7684\u6027\u80fd\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528\u76f4\u63a5\u51fd\u6570\u5982$.ajax()\uff0c\u800c\u4e0d\u8981\u4f7f\u7528$.get(),$.getJSON(),$.post()\uff0c\u56e0\u4e3a\u540e\u9762\u7684\u51e0\u4e2a\u5c06\u4f1a\u8c03\u7528$.ajax()\u3002<\/p>\n

\u3000\u300012. \u7f13\u5b58jQuery\u7ed3\u679c\uff0c\u4ee5\u5907\u540e\u6765\u4f7f\u7528<\/strong><\/p>\n

\u4f60\u7ecf\u5e38\u4f1a\u83b7\u5f97\u4e00\u4e2ajavasript\u5e94\u7528\u5bf9\u8c61\u2014\u2014\u4f60\u53ef\u4ee5\u7528App.\u6765\u4fdd\u5b58\u4f60\u7ecf\u5e38\u9009\u62e9\u7684\u5bf9\u8c61\uff0c\u4ee5\u5907\u5c06\u6765\u4f7f\u7528\uff1a<\/p>\n

1
2
3
<\/div><\/td>
App.hiddenDivs<\/span> =<\/span> $(<\/span>'div.hidden'<\/span>)<\/span>;<\/span>
\n\/\/ \u4e4b\u540e\u5728\u4f60\u7684\u5e94\u7528\u4e2d\u8c03\u7528\uff1a<\/span>
\nApp.hiddenDivs<\/span>.find<\/span>(<\/span>'span'<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u3000\u300013. \u91c7\u7528jQuery\u7684\u5185\u90e8\u51fd\u6570data()\u6765\u5b58\u50a8\u72b6\u6001<\/strong><\/p>\n

\u4e0d\u8981\u5fd8\u4e86\u91c7\u7528.data()\u51fd\u6570\u6765\u5b58\u50a8\u4fe1\u606f\uff1a<\/p>\n

1
2
3
<\/div><\/td>
$(<\/span>'#head'<\/span>)<\/span>.data<\/span>(<\/span>'name'<\/span>,<\/span> 'value'<\/span>)<\/span>;<\/span>
\n\/\/ \u4e4b\u540e\u5728\u4f60\u7684\u5e94\u7528\u4e2d\u8c03\u7528:<\/span>
\n$(<\/span>'#head'<\/span>)<\/span>.data<\/span>(<\/span>'name'<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u3000\u300014. \u4f7f\u7528jQuery utility\u51fd\u6570<\/strong><\/p>\n

\u4e0d\u8981\u5fd8\u4e86\u7b80\u5355\u5b9e\u7528\u7684jQuery\u7684utility\u51fd\u6570<\/a>\u3002\u6211\u6700\u559c\u6b22\u7684\u662f$.isFunction(), $isArray()\u548c$.each()\u3002<\/p>\n

\u3000\u300015. \u4e3aHTML\u5757\u6dfb\u52a0\u201cJS\u201d\u7684class<\/strong><\/p>\n

\u5f53jQuery\u8f7d\u5165\u4e4b\u540e\uff0c\u9996\u5148\u7ed9HTML\u6dfb\u52a0\u4e00\u4e2a\u53eb\u201dJS\u201d\u7684class<\/p>\n

1
<\/div><\/td>
$(<\/span>'HTML'<\/span>)<\/span>.addClass<\/span>(<\/span>'JS'<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u53ea\u6709\u5f53\u7528\u6237\u542f\u7528JavaScript\u7684\u65f6\u5019\uff0c\u4f60\u624d\u80fd\u6dfb\u52a0CSS\u6837\u5f0f\u3002\u4f8b\u5982\uff1a<\/p>\n

1
<\/div><\/td>
.JS<\/span> #myDiv{<\/span>display:<\/span>none;<\/span>}<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u6240\u4ee5\u5f53JavaScript\u542f\u7528\u7684\u65f6\u5019\uff0c\u4f60\u53ef\u4ee5\u5c06\u6574\u4e2aHTML\u5185\u5bb9\u9690\u85cf\u8d77\u6765\uff0c\u7528jQuery\u6765\u5b9e\u73b0\u4f60\u60f3\u5b9e\u73b0\u7684\uff08\u8b6c\u5982\uff1a\u6536\u8d77\u67d0\u4e9b\u9762\u677f\u6216\u5f53\u7528\u6237\u70b9\u51fb\u5b83\u4eec\u65f6\u5c55\u5f00\uff09\u3002\u800c\u5f53Javascript\u6ca1\u6709\u542f\u7528\u7684\u65f6\u5019\uff0c\u6d4f\u89c8\u5668\u5448\u73b0\u6240\u6709\u7684\u5185\u5bb9\uff0c\u641c\u7d22\u5f15\u64ce\u722c\u866b\u4e5f\u4f1a\u52fe\u53bb\u6240\u6709\u5185\u5bb9\u3002\u6211\u5c06\u6765\u4f1a\u66f4\u591a\u7684\u4f7f\u7528\u8fd9\u4e2a\u6280\u5de7\u3002<\/p>\n

\u9605\u8bfb\u66f4\u591a\u76f8\u5173\u5185\u5bb9<\/a><\/p>\n

\u4e09\u3001\u5173\u4e8e\u4f18\u5316\u4e8b\u4ef6\u6027\u80fd\u7684\u5efa\u8bae<\/h2>\n

\u3000\u300016. \u63a8\u8fdf\u5230$(window).load<\/strong><\/p>\n

\u6709\u65f6\u5019\u91c7\u7528$(window).load()\u6bd4$(document).ready()\u66f4\u5feb\uff0c\u56e0\u4e3a\u540e\u8005\u4e0d\u7b49\u6240\u6709\u7684DOM\u5143\u7d20\u90fd\u4e0b\u8f7d\u5b8c\u4e4b\u524d\u6267\u884c\u3002\u4f60\u5e94\u8be5\u5728\u4f7f\u7528\u5b83\u4e4b\u524d\u6d4b\u8bd5\u5b83\u3002<\/p>\n

\u3000\u300017. \u4f7f\u7528Event Delegation<\/strong><\/p>\n

\u5f53\u4f60\u5728\u4e00\u4e2a\u5bb9\u5668\u4e2d\u6709\u8bb8\u591a\u8282\u70b9\uff0c\u4f60\u60f3\u5bf9\u6240\u6709\u7684\u8282\u70b9\u90fd\u7ed1\u5b9a\u4e00\u4e2a\u4e8b\u4ef6\uff0cdelegation\u5f88\u9002\u5408\u8fd9\u6837\u7684\u5e94\u7528\u573a\u666f\u3002\u4f7f\u7528Delegation\uff0c\u6211\u4eec\u4ec5\u9700\u8981\u5728\u7236\u7ea7\u7ed1\u5b9a\u4e8b\u4ef6\uff0c\u7136\u540e\u67e5\u770b\u54ea\u4e2a\u5b50\u8282\u70b9(\u76ee\u6807\u8282\u70b9)\u89e6\u53d1\u4e86\u4e8b\u4ef6\u3002\u5f53\u4f60\u6709\u4e00\u4e2a\u5f88\u591a\u6570\u636e\u7684table\u7684\u65f6\u5019\uff0c\u4f60\u60f3\u5bf9td\u8282\u70b9\u8bbe\u7f6e\u4e8b\u4ef6\uff0c\u8fd9\u5c31\u53d8\u5f97\u5f88\u65b9\u4fbf\u3002\u5148\u83b7\u5f97table\uff0c\u7136\u540e\u4e3a\u6240\u6709\u7684td\u8282\u70b9\u8bbe\u7f6edelegation\u4e8b\u4ef6\uff1a<\/p>\n

1
2
3
<\/div><\/td>
$(<\/span>"table"<\/span>)<\/span>.delegate<\/span>(<\/span>"td"<\/span>,<\/span> "hover"<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n$(<\/span>this<\/span>)<\/span>.toggleClass<\/span>(<\/span>"hover"<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u9605\u8bfb\u66f4\u591a\u76f8\u5173\u5185\u5bb9<\/a><\/p>\n

\u3000\u300018. \u4f7f\u7528ready\u4e8b\u4ef6\u7684\u7b80\u5199<\/strong><\/p>\n

\u5982\u679c\u4f60\u60f3\u538b\u7f29js\u63d2\u4ef6\uff0c\u8282\u7ea6\u6bcf\u4e00\u4e2a\u5b57\u8282\uff0c\u4f60\u5e94\u8be5\u907f\u514d\u4f7f\u7528$(document).onready()<\/p>\n

1
2
3
4
5
6
7
8
<\/div><\/td>
\/\/ \u4e5f\u4e0d\u8981\u4f7f\u7528<\/span>
\n$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span> (<\/span>)<\/span>{<\/span>
\n\/\/ \u4ee3\u7801<\/span>
\n}<\/span>)<\/span>;<\/span>
\n\/\/ \u4f60\u53ef\u4ee5\u5982\u6b64\u7b80\u5199\uff1a<\/span>
\n$(<\/span>function<\/span> (<\/span>)<\/span>{<\/span>
\n\/\/ \u4ee3\u7801<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u56db\u3001\u6d4b\u8bd5jQuery<\/h2>\n

\u3000\u300019. jQuery\u5355\u5143\u6d4b\u8bd5<\/strong><\/p>\n

\u6d4b\u8bd5JavaSript\u4ee3\u7801\u6700\u597d\u7684\u65b9\u6cd5\u5c31\u662f\u4eba\u6765\u6d4b\u8bd5\u3002\u4f46\u4f60\u53ef\u4ee5\u4f7f\u7528\u4e00\u4e9b\u81ea\u52a8\u5316\u7684\u5de5\u5177\u5982Selenium<\/a>\uff0cFuncunit<\/a>\uff0cQUit<\/a>\uff0cQMock<\/a>\u6765\u6d4b\u8bd5\u4f60\u7684\u4ee3\u7801\uff08\u5c24\u5176\u662f\u63d2\u4ef6\uff09\u3002\u6211\u60f3\u5728\u53e6\u5916\u4e00\u4e2a\u4e13\u9898\u6765\u8ba8\u8bba\u8fd9\u4e2a\u8bdd\u9898\u56e0\u4e3a\u5b9e\u5728\u6709\u592a\u591a\u8981\u8bf4\u7684\u4e86\u3002<\/p>\n

\u3000\u300020. \u6807\u51c6\u5316\u4f60\u7684jQuery\u4ee3\u7801<\/strong><\/p>\n

\u7ecf\u5e38\u6807\u51c6\u5316\u4f60\u7684\u4ee3\u7801\uff0c\u770b\u770b\u54ea\u4e2a\u67e5\u8be2\u6bd4\u8f83\u6162\uff0c\u7136\u540e\u66ff\u6362\u5b83\u3002\u4f60\u53ef\u4ee5\u7528Firebug\u63a7\u5236\u53f0\u3002\u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528jQuery\u7684\u5feb\u6377\u51fd\u6570<\/a>\u6765\u4f7f\u6d4b\u8bd5\u53d8\u5f97\u66f4\u5bb9\u6613\u4e9b\uff1a<\/p>\n

1
2
<\/div><\/td>
\/\/ \u5728Firebug\u63a7\u5236\u53f0\u8bb0\u5f55\u6570\u636e\u7684\u5feb\u6377\u65b9\u5f0f<\/span>
\n$.l<\/span>(<\/span>$(<\/span>'div'<\/span>)<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n
1
2
<\/div><\/td>
\/\/ \u83b7\u53d6UNIX\u65f6\u95f4\u6233<\/span>
\n$.time<\/span>(<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n
1
2
3
4
<\/div><\/td>
\/\/ \u5728Firebug\u8bb0\u5f55\u6267\u884c\u4ee3\u7801\u65f6\u95f4<\/span>
\n$.lt<\/span>(<\/span>)<\/span>;<\/span>
\n$(<\/span>'div'<\/span>)<\/span>;<\/span>
\n$.lt<\/span>(<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n
1
2
<\/div><\/td>
\/\/ \u5c06\u4ee3\u7801\u5757\u653e\u5728\u4e00\u4e2afor\u5faa\u73af\u4e2d\u6d4b\u8bd5\u6267\u884c\u65f6\u95f4<\/span>
\n$.bm<\/span>(<\/span>"var divs = $('.testdiv', '#pageBody');"<\/span>)<\/span>;<\/span> \/\/ 2353 on Firebug 3.6<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u4e94\u3001\u5176\u4ed6\u5e38\u7528jQuery\u6027\u80fd\u4f18\u5316\u5efa\u8bae<\/h2>\n

\u3000\u300021. \u4f7f\u7528\u6700\u65b0\u7248\u672c\u7684jQuery<\/strong><\/p>\n

\u6700\u65b0\u7684\u7248\u672c\u5f80\u5f80\u662f\u6700\u597d\u7684\u3002\u66f4\u6362\u4e86\u7248\u672c\u540e\uff0c\u4e0d\u8981\u5fd8\u8bb0\u6d4b\u8bd5\u4f60\u7684\u4ee3\u7801\u3002\u6709\u65f6\u5019\u4e5f\u4e0d\u662f\u5b8c\u5168\u5411\u540e\u517c\u5bb9\u7684\u3002<\/p>\n

\u3000\u300022. \u4f7f\u7528HMTL5<\/strong><\/p>\n

\u65b0\u7684HTML5\u6807\u51c6\u5e26\u6765\u7684\u662f\u66f4\u8f7b\u5de7\u7684DOM\u7ed3\u6784\u3002\u66f4\u8f7b\u5de7\u7684\u7ed3\u6784\u610f\u5473\u7740\u4f7f\u7528jQuery\u9700\u8981\u66f4\u5c11\u7684\u904d\u5386\uff0c\u4ee5\u53ca\u66f4\u4f18\u826f\u7684\u8f7d\u5165\u6027\u80fd\u3002\u6240\u4ee5\u5982\u679c\u53ef\u80fd\u7684\u8bdd\u8bf7\u4f7f\u7528HTML5\u3002<\/p>\n

\u3000\u300023. \u5982\u679c\u7ed915\u4e2a\u4ee5\u4e0a\u7684\u5143\u7d20\u52a0\u6837\u5f0f\u65f6\uff0c\u76f4\u63a5\u7ed9DOM\u5143\u7d20\u6dfb\u52a0style\u6807\u7b7e<\/strong><\/p>\n

\u8981\u7ed9\u5c11\u6570\u7684\u5143\u7d20\u52a0\u6837\u5f0f\uff0c\u6700\u597d\u7684\u65b9\u6cd5\u5c31\u662f\u4f7f\u7528jQuey\u7684css()\u51fd\u6570\u3002\u7136\u800c\u66f415\u4e2a\u4ee5\u4e0a\u7684\u8f83\u591a\u7684\u5143\u7d20\u6dfb\u52a0\u6837\u5f0f\u65f6\uff0c\u76f4\u63a5\u7ed9DOM\u6dfb\u52a0style \u6807\u7b7e\u66f4\u6709\u6548\u4e9b\u3002\u8fd9\u4e2a\u65b9\u6cd5\u53ef\u4ee5\u907f\u514d\u5728\u4ee3\u7801\u4e2d\u4f7f\u7528\u786c\u7f16\u7801(hard code)\u3002<\/p>\n

1
2
3
4
5
6
<\/div><\/td>
$(<\/span>'
\n
\n<style type="text\/css"><!--
\ndiv.class { color: red; }
\n--><\/style>'<\/span>)<\/span>
\n.appendTo<\/span>(<\/span>'head'<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u3000\u300024. \u907f\u514d\u8f7d\u5165\u591a\u4f59\u7684\u4ee3\u7801<\/strong><\/p>\n

\u5c06Javascript\u4ee3\u7801\u653e\u5728\u4e0d\u540c\u7684\u6587\u4ef6\u4e2d\u662f\u4e2a\u597d\u7684\u65b9\u6cd5\uff0c\u4ec5\u5728\u9700\u8981\u7684\u65f6\u5019\u8f7d\u5165\u5b83\u4eec\u3002\u8fd9\u6837\u4f60\u4e0d\u4f1a\u8f7d\u5165\u4e0d\u5fc5\u8981\u7684\u4ee3\u7801\u548c\u9009\u62e9\u5668\u3002\u4e5f\u4fbf\u4e8e\u7ba1\u7406\u4ee3\u7801\u3002<\/p>\n

\u3000\u300025. \u538b\u7f29\u6210\u4e00\u4e2a\u4e3bJS\u6587\u4ef6\uff0c\u5c06\u4e0b\u8f7d\u6b21\u6570\u4fdd\u6301\u5230\u6700\u5c11<\/strong><\/p>\n

\u5f53\u4f60\u5df2\u7ecf\u786e\u5b9a\u4e86\u54ea\u4e9b\u6587\u4ef6\u662f\u5e94\u8be5\u88ab\u8f7d\u5165\u7684\uff0c\u90a3\u4e48\u5c06\u5b83\u4eec\u6253\u5305\u6210\u4e00\u4e2a\u6587\u4ef6\u3002\u7528\u4e00\u4e9b\u5f00\u6e90\u7684\u5de5\u5177\u53ef\u4ee5\u81ea\u52a8\u5e2e\u4f60\u5b8c\u6210\uff0c\u5982\u4f7f\u7528Minify<\/a>(\u548c\u4f60\u7684\u540e\u7aef\u4ee3\u7801\u96c6\u6210)\u6216\u8005\u4f7f\u7528JSCompressor<\/a>\uff0cYUI Compressor<\/a>\u00a0\u6216\u00a0Dean Edwards JS packer<\/a>\u7b49\u5728\u7ebf\u5de5\u5177\u53ef\u4ee5\u4e3a\u4f60\u538b\u7f29\u6587\u4ef6\u3002\u6211\u6700\u559c\u6b22\u7684\u662fJSCompressor<\/a>\u3002<\/p>\n

\u3000\u300026. \u9700\u8981\u7684\u65f6\u5019\u4f7f\u7528\u539f\u751f\u7684Javasript<\/strong><\/p>\n

\u4f7f\u7528jQuery\u662f\u4e2a\u5f88\u68d2\u7684\u4e8b\u60c5\uff0c\u4f46\u662f\u4e0d\u8981\u5fd8\u4e86\u5b83\u4e5f\u662fJavascript\u7684\u4e00\u4e2a\u6846\u67b6\u3002\u6240\u4ee5\u4f60\u53ef\u4ee5\u5728jQuery\u4ee3\u7801\u6709\u5fc5\u8981\u7684\u65f6\u5019\u4e5f\u4f7f\u7528\u539f\u751f\u7684Javascript\u51fd\u6570\uff0c\u8fd9\u6837\u80fd\u83b7\u5f97\u66f4\u597d\u7684\u6027\u80fd\u3002<\/p>\n

\u3000\u300027. \u4eceGoogle\u8f7d\u5165jQuery\u6846\u67b6<\/strong><\/p>\n

\u5f53\u4f60\u7684\u5e94\u7528\u6b63\u5f0f\u4e0a\u7ebf\u7684\u65f6\u5019\uff0c\u8bf7\u4eceGoogle CDN\u8f7d\u5165jQuery\uff0c\u56e0\u4e3a\u7528\u6237\u53ef\u4ee5\u4ece\u6700\u8fd1\u7684\u5730\u65b9\u83b7\u53d6\u4ee3\u7801\u3002\u8fd9\u6837\u4f60\u53ef\u4ee5\u51cf\u5c11\u670d\u52a1\u5668\u8bf7\u6c42\uff0c\u800c\u7528\u6237\u5982\u679c\u6d4f\u89c8\u5176\u4ed6\u7f51\u7ad9\uff0c\u800c\u5b83\u4e5f\u4f7f\u7528Google CDN\u7684jQuery\u65f6\uff0c\u6d4f\u89c8\u5668\u5c31\u4f1a\u7acb\u5373\u4ece\u7f13\u5b58\u4e2d\u8c03\u51fajQuery\u4ee3\u7801\u3002<\/p>\n

1
2
<\/div><\/td>
\/\/ \u94fe\u63a5\u7279\u5b9a\u7248\u672c\u7684\u538b\u7f29\u4ee3\u7801<\/span>
\n<<\/span>script type=<\/span>"text\/javascript"<\/span> src=<\/span>"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.5.0\/jquery.min.js"<\/span>><\/<\/span>script><\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\u3000\u300028. \u7f13\u6162\u8f7d\u5165\u5185\u5bb9\u4e0d\u4ec5\u80fd\u63d0\u9ad8\u8f7d\u5165\u901f\u5ea6\uff0c\u4e5f\u80fd\u63d0\u9ad8SEO\u4f18\u5316\u00a0<\/strong>\uff08Lazy load content for speed and SEO benefits\uff09<\/p>\n

\u4f7f\u7528Ajax\u6765\u8f7d\u5165\u4f60\u7684\u7f51\u7ad9\u5427\uff0c\u8fd9\u6837\u53ef\u4ee5\u8282\u7ea6\u670d\u52a1\u5668\u7aef\u8f7d\u5165\u65f6\u95f4\u3002\u4f60\u53ef\u4ee5\u4ece\u4e00\u4e2a\u5e38\u89c1\u7684\u4fa7\u8fb9\u680fwidget\u5f00\u59cb\u3002<\/p>\n

\"js\"<\/a>

js<\/p><\/div>\n

\u8f6c\u8f7d\u8bf7\u6ce8\u660e\uff1a\u8ff7\u8def\u7684\u8001\u9f20<\/a> » jQuery\u6027\u80fd\u4f18\u5316\u768428\u4e2a\u5efa\u8bae-\u8f6c<\/a><\/p>","protected":false},"excerpt":{"rendered":"

\u4e00\u3001\u9009\u62e9\u5668\u6027\u80fd\u4f18\u5316\u5efa\u8bae   \u30001. \u603b\u662f\u4ece#id\u9009\u62e9\u5668\u6765\u7ee7\u627f \u8fd9\u662fjQuery\u9009\u62e9\u5668\u7684\u4e00\u6761\u9ec4\u91d1\u6cd5\u5219\u3002jQuery\u9009\u62e9\u4e00\u4e2a\u5143\u7d20\u6700\u5feb\u7684\u65b9\u6cd5\u5c31\u662f\u7528ID\u6765\u9009\u62e9\u4e86\u3002 1$(’#content’).hide(); \u6216\u8005\u4ece […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[15],"class_list":["post-152","post","type-post","status-publish","format-standard","hentry","category-front-end","tag-js"],"views":3540,"_links":{"self":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/posts\/152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=152"}],"version-history":[{"count":0,"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/posts\/152\/revisions"}],"wp:attachment":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=152"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}