jQuery \u662f\u4e00\u4e2a JavaScript \u5e93\uff0c\u4e5f\u662f\u4e00\u4e2aJS\u6587\u4ef6\u3002 JQ\u4e2d\u5c01\u88c5\u5b9e\u73b0\u4e86\u5f88\u591a\u65b9\u6cd5\uff0c\u8ba9\u4f7f\u7528\u53d8\u5f97\u66f4\u52a0\u7b80\u5355\u4e0d\u518d\u50cfjs\u90a3\u6837\u9700\u8981\u4f7f\u7528\u5927\u91cf\u7684\u65b9\u6cd5\u8c03\u7528\u3002\u4f46JQ\u4e5f\u53ea\u662f\u5b9e\u73b0\u4e86\u4e00\u4e9b\u65b9\u6cd5\uff0c\u8fd8\u6709\u4e9b\u6ca1\u6709\u5b9e\u73b0\uff0c\u56e0\u6b64\u80fd\u591f\u4f7f\u7528JQ\u662f\u5b9e\u73b0\u7684\uff0cJS\u90fd\u80fd\u505a\uff0c\u4f46\u662f\u80fd\u591f\u7528JS\u505a\u7684\uff0cJQ\u4e0d\u4e00\u5b9a\u80fd\u591f\u5b9e\u73b0\u3002<\/p>\n
JQuery\u7406\u5ff5\uff1a<\/strong><\/p>\n JQ\u603b\u7684\u6765\u8bf4\uff0c\u4f53\u73b0\u4e86\uff1awrite less\uff0c do more\u3002\u7b80\u5355\u6765\u8bf4\uff0c\u5c31\u662f\u4ee3\u7801\u91cf\u5c11\uff0c\u529f\u80fd\u5f3a\u5927\u3002<\/p>\n JQuery\u7279\u6027\uff1a<\/strong><\/p>\n \u4e30\u5bcc\u7684\u5f3a\u5927\u7684\u8bed\u6cd5\uff08CSS\u9009\u62e9\u5668\uff09\uff0c\u6765\u67e5\u8be2\u6587\u6863\u5143\u7d20\u9ad8\u6548\u7684\u67e5\u8be2\u65b9\u6cd5\uff0c\u7528\u6765\u627e\u5230\u4e0eCSS\u9009\u62e9\u5668\u5339\u914d\u7684\u6587\u6863\u5143\u7d20\u96c6\u4e00\u5957\u6709\u7528\u7684\u65b9\u6cd5\uff0c\u7528\u6765\u64cd\u4f5c\u9009\u4e2d\u7684\u5143\u7d20\u5f3a\u5927\u7684\u51fd\u6570\u5f0f\u7f16\u7a0b\u6280\u5de7\uff0c\u7528\u6765\u6279\u91cf\u64cd\u4f5c\u5143\u7d20\u96c6\uff0c\u800c\u4e0d\u662f\u6bcf\u6b21\u53ea\u64cd\u4f5c\u5355\u4e2a\u7b80\u4ecb\u7684\u8bed\u8a00\u7528\u6cd5\uff08\u94fe\u5f0f\u7528\u6cd5\uff09\uff0c\u7528\u6765\u8868\u793a\u4e00\u7cfb\u5217\u987a\u5e8f\u64cd\u4f5c\u3002<\/p>\n \u6559\u7a0b\uff1a<\/strong><\/p>\n \u83dc\u9e1f\u6559\u7a0b\uff1ahttps:\/\/www.runoob.com\/jquery\/jquery-tutorial.html<\/a><\/p>\n \u672c\u6587\u4ee3\u7801\u5730\u5740\uff1a<\/strong><\/p>\n GitHub\uff1ahttps:\/\/github.com\/lemonguess\/my_learning_codes\/tree\/main\/jQuery<\/a><\/p>\n \u5b98\u7f51\uff1a<\/strong><\/p>\n \u5b98\u7f51\u5730\u5740\uff1ahttps:\/\/jquery.com\/<\/a><\/p>\n \u56fd\u5185\u7ffb\u8bd1\u53c2\u8003\uff1ahttp:\/\/jquery.cuishifeng.cn\/<\/a><\/p>\n \u524d\u7aef\u8d44\u6e90\u67e5\u627e\uff1ahttps:\/\/www.bootcdn.cn\/<\/a><\/p>\n \u6807\u51c6\u7248\u672c\uff1a<\/strong><\/p>\n JQuery\u5b8c\u6574\u7248\u672c\uff0c\u5305\u542b\u6ce8\u91ca\u7b49\uff0c\u5b66\u4e60\u65f6\u53ef\u4ee5\u53c2\u8003\uff0c\u5efa\u8bae\u5b66\u4e60\u4f7f\u7528<\/p>\n \u4e0b\u8f7d\u5730\u5740\uff1ahttps:\/\/cdn.bootcss.com\/jquery\/3.4.1\/jquery.js<\/a><\/p>\n \u538b\u7f29\u7248\uff1a<\/strong><\/p>\n \u538b\u7f29\u7248\u53bb\u9664\u4e86\u4e0d\u5fc5\u8981\u7684\u6ce8\u91ca\u548c\u7a7a\u683c\uff0c\u53d8\u91cf\u540d\u7b49\u5185\u90e8\u6807\u8bc6\u7b26\u4e5f\u66ff\u6362\u6210\u66f4\u77ed\u7684\u540d\u5b57<\/p>\n \u4e0b\u8f7d\u5730\u5740\uff1ahttps:\/\/cdn.bootcss.com\/jquery\/3.4.1\/jquery.min.js<\/a><\/p>\n \u6ce8\u610f\uff1a<\/strong><\/p>\n \u5728JQ\u4e2d\uff0c$()\u662f\u6700\u91cd\u8981\u7684\u65b9\u6cd5\uff0c\u53ef\u4ee5\u4f20\u9012CSS\u9009\u62e9\u5668\u3001Element\u3001Document\u6216\u8005Window\u5bf9\u8c61\u3001HTML\u6587\u672c\u5b57\u7b26\u4e32\u3001\u51fd\u6570\u3001\u5b57\u7b26\u4e32\u7b49\u5bf9\u8c61\u6ce8\u610f\uff1aJQ\u7684API\u53ea\u5bf9\u81ea\u5df1\u5f00\u653e\uff0cJQ\u4e0d\u80fd\u7528js\u7684API\uff0cjs\u4e5f\u4e0d\u80fd\u7528JQ\u7684API<\/p>\n addClass \u52a0class\u540d\u5b57<\/p>\n<\/li>\n removeClass \u79fb\u9664\u4f20\u5165\u7684class\uff1b \u6ca1\u6709\uff0c\u79fb\u9664\u5168\u90e8<\/p>\n<\/li>\n toggleClass \u64cd\u4f5cclass\u7c7b\u540d\uff0c\u6709\u5c31\u5220\uff0c\u6ca1\u6709\u5219\u52a0 <\/p>\n<\/li>\n<\/ul>\n attr \u8bbe\u7f6e\u3001\u83b7\u53d6 \u6807\u7b7e\u5c5e\u6027<\/p>\n<\/li>\n removeAttr() \u79fb\u9664\u6807\u7b7e\u5c5e\u6027<\/p>\n<\/li>\n<\/ul>\n JS\u7684\u4e8b\u4ef6\u901a\u8fc7\u8d4b\u503c\u6765\u5b9e\u73b0\uff0c\u5982\u70b9\u51fb\u4e8b\u4ef6\u7ed1\u5b9a\u7684\u51fd\u6570\uff0c\u540e\u4e00\u4e2a\u51fd\u6570\u4f1a\u5c06\u524d\u4e00\u4e2a\u8986\u76d6<\/p>\n jq\u662f\u91c7\u7528\u65b9\u6cd5\u8c03\u7528\u7684\u65b9\u5f0f\uff0c\u5e76\u4e14\u4e0d\u4f1a\u8986\u76d6<\/strong><\/p>\n2.\u5f15\u5165\u65b9\u6cd5<\/h3>\n
\n
\n
\n
\n
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>jq\u5f15\u5165<\/title>\n<\/head>\n<body>\n<script src="https:\/\/cdn.bootcdn.net\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js"><\/script>\n<script>\n \/* $() jq\u7684\u4ee3\u8868\u7b26\u53f7 *\/\n $(function (){\n alert(1);\n })\n<\/script>\n\n<\/body>\n<\/html><\/code><\/pre>\n\u4e8c\u3001JQeury\u64cd\u4f5cHTML\u5c5e\u6027<\/h2>\n
1.\u64cd\u4f5c\u7c7b\u540d<\/h3>\n
\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>jq\u64cd\u4f5cHTML\u5143\u7d20<\/title>\n<\/head>\n<body>\n<div>111<\/div>\n<script src="\/js\/jquery.js"><\/script>\n<script>\n \/* \u64cd\u4f5cclass\u7c7b\u540d *\/\n $("div").addClass("box"); \/\/\u589e\u52a0\u7684\u64cd\u4f5c\n $("div").addClass("box1 box2"); \/\/\u589e\u52a0\u591a\u4e2a \u7a7a\u683c\u9694\u5f00\u5c31\u884c\n $(".box2").addClass("box9"); \/\/css\u9009\u62e9\u5668\uff0c\u5176\u4e2d\u4e00\u4e2aclass\u540d\u79f0\u4e5f\u80fd\u547d\u4e2d\n $("div").removeClass("box2"); \/\/\u79fb\u9664\u4f20\u5165\u7684class\u540d\u2014\u2014box2\n $("div").removeClass(); \/\/\u79fb\u9664\u5168\u90e8\n \/*\n * toggleClass("\u5c5e\u6027\u540d", "\u5c5e\u6027\u503c"),\n * \u65e0\u5219\u589e\uff0c\u6709\u5219\u5220\n * *\/\n $("div").toggleClass("box");\n $("div").toggleClass("box3"); \n<\/script>\n\n<\/body>\n<\/html><\/code><\/pre>\n![\"image-20220710212203096\"](\"https:\/\/lemon-guess.oss-cn-hangzhou.aliyuncs.com\/image-20220710212203096.png\")
<\/p>\n2.\u64cd\u4f5c\u5c5e\u6027<\/h3>\n
\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>jq\u64cd\u4f5cHTML\u5143\u7d20<\/title>\n<\/head>\n<body>\n<div id="001">111<\/div>\n<script src="\/js\/jquery.js"><\/script>\n<script>\n \/* \u64cd\u4f5c\u5c5e\u6027 *\/\n $("div").removeAttr("id") \/\/\u5220\u9664id\u5c5e\u6027\n \/*\n * attr("\u5c5e\u6027\u540d", "\u5c5e\u6027\u503c"),\n * \u65e0\u5219\u589e\uff0c\u6709\u5219\u6539\uff08\u76f4\u63a5\u8986\u76d6\uff09\n * *\/\n $("div").attr("class", "box02") \/\/\u6dfb\u52a0class\u5c5e\u6027,\u503c\u4e3a002\n<\/script>\n\n<\/body>\n<\/html><\/code><\/pre>\n![\"image-20220710211838098\"](\"https:\/\/lemon-guess.oss-cn-hangzhou.aliyuncs.com\/image-20220710211838098.png\")
<\/p>\n\u4e09\u3001\u64cd\u4f5cCSS\u6837\u5f0f<\/h2>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>\u64cd\u4f5cCSS\u6837\u5f0f<\/title>\n <style>\n #box{\n width: 200px;\n height: 200px;\n padding: 50px;\n border: 3px solid red;\n background: goldenrod;\n margin: 50px auto;\n position: relative;\n }\n #wrap{\n width: 50px;\n height: 50px;\n background: blueviolet;\n position: absolute;\n top: 50px;\n left: 60px;\n }\n <\/style>\n<\/head>\n<body>\n<div id="box">\n <div id="wrap">\n\n <\/div>\n<\/div>\n<script src="\/js\/jquery.js"><\/script>\n<script>\n console.log($("#box").width()); \/\/\u83b7\u53d6\u5bbd\n console.log($("#box").innerWidth()); \/\/\u83b7\u53d6\u52a0\u4e0apadding\u7684\u5bbd\n console.log($("#box").outerWidth()); \/\/\u83b7\u53d6\u52a0\u4e0apadding\u3001\u52a0\u4e0aborder\u7684\u5bbd\n\n $("#box").css("width", "400px") \/\/\u53ea\u80fd\u64cd\u4f5c\u4e00\u4e2a\u6837\u5f0f\n $("#box").css({\/\/\u64cd\u4f5c\u591a\u4e2a\u6837\u5f0f\uff0c\u4ee5\u952e\u503c\u5bf9\u7684\u5f62\u5f0f\n "width": "400px", \/\/px\u53ef\u52a0\u53ef\u4e0d\u52a0\n "height": "400px",\n });\n\n console.log($("#box").offset().left);\/\/\u5230\u6d4f\u89c8\u5668\u5de6\u7aef\u7684\u8ddd\u79bb\n console.log($("#box").offset().top);\/\/\u5230\u6d4f\u89c8\u5668\u4e0a\u7aef\u7684\u8ddd\u79bb\n\n console.log($("#wrap").position().left); \/\/\u5230\u7236\u7ea7\u5b9a\u4f4d\u5de6\u7aef\u7684\u8ddd\u79bb\n console.log($("#wrap").position().top); \/\/\u5230\u7236\u7ea7\u5b9a\u4f4d\u4e0a\u7aef\u7684\u8ddd\u79bb\n<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\u56db\u3001JQuery\u4e8b\u4ef6<\/h2>\n
1.js\u4e8b\u4ef6\u548cjq\u4e8b\u4ef6\u7684\u533a\u522b<\/h3>\n
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8" typeof="javascript">\n <title>jq\u4e8b\u4ef6<\/title>\n <style>\n li{\n list-style: none;\n }\n <\/style>\n<\/head>\n<body>\n<ul id="box">\n <li>001<\/li>\n <li>002<\/li>\n <li>003<\/li>\n <li>004<\/li>\n<\/ul>\n<script src="\/js\/jquery.js"><\/script>\n<script>\n \/\/js\u901a\u8fc7\u8d4b\u503c\u6765\u5b9e\u73b0\n const oBox = document.querySelector("#box");\n oBox.onclick = function(){\n console.log(1);\n };\n \/\/ \u5e76\u4e14\u4f1a\u4ee5\u540e\u9762\u7684\u4e3a\u51c6\uff0c\u4e4b\u524d\u7684\u4f1a\u88ab\u8986\u76d6\u6389(\u4e0d\u4f1a\u518d\u6253\u53701)\n oBox.onclick = function(){\n console.log(2);\n }\n<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n![\"image-20220710215452522\"](\"https:\/\/lemon-guess.oss-cn-hangzhou.aliyuncs.com\/image-20220710215452522.png\")
<\/p>\n
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8" typeof="javascript">\n <title>jq\u4e8b\u4ef6<\/title>\n <style>\n li{\n list-style: none;\n }\n <\/style>\n<\/head>\n<body>\n<ul id="box">\n <li>001<\/li>\n <li>002<\/li>\n <li>003<\/li>\n <li>004<\/li>\n<\/ul>\n<script src="\/js\/jquery.js"><\/script>\n<script>\n \/\/ jq\u662f\u91c7\u7528\u65b9\u6cd5\u8c03\u7528\u7684\u65b9\u6cd5\uff0c\u5e76\u4e14\u4e0d\u4f1a\u8986\u76d6\n $("#box").click(()=>{\n console.log(1)\n });\n $("#box").click(()=>{\n console.log(2)\n });\n<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n![\"image-20220710215754953\"](\"https:\/\/lemon-guess.oss-cn-hangzhou.aliyuncs.com\/image-20220710215754953.png\")
<\/p>\n2.\u5e38\u7528\u4e8b\u4ef6\u64cd\u4f5c<\/h3>\n
![\"image-20220711013519214\"](\"https:\/\/lemon-guess.oss-cn-hangzhou.aliyuncs.com\/image-20220711013519214.png\")
<\/p>\n![\"image-20220711015628014\"](\"https:\/\/lemon-guess.oss-cn-hangzhou.aliyuncs.com\/image-20220711015628014.png\")
<\/p>\n","protected":false},"excerpt":{"rendered":"