JQuery选择器详解-CSDN博客

4 5 选择器..."> <meta name="geo:entity_type" content="Article"> <meta name="geo:subject" content="JQuery选择器"> <meta name="geo:key_points" content="javascript"> <meta name="geo:citation_ready" content="true"> <meta name="description:direct_answer" content="JQuery选择器　　　　通过一个样例来分辨这些选择器，首先做一个初始的页面：1、HTML 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>选择器..."> <meta name="author:credentials" content="adr5970"> <meta name="author:affiliation" content="csdn"> <meta name="geo:source_type" content="curated"> <meta name="geo:fact_checked" content="true"> <meta name="geo:editorial_policy" content="https://passport.csdn.net/service"> <meta name="geo:update_frequency" content="daily"> <meta name="geo:maintenance_status" content="active"> <script> (function(){ var el = document.createElement("script"); el.src = "https://s3a.pstatp.com/toutiao/push.js?1abfa13dfe74d72d41d83c86d240de427e7cac50c51ead53b2e79d40c7952a23ed7716d05b4a0f683a653eab3e214672511de2457e74e99286eb2c33f4428830"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script> <meta name="keywords" content="javascript"> <meta name="csdn-baidu-search" content='{"autorun":true,"install":true,"keyword":"jquery.1.12.1.min.js"}'> <meta name="description" content="文章浏览阅读201次。JQuery选择器　　　　通过一个样例来分辨这些选择器，首先做一个初始的页面：1、HTML 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>选择器..._jquery.1.12.1.min.js"> <link rel="stylesheet" type="text/css" href="/https://csdnimg.cn/release/blogv2/dist/pc/css/detail_enter-a863e6fade.min.css"> <style> #content_views pre{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #content_views pre code{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style> <script type="application/ld+json">{"@context":"https://ziyuan.baidu.com/contexts/cambrian.jsonld","@id":"https://blog.csdn.net/adr5970/article/details/101307112","appid":"1638831770136827","pubDate":"2019-09-24T19:23:22","title":"JQuery选择器-CSDN博客","upDate":"2017-08-20T20:52:00"}</script> <link rel="stylesheet" type="text/css" href="/https://csdnimg.cn/release/blogv2/dist/pc/themesSkin/skin-yellow/skin-yellow-28d34ab5fa.min.css"> <script src="/https://g.csdnimg.cn/lib/jquery/1.12.4/jquery.min.js" type="text/javascript"></script> <script src="/https://g.csdnimg.cn/lib/jquery-migrate/1.4.1/jquery-migrate.js" type="text/javascript"></script> <script type="text/javascript"> var isCorporate = false; var username = "adr5970"; var skinImg = "white"; var blog_address = "https://blog.csdn.net/adr5970"; var currentUserName = ""; var isOwner = false; var loginUrl = "http://passport.csdn.net/account/login?from=https://blog.csdn.net/adr5970/article/details/101307112"; var blogUrl = "https://blog.csdn.net/"; var starMapUrl = "https://ai.csdn.net"; var paymentBalanceUrl = "https://csdnimg.cn/release/vip-business-components/vipPaymentBalance.js?v=2025122501"; var avatar = "https://profile-avatar.csdnimg.cn/default.jpg!1"; var isCJBlog = false; var isStarMap = false; var articleTitle = "JQuery选择器"; var articleDesc = "文章浏览阅读201次。JQuery选择器　　　　通过一个样例来分辨这些选择器，首先做一个初始的页面：1、HTML 1 \x3C!DOCTYPE html> 2 <html> 3 <head lang=\"en\"> 4 <meta charset=\"UTF-8\"> 5 <title>选择器..._jquery.1.12.1.min.js"; var articleTitles = "JQuery选择器详解-CSDN博客"; var nickName = "adr5970"; var articleDetailUrl = "https://blog.csdn.net/adr5970/article/details/101307112"; var vipUrlV = "https://mall.csdn.net/vip?vipSource=learningVip"; if(window.location.host.split('.').length == 3) { blog_address = blogUrl + username; } var skinStatus = "White"; var isVipSkin = false; var blogStaticHost = "https://csdnimg.cn/release/blogv2/" var payColumn = false </script> <meta name="toolbar" content='{"type":"0","fixModel":"1"}'> <script ript src="/https://g.csdnimg.cn/??fixed-sidebar/1.1.7/fixed-sidebar.js" type="text/javascript"></script> <script src='//g.csdnimg.cn/common/csdn-report/report.js' type='text/javascript'></script> <link rel="stylesheet" type="text/css" href="/https://csdnimg.cn/public/sandalstrap/1.4/css/sandalstrap.min.css"> <style> .MathJax_Message, .MathJax_Preview{ display: none !important; } </style> <script src="/https://dup.baidustatic.com/js/ds.js"></script> <script type="text/javascript"> (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="/https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "lgtpix6r85"); </script> <script src="/cdn_cgi_bs_bot/static/crypto.min.js"></script> <script src="/cdn_cgi_bs_bot/static/bot-score-v1.js"></script> <script src="/cdn_cgi_bs_captcha/static/js/waf_captcha_embedded_bs.js"></script> <script>(function(){var P=location.origin;function rp(u){if(typeof u!=="string")return u;if(u.startsWith("https://")||u.startsWith("http://"))return"/https/"+u.replace(/^https?:\/\//,"");return u}try{Object.defineProperty(window,"location",{set:function(u){location.href=rp(u)},get:function(){return location},configurable:true})}catch(e){}if(history.pushState){var _p=history.pushState;history.pushState=function(s,t,u){_p.call(this,s,t,rp(u))}}if(history.replaceState){var _r=history.replaceState;history.replaceState=function(s,t,u){_r.call(this,s,t,rp(u))}}document.addEventListener("click",function(e){var a=e.target.closest("a");if(a&&a.href&&a.href.startsWith(P)&&!a.target){var np=a.href.substring(P.length);a.href=np;e.preventDefault();location.href=np}})});</script></head> <body class="nodata " style=""> <div id="toolbarBox" style="min-height: 48px;"></div> <script> var toolbarSearchExt = '{\"id\":101307112,\"landingWord\":[\"jquery.1.12.1.min.js\"],\"queryWord\":\"\",\"tag\":[\"javascript\"],\"title\":\"JQuery选择器\"}'; </script> <script src="/https://g.csdnimg.cn/common/csdn-toolbar/csdn-toolbar.js" type="text/javascript"></script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <link rel="stylesheet" href="/https://csdnimg.cn/release/blogv2/dist/pc/css/blog_code-01256533b5.min.css"> <link rel="stylesheet" href="/https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/chart-3456820cac.css" /> <link rel="stylesheet" href="/https://g.csdnimg.cn/lib/swiper/6.0.4/css/swiper.css" /> <script src="/https://g.csdnimg.cn/lib/swiper/6.0.4/js/swiper.js" async></script> <script> var articleId = 101307112; var annotationModuleBootstrapData = { hasAnnotation: false, totalCount: 0, list: [], categories: [] }; var annotationFeatureEnabled = false; var privateEduData = []; var privateData = []; var crytojs = "https://csdnimg.cn/release/blogv2/dist/components/js/crytojs-ca5b8bf6ae.min.js"; var commentscount = 0; var commentAuth = 1; var curentUrl = "https://blog.csdn.net/adr5970/article/details/101307112"; var myUrl = "https://my.csdn.net/"; var isGitCodeBlog = false; var vipActivityIcon = "https://i-operation.csdnimg.cn/images/08dcdda7ff3041348705c8beb5d2fb7d.gif"; var isOpenSourceBlog = false; var isVipArticle = false; var highlight = ["javascript","jquery","选择器","min","12","js","1","."];//高亮数组 var isRecommendModule = true; var isBaiduPre = true; var baiduCount = 2; var setBaiduJsCount = 10; var viewCountFormat = 201; var share_card_url = "https://app-blog.csdn.net/share?article_id=101307112&username=adr5970" var mallVipUrl = "https://mall.csdn.net/vip?vipSource=article" var vipArticleAbStyle = "t_1" var vipArticleCpStyle = "t_1" var detailheaderAbCommunity = "control" var codeAiAbStyle = "exp4" var runProjectDeepBlogAB = "isRunProject is false" var gitcodeHighlightWordAB = "exp1" var asideCknowsEntryAB = "con1" var deepblogUrl = "" deepblogUrl = "https://deepblog.net?utm_source=blog_onekey_run"; var codeAiAbObjStyle = "" codeAiAbObjStyle = "{\"control\":{\"title\":\"AI写代码\",\"destUrl\":\"https://trae.com.cn?utm_source=community&utm_medium=csdn&utm_campaign=daima\",\"imgUrl\":\"https://i-operation.csdnimg.cn/images/a5fff6f6c9f0464c9a46b130c972952b.png\"},\"exp1\":{\"title\":\"一键获取完整项目代码\",\"runClose\":true,\"destUrl\":\"https://inscode.net?utm_source=blog_code_block\",\"imgUrl\":\"https://i-operation.csdnimg.cn/images/4648c13ca82a446ea1bfb99876a27770.png\",\"blogUrl\":true},\"control_run_project\":{\"title\":\"运行项目并下载源码\",\"destUrl\":\"\",\"imgUrl\":\"https://i-operation.csdnimg.cn/images/46c457a2cf8b4b9b8f17a2ab71461d4a.png\"},\"control_deepblog\":{\"title\":\"AI生成项目\",\"destUrl\":\"https://inscode.net?utm_source=blog_code_block_fixed\",\"imgUrl\":\"https://i-operation.csdnimg.cn/images/9899ea0f099e4e4e8b1fcdb918a27fcd.png\",\"blogUrl\":false},\"exp2\":{\"title\":\"AI编程工具\",\"destUrl\":\"https://www.codebuddy.cn/work/?fromSource=gwzcw.13129862.13129862.13129862&utm_medium=cpc&utm_id=gwzcw.13129862.13129862.13129862\",\"imgUrl\":\"https://i-operation.csdnimg.cn/images/034b15f494eb444abc72cc544790ca5f.svg\"},\"exp4\":{\"title\":\"Lobster AI\",\"destUrl\":\"https://lobsterai.youdao.com/#/index?keyfrom=csdn3\",\"imgUrl\":\"https://i-operation.csdnimg.cn/images/2c9d3b91a8ad4956bca5af92918b9e75.png\"},\"exp5\":{\"title\":\"用码道免费领 1 个月 Token\",\"destUrl\":\"https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwltcsdn1&sourcead=dmzntgwltcsdnzn11\",\"imgUrl\":\"https://i-operation.csdnimg.cn/images/7c0190c005ab41659100f583c0791aee.png\"}}"; var articleType = 2; var baiduKey = "jquery.1.12.1.min.js"; var copyPopSwitch = true; var needInsertBaidu = true; var recommendRegularDomainArr = ["blog.csdn.net/.+/article/details/","download.csdn.net/download/","edu.csdn.net/course/detail/","ask.csdn.net/questions/","bbs.csdn.net/topics/","www.csdn.net/gather_.+/"] var codeStyle = ""; var baiduSearchType = "baidulandingword"; var sharData = "{\"hot\":[{\"id\":1,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/a5f4260710904e538002a6ab337939b3.png\"},{\"id\":2,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/188b37199a2c4b74b1d9ffc39e0d52de.png\"},{\"id\":3,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/14ded358b631444581edd98a256bc5af.png\"},{\"id\":4,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/1470f23a770444d986ad551b9c33c5be.png\"},{\"id\":5,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/c329f5181dc74f6c9bd28c982bb9f91d.png\"},{\"id\":6,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/ccd8a3305e81460f9c505c95b432a65f.png\"},{\"id\":7,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/bc89d8283389440d97fc4d30e30f45e1.png\"},{\"id\":8,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/452d485b4a654f5592390550d2445edf.png\"},{\"id\":9,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/f8b9939db2ed474a8f43a643015fc8b7.png\"},{\"id\":10,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/6de8864187ab4ed3b1db0856369c36ff.png\"},{\"id\":11,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/673cc3470ff74072acba958dc0c46e2d.png\"},{\"id\":12,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/930c119760ac4491804db80f9c6d4e3f.png\"},{\"id\":13,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/15e6befb05a24233bc2b65e96aa8d972.png\"},{\"id\":14,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/2075fd6822184b95a41e214de4daec13.png\"},{\"id\":15,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/859b1552db244eb6891a809263a5c657.png\"},{\"id\":16,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/0be2f920f1f74290a98921974a9613fd.png\"},{\"id\":17,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/2e97e00b43f14afab494ea55ef3f4a6e.png\"},{\"id\":18,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/ff4ab252f46e444686f5135d6ebbfec0.png\"},{\"id\":19,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/ae029bbe99564e79911657912d36524f.png\"},{\"id\":20,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/b3ece39963de440388728e9e7b9bf427.png\"},{\"id\":21,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/6f14651a99ba486e926d63b6fa692997.png\"},{\"id\":22,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/83ceddf050084875a341e32dcceca721.png\"},{\"id\":23,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/b90368b8fd5d4c6c8c79a707d877cf7c.png\"},{\"id\":24,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/aeffae14ecf14e079b2616528c9a393b.png\"},{\"id\":25,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/c5a06b5a13d44d16bed868fc3384897a.png\"},{\"id\":26,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/08b697658b844b318cea3b119e9541ef.png\"},{\"id\":27,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/68ccb0b8d09346ac961d2b5c1a8c77bf.png\"},{\"id\":28,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/a2227a247e37418cbe0ea972ba6a859b.png\"},{\"id\":29,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/3a42825fede748f9993e5bb844ad350d.png\"},{\"id\":30,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/8882abc1dd484224b636966ea38555c3.png\"},{\"id\":31,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/4f6a5f636a3e444d83cf8cc06d87a159.png\"},{\"id\":32,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/1953ef79c56b4407b78d7181bdff11c3.png\"},{\"id\":33,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/c04a2a4f772948ed85b5b0380ed36287.png\"},{\"id\":34,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/5b4fecd05091405ea04d8c0f53e9f2c7.png\"},{\"id\":35,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/b89f576d700344e280d6ceb2a66c2420.png\"},{\"id\":36,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/1c65780e11804bbd9971ebadb3d78bcf.png\"},{\"id\":37,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/d590db2055f345db9706eb68a7ec151a.png\"},{\"id\":38,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/fe602f80700b4f6fb3c4a9e4c135510e.png\"},{\"id\":39,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/39ff2fcd31e04feba301a071976a0ba7.png\"},{\"id\":40,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/f9b61b3d113f436b828631837f89fb39.png\"},{\"id\":41,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/df1aca5f610c4ad48cd16da88c9c8499.png\"},{\"id\":42,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/d7acf73a1e6b41399a77a85040e10961.png\"},{\"id\":43,\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/b7f1b63542524b97962ff649ab4e7e23.png\"}],\"vip\":[{\"id\":1,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101150.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101154.png\"},{\"id\":2,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101204.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101208.png\"},{\"id\":3,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101211.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101215.png\"},{\"id\":4,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101218.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101220.png\"},{\"id\":5,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101223.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220920101226.png\"},{\"id\":6,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100635.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100639.png\"},{\"id\":7,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100642.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100644.png\"},{\"id\":8,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100647.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100649.png\"},{\"id\":9,\"vipUrl\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100652.png\",\"url\":\"https:\\/\\/img-home.csdnimg.cn\\/images\\/20220922100655.png\"},{\"id\":10,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/55de67481fde4b04b97ad78f11fe369a.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/bb2418fb537e4d78b10d8765ccd810c5.png\"},{\"id\":11,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/579c713394584d128104ef1044023954.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/f420d9fbcf5548079d31b5e809b6d6cd.png\"},{\"id\":12,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/75b7f3155ba642f5a4cc16b7baf44122.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/a9030f5877be401f8b340b80b0d91e64.png\"},{\"id\":13,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/0903d33cafa54934be3780aa54ae958d.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/2cd8c8929f5a42fca5da2a0aeb456203.png\"},{\"id\":14,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/949fd7c22884439fbfc3c0e9c3b8dee7.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/dafbea9bd9eb4f3b962b48dc41657f89.png\"},{\"id\":15,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/4119cfddd71d4e6a8a27a18dbb74d90e.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/c56310c8b6384d9e85388e4e342ce508.png\"},{\"id\":16,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/121575274da142bcbbbbc2e8243dd411.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/5013993de06542f881018bb9abe2edf7.png\"},{\"id\":17,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/4d97aa6dd4fe4f09a6bef5bdf8a6abcd.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/76f23877b6ad4066ad45ce8e31b4b977.png\"},{\"id\":18,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/fdb619daf21b4c829de63b9ebc78859d.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/a1abe5d27a5441f599adfe662f510243.png\"},{\"id\":19,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/676b7707bb11410f8f56bc0ed2b2345c.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/7ac5b467fbf24e1d8c2de3f3332c4f54.png\"},{\"id\":20,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/0becb8cc227e4723b765bdd69a20fd4a.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/fdec85b26091486b9a89d0b8d45c3749.png\"},{\"id\":21,\"vipUrl\":\"https:\\/\\/img-blog.csdnimg.cn\\/1a6c06235ad44941b38c54cbc25a370c.png\",\"url\":\"https:\\/\\/img-blog.csdnimg.cn\\/410a06cda2d44b0c84578f88275caf70.png\"}],\"map\":{\"hot\":\"热门\",\"vip\":\"VIP\"}}"; var commentListModule = '' var canRead = true; var blogMoveHomeArticle = true; var showSearchText = ""; var articleSource = 4; var articleReport = '{"pid": "blog", "spm":"1001.2101"}'; var baiduSearchChannel = 'pc_relevant' var baiduSearchIdentification = '.235^v43^pc_blog_bottom_relevance_base3' var distRequestId = '1787359902340_74543' var initRewardObject = { giver: currentUserName, anchor: username, articleId: articleId, sign: '' } var isLikeStatus = false; var isUnLikeStatus = false; var studyLearnWord = ""; var unUseCount = 0; var codeMaxSize = 0; var overCost = true; var isCurrentUserVip = false; var contentViewsHeight = 0; var contentViewsCount = 0; var contentViewsCountLimit = 5; var isShowConcision = false; var lastTime = 0 var postTime = "2017-08-20 20:52:00" var isCookieConcision = false var isHasDirectoryModel = false var isShowSideModel = false var isShowDirectoryModel = true function getCookieConcision(sName){ var allCookie = document.cookie.split("; "); for (var i=0; i < allCookie.length; i++){ var aCrumb = allCookie[i].split("="); if (sName == aCrumb[0]) return aCrumb[1]; } return null; } if (getCookieConcision('blog_details_concision') && getCookieConcision('blog_details_concision') == 0){ isCookieConcision = true isShowSideModel = true isShowDirectoryModel = false } </script> <div class="main_father clearfix d-flex justify-content-center " style="height:100%;"> <div class="container clearfix " id="mainBox"> <script> if (!isCookieConcision) { $('.main_father').removeClass('mainfather-concision') $('.main_father .container').removeClass('container-concision') } else { $('#mainBox').css('margin-right', '0') } </script> <main> <script type="text/javascript"> var resourceId = ""; function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if( r != null ) return decodeURIComponent( r[2] ); return ''; } function stripscript(s){ var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？%]") var rs = ""; for (var i = 0; i < s.length; i++) { rs = rs+s.substr(i, 1).replace(pattern, ''); } return rs; } var blogHotWords = stripscript(getQueryString('utm_term')).length > 1 ? stripscript(getQueryString('utm_term')) : '' </script> <div class="blog-content-box"> <div class="article-header-box" id="article-header-box"> <div class="article-header"> <div class="article-title-box"> <h1 class="title-article" id="articleContentId">JQuery选择器</h1> </div> <div class="article-info-box"> <div class="up-time">最新推荐文章于 2026-08-21 17:54:30 发布</div> <div class="article-bar-top"> <div class="bar-content active"> <span class="article-type-text reprint">转载</span> <span class="time blog-postTime" data-time="2017-08-20 20:52:00">最新推荐文章于 2026-08-21 17:54:30 发布</span> <span class="border-dian">·</span> <span class="read-count">201 阅读</span> <div class="read-count-box is-like like-ab-new" data-type="top"> <span class="border-dian">·</span> <img class="article-read-img article-heard-img active" style="display:none" id="is-like-imgactive-new" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2023Active.png" alt=""> <img class="article-read-img article-heard-img" style="display:block" id="is-like-img-new" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2023Black.png" alt=""> <span class="read-count" id="blog-digg-num" style="color:;"> 0 </span> </div> <span class="border-dian">·</span> <a id="blog_detail_zk_collection" class="un-collection" data-report-click='{"mod":"popu_823","spm":"1001.2101.3001.4232","ab":"new"}'> <img class="article-collect-img article-heard-img un-collect-status isdefault" style="display:inline-block" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollect2.png" alt=""> <img class="article-collect-img article-heard-img collect-status isactive" style="display:none" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollectionActive2.png" alt=""> <span class="get-collection"> 0 </span> </a> <span class="border-dian">·</span> <div class="href-article-edit-new"> <span class="href-article-edit-click">本内容遵循CC 4.0 BY-SA版权协议</span> <div class="slide-content-box-new"> 原文链接：<a href="/https://www.cnblogs.com/ljbguanli/p/7401355.html" target="_blank" rel="noopener">http://www.cnblogs.com/ljbguanli/p/7401355.html</a> </div> </div> </div> </div> <div class="blog-tags-box article-header-tags-v2"> <div class="article-header-categories-wrap"> <div class="article-header-collect-row"> <div class="article-header-category-segment article-header-collect-segment" id="article-header-collect-group" data-column-count="0" style="display:none"> <span class="article-header-row-dot" style="display:none">·</span> <div class="article-header-category-group article-header-collect-group"> <span class="article-header-label">收录于</span> <div class="article-header-pill-list article-header-collect-list" id="article-header-collect-list"> <span class="article-header-community-slot community-name" id="community-name"></span> <div class="tag-more-btn collect-more-btn column-collect-more-btn" style="display:none" id="article-header-collect-more-btn" data-report-click='{"spm":"1001.2101.3001.4224"}'> <svg class="more-icon" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"> <circle cx="6" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="18" cy="12" r="2"/> </svg> <div class="column-more-dropdown"> <p class="dropdown-title">当前文章被以下社区和专栏收录：</p> <div class="column-more-list" id="article-header-collect-more-list"> <div class="dropdown-divider column-more-item-divider"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="blogHuaweiyunAdvert"></div> <article class="baidu_pl"> <div id="article_content" class="article_content clearfix"> <link rel="stylesheet" href="/https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"> <link rel="stylesheet" href="/https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-a50b13a894.css"> <div id="content_views" class="htmledit_views atom-one-dark"> <div id="cnblogs_post_body" class="blogpost-body"> <div id="article_content" class="article_content tracking-ad"> <h2 style="text-align:center;"> </h2> <div> <h2 style="font-family:'微软雅黑', '宋体', Arial;font-size:28px;text-align:left;"> JQuery选择器</h2> <p style="font-family:'微软雅黑', '宋体', Arial;font-size:15px;text-align:left;line-height:24px;"> 　　　　通过一个样例来分辨这些选择器，首先做一个初始的页面：</p> <p style="font-family:'微软雅黑', '宋体', Arial;font-size:15px;text-align:left;line-height:24px;"> 1、HTML</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <div style="text-align:left;"> <img id="code_img_opened_8d0234d1-d7bf-4389-add3-f0cf3579e73f" class="code_img_opened" src="/https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif" alt="" style="border:0px;vertical-align:middle;" /> </div> <div id="cnblogs_code_open_8d0234d1-d7bf-4389-add3-f0cf3579e73f" class="cnblogs_code_hide"> <div class="cnblogs_code_toolbar" style="text-align:left;"> <span class="cnblogs_code_copy" style="line-height:1.5;"><a title="复制代码" style="color:rgb(85,137,91);border:none;"><img src="/https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" alt="复制代码" style="border:none;" /></a></span> </div> <pre style="font-family:'Courier New';"></pre> <div style="text-align:left;"> <span style="color:rgb(0,128,128);line-height:1.5;"> 1</span> <span style="color:rgb(0,0,255);line-height:1.5;"><!</span> <span style="color:rgb(255,0,255);line-height:1.5;">DOCTYPE html</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 2</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">html</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 3</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">head </span> <span style="color:rgb(255,0,0);line-height:1.5;">lang</span> <span style="color:rgb(0,0,255);line-height:1.5;">="en"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 4</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">meta </span> <span style="color:rgb(255,0,0);line-height:1.5;">charset</span> <span style="color:rgb(0,0,255);line-height:1.5;">="UTF-8"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 5</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">title</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>选择器 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">title</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 6</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> src</span> <span style="color:rgb(0,0,255);line-height:1.5;">="../JQuery库文件/jquery-1.12.1.min.js"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 7</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">style </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/css"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 8</span> <span style="color:rgb(128,0,0);line-height:1.5;"> div,span,p</span> <span style="line-height:1.5;">{</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 9</span> <span style="color:rgb(255,0,0);line-height:1.5;"> width</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 140px</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">10</span> <span style="color:rgb(255,0,0);line-height:1.5;"> height</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 140px</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">11</span> <span style="color:rgb(255,0,0);line-height:1.5;"> margin</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 5px</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">12</span> <span style="color:rgb(255,0,0);line-height:1.5;"> background</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> #aaa</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">13</span> <span style="color:rgb(255,0,0);line-height:1.5;"> border</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> #000 1px solid</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">14</span> <span style="color:rgb(255,0,0);line-height:1.5;"> float</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> left</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">15</span> <span style="color:rgb(255,0,0);line-height:1.5;"> font-size</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 17px</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">16</span> <span style="color:rgb(255,0,0);line-height:1.5;"> font-family</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> Verdana</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">17</span> <span style="line-height:1.5;">}</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">18</span> <span style="color:rgb(128,0,0);line-height:1.5;"> div.mini </span> <span style="line-height:1.5;">{</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">19</span> <span style="color:rgb(255,0,0);line-height:1.5;"> width</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 55px</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">20</span> <span style="color:rgb(255,0,0);line-height:1.5;"> height</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 55px</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">21</span> <span style="color:rgb(255,0,0);line-height:1.5;"> background-color</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> #aaa</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">22</span> <span style="color:rgb(255,0,0);line-height:1.5;"> font-size</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 12px</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">23</span> <span style="line-height:1.5;">}</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">24</span> <span style="color:rgb(128,0,0);line-height:1.5;"> div.hide</span> <span style="line-height:1.5;">{</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">25</span> <span style="color:rgb(255,0,0);line-height:1.5;"> display</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> none</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">26</span> <span style="line-height:1.5;">}</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">27</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">style</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">28</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">29</span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">给id为mover的元素加入动画.</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">30</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">document</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).ready(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">31</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;"> animateIt() {</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">32</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">#mover</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).slideToggle(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">slow</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">, animateIt);</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">33</span> <span style="line-height:1.5;"> }</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">34</span> <span style="line-height:1.5;"> animateIt();</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">35</span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">36</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">37</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">38</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">head</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">39</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">body</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">40</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="one"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> id</span> <span style="color:rgb(0,0,255);line-height:1.5;">="one"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">41</span> <span style="line-height:1.5;"> id为one,class为one的div</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">42</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="mini"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>class为mini <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">43</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">44</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">45</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="one"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> id</span> <span style="color:rgb(0,0,255);line-height:1.5;">="two"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> title</span> <span style="color:rgb(0,0,255);line-height:1.5;">="test"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">46</span> <span style="line-height:1.5;"> id为two,class为one,title为text的div</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">47</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="mini"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> title</span> <span style="color:rgb(0,0,255);line-height:1.5;">="other"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>class为mini,title为other <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">48</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="mini"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> title</span> <span style="color:rgb(0,0,255);line-height:1.5;">="test"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>class为mini,title为test <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">49</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">50</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">51</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="one"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">52</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="mini"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>class为mini <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">53</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="mini"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>class为mini <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">54</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="mini"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>class为mini <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">55</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="mini"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">56</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">57</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">58</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="one"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">59</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="mini"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>class为mini <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">60</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="mini"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>class为mini <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">61</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="mini"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>class为mini <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">62</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="mini"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> title</span> <span style="color:rgb(0,0,255);line-height:1.5;">="tesst"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>class为mini,title为tesst <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">63</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">64</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">65</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">style</span> <span style="color:rgb(0,0,255);line-height:1.5;">="display: none"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="none"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">66</span> <span style="line-height:1.5;"> style的diaplay为none的div</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">67</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">68</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">69</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="hide"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>class为hide的div <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">70</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">71</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">72</span> <span style="line-height:1.5;"> 包括input的type为“hidden”的div</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">73</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">input </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="hidden"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> size</span> <span style="color:rgb(0,0,255);line-height:1.5;">="8"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">74</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">75</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">76</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">span </span> <span style="color:rgb(255,0,0);line-height:1.5;">id</span> <span style="color:rgb(0,0,255);line-height:1.5;">="mover"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>正在运行动画的span元素 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">span</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">77</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">body</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">78</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">html</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <div class="cnblogs_code_toolbar" style="text-align:left;"> <span class="cnblogs_code_copy" style="line-height:1.5;"><a title="复制代码" style="color:rgb(85,137,91);border:none;"><img src="/https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" alt="复制代码" style="border:none;" /></a></span> </div> </div> </div> <p style="font-family:'微软雅黑', '宋体', Arial;font-size:15px;text-align:left;line-height:24px;"> </p> <p style="font-family:'微软雅黑', '宋体', Arial;font-size:15px;text-align:left;line-height:24px;"> 2、初始效果</p> <p style="font-family:'微软雅黑', '宋体', Arial;font-size:15px;text-align:left;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/5aa7b8a43e0d0449e0a300c89dae1515.jpeg" alt="" style="border:0px;" /></p> <p style="font-family:'微软雅黑', '宋体', Arial;font-size:15px;text-align:left;line-height:24px;"> </p> <div style="text-align:right;"> <div style="font-family:'微软雅黑', '宋体', Arial;font-size:15px;text-align:left;"> <a href="/https://www.cnblogs.com/jasmine-95/p/5367234.html#_labelTop" style="text-decoration:none;color:rgb(85,137,91);" rel="nofollow">回到顶部</a> </div> <a name="_label0"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> </div> <h3 style="text-align:left;font-family:'微软雅黑', '宋体', '黑体', Arial;font-size:17px;color:rgb(255,255,255);line-height:25px;"> 一、基本选择器</h3> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/2c7969e65ecf75466d96ec8b8cabe904.jpeg" alt="" style="border:0px;" /></p> <a name="_label0_0"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> <h4 style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:16px;">1、ID选择器</h4> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 　　eg：改变id为one的元素的背景颜色</p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 首先在<head>处引入JQuery库文件：</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"><span style="font-size:16px;line-height:1.5;"><span style="color:rgb(0,0,255);font-size:12px;line-height:1.5;"><</span><span style="color:rgb(128,0,0);font-size:12px;line-height:1.5;">script </span><span style="color:rgb(255,0,0);font-size:12px;line-height:1.5;">type</span><span style="color:rgb(0,0,255);font-size:12px;line-height:1.5;">="text/javascript"</span><span style="color:rgb(255,0,0);font-size:12px;line-height:1.5;"> src</span><span style="color:rgb(0,0,255);font-size:12px;line-height:1.5;">="../JQuery库文件/jquery-1.12.1.min.js"</span><span style="color:rgb(0,0,255);font-size:12px;line-height:1.5;">></</span><span style="color:rgb(128,0,0);font-size:12px;line-height:1.5;">script</span><span style="color:rgb(0,0,255);font-size:12px;line-height:1.5;">></span></span></pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 然后编辑JQuery代码：</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="font-family:'Courier New';"></pre> <div style="text-align:left;"> <span style="color:rgb(0,128,128);line-height:1.5;">1</span> <span style="color:rgb(0,128,0);line-height:1.5;"></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">2</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">3</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">document</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).ready(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">4</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">#one</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).css(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">background-color</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">,</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">#bbffaa</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">改变id为one的元素的背景颜色</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">5</span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">6</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 效果图：</p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/578ab778a01a02df869b8ebc067bad5c.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <strong><span style="color:rgb(255,0,0);">！</span></strong></p> <p>！</p> <p>！</p> <p>全部 jQuery 函数位于一个 document ready 函数中：</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="font-family:'Courier New';"></pre> <div style="text-align:left;"> <span style="color:rgb(255,0,0);line-height:1.5;">$(document).ready(function(){</span> </div> <span style="font-size:16px;line-height:1.5;"><strong><span style="color:rgb(255,0,0);font-size:12px;line-height:1.5;"> </span></strong></span> <div style="text-align:left;"> <span style="line-height:1.5;">);</span> </div> } </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <span style="color:rgb(255,0,0);">这是为了防止文档在全然载入（就绪）之前执行 jQuery 代码。假设在文档没有全然载入之前就执行函数，操作可能失败。！</span></p> <p>！</p> <p>！</p> <p></p> <a name="_label0_1"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> <h4 style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:16px;">2、类选择器</h4> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="font-family:'Courier New';"></pre> <div style="text-align:left;"> <span style="color:rgb(0,128,128);line-height:1.5;">1</span> <span style="color:rgb(0,128,0);line-height:1.5;"></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">2</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">3</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">document</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).ready(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">4</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">.mini</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).css(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">background-color</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">,</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">#bbffaa</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">改变class为mini的全部元素的背景颜色</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">5</span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">6</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 效果：</p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/c037f1578f0537cee3521e4558042e3e.jpeg" alt="" style="border:0px;" /></p> <a name="_label0_2"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> <h4 style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:16px;">3、标签选择器</h4> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 将代码的关键语句改为：</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $("div").css("background-color","#bbffaa"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span><span style="color:rgb(0,128,0);line-height:1.5;">改变元素名是div的全部元素的背景颜色</span></pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 效果图：</p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/cfb7c353f80236baf9e338b60574f9f3.jpeg" alt="" style="border:0px;" /></p> <a name="_label0_3"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> <h4 style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:16px;">4、通配选择符</h4> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $("*").css("background-color","#bbffaa"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span><span style="color:rgb(0,128,0);line-height:1.5;">改变全部元素的背景颜色</span></pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 效果图：</p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/597470c30e0beba0a065e3544d640651.jpeg" alt="" style="border:0px;" /></p> <a name="_label0_4"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> <h4 style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:16px;">5、群组选择器</h4> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 　　eg：改变全部<span>元素和id为two的元素的背景颜色</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $("span,#two").css("background-color","#bbffaa"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span><span style="color:rgb(0,128,0);line-height:1.5;">改变全部<span>元素和id为two的元素的背景颜色</span></pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 效果图：</p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/29157ac454cdd8350dd9dbb03d28974b.jpeg" alt="" style="border:0px;" /></p> <div style="text-align:right;"> <div style="font-family:'微软雅黑', '宋体', Arial;font-size:15px;text-align:left;"> <a href="/https://www.cnblogs.com/jasmine-95/p/5367234.html#_labelTop" style="text-decoration:none;color:rgb(85,137,91);" rel="nofollow">回到顶部</a> </div> <a name="_label1"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> </div> <h3 style="text-align:left;font-family:'微软雅黑', '宋体', '黑体', Arial;font-size:17px;color:rgb(255,255,255);line-height:25px;"> 二、层次选择器</h3> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/d1916ea6f1f46c618720a18463d5cd6b.jpeg" alt="" style="border:0px;" /></p> <a name="_label1_0"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> <h4 style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:16px;">1、$("ancestor descendant")</h4> <pre style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;">改变<body>内全部<div>的背景颜色:</pre> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="font-family:'Courier New';"></pre> <div style="text-align:left;"> <span style="color:rgb(0,128,128);line-height:1.5;">1</span> <span style="color:rgb(0,128,0);line-height:1.5;"></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">2</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">3</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">document</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).ready(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">4</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">body div</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).css(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">background-color</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">,</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">#bbffaa</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">改变<body>内全部<div>的背景颜色</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">5</span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">6</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/b06b34be6a6143b8f20fad1142376259.jpeg" alt="" style="border:0px;" /></p> <a name="_label1_1"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> <h4 style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:16px;">2、$("parent>child")</h4> <pre style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;">改变<body>内子<div>元素的背景颜色:</pre> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $("body > div").css("background-color","#bbffaa"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span><span style="color:rgb(0,128,0);line-height:1.5;">改变<body>内子<div>元素的背景颜色</span></pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/6a23e4edf42f90145884abdae1b3a8da.jpeg" alt="" style="border:0px;" /></p> <a name="_label1_2"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> <h4 style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:16px;">3、$("prev+next")</h4> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 改变class为one的下一个<div>同辈元素的背景色：<span style="color:rgb(255,0,0);font-size:16px;">（！！。下一个同辈元素，相当于next()方法）</span></p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $(".one + div").css("background-color","#bbffaa"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span><span style="color:rgb(0,128,0);line-height:1.5;">改变class为one的下一个<div>同辈元素的背景色</span></pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 也能够写为：</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $(".one").next("div").css("background-color","#bbffaa"); </pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/ac61254ec08059f84875fbd505a28cb8.jpeg" alt="" style="border:0px;line-height:1.5;" /></p> <a name="_label1_3"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> <h4 style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:16px;">4、$("prev~siblings")</h4> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 改变id为two的元素后面的全部<div>同辈元素的背景色：<span style="color:rgb(255,0,0);font-size:16px;">（！</span></p> <p>！！</p> <p>之后的全部同辈元素。相当于nextAll()方法）</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';">$("#two ~ div").css("background-color","#bbffaa");</pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 相当于：</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $("#two").nextAll("div").css("background-color","#bbffaa"); </pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/53ae68a38e586036842907bad8bd7e06.jpeg" alt="" style="border:0px;line-height:1.5;" /></p> <div style="text-align:right;"> <div style="font-family:'微软雅黑', '宋体', Arial;font-size:15px;text-align:left;"> <a href="/https://www.cnblogs.com/jasmine-95/p/5367234.html#_labelTop" style="text-decoration:none;color:rgb(85,137,91);" rel="nofollow">回到顶部</a> </div> <a name="_label2"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> </div> <h3 style="text-align:left;font-family:'微软雅黑', '宋体', '黑体', Arial;font-size:17px;color:rgb(255,255,255);line-height:25px;"> 三、过滤选择器</h3> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 　　过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素。过滤规则与CSS中的伪类选择器语法同样，即选择器都以一个冒号(:)开头。</p> <p></p> <a name="_label2_0"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> <h4 style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:16px;">1、基本过滤选择器</h4> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/8f46c955597f5c3fc855d913e73cfb3c.jpeg" alt="" style="border:0px;" /> </p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/474be884a565f2954afd6d986ec4a38d.jpeg" alt="" style="border:0px;line-height:1.5;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> eg:</p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> (1)改变第一个和最后一个<div>元素的背景色</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="font-family:'Courier New';"></pre> <div style="text-align:left;"> <span style="color:rgb(0,128,128);line-height:1.5;">1</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">2</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">document</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).ready(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">3</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">div:first</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).css(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">background-color</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">,</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">#bbffaa</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">);</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">4</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">div:last</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).css(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">background-color</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">,</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">#bbffaa</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">);</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">5</span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">6</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/1ce3c8685cb1ffb5eab4c0baf04f00ec.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> (2)改变class不为one的<div>元素的背景色</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $("div:not(.one)").css("background-color","#bbffaa");</pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/b8ae894506b4f84abced75c103e7d2ed.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> (3)依据索引改变背景色<span style="color:rgb(255,0,0);">（！</span></p> <p>！索引值从0開始！</p> <p>！）</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="font-family:'Courier New';"></pre> <div style="text-align:left;"> $("document").ready( <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){</span> </div> <span style="line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> $(</span>"div:eq(3)").css("background-color","#bbffaa"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">改变索引值等于3的<div>元素的背景色</span> </div> <div style="text-align:left;"> $("div:gt(3)").css("background-color","red"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">改变索引值小于3的<div>元素的背景色</span> </div> <div style="text-align:left;"> $("div:lt(3)").css("background-color","blue"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">改变索引值大于3的<div>元素的背景色</span> </div> <div style="text-align:left;"> }) </div> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/0e9cfa7cb398151f53af95e0505797f2.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> (4)改变正在运行动画的元素的背景色</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';">$(":animated").css("background-color","#bbffaa"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span><span style="color:rgb(0,128,0);line-height:1.5;">改变正在运行动画的元素的背景色</span></pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/42c5ef4e53bd80a0456bc40def938f20.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> (5)改变当前获取焦点的元素的背景色</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <div class="cnblogs_code_toolbar" style="text-align:left;"> <span class="cnblogs_code_copy" style="line-height:1.5;"><a title="复制代码" style="color:rgb(85,137,91);border:none;"><img src="/https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" alt="复制代码" style="border:none;" /></a></span> </div> <pre style="font-family:'Courier New';"></pre> <div style="text-align:left;"> <span style="color:rgb(0,128,128);line-height:1.5;"> 1</span> <span style="color:rgb(0,0,255);line-height:1.5;"><!</span> <span style="color:rgb(255,0,255);line-height:1.5;">DOCTYPE html</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 2</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">html</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 3</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">head </span> <span style="color:rgb(255,0,0);line-height:1.5;">lang</span> <span style="color:rgb(0,0,255);line-height:1.5;">="en"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 4</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">meta </span> <span style="color:rgb(255,0,0);line-height:1.5;">charset</span> <span style="color:rgb(0,0,255);line-height:1.5;">="UTF-8"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 5</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">title</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>选择器 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">title</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 6</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> src</span> <span style="color:rgb(0,0,255);line-height:1.5;">="../JQuery库文件/jquery-1.12.1.min.js"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 7</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 8</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">document</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).ready(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 9</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">#button1</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).click(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">10</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">:focus</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).css(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">background-color</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">,</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">#bbffaa</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">改变当前获取焦点的元素的背景色</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">11</span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">12</span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">13</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">14</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">15</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">head</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">16</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">body</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">17</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">input </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="button"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> value</span> <span style="color:rgb(0,0,255);line-height:1.5;">="改变当前获取焦点的元素的背景色"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">18</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">input </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="button"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> value</span> <span style="color:rgb(0,0,255);line-height:1.5;">="改变当前获取焦点的元素的背景色"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> id</span> <span style="color:rgb(0,0,255);line-height:1.5;">="button1"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">19</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">body</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">20</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">html</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <div class="cnblogs_code_toolbar" style="text-align:left;"> <span class="cnblogs_code_copy" style="line-height:1.5;"><a title="复制代码" style="color:rgb(85,137,91);border:none;"><img src="/https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" alt="复制代码" style="border:none;" /></a></span> </div> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 效果：</p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/1d16fd5483737ab59c97327a9f9542ed.jpeg" alt="" style="border:0px;" /></p> <a name="_label2_1"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> <h4 style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:16px;">2、内容过滤选择器</h4> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/210af0d937d554e5144bdeb3512df4d2.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> eg:</p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> (1)改变含有class为mini元素的<div>元素的背景色</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="font-family:'Courier New';"></pre> <div style="text-align:left;"> <span style="color:rgb(0,128,128);line-height:1.5;">1</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">2</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">document</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).ready(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">3</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">div:has('.mini')</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).css(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">background-color</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">,</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">#bbffaa</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">改变含有class为mini元素的<div>元素的背景色</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">4</span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">5</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/655c9d0569786f20dcf082d2326cb98e.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> (2)改变含有子元素（包含文本元素）的<div>元素的背景色</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $("div:parent").css("background-color","#bbffaa"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span><span style="color:rgb(0,128,0);line-height:1.5;">改变含有子元素（包含文本元素）的<div>元素的背景色</span></pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/da2ce332ee77c629358817ac8280e13b.jpeg" alt="" style="border:0px;" /></p> <a name="_label2_2"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> <h4 style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:16px;">3、可见性过滤选择器</h4> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/1c73eb3973160009272fe1c36e86f89e.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <span style="color:rgb(255,0,0);"> </span><span style="color:rgb(255,0,0);">在可见性选择器中，须要注意的是选择器:hiddden,它不仅包含样式属性display为“none”的元素，也包含文本隐藏域（<input type="hidden"/>）和visibility:hidden之类的元素。</span></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> </p> <a name="_label2_3"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> <h4 style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:16px;">4、属性过滤选择器</h4> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/c5b676e1896ee6ac503da0d177f98975.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> eg:</p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> (1)改变含有属性title的<div>元素的背景色</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $("div[title]").css("background-color","#bbffaa"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span><span style="color:rgb(0,128,0);line-height:1.5;">改变含有属性title的<div>元素的背景色</span></pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/ce1ba1adc3e0165d5511e53d19e10553.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> (2)改变属性title值等于“test”的<div>元素的背景色</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $("div[title=test]").css("background-color","#bbffaa"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span><span style="color:rgb(0,128,0);line-height:1.5;">改变属性title值等于“test”的<div>元素的背景色</span></pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> </p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/9d38dc7e41faebbeb70a7d8952b1d46f.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> (3))改变属性title值不等于“test”的<div>元素的背景色</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $("div[title!=test]").css("background-color","#bbffaa"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span><span style="color:rgb(0,128,0);line-height:1.5;">改变属性title值不等于“test”的<div>元素的背景色</span></pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/ef45a0ab9ff5fa03711c26625d415187.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> (4)改变属性title<span style="line-height:1.5;">值以te開始的<div>元素的背景色</span></p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $("div[title^=te]").css("background-color","#bbffaa"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span><span style="color:rgb(0,128,0);line-height:1.5;">改变属性title值以te開始的<div>元素的背景色</span></pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <span style="line-height:1.5;"><img src="/https://i-blog.csdnimg.cn/blog_migrate/4ac5332c26193f919b8f8c2320dfd929.jpeg" alt="" style="border:0px;" /></span></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> (5)改变属性title值以est结束的<div>元素的背景色</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $("div[title$=est]").css("background-color","#bbffaa"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span><span style="color:rgb(0,128,0);line-height:1.5;">改变属性title值以est结束的<div>元素的背景色</span></pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/ebb3a3e0ffb0680215d6f89c8ae4258a.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> (6))改变属性title值含有“es”的<div>元素的背景色</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $("div[title*=es]").css("background-color","#bbffaa"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span><span style="color:rgb(0,128,0);line-height:1.5;">改变属性title值含有“es”的<div>元素的背景色</span></pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/85851d0972168f00acf00157d2867091.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> (7))改变含有属性id，而且属性title值含有“es”的<div>元素的背景色</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';"> $("div[id][title*=es]").css("background-color","#bbffaa"); <span style="color:rgb(0,128,0);line-height:1.5;">//</span><span style="color:rgb(0,128,0);line-height:1.5;">改变含有属性id，而且属性title值含有“es”的<div>元素的背景色</span></pre> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/b14582493c2c412dc9df9254e21a2a23.jpeg" alt="" style="border:0px;" /></p> <a name="_label2_4"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> <h4 style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:16px;">5、子元素过滤选择器</h4> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/091be17ae0954e4f17f2db3a573767c0.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <span style="color:rgb(255,0,0);font-size:16px;">。！</span></p> <p>！</p> <p>这里的index从1開始。！</p> <p>！</p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <span style="color:rgb(255,0,0);font-size:16px;">：nth-child()选择器是非经常常使用的子元素过滤选择器，具体功能例如以下：</span></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <span style="color:rgb(255,0,0);font-size:16px;">　　(1)：nth-child(even)：选取每一个父元素下的索引值是偶数的元素</span></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <span style="color:rgb(255,0,0);font-size:16px;">　　(2)：nth-child(odd)：选取每一个父元素下的索引值是奇数的元素</span></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <span style="color:rgb(255,0,0);font-size:16px;">　　(3)：nth-child(2)：选取每一个父元素下的索引值是2的元素</span></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <span style="color:rgb(255,0,0);font-size:16px;">　　(4)：nth-child(3n)：选取每一个父元素下的索引值是3的倍数的元素（n从1開始）</span></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <span style="color:rgb(255,0,0);font-size:16px;">　　(5)：nth-child(3n+1)：选取每一个父元素下的索引值是(3n+1)的元素（n从1開始）</span></p> <a name="_label2_5"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> <h4 style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:16px;">6、表单对象属性过滤选择器</h4> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/0444d9f1e9814cfef16b7ac8abccee4c.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 又一次设计一个表单页面例如以下：</p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/b1ce1d8bce4a6828d3abc95d44550f1c.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> HTML代码：</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <div style="text-align:left;"> <img id="code_img_opened_c09aa7e0-bb07-4f8d-a198-73c698076209" class="code_img_opened" src="/https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif" alt="" style="border:0px;vertical-align:middle;" /> </div> <div id="cnblogs_code_open_c09aa7e0-bb07-4f8d-a198-73c698076209" class="cnblogs_code_hide"> <div class="cnblogs_code_toolbar" style="text-align:left;"> <span class="cnblogs_code_copy" style="line-height:1.5;"><a title="复制代码" style="color:rgb(85,137,91);border:none;"><img src="/https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" alt="复制代码" style="border:none;" /></a></span> </div> <pre style="font-family:'Courier New';"></pre> <div style="text-align:left;"> <span style="color:rgb(0,128,128);line-height:1.5;"> 1</span> <span style="color:rgb(0,0,255);line-height:1.5;"><!</span> <span style="color:rgb(255,0,255);line-height:1.5;">DOCTYPE html</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 2</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">html</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 3</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">head </span> <span style="color:rgb(255,0,0);line-height:1.5;">lang</span> <span style="color:rgb(0,0,255);line-height:1.5;">="en"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 4</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">meta </span> <span style="color:rgb(255,0,0);line-height:1.5;">charset</span> <span style="color:rgb(0,0,255);line-height:1.5;">="UTF-8"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 5</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">title</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>选择器 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">title</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 6</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> src</span> <span style="color:rgb(0,0,255);line-height:1.5;">="../JQuery库文件/jquery-1.12.1.min.js"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 7</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 8</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">document</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).ready(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 9</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">10</span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">11</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">12</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">13</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">head</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">14</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">body</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">15</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">h3</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> 表单对象属性过滤选择器. <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">h3</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">16</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">form</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">17</span> <span style="color:rgb(0,128,0);line-height:1.5;"></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">18</span> 可用元素： <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">input </span> <span style="color:rgb(255,0,0);line-height:1.5;">name</span> <span style="color:rgb(0,0,255);line-height:1.5;">="add"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> value</span> <span style="color:rgb(0,0,255);line-height:1.5;">="可用文本框"</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">br</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">19</span> 不可用元素： <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">input </span> <span style="color:rgb(255,0,0);line-height:1.5;">name</span> <span style="color:rgb(0,0,255);line-height:1.5;">="email"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> disabled</span> <span style="color:rgb(0,0,255);line-height:1.5;">="disabled"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> value</span> <span style="color:rgb(0,0,255);line-height:1.5;">="不可用文本框"</span> <span style="color:rgb(0,0,255);line-height:1.5;">/><</span> <span style="color:rgb(128,0,0);line-height:1.5;">br</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">20</span> 可用元素： <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">input </span> <span style="color:rgb(255,0,0);line-height:1.5;">name</span> <span style="color:rgb(0,0,255);line-height:1.5;">="che"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> value</span> <span style="color:rgb(0,0,255);line-height:1.5;">="可用文本框"</span> <span style="color:rgb(0,0,255);line-height:1.5;">/><</span> <span style="color:rgb(128,0,0);line-height:1.5;">br</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">21</span> 不可用元素： <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">input </span> <span style="color:rgb(255,0,0);line-height:1.5;">name</span> <span style="color:rgb(0,0,255);line-height:1.5;">="name"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> disabled</span> <span style="color:rgb(0,0,255);line-height:1.5;">="disabled"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> value</span> <span style="color:rgb(0,0,255);line-height:1.5;">="不可用文本框"</span> <span style="color:rgb(0,0,255);line-height:1.5;">/><</span> <span style="color:rgb(128,0,0);line-height:1.5;">br</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">22</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">br</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">23</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">24</span> 多选框： <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">br</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">25</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">input </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="checkbox"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> name</span> <span style="color:rgb(0,0,255);line-height:1.5;">="newsletter"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> checked</span> <span style="color:rgb(0,0,255);line-height:1.5;">="checked"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> value</span> <span style="color:rgb(0,0,255);line-height:1.5;">="test1"</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> <span style="line-height:1.5;">test1</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">26</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">input </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="checkbox"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> name</span> <span style="color:rgb(0,0,255);line-height:1.5;">="newsletter"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> value</span> <span style="color:rgb(0,0,255);line-height:1.5;">="test2"</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> <span style="line-height:1.5;">test2</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">27</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">input </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="checkbox"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> name</span> <span style="color:rgb(0,0,255);line-height:1.5;">="newsletter"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> value</span> <span style="color:rgb(0,0,255);line-height:1.5;">="test3"</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> <span style="line-height:1.5;">test3</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">28</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">input </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="checkbox"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> name</span> <span style="color:rgb(0,0,255);line-height:1.5;">="newsletter"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> checked</span> <span style="color:rgb(0,0,255);line-height:1.5;">="checked"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> value</span> <span style="color:rgb(0,0,255);line-height:1.5;">="test4"</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> <span style="line-height:1.5;">test4</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">29</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">input </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="checkbox"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> name</span> <span style="color:rgb(0,0,255);line-height:1.5;">="newsletter"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> value</span> <span style="color:rgb(0,0,255);line-height:1.5;">="test5"</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> <span style="line-height:1.5;">test5</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">30</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">31</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">32</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">br</span> <span style="color:rgb(0,0,255);line-height:1.5;">/><</span> <span style="color:rgb(128,0,0);line-height:1.5;">br</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">33</span> 下拉列表1： <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">br</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">34</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">select </span> <span style="color:rgb(255,0,0);line-height:1.5;">name</span> <span style="color:rgb(0,0,255);line-height:1.5;">="test"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> multiple</span> <span style="color:rgb(0,0,255);line-height:1.5;">="multiple"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> style</span> <span style="color:rgb(0,0,255);line-height:1.5;">="height:100px"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">35</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>浙江 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">36</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">option </span> <span style="color:rgb(255,0,0);line-height:1.5;">selected</span> <span style="color:rgb(0,0,255);line-height:1.5;">="selected"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>湖南 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">37</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>北京 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">38</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">option </span> <span style="color:rgb(255,0,0);line-height:1.5;">selected</span> <span style="color:rgb(0,0,255);line-height:1.5;">="selected"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>天津 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">39</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>广州 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">40</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>湖北 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">41</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">select</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">42</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">43</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">br</span> <span style="color:rgb(0,0,255);line-height:1.5;">/><</span> <span style="color:rgb(128,0,0);line-height:1.5;">br</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">44</span> 下拉列表2： <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">br</span> <span style="color:rgb(0,0,255);line-height:1.5;">/></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">45</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">select </span> <span style="color:rgb(255,0,0);line-height:1.5;">name</span> <span style="color:rgb(0,0,255);line-height:1.5;">="test2"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">46</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>浙江 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">47</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>湖南 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">48</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">option </span> <span style="color:rgb(255,0,0);line-height:1.5;">selected</span> <span style="color:rgb(0,0,255);line-height:1.5;">="selected"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>北京 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">49</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>天津 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">50</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>广州 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">51</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>湖北 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">option</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">52</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">select</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">53</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">54</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">form</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">55</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">body</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">56</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">html</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <div class="cnblogs_code_toolbar" style="text-align:left;"> <span class="cnblogs_code_copy" style="line-height:1.5;"><a title="复制代码" style="color:rgb(85,137,91);border:none;"><img src="/https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" alt="复制代码" style="border:none;" /></a></span> </div> </div> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> eg：</p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> （1）改变表单内可用<input>元素的值</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="font-family:'Courier New';"></pre> <div style="text-align:left;"> <span style="color:rgb(0,128,128);line-height:1.5;">1</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">2</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">document</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).ready(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">3</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">input:enabled</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).val(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">这里变化了！！。</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">);</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">4</span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">5</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/d09f17980917fb98a9e809f9f6dff58b.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> （2）获取多选框选中的个数</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <div class="cnblogs_code_toolbar" style="text-align:left;"> <span class="cnblogs_code_copy" style="line-height:1.5;"><a title="复制代码" style="color:rgb(85,137,91);border:none;"><img src="/https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" alt="复制代码" style="border:none;" /></a></span> </div> <pre style="font-family:'Courier New';"></pre> <div style="text-align:left;"> <span style="color:rgb(0,128,128);line-height:1.5;"> 1</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 2</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">document</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).ready(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 3</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">:checkbox</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).click(countChecked); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">这里的相关知识点在第四节会讲到</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 4</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;"> countChecked() {</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 5</span> <span style="color:rgb(0,0,255);line-height:1.5;">var</span> <span style="line-height:1.5;"> n </span> <span style="line-height:1.5;">=</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">input:checked</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).length; </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">获取多选框选中的个数</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 6</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">div</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).eq(</span> <span style="line-height:1.5;">0</span> <span style="line-height:1.5;">).html(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;"><strong>有</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">+</span> <span style="line-height:1.5;">n</span> <span style="line-height:1.5;">+</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;"> 个被选中!</strong></span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">在第一个div处输入结果</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 7</span> <span style="line-height:1.5;"> }</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 8</span> <span style="line-height:1.5;"> countChecked();</span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">进入页面就调用.</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 9</span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">10</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <div class="cnblogs_code_toolbar" style="text-align:left;"> <span class="cnblogs_code_copy" style="line-height:1.5;"><a title="复制代码" style="color:rgb(85,137,91);border:none;"><img src="/https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" alt="复制代码" style="border:none;" /></a></span> </div> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 效果：</p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/158621b37e637cc26f5b5cacb701e04f.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> （3）获取下拉框选中的内容</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <div class="cnblogs_code_toolbar" style="text-align:left;"> <span class="cnblogs_code_copy" style="line-height:1.5;"><a title="复制代码" style="color:rgb(85,137,91);border:none;"><img src="/https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" alt="复制代码" style="border:none;" /></a></span> </div> <pre style="font-family:'Courier New';"></pre> <div style="text-align:left;"> <span style="color:rgb(0,128,128);line-height:1.5;"> 1</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 2</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">document</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).ready(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 3</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">select</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).change(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;"> () {</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 4</span> <span style="color:rgb(0,0,255);line-height:1.5;">var</span> <span style="line-height:1.5;"> str </span> <span style="line-height:1.5;">=</span> <span style="line-height:1.5;">""</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 5</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">select :selected</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).each(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;"> () {</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 6</span> <span style="line-height:1.5;"> str </span> <span style="line-height:1.5;">+=</span> <span style="line-height:1.5;"> $(</span> <span style="color:rgb(0,0,255);line-height:1.5;">this</span> <span style="line-height:1.5;">).text() </span> <span style="line-height:1.5;">+</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">,</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 7</span> <span style="line-height:1.5;"> });</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 8</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">div</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).eq(</span> <span style="line-height:1.5;">1</span> <span style="line-height:1.5;">).html(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;"><strong>你选中的是：</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">+</span> <span style="line-height:1.5;">str</span> <span style="line-height:1.5;">+</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;"></strong></span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">);</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 9</span> <span style="line-height:1.5;"> }).trigger(</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">change</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">);</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">10</span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> trigger('change') 在这里的意思是：</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">11</span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> select载入后，立即运行onchange.</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">12</span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 也能够用.change()取代.</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">13</span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">14</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <div class="cnblogs_code_toolbar" style="text-align:left;"> <span class="cnblogs_code_copy" style="line-height:1.5;"><a title="复制代码" style="color:rgb(85,137,91);border:none;"><img src="/https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" alt="复制代码" style="border:none;" /></a></span> </div> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/db155c49c85a71f76948352a9dc087e0.jpeg" alt="" style="border:0px;" /></p> <div style="text-align:right;"> <div style="font-family:'微软雅黑', '宋体', Arial;font-size:15px;text-align:left;"> <a href="/https://www.cnblogs.com/jasmine-95/p/5367234.html#_labelTop" style="text-decoration:none;color:rgb(85,137,91);" rel="nofollow">回到顶部</a> </div> <a name="_label3"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> </div> <h3 style="text-align:left;font-family:'微软雅黑', '宋体', '黑体', Arial;font-size:17px;color:rgb(255,255,255);line-height:25px;"> 四、表单选择器</h3> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/690963e33a4776366213709b9adb98e1.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> eg：获得表单内表单元素的个数：</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <pre style="text-align:left;font-family:'Courier New';">$(":input").length;</pre> </div> <div style="text-align:right;"> <div style="font-family:'微软雅黑', '宋体', Arial;font-size:15px;text-align:left;"> <a href="/https://www.cnblogs.com/jasmine-95/p/5367234.html#_labelTop" style="text-decoration:none;color:rgb(85,137,91);" rel="nofollow">回到顶部</a> </div> <a name="_label4"></a> <div style="text-align:left;font-size:15px;"> <span style="font-family:'微软雅黑', '宋体', Arial;color:#55895b;"><br /></span> </div> </div> <h3 style="text-align:left;font-family:'微软雅黑', '宋体', '黑体', Arial;font-size:17px;color:rgb(255,255,255);line-height:25px;"> 五、案例研究：站点品牌列表效果</h3> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 一、目标效果如图所看到的：</p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> <img src="/https://i-blog.csdnimg.cn/blog_migrate/e0c954428b6596f4de7ad8c1d82e02b6.jpeg" alt="" style="border:0px;" /> <img src="/https://i-blog.csdnimg.cn/blog_migrate/6918e180a465d6d9992b294dca91076b.jpeg" alt="" style="border:0px;" /></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 如图所看到的，点击“显示所有品牌”。就能够显示其它未显示的品牌，而且会将推荐的品牌高亮显示。</p> <p></p> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 二、JQuery代码</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <div class="cnblogs_code_toolbar" style="text-align:left;"> <span class="cnblogs_code_copy" style="line-height:1.5;"><a title="复制代码" style="color:rgb(85,137,91);border:none;"><img src="/https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" alt="复制代码" style="border:none;" /></a></span> </div> <pre style="font-family:'Courier New';"></pre> <div style="text-align:left;"> <span style="color:rgb(0,128,128);line-height:1.5;"> 1</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="font-size:16px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"> 2</span> <span style="line-height:1.5;"> </span> <span style="font-size:12px;line-height:1.5;"> $(</span> <span style="font-size:12px;line-height:1.5;">"</span> <span style="font-size:12px;line-height:1.5;">document</span> <span style="font-size:12px;line-height:1.5;">"</span> <span style="font-size:12px;line-height:1.5;">).ready(</span> <span style="color:rgb(0,0,255);font-size:12px;line-height:1.5;">function</span> <span style="font-size:12px;line-height:1.5;">(){ </span> <span style="color:rgb(0,128,0);font-size:12px;line-height:1.5;">//</span> <span style="color:rgb(0,128,0);font-size:12px;line-height:1.5;"> 等待DOM载入完成.</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 3</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="color:rgb(0,0,255);line-height:1.5;">var</span> <span style="line-height:1.5;"> $category </span> <span style="line-height:1.5;">=</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">ul li:gt(5):not(:last)</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 获得索引值大于5的品牌集合对象(除最后一条)</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 4</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="line-height:1.5;"> $category.hide(); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 隐藏上面获取到的jQuery对象。</span> <p></p> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 5</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="color:rgb(0,0,255);line-height:1.5;">var</span> <span style="line-height:1.5;"> $toggleBtn </span> <span style="line-height:1.5;">=</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">div.showMore > a</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 获取“显示所有品牌”button</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 6</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="line-height:1.5;"> $toggleBtn.click(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){ </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 点击“显示所有品牌”button</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 7</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="color:rgb(0,0,255);line-height:1.5;">if</span> <span style="line-height:1.5;">($category.is(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">:visible</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">)){ </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">假设获得索引值大于5的品牌集合对象(除最后一条)是显示的</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 8</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="line-height:1.5;"> $category.hide(); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 隐藏$category</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 9</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="line-height:1.5;"> $(</span> <span style="color:rgb(0,0,255);line-height:1.5;">this</span> <span style="line-height:1.5;">).find(</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">span</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">)</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">10</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="line-height:1.5;"> .text(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">显示所有品牌</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">改变文本</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">11</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">ul li</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">).removeClass(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">promoted</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 去掉高亮样式</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">12</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="line-height:1.5;"> }</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">13</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="color:rgb(0,0,255);line-height:1.5;">else</span> <span style="line-height:1.5;">{ </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">假设获得索引值大于5的品牌集合对象(除最后一条)是隐藏的</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">14</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="line-height:1.5;"> $category.show(); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 显示$category</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">15</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="line-height:1.5;"> $(</span> <span style="color:rgb(0,0,255);line-height:1.5;">this</span> <span style="line-height:1.5;">).find(</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">span</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">)</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">16</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="line-height:1.5;"> .text(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">精简显示品牌</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">改变文本</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">17</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">ul li</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">).filter(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">:contains('佳能'),:contains('尼康'),:contains('奥林巴斯')</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">) </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">18</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="line-height:1.5;"> .addClass(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">promoted</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">加入高亮样式</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">19</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="line-height:1.5;"> }</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">20</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="color:rgb(0,0,255);line-height:1.5;">return</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="color:rgb(0,0,255);line-height:1.5;">false</span> <span style="line-height:1.5;">; </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">超链接不跳转</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">21</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">22</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);font-size:12px;line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">23</span> <span style="font-size:16px;line-height:1.5;"> </span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <div class="cnblogs_code_toolbar" style="text-align:left;"> <span class="cnblogs_code_copy" style="line-height:1.5;"><a title="复制代码" style="color:rgb(85,137,91);border:none;"><img src="/https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" alt="复制代码" style="border:none;" /></a></span> </div> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> 三、完整的HTML代码</p> <div class="cnblogs_code" style="font-family:'Courier New';font-size:12px;border:1px solid rgb(204,204,204);"> <div style="text-align:left;"> <img id="code_img_opened_fc678f28-5ddb-4d96-9b99-a8a66377ea14" class="code_img_opened" src="/https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif" alt="" style="border:0px;vertical-align:middle;" /> </div> <div id="cnblogs_code_open_fc678f28-5ddb-4d96-9b99-a8a66377ea14" class="cnblogs_code_hide"> <div class="cnblogs_code_toolbar" style="text-align:left;"> <span class="cnblogs_code_copy" style="line-height:1.5;"><a title="复制代码" style="color:rgb(85,137,91);border:none;"><img src="/https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" alt="复制代码" style="border:none;" /></a></span> </div> <pre style="font-family:'Courier New';"></pre> <div style="text-align:left;"> <span style="color:rgb(0,128,128);line-height:1.5;"> 1</span> <span style="color:rgb(0,0,255);line-height:1.5;"><!</span> <span style="color:rgb(255,0,255);line-height:1.5;">DOCTYPE html</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 2</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">html</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 3</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">head </span> <span style="color:rgb(255,0,0);line-height:1.5;">lang</span> <span style="color:rgb(0,0,255);line-height:1.5;">="en"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 4</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">meta </span> <span style="color:rgb(255,0,0);line-height:1.5;">charset</span> <span style="color:rgb(0,0,255);line-height:1.5;">="UTF-8"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 5</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">title</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>站点品牌列表效果 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">title</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 6</span> <span style="color:rgb(0,128,0);line-height:1.5;"></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 7</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(255,0,0);line-height:1.5;"> src</span> <span style="color:rgb(0,0,255);line-height:1.5;">="../JQuery库文件/jquery-1.12.1.min.js"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 8</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">style </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/css"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 9</span> <span style="color:rgb(128,0,0);line-height:1.5;"> #box</span> <span style="line-height:1.5;">{</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 10</span> <span style="color:rgb(255,0,0);line-height:1.5;"> border</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> solid 1px #BEBEBE</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 11</span> <span style="color:rgb(255,0,0);line-height:1.5;"> width</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 400px</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 12</span> <span style="color:rgb(0,128,0);line-height:1.5;">/*</span> <span style="color:rgb(0,128,0);line-height:1.5;">height: 200px;</span> <span style="color:rgb(0,128,0);line-height:1.5;">*/</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 13</span> <span style="color:rgb(255,0,0);line-height:1.5;"> margin</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 0px auto</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 14</span> <span style="line-height:1.5;">}</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 15</span> <span style="color:rgb(0,128,0);line-height:1.5;">/*</span> <span style="color:rgb(0,128,0);line-height:1.5;">列表样式</span> <span style="color:rgb(0,128,0);line-height:1.5;">*/</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 16</span> <span style="color:rgb(128,0,0);line-height:1.5;"> ul </span> <span style="line-height:1.5;">{</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 17</span> <span style="color:rgb(255,0,0);line-height:1.5;"> list-style</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> none</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 18</span> <span style="color:rgb(255,0,0);line-height:1.5;"> font-size</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 18px</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 19</span> <span style="color:rgb(255,0,0);line-height:1.5;"> line-height</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 40px</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 20</span> <span style="line-height:1.5;">}</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 21</span> <span style="color:rgb(0,128,0);line-height:1.5;">/*</span> <span style="color:rgb(0,128,0);line-height:1.5;">使每一行有三个li元素</span> <span style="color:rgb(0,128,0);line-height:1.5;">*/</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 22</span> <span style="color:rgb(128,0,0);line-height:1.5;"> li</span> <span style="line-height:1.5;">{</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 23</span> <span style="color:rgb(255,0,0);line-height:1.5;"> float</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;">left</span> <span style="line-height:1.5;">;</span> <span style="color:rgb(0,128,0);line-height:1.5;">/*</span> <span style="color:rgb(0,128,0);line-height:1.5;">此时li标签紧凑排列</span> <span style="color:rgb(0,128,0);line-height:1.5;">*/</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 24</span> <span style="color:rgb(255,0,0);line-height:1.5;"> width</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 120px</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 25</span> <span style="line-height:1.5;">}</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 26</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 27</span> <span style="color:rgb(0,128,0);line-height:1.5;">/*</span> <span style="color:rgb(0,128,0);line-height:1.5;">超链接样式</span> <span style="color:rgb(0,128,0);line-height:1.5;">*/</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 28</span> <span style="color:rgb(128,0,0);line-height:1.5;"> a </span> <span style="line-height:1.5;">{</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 29</span> <span style="color:rgb(255,0,0);line-height:1.5;"> text-decoration</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> none</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 30</span> <span style="line-height:1.5;">}</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 31</span> <span style="color:rgb(128,0,0);line-height:1.5;"> a:hover,a:active </span> <span style="line-height:1.5;">{</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 32</span> <span style="color:rgb(255,0,0);line-height:1.5;"> color</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> red</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 33</span> <span style="color:rgb(255,0,0);line-height:1.5;"> text-decoration</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> underline</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 34</span> <span style="line-height:1.5;">}</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 35</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 36</span> <span style="color:rgb(0,128,0);line-height:1.5;">/*</span> <span style="color:rgb(0,128,0);line-height:1.5;">高亮显示的元素</span> <span style="color:rgb(0,128,0);line-height:1.5;">*/</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 37</span> <span style="color:rgb(128,0,0);line-height:1.5;"> .promoted a </span> <span style="line-height:1.5;">{</span> <span style="color:rgb(255,0,0);line-height:1.5;"> color</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;">#F50</span> <span style="line-height:1.5;">;</span> <span style="line-height:1.5;">}</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 38</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 39</span> <span style="color:rgb(0,128,0);line-height:1.5;">/*</span> <span style="color:rgb(0,128,0);line-height:1.5;">以下部分样式</span> <span style="color:rgb(0,128,0);line-height:1.5;">*/</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 40</span> <span style="color:rgb(128,0,0);line-height:1.5;"> .showMore</span> <span style="line-height:1.5;">{</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 41</span> <span style="color:rgb(255,0,0);line-height:1.5;"> margin</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 0px auto</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 42</span> <span style="color:rgb(255,0,0);line-height:1.5;"> width</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 150px</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 43</span> <span style="color:rgb(255,0,0);line-height:1.5;"> height</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 30px</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 44</span> <span style="color:rgb(255,0,0);line-height:1.5;"> border</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> solid 1px #BEBEBE</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 45</span> <span style="color:rgb(255,0,0);line-height:1.5;"> text-align</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> center</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 46</span> <span style="color:rgb(255,0,0);line-height:1.5;"> font-size</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 13px</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 47</span> <span style="color:rgb(255,0,0);line-height:1.5;"> clear</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;">left</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 48</span> <span style="line-height:1.5;">}</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 49</span> <span style="color:rgb(128,0,0);line-height:1.5;"> .showMore a span</span> <span style="line-height:1.5;">{</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 50</span> <span style="color:rgb(255,0,0);line-height:1.5;"> display</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> block</span> <span style="line-height:1.5;">;</span> <span style="color:rgb(0,128,0);line-height:1.5;">/*</span> <span style="color:rgb(0,128,0);line-height:1.5;">设置为块状元素。使其方便调边距</span> <span style="color:rgb(0,128,0);line-height:1.5;">*/</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 51</span> <span style="color:rgb(255,0,0);line-height:1.5;"> margin-top</span> <span style="line-height:1.5;">:</span> <span style="color:rgb(0,0,255);line-height:1.5;"> 6px</span> <span style="line-height:1.5;">;</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 52</span> <span style="line-height:1.5;">}</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 53</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">style</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 54</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">script </span> <span style="color:rgb(255,0,0);line-height:1.5;">type</span> <span style="color:rgb(0,0,255);line-height:1.5;">="text/javascript"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 55</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">document</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">).ready(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){ </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 等待DOM载入完成.</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 56</span> <span style="color:rgb(0,0,255);line-height:1.5;">var</span> <span style="line-height:1.5;"> $category </span> <span style="line-height:1.5;">=</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">ul li:gt(5):not(:last)</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 获得索引值大于5的品牌集合对象(除最后一条)</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 57</span> <span style="line-height:1.5;"> $category.hide(); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 隐藏上面获取到的jQuery对象。</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 58</span> <span style="color:rgb(0,0,255);line-height:1.5;">var</span> <span style="line-height:1.5;"> $toggleBtn </span> <span style="line-height:1.5;">=</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">div.showMore > a</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 获取“显示所有品牌”button</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 59</span> <span style="line-height:1.5;"> $toggleBtn.click(</span> <span style="color:rgb(0,0,255);line-height:1.5;">function</span> <span style="line-height:1.5;">(){ </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 点击“显示所有品牌”button</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 60</span> <span style="color:rgb(0,0,255);line-height:1.5;">if</span> <span style="line-height:1.5;">($category.is(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">:visible</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">)){ </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">假设获得索引值大于5的品牌集合对象(除最后一条)是显示的</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 61</span> <span style="line-height:1.5;"> $category.hide(); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 隐藏$category</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 62</span> <span style="line-height:1.5;"> $(</span> <span style="color:rgb(0,0,255);line-height:1.5;">this</span> <span style="line-height:1.5;">).find(</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">span</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">)</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 63</span> <span style="line-height:1.5;"> .text(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">显示所有品牌</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">改变文本</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 64</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">ul li</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">).removeClass(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">promoted</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 去掉高亮样式</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 65</span> <span style="line-height:1.5;"> }</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 66</span> <span style="color:rgb(0,0,255);line-height:1.5;">else</span> <span style="line-height:1.5;">{ </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">假设获得索引值大于5的品牌集合对象(除最后一条)是隐藏的</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 67</span> <span style="line-height:1.5;"> $category.show(); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;"> 显示$category</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 68</span> <span style="line-height:1.5;"> $(</span> <span style="color:rgb(0,0,255);line-height:1.5;">this</span> <span style="line-height:1.5;">).find(</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">span</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">)</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 69</span> <span style="line-height:1.5;"> .text(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">精简显示品牌</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">改变文本</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 70</span> <span style="line-height:1.5;"> $(</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">ul li</span> <span style="line-height:1.5;">'</span> <span style="line-height:1.5;">).filter(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">:contains('佳能'),:contains('尼康'),:contains('奥林巴斯')</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">) </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 71</span> <span style="line-height:1.5;"> .addClass(</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">promoted</span> <span style="line-height:1.5;">"</span> <span style="line-height:1.5;">); </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">加入高亮样式</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 72</span> <span style="line-height:1.5;"> }</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 73</span> <span style="color:rgb(0,0,255);line-height:1.5;">return</span> <span style="color:rgb(0,0,255);line-height:1.5;">false</span> <span style="line-height:1.5;">; </span> <span style="color:rgb(0,128,0);line-height:1.5;">//</span> <span style="color:rgb(0,128,0);line-height:1.5;">超链接不跳转</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 74</span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 75</span> <span style="line-height:1.5;"> })</span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 76</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">script</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 77</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">head</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 78</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">body</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 79</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">id</span> <span style="color:rgb(0,0,255);line-height:1.5;">="box"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 80</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">ul</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 81</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">li </span> <span style="color:rgb(0,0,255);line-height:1.5;">><</span> <span style="color:rgb(128,0,0);line-height:1.5;">a </span> <span style="color:rgb(255,0,0);line-height:1.5;">href</span> <span style="color:rgb(0,0,255);line-height:1.5;">="#"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>佳能 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">a</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">li</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 82</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">li </span> <span style="color:rgb(0,0,255);line-height:1.5;">><</span> <span style="color:rgb(128,0,0);line-height:1.5;">a </span> <span style="color:rgb(255,0,0);line-height:1.5;">href</span> <span style="color:rgb(0,0,255);line-height:1.5;">="#"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>索尼 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">a</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">li</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 83</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">li </span> <span style="color:rgb(0,0,255);line-height:1.5;">><</span> <span style="color:rgb(128,0,0);line-height:1.5;">a </span> <span style="color:rgb(255,0,0);line-height:1.5;">href</span> <span style="color:rgb(0,0,255);line-height:1.5;">="#"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>三星 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">a</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">li</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 84</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">li </span> <span style="color:rgb(0,0,255);line-height:1.5;">><</span> <span style="color:rgb(128,0,0);line-height:1.5;">a </span> <span style="color:rgb(255,0,0);line-height:1.5;">href</span> <span style="color:rgb(0,0,255);line-height:1.5;">="#"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>尼康 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">a</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">li</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 85</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">li </span> <span style="color:rgb(0,0,255);line-height:1.5;">><</span> <span style="color:rgb(128,0,0);line-height:1.5;">a </span> <span style="color:rgb(255,0,0);line-height:1.5;">href</span> <span style="color:rgb(0,0,255);line-height:1.5;">="#"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>松下 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">a</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">li</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 86</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">li </span> <span style="color:rgb(0,0,255);line-height:1.5;">><</span> <span style="color:rgb(128,0,0);line-height:1.5;">a </span> <span style="color:rgb(255,0,0);line-height:1.5;">href</span> <span style="color:rgb(0,0,255);line-height:1.5;">="#"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>卡西欧 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">a</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">li</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 87</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">li </span> <span style="color:rgb(0,0,255);line-height:1.5;">><</span> <span style="color:rgb(128,0,0);line-height:1.5;">a </span> <span style="color:rgb(255,0,0);line-height:1.5;">href</span> <span style="color:rgb(0,0,255);line-height:1.5;">="#"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>富士 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">a</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">li</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 88</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">li </span> <span style="color:rgb(0,0,255);line-height:1.5;">><</span> <span style="color:rgb(128,0,0);line-height:1.5;">a </span> <span style="color:rgb(255,0,0);line-height:1.5;">href</span> <span style="color:rgb(0,0,255);line-height:1.5;">="#"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>柯达 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">a</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">li</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 89</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">li </span> <span style="color:rgb(0,0,255);line-height:1.5;">><</span> <span style="color:rgb(128,0,0);line-height:1.5;">a </span> <span style="color:rgb(255,0,0);line-height:1.5;">href</span> <span style="color:rgb(0,0,255);line-height:1.5;">="#"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>宾得 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">a</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">li</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 90</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">li </span> <span style="color:rgb(0,0,255);line-height:1.5;">><</span> <span style="color:rgb(128,0,0);line-height:1.5;">a </span> <span style="color:rgb(255,0,0);line-height:1.5;">href</span> <span style="color:rgb(0,0,255);line-height:1.5;">="#"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>理光 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">a</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">li</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 91</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">li </span> <span style="color:rgb(0,0,255);line-height:1.5;">><</span> <span style="color:rgb(128,0,0);line-height:1.5;">a </span> <span style="color:rgb(255,0,0);line-height:1.5;">href</span> <span style="color:rgb(0,0,255);line-height:1.5;">="#"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>奥林巴斯 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">a</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">li</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 92</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">li </span> <span style="color:rgb(0,0,255);line-height:1.5;">><</span> <span style="color:rgb(128,0,0);line-height:1.5;">a </span> <span style="color:rgb(255,0,0);line-height:1.5;">href</span> <span style="color:rgb(0,0,255);line-height:1.5;">="#"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>明基 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">a</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">li</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 93</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">li </span> <span style="color:rgb(0,0,255);line-height:1.5;">><</span> <span style="color:rgb(128,0,0);line-height:1.5;">a </span> <span style="color:rgb(255,0,0);line-height:1.5;">href</span> <span style="color:rgb(0,0,255);line-height:1.5;">="#"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>爱国者 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">a</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">li</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 94</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">li </span> <span style="color:rgb(0,0,255);line-height:1.5;">><</span> <span style="color:rgb(128,0,0);line-height:1.5;">a </span> <span style="color:rgb(255,0,0);line-height:1.5;">href</span> <span style="color:rgb(0,0,255);line-height:1.5;">="#"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>其他品牌相机 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">a</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">li</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 95</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">ul</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 96</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">div </span> <span style="color:rgb(255,0,0);line-height:1.5;">class</span> <span style="color:rgb(0,0,255);line-height:1.5;">="showMore"</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 97</span> <span style="color:rgb(0,0,255);line-height:1.5;"><</span> <span style="color:rgb(128,0,0);line-height:1.5;">a </span> <span style="color:rgb(255,0,0);line-height:1.5;">href</span> <span style="color:rgb(0,0,255);line-height:1.5;">="more.html"</span> <span style="color:rgb(0,0,255);line-height:1.5;">><</span> <span style="color:rgb(128,0,0);line-height:1.5;">span</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span>显示所有品牌 <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">span</span> <span style="color:rgb(0,0,255);line-height:1.5;">></</span> <span style="color:rgb(128,0,0);line-height:1.5;">a</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 98</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;"> 99</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">div</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">100</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">body</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <span style="color:rgb(0,128,128);line-height:1.5;"></span> <div style="text-align:left;"> <span style="line-height:1.5;">101</span> <span style="color:rgb(0,0,255);line-height:1.5;"></</span> <span style="color:rgb(128,0,0);line-height:1.5;">html</span> <span style="color:rgb(0,0,255);line-height:1.5;">></span> </div> <div class="cnblogs_code_toolbar" style="text-align:left;"> <span class="cnblogs_code_copy" style="line-height:1.5;"><a title="复制代码" style="color:rgb(85,137,91);border:none;"><img src="/https://i-blog.csdnimg.cn/blog_migrate/48304ba5e6f9fe08f3fa1abda7d326ab.gif" alt="复制代码" style="border:none;" /></a></span> </div> </div> </div> <p style="text-align:left;font-family:'微软雅黑', '宋体', Arial;font-size:15px;line-height:24px;"> </p> </div> </div> </div> <p>转载于:https://www.cnblogs.com/ljbguanli/p/7401355.html</p> </div> </div> <div id="recommendDown"> </div> </article> <script> $(function() { setTimeout(function () { var mathcodeList = document.querySelectorAll('.htmledit_views img.mathcode'); if (mathcodeList.length > 0) { for (let i = 0; i < mathcodeList.length; i++) { if (mathcodeList[i].complete) { if (mathcodeList[i].naturalWidth === 0 || mathcodeList[i].naturalHeight === 0) { var alt = mathcodeList[i].alt; alt = '\$' + alt + '\$'; var curSpan = $('<span class="img-codecogs"></span>'); curSpan.text(alt); $(mathcodeList[i]).before(curSpan); $(mathcodeList[i]).remove(); } } else { mathcodeList[i].onerror = function() { var alt = mathcodeList[i].alt; alt = '\$' + alt + '\$'; var curSpan = $('<span class="img-codecogs"></span>'); curSpan.text(alt); $(mathcodeList[i]).before(curSpan); $(mathcodeList[i]).remove(); }; } } MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } }, 500) }); </script> <div class="article-footer-categories-wrap"> <div class="article-footer-category-segment"> <div class="article-footer-category-group"> <span class="article-footer-label">标签</span> <div class="article-footer-pill-list"> <a rel="nofollow" data-report-query="spm=1001.2101.3001.4223" data-report-click='{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"javascript","ab":"new","extra":"{\"searchword\":\"javascript\"}"}' data-report-view='{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"javascript","ab":"new","extra":"{\"searchword\":\"javascript\"}"}' class="tag-link-new" href="/https://so.csdn.net/so/search/s.do?q=javascript&t=all&o=vip&s=&l=&f=&viparticle=&from_tracking_code=tag_word&from_code=app_blog_art" target="_blank" rel="noopener">#javascript</a> <a rel="nofollow" data-report-query="spm=1001.2101.3001.4223" data-report-click='{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"ViewUI","ab":"new","extra":"{\"searchword\":\"ViewUI\"}"}' data-report-view='{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"ViewUI","ab":"new","extra":"{\"searchword\":\"ViewUI\"}"}' class="tag-link-new" href="/https://www.iviewui.com/?ref=c100001" target="_blank" rel="noopener">#ViewUI</a> </div> </div> </div> </div> </div> <div class="directory-boxshadow-dialog" style="display:none;"> <div class="directory-boxshadow-dialog-box"> </div> <div class="vip-limited-time-offer-box-new" id="vip-limited-time-offer-box-new"> <img class="limited-img limited-img-new" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/vip-limited-close-newWhite.png"> <div class="vip-limited-time-top"> 确定要放弃本次机会？ </div> <span class="vip-limited-time-text">福利倒计时</span> <div class="limited-time-box-new"> <span class="time-hour"></span> <i>:</i> <span class="time-minite"></span> <i>:</i> <span class="time-second"></span> </div> <div class="limited-time-vip-box"> <p> <img class="coupon-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/vip-limited-close-roup.png"> <span class="def">立减 ¥</span> <span class="active limited-num"></span> </p> <span class="">普通VIP年卡可用</span> </div> <a class="limited-time-btn-new" href="/https://mall.csdn.net/vip" data-report-click='{"spm":"1001.2101.3001.9621"}' data-report-query='spm=1001.2101.3001.9621'>立即使用</a> </div> </div> <div class="more-toolbox-new more-toolbar" id="toolBarBox"> <div class="left-toolbox"> <div class="toolbox-left"> <div class="profile-box"> <a class="profile-href" target="_blank" href="/https://blog.csdn.net/adr5970"><img class="profile-img" src="/https://profile-avatar.csdnimg.cn/default.jpg!1"> <span class="profile-name"> adr5970 </span> </a> </div> <div class="profile-attend"> <a class="tool-attend tool-bt-button tool-bt-attend" href="javascript:;" data-report-view='{"mod":"1592215036_002","spm":"1001.2101.3001.4232","extend1":"关注"}'>关注</a> <a class="tool-item-follow active-animation" style="display:none;">关注</a> </div> </div> <div class="toolbox-middle"> <ul class="toolbox-list"> <li class="tool-item tool-item-size tool-active is-like" id="is-like" data-type="bottom"> <a class="tool-item-href"> <img style="display:none;" id="is-like-imgactive-animation-like" class="animation-dom active-animation" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/tobarThumbUpactive.png" alt=""> <img class="isactive" style="display:none" id="is-like-imgactive" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/like-active.png" alt=""> <img class="isdefault" style="display:block" id="is-like-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/like.png" alt=""> <span id="spanCount" class="count "> 0 </span> </a> <div class="tool-hover-tip"><span class="text space">点赞</span></div> </li> <li class="tool-item tool-item-size tool-active is-unlike" id="is-unlike"> <a class="tool-item-href"> <img class="isactive" style="margin-right:0px;display:none" id="is-unlike-imgactive" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/unlike-active.png" alt=""> <img class="isdefault" style="margin-right:0px;display:block" id="is-unlike-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/unlike.png" alt=""> <span id="unlikeCount" class="count "></span> </a> <div class="tool-hover-tip"><span class="text space">踩</span></div> </li> <li class="tool-item tool-item-size tool-active is-collection "> <a class="tool-item-href" href="javascript:;" data-report-click='{"mod":"popu_824","spm":"1001.2101.3001.4130","ab":"new"}'> <img style="display:none" id="is-collection-img-collection" class="animation-dom active-animation" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/collect-active.png" alt=""> <img class="isdefault" id="is-collection-img" style="display:block" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/collect.png" alt=""> <img class="isactive" id="is-collection-imgactive" style="display:none" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/newCollectActive.png" alt=""> <span class="count get-collection " data-num="0" id="get-collection"> 0 </span> </a> <div class="tool-hover-tip collect"> <div class="collect-operate-box"> <span class="collect-text" id="is-collection"> 收藏 </span> </div> </div> <div class="tool-active-list"> <div class="text"> 觉得还不错? <span class="collect-text" id="tool-active-list-collection"> 一键收藏 </span> <img id="tool-active-list-close" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/collectionCloseWhite.png" alt=""> </div> </div> </li> <li class="tool-item tool-item-size tool-active tool-item-comment"> <div class="guide-rr-first"> <img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward01.png" alt=""> <button class="btn-guide-known">知道了</button> </div> <a class="tool-item-href" href="#commentBox" data-report-click='{"spm":"1001.2101.3001.7009"}'> <img class="isdefault" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/comment.png" alt=""> <span class="count"> 0 </span> </a> <div class="tool-hover-tip"><span class="text space">评论</span></div> </li> <li class="tool-item tool-item-size tool-active tool-QRcode" data-type="article" id="tool-share"> <a class="tool-item-href" href="javascript:;" data-report-view='{"spm":"3001.4129","extra":{"type":"blogdetail"}}'> <img class="isdefault" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/share.png" alt=""> <span class="count">分享</span> </a> <div class="QRcode" id="tool-QRcode"> <div class="share-bg-box"> <div class="share-content"> <a id="copyPosterUrl" data-type="link" class="btn-share">复制链接</a> </div> <div class="share-content"> <a class="btn-share" data-type="qq">分享到 QQ</a> </div> <div class="share-content"> <a class="btn-share" data-type="weibo">分享到新浪微博</a> </div> <div class="share-code"> <div class="share-code-box" id='shareCode'></div> <div class="share-code-text"> <img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/share/icon-wechat.png" alt="">扫一扫 </div> </div> </div> </div> </li> <li class="tool-item tool-item-size tool-active is-more" id="is-more"> <a class="tool-item-href"> <img class="isdefault" style="margin-right:0px;display:block" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/more.png" alt=""> <span class="count"></span> </a> <div class="more-opt-box"> <div class="mini-box"> <a class="tool-item-href" id="toolReportBtnHide"> <img class="isdefault" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/report.png" alt=""> <span class="count">举报</span> </a> </div> <div class="normal-box"> <a class="tool-item-href" id="toolReportBtnHideNormal"> <img class="isdefault" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/report.png" alt=""> <span class="count">举报</span> </a> </div> </div> </li> </ul> </div> <div class="toolbox-right"> </div> </div> </div> <script type=text/javascript crossorigin src="/https://csdnimg.cn/release/phoenix/production/qrcode-7c90a92189.min.js"></script> <script type="text/javascript" crossorigin src="/https://g.csdnimg.cn/common/csdn-login-box/csdn-login-box.js"></script> <script type="text/javascript" crossorigin src="/https://g.csdnimg.cn/collection-box/2.1.2/collection-box.js"></script> <div id="dmp_ad_58" style="width:100%;overflow-x:hidden"> <div id="kp_box_58" data-pid="58"><iframe src="/https://kunpeng-sc.csdnimg.cn/?timestamp=1645783940/#/preview1/4420742?positionId=58&adBlockFlag=0&adId=1108423&queryWord=JQuery选择器&spm=1001.2101.3001.5002&articleId=101307112" frameborder="0" width= "100%" height= "75px" scrolling="no" ></iframe><img class="pre-img-lasy" data-src="/https://kunyu.csdn.net/1.png?p=58&adBlockFlag=0&adId=1108423&a=1108423&c=4420742&k=JQuery选择器&spm=1001.2101.3001.5002&articleId=101307112&d=1&t=3&u=45a179e40fde4f0aa3ae365671844f50" style="display: block;width: 0px;height: 0px;"><script src="/https://kunpeng-render.csdnimg.cn/publisher/latest/closeAdFrame.js"></script></div> </div> <script src="/https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_commontools-67ecc2a5fc.min.js" type="text/javascript" async></script> <div class="second-recommend-box recommend-box "> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_29194693/article/details/157834906" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-pc_relevant_commercial_fallback_v1-1-157834906-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"default","index":"1","strategy":"pc_relevant_commercial_fallback_v1","dest":"https://blog.csdn.net/weixin_29194693/article/details/157834906"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/weixin_29194693/article/details/157834906" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-pc_relevant_commercial_fallback_v1-1-157834906-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"default","index":"1","strategy":"pc_relevant_commercial_fallback_v1","dest":"https://blog.csdn.net/weixin_29194693/article/details/157834906"}' data-report-query='spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-pc_relevant_commercial_fallback_v1-1-157834906-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-pc_relevant_commercial_fallback_v1-1-157834906-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1">FT2232HL JTAG下载器硬件设计指南：从引脚配置到电平转换实战</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/weixin_29194693" target="_blank"><span class="blog-title">weixin_29194693的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">02-07</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 221 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/weixin_29194693/article/details/157834906" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-pc_relevant_commercial_fallback_v1-1-157834906-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"default","index":"1","strategy":"pc_relevant_commercial_fallback_v1","dest":"https://blog.csdn.net/weixin_29194693/article/details/157834906"}' data-report-query='spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-pc_relevant_commercial_fallback_v1-1-157834906-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-pc_relevant_commercial_fallback_v1-1-157834906-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">本文详细解析了FT2232HL JTAG下载器的硬件设计要点，包括引脚配置、电平转换电路设计及EEPROM配置技巧。通过实战案例展示如何利用FT2232HL实现高速JTAG通信，解决电平不匹配等常见问题，提升嵌入式开发效率。特别适合需要灵活JTAG接口的硬件工程师参考。</div> </a> </div> </div> </div> </div> <a id="commentBox" name="commentBox"></a> <div id="pcCommentBox" class="comment-box comment-box-new2 unlogin-comment-box-new" style="display:none"> <div class="unlogin-comment-model"> <span class="unlogin-comment-tit">参与评论</span> <span class="unlogin-comment-text">您还未登录，请先</span> <span class="unlogin-comment-bt">登录</span> <span class="unlogin-comment-text">后发表或查看评论</span> </div> </div> <div class="recommend-box insert-baidu-box recommend-box-style "> <div class="recommend-item-box no-index" style="display:none"></div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_38334677/article/details/143421527" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-pc_relevant_commercial_fallback_v1-2-143421527-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"default","index":"2","strategy":"pc_relevant_commercial_fallback_v1","dest":"https://blog.csdn.net/qq_38334677/article/details/143421527"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/qq_38334677/article/details/143421527" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-pc_relevant_commercial_fallback_v1-2-143421527-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"default","index":"2","strategy":"pc_relevant_commercial_fallback_v1","dest":"https://blog.csdn.net/qq_38334677/article/details/143421527"}' data-report-query='spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-pc_relevant_commercial_fallback_v1-2-143421527-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-pc_relevant_commercial_fallback_v1-2-143421527-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1">基于UC3842的反激电源的全面深入解析与MATLAB仿真</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/qq_38334677" target="_blank"><span class="blog-title">qq_38334677的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">11-01</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 1040 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/qq_38334677/article/details/143421527" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-pc_relevant_commercial_fallback_v1-2-143421527-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"default","index":"2","strategy":"pc_relevant_commercial_fallback_v1","dest":"https://blog.csdn.net/qq_38334677/article/details/143421527"}' data-report-query='spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-pc_relevant_commercial_fallback_v1-2-143421527-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-pc_relevant_commercial_fallback_v1-2-143421527-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">内置电流检测，可实现电流模式控制，提高系统的动态响应性。多种保护功能，如欠压锁定、过温保护、短路保护等，确保系统的安全可靠运行。宽工作电压范围，适应不同的电源设计需求。简单的外部元件配置，易于实现。UC3842的典型应用包括开关电源、DC-DC转换器和反激式电源等，其稳定性和可靠性在实际应用中得到了广泛验证。</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_30402085/article/details/99139878" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.3","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-3-99139878-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"3","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_30402085/article/details/99139878"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/weixin_30402085/article/details/99139878" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.3","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-3-99139878-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"3","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_30402085/article/details/99139878"}' data-report-query='spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-99139878-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-99139878-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1"><em>Jquery</em>时间倒数</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/weixin_30402085" target="_blank"><span class="blog-title">weixin_30402085的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">07-31</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 264 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/weixin_30402085/article/details/99139878" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.3","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-3-99139878-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"3","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_30402085/article/details/99139878"}' data-report-query='spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-99139878-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-99139878-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">/* * 使用此时间倒数计时<em>js</em>需要引入<em>jquery</em>-<em>1</em><em>.</em>7<em>.</em>2<em>.</em><em>min</em><em>.</em><em>js</em> * 参数 * 使用时只需要条用timer(intDiff);方法 * intDiff:时间倒数的毫秒值（使用时只需在<em>js</em>中定义该变量并且赋值即可）int类型 * 页面显示需要<span id="day_show"></span> <span id="hour_show"&g<em>.</em><em>.</em><em>.</em></div> </a> </div> </div> </div> <dl id="recommend-item-box-tow" class="recommend-item-box type_blog clearfix"> </dl> <div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/seanliu19/88544178" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.4","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-download-pc_relevant_commercial_fallback_v1-4-88544178-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"default","index":"4","strategy":"pc_relevant_commercial_fallback_v1","dest":"https://download.csdn.net/download/seanliu19/88544178"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://download.csdn.net/download/seanliu19/88544178" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.4","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-download-pc_relevant_commercial_fallback_v1-4-88544178-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"default","index":"4","strategy":"pc_relevant_commercial_fallback_v1","dest":"https://download.csdn.net/download/seanliu19/88544178"}' data-report-query='spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-download-pc_relevant_commercial_fallback_v1-4-88544178-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-download-pc_relevant_commercial_fallback_v1-4-88544178-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1">摩尔信使MThings V0<em>.</em>6<em>.</em><em>1</em> (非常好用的MODBUS上位机组态软件)</div> </a> </div> <div class="info-box display-flex"> <div class="info display-flex"> <span class="info-block"></span> </div> </div> </div> <div class="desc-box"> <a href="/https://download.csdn.net/download/seanliu19/88544178" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.4","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-download-pc_relevant_commercial_fallback_v1-4-88544178-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"default","index":"4","strategy":"pc_relevant_commercial_fallback_v1","dest":"https://download.csdn.net/download/seanliu19/88544178"}' data-report-query='spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-download-pc_relevant_commercial_fallback_v1-4-88544178-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-download-pc_relevant_commercial_fallback_v1-4-88544178-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">MThings是一款由长念(上海)技术开发有限公司推出的全新标准化专业MODBUS上位机组态软件。该软件为用户提供了主从机一体化操作的功能，可广泛应用于MODBUS协议接口的调试测试和Modbus设备运维。相较于市面上常见的主机和从机分离软件，MThings具有独特之处。它支持免安装运行以及安装运行两种方式，并且内置了多种Modbus协议的支持，包括Modbus RTU、Modbus ASCII和Modbus TCP等。此外，MThings还提供了配置文件的导入导出功能，便于用户灵活管理设置。软件内部集成了多种数据转换功能，同时支持统计丢包率、收发延迟等相关数据。令人欣喜的是，MThings还支持同时配置和运行多台仿真设备，方便用户进行多设备的操作。总的来说，MThings是一款功能丰富、易于使用的MODBUS上位机组态软件，个人用户更可以免费使用，其众多的特点和优势使其值得推荐。</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_30415801/article/details/95898797" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.5","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-5-95898797-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"5","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_30415801/article/details/95898797"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/weixin_30415801/article/details/95898797" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.5","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-5-95898797-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"5","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_30415801/article/details/95898797"}' data-report-query='spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-95898797-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-95898797-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1"><em>Js</em>、<em>jquery</em>学习笔记</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/weixin_30415801" target="_blank"><span class="blog-title">weixin_30415801的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">07-01</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 121 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/weixin_30415801/article/details/95898797" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.5","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-5-95898797-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"5","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_30415801/article/details/95898797"}' data-report-query='spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-95898797-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-95898797-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">end() 方法重新定位到上次操作的元素，一般与siblings()一起使用，操作其兄弟元素。如：$(this)<em>.</em>addClass("highlight")<em>.</em>children("a")<em>.</em>show()<em>.</em>end()<em>.</em>siblings()<em>.</em>removeClass("highlight")<em>.</em>children("a")<em>.</em>hide(); $('ul li')<em>.</em>filter(":contains(''),:<em>.</em><em>.</em><em>.</em></div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/bestallen/article/details/55259430" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.6","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-6-55259430-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"6","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/bestallen/article/details/55259430"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/bestallen/article/details/55259430" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.6","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-6-55259430-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"6","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/bestallen/article/details/55259430"}' data-report-query='spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-55259430-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-55259430-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1"><em>jQuery</em> <em>选择器</em> - 2</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/bestallen" target="_blank"><span class="blog-title">bestallen的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">02-16</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 1323 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/bestallen/article/details/55259430" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.6","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-6-55259430-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"6","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/bestallen/article/details/55259430"}' data-report-query='spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-55259430-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-55259430-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">继续上一篇接下去是表单的<em>选择器</em> 表单对象属性过滤<em>选择器</em> 还是先写个表单的页面作为样本可用元素：不可用元素：可用元素：不可用元素：多选框： test<em>1</em> test2 test3 test4 test5</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://devpress.csdn.net/v1/article/detail/105097362" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.7","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~ElasticSearch~activity-7-105097362-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"7","strategy":"2~default~ElasticSearch~activity","dest":"https://devpress.csdn.net/v1/article/detail/105097362"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://devpress.csdn.net/v1/article/detail/105097362" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.7","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~ElasticSearch~activity-7-105097362-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"7","strategy":"2~default~ElasticSearch~activity","dest":"https://devpress.csdn.net/v1/article/detail/105097362"}' data-report-query='spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7Eactivity-7-105097362-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7Eactivity-7-105097362-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1">【<em>jquery</em>】<em>jquery</em><em>选择器</em>有哪些</div> <div class="tag">热门推荐</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/meng_xiaohua" target="_blank"><span class="blog-title">meng_xiaohua的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">03-25</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 1万+ </span> </div> </div> </div> <div class="desc-box"> <a href="/https://devpress.csdn.net/v1/article/detail/105097362" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.7","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~ElasticSearch~activity-7-105097362-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"7","strategy":"2~default~ElasticSearch~activity","dest":"https://devpress.csdn.net/v1/article/detail/105097362"}' data-report-query='spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7Eactivity-7-105097362-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7Eactivity-7-105097362-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">4大类：基本<em>选择器</em>、层次<em>选择器</em>、过滤<em>选择器</em>、表单<em>选择器</em> 目录 <em>1</em>、<em>jquery</em>基本<em>选择器</em> 2、<em>jquery</em>层次<em>选择器</em> 3、<em>jquery</em>过滤<em>选择器</em> 4、<em>jquery</em>表单<em>选择器</em> <em>1</em>、<em>jquery</em>基本<em>选择器</em> 基本<em>选择器</em>是<em>JQuery</em>最常用的<em>选择器</em>，也是最简单的<em>选择器</em>，它通过元素id、class和标签名来查找DOM元素。 $("#myELement") 选择id值等于<em>.</em><em>.</em><em>.</em></div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_41071876/article/details/107301746" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.8","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~ElasticSearch~Rate-8-107301746-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"8","strategy":"2~default~ElasticSearch~Rate","dest":"https://blog.csdn.net/qq_41071876/article/details/107301746"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/qq_41071876/article/details/107301746" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.8","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~ElasticSearch~Rate-8-107301746-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"8","strategy":"2~default~ElasticSearch~Rate","dest":"https://blog.csdn.net/qq_41071876/article/details/107301746"}' data-report-query='spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7ERate-8-107301746-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7ERate-8-107301746-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1"><em>JQuery</em>标签<em>选择器</em></div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/qq_41071876" target="_blank"><span class="blog-title">clyu的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">07-12</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 6566 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/qq_41071876/article/details/107301746" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.8","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~ElasticSearch~Rate-8-107301746-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"8","strategy":"2~default~ElasticSearch~Rate","dest":"https://blog.csdn.net/qq_41071876/article/details/107301746"}' data-report-query='spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7ERate-8-107301746-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7ERate-8-107301746-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">一、基本<em>选择器</em> <em>1</em>、id<em>选择器</em> 语法：$(" #id值 ") 根据给定的ID匹配一个元素 2、class<em>选择器</em> 语法：$(" <em>.</em>class值 ") 根据给定的类匹配元素。 3、标签<em>选择器</em> 语法：$(" 标签名 ") 根据给定的元素名匹配所有元素 4、通配符<em>选择器</em> 语法：$(" * ") 匹配所有元素 5、并集<em>选择器</em> 语法：$(" selector<em>1</em>,selector2,selectorN ") 将每一个<em>选择器</em>匹配到的元素合并后一起返回。 6、交集<em>选择器</em> 语法：$(" selector<em>1</em></div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://xcysj.blog.csdn.net/article/details/101063472" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.9","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~ElasticSearch~Rate-9-101063472-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"9","strategy":"2~default~ElasticSearch~Rate","dest":"https://xcysj.blog.csdn.net/article/details/101063472"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://xcysj.blog.csdn.net/article/details/101063472" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.9","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~ElasticSearch~Rate-9-101063472-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"9","strategy":"2~default~ElasticSearch~Rate","dest":"https://xcysj.blog.csdn.net/article/details/101063472"}' data-report-query='spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7ERate-9-101063472-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7ERate-9-101063472-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1"><em>jQuery</em> <em>选择器</em></div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/InJavaWeTrust" target="_blank"><span class="blog-title"></span></a> </div> <div class="info display-flex"> <span class="info-block time">10-24</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 1万+ </span> </div> </div> </div> <div class="desc-box"> <a href="/https://xcysj.blog.csdn.net/article/details/101063472" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.9","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~ElasticSearch~Rate-9-101063472-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"9","strategy":"2~default~ElasticSearch~Rate","dest":"https://xcysj.blog.csdn.net/article/details/101063472"}' data-report-query='spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7ERate-9-101063472-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7ERate-9-101063472-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1"></div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/m0_74350516/article/details/146036464" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.10","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~ElasticSearch~Rate-10-146036464-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"10","strategy":"2~default~ElasticSearch~Rate","dest":"https://blog.csdn.net/m0_74350516/article/details/146036464"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/m0_74350516/article/details/146036464" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.10","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~ElasticSearch~Rate-10-146036464-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"10","strategy":"2~default~ElasticSearch~Rate","dest":"https://blog.csdn.net/m0_74350516/article/details/146036464"}' data-report-query='spm=1001.2101.3001.6650.10&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7ERate-10-146036464-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7ERate-10-146036464-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1"><em>jQuery</em><em>选择器</em></div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/m0_74350516" target="_blank"><span class="blog-title">m0_74350516的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">03-05</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 1064 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/m0_74350516/article/details/146036464" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.10","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~ElasticSearch~Rate-10-146036464-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"10","strategy":"2~default~ElasticSearch~Rate","dest":"https://blog.csdn.net/m0_74350516/article/details/146036464"}' data-report-query='spm=1001.2101.3001.6650.10&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7ERate-10-146036464-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EElasticSearch%7ERate-10-146036464-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">本文介绍了<em>jQuery</em><em>选择器</em>，涵盖基本、层级、过滤、表单<em>选择器</em>及筛选方法。基本<em>选择器</em>类似CSS，层级<em>选择器</em>定位元素层级关系，过滤<em>选择器</em>进一步筛选，表单<em>选择器</em>针对表单元素。还补充知识点如排他思想、隐式迭代和链式编程等。 </div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/u130130/article/details/163862930" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.11","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-11-163862930-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"11","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/u130130/article/details/163862930"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/u130130/article/details/163862930" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.11","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-11-163862930-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"11","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/u130130/article/details/163862930"}' data-report-query='spm=1001.2101.3001.6650.11&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-11-163862930-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-11-163862930-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1">GitHub 热榜项目：日榜（2026-08-<em>1</em>8）</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/u130130" target="_blank"><span class="blog-title">u130130的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">08-18</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 345 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/u130130/article/details/163862930" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.11","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-11-163862930-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"11","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/u130130/article/details/163862930"}' data-report-query='spm=1001.2101.3001.6650.11&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-11-163862930-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-11-163862930-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">本期 GitHub 热榜聚焦 AI 工具链扩展：渗透测试、安全技能库和代理记忆项目持续升温，本地 LLM 推理工具则围绕硬件适配与 Apple Silicon 优化展开；短视频生成、量化交易、求职管理和自托管照片等应用也同步上榜。</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/2401_83227843/article/details/163799374" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.12","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-12-163799374-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"12","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/2401_83227843/article/details/163799374"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/2401_83227843/article/details/163799374" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.12","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-12-163799374-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"12","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/2401_83227843/article/details/163799374"}' data-report-query='spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-12-163799374-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-12-163799374-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1"><em>JavaScript</em> 核心数据与类型体系</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/2401_83227843" target="_blank"><span class="blog-title">2401_83227843的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">08-16</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 655 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/2401_83227843/article/details/163799374" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.12","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-12-163799374-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"12","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/2401_83227843/article/details/163799374"}' data-report-query='spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-12-163799374-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-12-163799374-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">数据与类型是 <em>JavaScript</em> 交互逻辑的底层基石，所有用户输入处理、接口数据解析、状态计算、列表渲染都建立在类型体系之上。</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/2501_93234401/article/details/163895620" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.13","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-13-163895620-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"13","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/2501_93234401/article/details/163895620"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/2501_93234401/article/details/163895620" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.13","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-13-163895620-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"13","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/2501_93234401/article/details/163895620"}' data-report-query='spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-13-163895620-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-13-163895620-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1">React JWT 登录鉴权实战：串起 Zustand、Axios 拦截器与路由守卫</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/2501_93234401" target="_blank"><span class="blog-title">2501_93234401的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">08-19</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 255 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/2501_93234401/article/details/163895620" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.13","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-13-163895620-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"13","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/2501_93234401/article/details/163895620"}' data-report-query='spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-13-163895620-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-13-163895620-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">标签：React, JWT, Zustand, Axios, React Router在 React 项目里，登录接口返回 token 只是起点。真正容易遗漏的是：刷新后怎样恢复登录态、业务请求怎样自动携带 token、受保护页面怎样拦截，以及服务端怎样识别伪造或过期凭证。本文基于一个 React + Zustand + Axios + React Router + Vite Mock 项目，拆解完整数据流，并指出教学实现与生产鉴权的边界。源码仅做静态分析，。</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/Cloud_bread/article/details/163832280" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.14","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-14-163832280-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"14","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/Cloud_bread/article/details/163832280"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/Cloud_bread/article/details/163832280" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.14","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-14-163832280-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"14","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/Cloud_bread/article/details/163832280"}' data-report-query='spm=1001.2101.3001.6650.14&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-14-163832280-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-14-163832280-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1">基于ReAct框架的Agent工具调用鲁棒性提升策略</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/Cloud_bread" target="_blank"><span class="blog-title">Cloud_bread的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">08-17</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 197 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/Cloud_bread/article/details/163832280" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.14","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-14-163832280-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"14","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/Cloud_bread/article/details/163832280"}' data-report-query='spm=1001.2101.3001.6650.14&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-14-163832280-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-14-163832280-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">层面核心策略关键收益架构层规划与执行解耦（RP-ReAct）轨迹稳定，上下文可控执行层结构化工具调用 + Schema校验格式错误率从23%降至<0<em>.</em>3%反馈层Observation信息层级升级（L0→L2/L3）从盲目重试升级为智能决策测试层故障注入 + 优雅降级上线前暴露脆弱点，运行时安全兜底鲁棒性的本质，是在承认LLM会犯错、工具会失效的前提下，通过工程手段将失败控制在一定范围内。正如ReAct框架的初衷——让模型“边想边做”——工程化的目标则是让Agent“即使做错了，也知道怎么修正”</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/lonelymanontheway/article/details/163675316" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.15","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-15-163675316-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"15","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/lonelymanontheway/article/details/163675316"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/lonelymanontheway/article/details/163675316" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.15","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-15-163675316-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"15","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/lonelymanontheway/article/details/163675316"}' data-report-query='spm=1001.2101.3001.6650.15&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-15-163675316-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-15-163675316-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1">Pandoc生态：ConvertX、Zettlr、Quarto、R Markdown、PanWriter、MCP-Pandoc、Pandoc-xnos</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/lonelymanontheway" target="_blank"><span class="blog-title">lonelymanontheway的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">08-16</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 190 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/lonelymanontheway/article/details/163675316" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.15","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-15-163675316-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"15","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/lonelymanontheway/article/details/163675316"}' data-report-query='spm=1001.2101.3001.6650.15&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-15-163675316-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-15-163675316-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">Pandoc生态：ConvertX、Zettlr、Quarto、R Markdown、PanWriter、MCP-Pandoc、Pandoc-xnos、Pandoc-GUI</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/Eiceblue/article/details/163947030" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.16","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-16-163947030-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"16","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/Eiceblue/article/details/163947030"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/Eiceblue/article/details/163947030" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.16","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-16-163947030-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"16","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/Eiceblue/article/details/163947030"}' data-report-query='spm=1001.2101.3001.6650.16&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-16-163947030-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-16-163947030-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1"><em>JavaScript</em> 实现高效 PDF 转 HTML：加载、转换、下载</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/Eiceblue" target="_blank"><span class="blog-title">Eiceblue的专栏</span></a> </div> <div class="info display-flex"> <span class="info-block time">08-21</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 170 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/Eiceblue/article/details/163947030" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.16","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-16-163947030-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"16","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/Eiceblue/article/details/163947030"}' data-report-query='spm=1001.2101.3001.6650.16&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-16-163947030-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-16-163947030-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">本文详细介绍了如何在 React 应用中利用 <em>JavaScript</em> 与 WebAssembly 技术，在浏览器端完全本地化地将 PDF 文件转换为 HTML 页面，无需依赖任何后端服务。</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_40902326/article/details/163800219" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.17","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-17-163800219-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"17","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/qq_40902326/article/details/163800219"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/qq_40902326/article/details/163800219" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.17","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-17-163800219-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"17","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/qq_40902326/article/details/163800219"}' data-report-query='spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-17-163800219-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-17-163800219-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1">我在不同的平台用不同名字发文章——GEO实体一致性修复记录</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/qq_40902326" target="_blank"><span class="blog-title">qq_40902326的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">08-17</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 245 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/qq_40902326/article/details/163800219" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.17","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-17-163800219-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"17","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/qq_40902326/article/details/163800219"}' data-report-query='spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-17-163800219-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-17-163800219-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">文章摘要：技术博主通过一年实验发现，AI无法关联其在不同平台（CSDN、知乎、GitHub）的碎片化身份，导致内容权威性分散。核心问题在于"实体信号"不一致——包括名字、头像、简介等基础信息。作者通过三步修复：统一身份标识（名称/头像/简介）、用Schema标记建立账号关联、核对跨平台内容一致性，最终实现AI对其身份的准确识别与跨平台内容合并引用。关键建议包括：所有平台使用统一名称/头像/简介、部署PersonSchema标记、保持内容观点一致等。文章强调，对个人博主而言，实体一致性优化</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/kobe_okok/article/details/163907802" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.18","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-18-163907802-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"18","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/kobe_okok/article/details/163907802"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/kobe_okok/article/details/163907802" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.18","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-18-163907802-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"18","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/kobe_okok/article/details/163907802"}' data-report-query='spm=1001.2101.3001.6650.18&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-18-163907802-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-18-163907802-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1">python,vue3 web项目<em>.</em>gitignore,推送标签到git，后续项目可基于此标签作为基础继续开发</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/kobe_okok" target="_blank"><span class="blog-title">kobe_okok的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">08-20</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 13 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/kobe_okok/article/details/163907802" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.18","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-18-163907802-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"18","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/kobe_okok/article/details/163907802"}' data-report-query='spm=1001.2101.3001.6650.18&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-18-163907802-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-18-163907802-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">【代码】python,vue3 web项目<em>.</em>gitignore,推送标签到git，后续项目可基于此标签作为基础继续开发。</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/M1512415/article/details/163925477" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.19","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-19-163925477-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"19","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/M1512415/article/details/163925477"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/M1512415/article/details/163925477" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.19","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-19-163925477-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"19","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/M1512415/article/details/163925477"}' data-report-query='spm=1001.2101.3001.6650.19&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-19-163925477-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-19-163925477-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1">VS Code 快速生成Vue3 + TypeScript + Setup 基础空模板</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/M1512415" target="_blank"><span class="blog-title">M1512415的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">08-20</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 142 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/M1512415/article/details/163925477" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.19","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-19-163925477-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"19","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/M1512415/article/details/163925477"}' data-report-query='spm=1001.2101.3001.6650.19&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-19-163925477-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-19-163925477-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">很简单吧，以后不用手敲基础的模板，也可以将一些比较通用的在<em>js</em>on文件内加上，类似class等，以此展开。按下Ctrl+Shift+P（Windows）/Cmd+Shift+P（Mac），输入「好了，你们看见我的原力值了么…新建vue文件实践一下，输入。失踪人口回归，原力值回家。」，选择vue<em>.</em><em>js</em>on。</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/2301_81726198/article/details/163922083" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.20","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-20-163922083-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"20","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/2301_81726198/article/details/163922083"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/2301_81726198/article/details/163922083" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.20","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-20-163922083-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"20","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/2301_81726198/article/details/163922083"}' data-report-query='spm=1001.2101.3001.6650.20&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-20-163922083-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-20-163922083-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1">盛最多水的容器(双指针)</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/2301_81726198" target="_blank"><span class="blog-title">2301_81726198的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">08-20</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 318 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/2301_81726198/article/details/163922083" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.20","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-20-163922083-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"20","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/2301_81726198/article/details/163922083"}' data-report-query='spm=1001.2101.3001.6650.20&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-20-163922083-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-20-163922083-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">本文讲解LeetCode第<em>1</em><em>1</em>题「盛最多水的容器」的解法。通过分析容器面积由宽度和最小高度决定，提出双指针解法：初始时指针位于数组两端，每次移动较矮的指针，并计算当前面积更新最大值。该策略基于贪心思想，确保不会错过最优解。<em>JavaScript</em>实现代码展示了O(n)时间复杂度的解法，示例演示了计算过程。这是双指针算法在数组问题中的典型应用，理解移动较矮指针的策略对解决类似问题具有启发意义。</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_45879335/article/details/163892479" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.21","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-21-163892479-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"21","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/weixin_45879335/article/details/163892479"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="/https://blog.csdn.net/weixin_45879335/article/details/163892479" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.21","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-21-163892479-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"21","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/weixin_45879335/article/details/163892479"}' data-report-query='spm=1001.2101.3001.6650.21&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-21-163892479-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-21-163892479-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="left ellipsis-online ellipsis-online-1">vue3 实战系列之踩过的一些坑</div> <div class="tag">最新发布</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="/https://blog.csdn.net/weixin_45879335" target="_blank"><span class="blog-title">weixin_45879335的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">08-21</span> <span class="info-block read"><img class="read-img" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 74 </span> </div> </div> </div> <div class="desc-box"> <a href="/https://blog.csdn.net/weixin_45879335/article/details/163892479" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.21","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BLOGTAG~default-21-163892479-blog-101307112.235^v43^pc_blog_bottom_relevance_base3\",\"dist_request_id\":\"1787359902340_74543\"}","dist_request_id":"1787359902340_74543","ab_strategy":"landing_bge_commercial_es","index":"21","strategy":"2~default~BLOGTAG~default","dest":"https://blog.csdn.net/weixin_45879335/article/details/163892479"}' data-report-query='spm=1001.2101.3001.6650.21&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-21-163892479-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBLOGTAG%7Edefault-21-163892479-blog-101307112.235%5Ev43%5Epc_blog_bottom_relevance_base3'> <div class="desc ellipsis-online ellipsis-online-1">最近在总结一些过去的项目经验，偶有所得，把一些之前踩过的坑汇总一下。</div> </a> </div> </div> </div> </div> <div class="blog-footer-bottom" style="margin-top:10px;"></div> <script src="/https://g.csdnimg.cn/common/csdn-footer/csdn-footer.js" data-isfootertrack="false" type="text/javascript"></script> <script type="text/javascript"> window.csdn.csdnFooter.options = { el: '.blog-footer-bottom', type: 2 } </script> </main> <aside class="blog_container_aside"> <div id="asideProfile" class="aside-box active"> <div class="profile-intro d-flex"> <div class="avatar-box d-flex justify-content-center flex-column"> <a href="/https://blog.csdn.net/adr5970" target="_blank" data-report-click='{"mod":"popu_379","spm":"3001.4121","dest":"https://blog.csdn.net/adr5970","ab":"new"}'> <img src="/https://profile-avatar.csdnimg.cn/default.jpg!1" class="avatar_pic"> </a> </div> <div class="user-info d-flex flex-column profile-intro-name-box"> <div class="profile-intro-name-boxTop"> <a href="/https://blog.csdn.net/adr5970" target="_blank" class="" id="uid" title="adr5970" data-report-click='{"mod":"popu_379","spm":"3001.4122","dest":"https://blog.csdn.net/adr5970","ab":"new"}'> <span class="name" username="adr5970">adr5970</span> </a> </div> <div class="profile-intro-name-boxFooter-new"> <p class="profile-intro-name-leve"> <span> 博客等级 </span> <img class="level" src="/https://csdnimg.cn/identity/blog4.png"> </p> <span class="profile-intro-name-years" title="已加入 CSDN 12年">码龄12年</span> </div> </div> </div> <div class="profile-intro-rank-information"> <dl> <a href="/https://blog.csdn.net/adr5970" data-report-click='{"mod":"1598321000_001","spm":"3001.4310"}' data-report-query="t=1"> <dd><span >353</span></dd> <dt>原创</dt> </a> </dl> <dl title="2826"> <dd>2826</dd> <dt>点赞</dt> </dl> <dl title="2341"> <dd>2341</dd> <dt>收藏</dt> </dl> <dl id="fanBox" title="22"> <dd><span id="fan">22</span></dd> <dt>粉丝</dt> </dl> </div> <div class="profile-intro-name-boxOpration"> <div class="opt-letter-watch-box"> <a class="personal-watch bt-button" id="btnAttent" >关注</a> </div> <div class="opt-letter-watch-box"> <a rel="nofollow" class="bt-button personal-letter" href="/https://im.csdn.net/chat/adr5970" target="_blank" rel="noopener">私信</a> </div> </div> </div> <div class="box-shadow mb8" data-pid="blog" > <div class="aside-content text-center" id="cpro_u2734133"> <div id="kp_box_56" data-pid="56"><div class="wwads-cn wwads-vertical" data-id="149" style="max-width:300px;margin-top:0;margin-bottom:10px;background-color: #fff;"></div> <style>.wwads-img img {width: 150px; margin-top:10px}</style> <script type="text/javascript" charset="UTF-8" src="/https://cdn.wwads.cn/js/makemoney.js" async></script><img class="pre-img-lasy" data-src="/https://kunyu.csdn.net/1.png?p=56&adId=1100446&adBlockFlag=0&a=1100446&c=0&k=JQuery选择器&spm=1001.2101.3001.5000&articleId=101307112&d=1&t=3&u=8696c6dfd3d44a4884c12927e36c2a59" style="display: block;width: 0px;height: 0px;"></div> </div> </div> <div id="asideHotArticle" class="aside-box"> <h3 class="aside-title">热门文章</h3> <div class="aside-content"> <ul class="hotArticle-list"> <li> <a href="/https://blog.csdn.net/adr5970/article/details/101307253" target="_blank" data-report-click='{"mod":"popu_541","spm":"3001.4139","dest":"https://blog.csdn.net/adr5970/article/details/101307253","ab":"new"}'> Java对图片Base64转码--HTML对Base64解码 <img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">8871</span> </a> </li> <li> <a href="/https://blog.csdn.net/adr5970/article/details/101307130" target="_blank" data-report-click='{"mod":"popu_541","spm":"3001.4139","dest":"https://blog.csdn.net/adr5970/article/details/101307130","ab":"new"}'> Linux 就该这么学 <img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">6489</span> </a> </li> <li> <a href="/https://blog.csdn.net/adr5970/article/details/101307286" target="_blank" data-report-click='{"mod":"popu_541","spm":"3001.4139","dest":"https://blog.csdn.net/adr5970/article/details/101307286","ab":"new"}'> 亚马逊 kindle 刷机过程记录 <img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">5915</span> </a> </li> <li> <a href="/https://blog.csdn.net/adr5970/article/details/101306832" target="_blank" data-report-click='{"mod":"popu_541","spm":"3001.4139","dest":"https://blog.csdn.net/adr5970/article/details/101306832","ab":"new"}'> sql数据库还原，出现媒体簇的结构不对，SQL Server无法处理此媒体簇的解决方式之中的一个。... <img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">3106</span> </a> </li> <li> <a href="/https://blog.csdn.net/adr5970/article/details/101308160" target="_blank" data-report-click='{"mod":"popu_541","spm":"3001.4139","dest":"https://blog.csdn.net/adr5970/article/details/101308160","ab":"new"}'> Matlab 用 exprnd 函数生成符合指数分布的随机数 <img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">2547</span> </a> </li> </ul> </div> </div> <div class="article-previous" id="article-previous"> <dl data-report-click='{"spm":"3001.10752","extend1":"上一篇"}' data-report-view='{"spm":"3001.10752","extend1":"上一篇"}'> <dt> 上一篇： </dt> <dd> <a href="/https://blog.csdn.net/adr5970/article/details/101307101" data-report-query="spm=3001.10752"> 自己总结的web前端知识体系大全【欢迎补充】 </a> </dd> </dl> <dl class="next" data-report-click='{"spm":"3001.10796","extend1":"下一篇"}' data-report-view='{"spm":"3001.10796","extend1":"下一篇"}'> <dt> 下一篇： </dt> <dd > <a href="/https://blog.csdn.net/adr5970/article/details/101307103" data-report-query="spm=3001.10796"> 第一课 MongoDB 概述与安装 </a> </dd> </dl> </div> <div id="asideHotArticle" class="aside-box"> <h3 class="aside-title">大家在看</h3> <div class="aside-content"> <ul class="hotArticle-list"> <li> <a href="/https://blog.csdn.net/u010972645/article/details/163373180" target="_blank" data-report-click='{"spm":"3001.10093","dest":"https://blog.csdn.net/u010972645/article/details/163373180","strategy":"202_1052723-4460677_RCMD","ab":"new"}' data-report-view='{"spm":"3001.10093","dest":"https://blog.csdn.net/u010972645/article/details/163373180","strategy":"202_1052723-4460677_RCMD","ab":"new"}'> 工作流与模板双决策链设计 </a> </li> <li> <a href="/https://blog.csdn.net/weixin_43970743/article/details/163849189" target="_blank" data-report-click='{"spm":"3001.10093","dest":"https://blog.csdn.net/weixin_43970743/article/details/163849189","strategy":"202_1052723-4460688_RCMD","ab":"new"}' data-report-view='{"spm":"3001.10093","dest":"https://blog.csdn.net/weixin_43970743/article/details/163849189","strategy":"202_1052723-4460688_RCMD","ab":"new"}'> YOLOv9 C# ONNXRuntime工业集成 </a> </li> <li> <a href="/https://blog.csdn.net/weixin_43970743/article/details/163864396" target="_blank" data-report-click='{"spm":"3001.10093","dest":"https://blog.csdn.net/weixin_43970743/article/details/163864396","strategy":"202_1052723-4460685_RCMD","ab":"new"}' data-report-view='{"spm":"3001.10093","dest":"https://blog.csdn.net/weixin_43970743/article/details/163864396","strategy":"202_1052723-4460685_RCMD","ab":"new"}'> YOLOv9工业缺陷检测实战 </a> </li> <li> <a href="/https://blog.csdn.net/RapidClean/article/details/163826648" target="_blank" data-report-click='{"spm":"3001.10093","dest":"https://blog.csdn.net/RapidClean/article/details/163826648","strategy":"202_1052723-4460642_RCMD","ab":"new"}' data-report-view='{"spm":"3001.10093","dest":"https://blog.csdn.net/RapidClean/article/details/163826648","strategy":"202_1052723-4460642_RCMD","ab":"new"}'> 汽油标号与发动机清洁真相 <img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">386</span> </a> </li> <li> <a href="/https://blog.csdn.net/SZCXSJ/article/details/163947641" target="_blank" data-report-click='{"spm":"3001.10093","dest":"https://blog.csdn.net/SZCXSJ/article/details/163947641","strategy":"202_1052723-4460680_RCMD","ab":"new"}' data-report-view='{"spm":"3001.10093","dest":"https://blog.csdn.net/SZCXSJ/article/details/163947641","strategy":"202_1052723-4460680_RCMD","ab":"new"}'> 医疗影像触控终端选型指南 <img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">199</span> </a> </li> </ul> </div> </div> <div id="asideArchive" class="aside-box" style=" width:300px;"> <h3 class="aside-title">最新文章</h3> <div class="aside-content"> <ul class="inf_list clearfix"> <li class="clearfix"> <a href="/https://blog.csdn.net/adr5970/article/details/101306709" target="_blank" data-report-click='{"mod":"popu_382","spm":"3001.4136","dest":"https://blog.csdn.net/adr5970/article/details/101306709","ab":"left"}' data-report-view='{"mod":"popu_382","spm":"3001.4136","dest":"https://blog.csdn.net/adr5970/article/details/101306709","ab":"left"}'>微博粉丝管理指南：如何安全移除粉丝与批量清理方案解析</a> </li> <li class="clearfix"> <a href="/https://blog.csdn.net/adr5970/article/details/101307181" target="_blank" data-report-click='{"mod":"popu_382","spm":"3001.4136","dest":"https://blog.csdn.net/adr5970/article/details/101307181","ab":"left"}' data-report-view='{"mod":"popu_382","spm":"3001.4136","dest":"https://blog.csdn.net/adr5970/article/details/101307181","ab":"left"}'>手机照片压缩指南：精准控制大小与清晰度，轻松应对20KB-200KB限制</a> </li> <li class="clearfix"> <a href="/https://blog.csdn.net/adr5970/article/details/101307285" target="_blank" data-report-click='{"mod":"popu_382","spm":"3001.4136","dest":"https://blog.csdn.net/adr5970/article/details/101307285","ab":"left"}' data-report-view='{"mod":"popu_382","spm":"3001.4136","dest":"https://blog.csdn.net/adr5970/article/details/101307285","ab":"left"}'>从零构建游戏引擎：核心架构、ECS与渲染系统实践指南</a> </li> </ul> <div class="archive-bar"></div> <div class="archive-box"> <div class="archive-title">2026</div> <div class="archive-content"> <div class="archive-item"> <a href="/https://blog.csdn.net/adr5970?type=blog&year=2026&month=08" target="_blank" data-report-click='{"mod":"popu_538","spm":"3001.4138","ab":"new","dest":"https://blog.csdn.net/adr5970?type=blog&year=2026&month=08"}'> <span class="time">08月</span> <span class="count">76篇</span> </a> </div> <div class="archive-item"> <a href="/https://blog.csdn.net/adr5970?type=blog&year=2026&month=07" target="_blank" data-report-click='{"mod":"popu_538","spm":"3001.4138","ab":"new","dest":"https://blog.csdn.net/adr5970?type=blog&year=2026&month=07"}'> <span class="time">07月</span> <span class="count">208篇</span> </a> </div> <div class="archive-item"> <a href="/https://blog.csdn.net/adr5970?type=blog&year=2026&month=06" target="_blank" data-report-click='{"mod":"popu_538","spm":"3001.4138","ab":"new","dest":"https://blog.csdn.net/adr5970?type=blog&year=2026&month=06"}'> <span class="time">06月</span> <span class="count">69篇</span> </a> </div> </div> <div class="archive-list-item"><a href="/https://blog.csdn.net/adr5970?type=blog&year=2018&month=11" target="_blank" data-report-click='{"mod":"popu_538","spm":"3001.4138","ab":"new","dest":"https://blog.csdn.net/adr5970?type=blog&year=2018&month=11"}'><span class="year">2018年</span><span class="num">12篇</span></a></div> <div class="archive-list-item"><a href="/https://blog.csdn.net/adr5970?type=blog&year=2017&month=08" target="_blank" data-report-click='{"mod":"popu_538","spm":"3001.4138","ab":"new","dest":"https://blog.csdn.net/adr5970?type=blog&year=2017&month=08"}'><span class="year">2017年</span><span class="num">878篇</span></a></div> </div> </div> </div> <div id="footerRightAds" class="isShowFooterAds"> <div class="aside-box"> <div id="kp_box_57" data-pid="57"><iframe src="/https://kunpeng-sc.csdnimg.cn/?timestamp=1645783940/#/preview/3510108?positionId=57&adBlockFlag=0&adId=1100473&queryWord=JQuery选择器&spm=1001.2101.3001.5001&articleId=101307112" frameborder="0" width= "300px" height= "600px" scrolling="no" ></iframe><img class="pre-img-lasy" data-src="/https://kunyu.csdn.net/1.png?p=57&adBlockFlag=0&adId=1100473&a=1100473&c=3510108&k=JQuery选择器&spm=1001.2101.3001.5001&articleId=101307112&d=1&t=3&u=6aa667dbf3064f339b95374df3355032" style="display: block;width: 0px;height: 0px;"><script src="/https://kunpeng-render.csdnimg.cn/publisher/latest/closeAdFrame.js"></script></div> </div> </div>  <div class="aside-box cknows-side-card js-aside-cknows"> <div class="cknows-side-header"> <div class="cknows-side-header-row"> <div class="cknows-side-logo-wrap"> <img class="cknows-side-logo" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/c-blog-slidelogo-White.png" alt="C知道"> </div> <p class="cknows-side-brand">· AI 阅读助手</p> </div> </div> <div class="swiper cknows-side-swiper"> <div class="swiper-wrapper cknows-swiper-wrapper"></div> <div class="cknows-side-pagination swiper-pagination"></div> </div> </div>  <div id="asidedirectory" class="aside-box"> <div class='groupfile groupfile-active' id="directory"> <h3 class="aside-title">目录</h3> <div class="align-items-stretch group_item" id="align-items-stretch"> <div class="pos-box"> <div class="scroll-box"> <div class="toc-box"></div> </div> </div> </div> <p class="flexible-btn-new" id="flexible-btn-groupfile" data-report-click='{"spm":"3001.10780","strategy":"展开全部"}' data-minheight="117px" data-maxheight="446px" data-fbox="#align-items-stretch"><span class="text">展开全部</span> <img class="look-more" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/arrowup-line-bot-White.png" alt=""></p> <p class="flexible-btn-new-close close" data-report-click='{"spm":"3001.10780","strategy":"收起"}' data-minheight="117px" data-maxheight="446px" data-fbox="#align-items-stretch"><span class="text">收起</span> <img class="look-more" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/arrowup-line-top-White.png" alt=""></p> </div> </div> <div class="gitcode-qc-left-box aside-box" data-report-click='{"spm":"3001.11256", "extra":"{\"position\":\"left\"}"}'></div> </aside> <script> $("a.flexible-btn").click(function(){ $(this).parents('div.aside-box').removeClass('flexible-box'); $(this).parents("p.text-center").remove(); }) </script> <script type="text/javascript" src="/https://g.csdnimg.cn/user-tooltip/2.7/user-tooltip.js"></script> <script type="text/javascript" src="/https://g.csdnimg.cn/user-medal/2.0.0/user-medal.js"></script> </div> <div class="recommend-right align-items-stretch clearfix article-component-material-third-column" id="rightAside" data-type="recommend"> <aside class="recommend-right_aside"> <div class="rightside-fixed-hide"> <div class="programmer1Box"> <div id="kp_box_530" data-pid="530"><iframe src="/https://kunpeng-sc.csdnimg.cn/?timestamp=1645783940/#/preview/4434754?positionId=530&adBlockFlag=0&adId=1108918&queryWord=JQuery选择器&spm=1001.2101.3001.4647&articleId=101307112" frameborder="0" width= "300px" height= "600px" scrolling="no" ></iframe><img class="pre-img-lasy" data-src="/https://kunyu.csdn.net/1.png?p=530&adBlockFlag=0&adId=1108918&a=1108918&c=4434754&k=JQuery选择器&spm=1001.2101.3001.4647&articleId=101307112&d=1&t=3&u=1663b90b918845b9b37244e180a00fc1" style="display: block;width: 0px;height: 0px;"><script src="/https://kunpeng-render.csdnimg.cn/publisher/latest/closeAdFrame.js"></script></div> </div> </div> <div id="recommend-right" > <div class="aside-box cknows-side-card js-aside-cknows"> <div class="cknows-side-header"> <div class="cknows-side-header-row"> <div class="cknows-side-logo-wrap"> <img class="cknows-side-logo" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/c-blog-slidelogo-White.png" alt="C知道"> </div> <p class="cknows-side-brand">· AI 阅读助手</p> </div> </div> <div class="swiper cknows-side-swiper"> <div class="swiper-wrapper cknows-swiper-wrapper"></div> <div class="cknows-side-pagination swiper-pagination"></div> </div> </div> <div class='flex-column aside-box groupfile groupfile-active ' id="groupfile"> <div class="groupfile-div"> <h3 class="aside-title">目录</h3> <div class="align-items-stretch group_item" id="align-items-stretch-right"> <div class="pos-box"> <div class="scroll-box"> <div class="toc-box"></div> </div> </div> </div> <p class="flexible-btn-new" id="flexible-btn-groupfile" data-report-click='{"spm":"3001.10782","strategy":"展开全部"}' data-traigger="true" data-minheight="117px" data-maxheight="446px" data-fbox="#align-items-stretch-right"><span class="text">展开全部</span> <img class="look-more" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/arrowup-line-bot-White.png" alt=""></p> <p class="flexible-btn-new-close close" data-report-click='{"spm":"3001.10782","strategy":"收起"}' data-traigger="true" data-minheight="117px" data-maxheight="446px" data-fbox="#align-items-stretch-right"><span class="text">收起</span> <img class="look-more" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/arrowup-line-top-White.png" alt=""></p> </div> </div> <div class="gitcode-qc-right-box aside-box" data-report-click='{"spm":"3001.11256", "extra":"{\"position\":\"right\"}"}'></div> <div id="recommendAdBox"> <div id="kp_box_479" data-pid="479"><div class="wwads-cn wwads-vertical" data-id="149" style="max-width:300px;margin-top:10px;background-color: #fff;"></div> <style>.wwads-img img {width: 150px; margin-top:10px}</style><img class="pre-img-lasy" data-src="/https://kunyu.csdn.net/1.png?p=479&adId=1100447&adBlockFlag=0&a=1100447&c=0&k=JQuery选择器&spm=1001.2101.3001.4834&articleId=101307112&d=1&t=3&u=3629e7b40f2347d88b78c8583168d60a" style="display: block;width: 0px;height: 0px;"></div> </div> <div class="article-previous" id="article"> <dl data-report-click='{"spm":"3001.10752","extend1":"上一篇"}' data-report-view='{"spm":"3001.10752","extend1":"上一篇"}'> <dt> 上一篇： </dt> <dd> <a href="/https://blog.csdn.net/adr5970/article/details/101307101" data-report-query="spm=3001.10752"> 自己总结的web前端知识体系大全【欢迎补充】 </a> </dd> </dl> <dl class="next" data-report-click='{"spm":"3001.10796","extend1":"下一篇"}' data-report-view='{"spm":"3001.10796","extend1":"下一篇"}'> <dt> 下一篇： </dt> <dd > <a href="/https://blog.csdn.net/adr5970/article/details/101307103" data-report-query="spm=3001.10796"> 第一课 MongoDB 概述与安装 </a> </dd> </dl> </div> <div id="asideArchive" class="aside-box" style=" width:300px;"> <h3 class="aside-title">最新文章</h3> <div class="aside-content"> <ul class="inf_list clearfix"> <li class="clearfix"> <a href="/https://blog.csdn.net/adr5970/article/details/101306709" target="_blank" data-report-click='{"mod":"popu_382","spm":"3001.4136","dest":"https://blog.csdn.net/adr5970/article/details/101306709","ab":"right"}' data-report-view='{"mod":"popu_382","spm":"3001.4136","dest":"https://blog.csdn.net/adr5970/article/details/101306709","ab":"right"}'>微博粉丝管理指南：如何安全移除粉丝与批量清理方案解析</a> </li> <li class="clearfix"> <a href="/https://blog.csdn.net/adr5970/article/details/101307181" target="_blank" data-report-click='{"mod":"popu_382","spm":"3001.4136","dest":"https://blog.csdn.net/adr5970/article/details/101307181","ab":"right"}' data-report-view='{"mod":"popu_382","spm":"3001.4136","dest":"https://blog.csdn.net/adr5970/article/details/101307181","ab":"right"}'>手机照片压缩指南：精准控制大小与清晰度，轻松应对20KB-200KB限制</a> </li> <li class="clearfix"> <a href="/https://blog.csdn.net/adr5970/article/details/101307285" target="_blank" data-report-click='{"mod":"popu_382","spm":"3001.4136","dest":"https://blog.csdn.net/adr5970/article/details/101307285","ab":"right"}' data-report-view='{"mod":"popu_382","spm":"3001.4136","dest":"https://blog.csdn.net/adr5970/article/details/101307285","ab":"right"}'>从零构建游戏引擎：核心架构、ECS与渲染系统实践指南</a> </li> </ul> <div class="archive-bar"></div> <div class="archive-box"> <div class="archive-title">2026</div> <div class="archive-content"> <div class="archive-item"> <a href="/https://blog.csdn.net/adr5970?type=blog&year=2026&month=08" target="_blank" data-report-click='{"mod":"popu_538","spm":"3001.4138","ab":"new","dest":"https://blog.csdn.net/adr5970?type=blog&year=2026&month=08"}'> <span class="time">08月</span> <span class="count">76篇</span> </a> </div> <div class="archive-item"> <a href="/https://blog.csdn.net/adr5970?type=blog&year=2026&month=07" target="_blank" data-report-click='{"mod":"popu_538","spm":"3001.4138","ab":"new","dest":"https://blog.csdn.net/adr5970?type=blog&year=2026&month=07"}'> <span class="time">07月</span> <span class="count">208篇</span> </a> </div> <div class="archive-item"> <a href="/https://blog.csdn.net/adr5970?type=blog&year=2026&month=06" target="_blank" data-report-click='{"mod":"popu_538","spm":"3001.4138","ab":"new","dest":"https://blog.csdn.net/adr5970?type=blog&year=2026&month=06"}'> <span class="time">06月</span> <span class="count">69篇</span> </a> </div> </div> <div class="archive-list-item"><a href="/https://blog.csdn.net/adr5970?type=blog&year=2018&month=11" target="_blank" data-report-click='{"mod":"popu_538","spm":"3001.4138","ab":"new","dest":"https://blog.csdn.net/adr5970?type=blog&year=2018&month=11"}'><span class="year">2018年</span><span class="num">12篇</span></a></div> <div class="archive-list-item"><a href="/https://blog.csdn.net/adr5970?type=blog&year=2017&month=08" target="_blank" data-report-click='{"mod":"popu_538","spm":"3001.4138","ab":"new","dest":"https://blog.csdn.net/adr5970?type=blog&year=2017&month=08"}'><span class="year">2017年</span><span class="num">878篇</span></a></div> </div> </div> </div> </div> </aside> </div> <div class="recommend-right1 align-items-stretch clearfix" id="rightAsideConcision" data-type="recommend"> <aside class="recommend-right_aside"> <div id="recommend-right-concision" > <div class='flex-column aside-box groupfile' id="groupfileConcision"> <div class="groupfile-div1"> <h3 class="aside-title">目录</h3> <div class="align-items-stretch group_item"> <div class="pos-box"> <div class="scroll-box"> <div class="toc-box"></div> </div> </div> </div> </div> </div> </div> </aside> </div> </div> <div class="mask-dark"></div> <script type="text/javascript"> var timert = setInterval(function() { sideToolbar = $(".csdn-side-toolbar"); if (sideToolbar.length > 0) { sideToolbar.css('cssText', 'bottom:64px !important;') clearInterval(timert); } }, 200); </script> <div class="skin-boxshadow"></div> <div class="directory-boxshadow"></div> <div class="comment-side-box-shadow comment-side-tit-close" id="commentSideBoxshadow"> <div class="comment-side-content"> <div class="comment-side-tit"> <span class="comment-side-tit-count">评论</span> <img class="comment-side-tit-close" src="/https://csdnimg.cn/release/blogv2/dist/pc/img/closeBt.png"></div> <div id="pcCommentSideBox" class="comment-box comment-box-new2 unlogin-comment-box-new" style="display:none"> </div> <div id="pcFlodCommentSideBox" class="pc-flodcomment-sidebox"> <div class="comment-fold-tit"><span id="lookUnFlodComment" class="back"><img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/commentArrowLeftWhite.png" alt=""></span>被折叠的 <span class="count"></span> 条评论 <a href="/https://blogdev.blog.csdn.net/article/details/122245662" class="tip" target="_blank">为什么被折叠?</a> <a href="/https://bbs.csdn.net/forums/FreeZone" class="park" target="_blank"> <img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/iconPark.png">到【灌水乐园】发言</a> </div> <div class="comment-fold-content"></div> <div id="lookBadComment" class="look-bad-comment side-look-comment"> <a class="look-more-comment">查看更多评论<img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/commentArrowDownWhite.png" alt=""></a> </div> </div> </div> <div class="comment-rewarddialog-box"> <div class="form-box"> <div class="title-box"> 添加红包 <a class="btn-form-close"></a> </div> <form id="commentRewardForm"> <div class="ipt-box"> <label for="txtName">祝福语</label> <div class="ipt-btn-box"> <input type="text" name="name" id="txtName" autocomplete="off" maxlength="50"> <a class="btn-ipt btn-random"></a> </div> <p class="notice">请填写红包祝福语或标题</p> </div> <div class="ipt-box"> <label for="txtSendAmount">红包数量</label> <div class="ipt-txt-box"> <input type="text" name="sendAmount" maxlength="4" id="txtSendAmount" placeholder="请填写红包数量(最小10个)" autocomplete="off"> <span class="after-txt">个</span> </div> <p class="notice">红包个数最小为10个</p> </div> <div class="ipt-box"> <label for="txtMoney">红包总金额</label> <div class="ipt-txt-box error"> <input type="text" name="money" maxlength="5" id="txtMoney" placeholder="请填写总金额(最低5元)" autocomplete="off"> <span class="after-txt">元</span> </div> <p class="notice">红包金额最低5元</p> </div> <div class="balance-info-box"> <label>余额支付</label> <div class="balance-info"> 当前余额<span class="balance">3.43</span>元 <a href="/https://i.csdn.net/#/wallet/balance/recharge" class="link-charge" target="_blank">前往充值 ></a> </div> </div> <div class="opt-box"> <div class="pay-info"> 需支付：<span class="price">10.00</span>元 </div> <button type="button" class="ml-auto btn-cancel">取消</button> <button type="button" class="ml8 btn-submit" disabled="true">确定</button> </div> </form> </div> </div> <div class="rr-guide-box"> <div class="rr-first-box"> <img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward02.png" alt=""> <button class="btn-guide-known next">下一步</button> </div> <div class="rr-second-box"> <img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward03.png" alt=""> <button class="btn-guide-known known">知道了</button> </div> </div> </div> <div class="redEnvolope" id="redEnvolope"> <div class="env-box"> <div class="env-container"> <div class="pre-open" id="preOpen"> <div class="top"> <header> <img class="clearTpaErr" :src="redpacketAuthor.avatar" alt="" /> <div class="author">成就一亿技术人!</div> </header> <div class="bot-icon"></div> </div> <footer> <div class="red-openbtn open-start"></div> <div class="tip"> 领取后你会自动成为博主和红包主的粉丝 <a class="rule" target="_blank">规则</a> </div> </footer> </div> <div class="opened" id="opened"> <div class="bot-icon"> <header> <a class="creatorUrl" href="" target="_blank"> <img class="clearTpaErr" src="/https://profile-avatar.csdnimg.cn/default.jpg!2" alt="" /> </a> <div class="author"> <div class="tt">hope_wisdom</div> 发出的红包 </div> </header> </div> <div class="receive-box"> <header></header> <div class="receive-list"> </div> </div> </div> </div> <div class="close-btn"></div> </div> </div> <div class="pay-code"> <div class="pay-money">实付<span class="pay-money-span" data-nowprice='' data-oldprice=''>元</span></div> <div class="content-blance"><a class="blance-bt" href="javascript:;">使用余额支付</a></div> <div class="content-code"> <div id="payCode" data-id=""> <div class="renovate"> <img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/pay-time-out.png"> <span>点击重新获取</span> </div> </div> <div class="pay-style"><span><img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/weixin.png"></span><span><img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/zhifubao.png"></span><span><img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/jingdong.png"></span><span class="text">扫码支付</span></div> </div> <div class="bt-close"> <svg t="1567152543821" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10924" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12"> <defs> <style type="text/css"></style> </defs> <path d="M512 438.378667L806.506667 143.893333a52.032 52.032 0 1 1 73.6 73.621334L585.621333 512l294.485334 294.485333a52.074667 52.074667 0 0 1-73.6 73.642667L512 585.621333 217.514667 880.128a52.053333 52.053333 0 1 1-73.621334-73.642667L438.378667 512 143.893333 217.514667a52.053333 52.053333 0 1 1 73.621334-73.621334L512 438.378667z" fill="" p-id="10925"></path> </svg> </div> <div class="pay-balance"> <input type="radio" class="pay-code-radio" data-type="details"> <span class="span">钱包余额</span> <span class="balance" style="color:#FC5531;font-size:14px;">0</span> <div class="pay-code-tile"> <img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/pay-help.png" alt=""> <div class="pay-code-content"> <div class="span"> <p class="title">抵扣说明：</p> <p> 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。<br> 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。</p> </div> </div> </div> </div> <a class="pay-balance-con" href="/https://i.csdn.net/#/wallet/balance/recharge" target="_blank"><img src="/https://csdnimg.cn/release/blogv2/dist/pc/img/recharge.png" alt=""><span>余额充值</span></a> </div> <div style="display:none;"> <img src="" onerror='setTimeout(function(){if(!/(csdn.net|iteye.com|baiducontent.com|googleusercontent.com|360webcache.com|sogoucdn.com|bingj.com|baidu.com)$/.test(window.location.hostname)){window.location.href="\x68\x74\x74\x70\x73\x3a\x2f\x2f\x77\x77\x77\x2e\x63\x73\x64\x6e\x2e\x6e\x65\x74"}},3000);'> </div> <div class="keyword-dec-box" id="keywordDecBox"></div> </body>  <link rel="stylesheet" href="/https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/chart/chart.css" /> <script type="text/javascript" src="/https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/chart/lib/chart.min.js"></script> <script type="text/javascript" src="/https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/chart/widget2chart.js"></script> <script src="/https://csdnimg.cn/release/blogv2/dist/components/js/axios-83fa28cedf.min.js" type="text/javascript"></script> <script src="/https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_highlight-8defd55d6e.min.js" type="text/javascript"></script> <script src="/https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_common-3c7b273c43.min.js" type="text/javascript"></script> <script src="/https://csdnimg.cn/release/blogv2/dist/components/js/edit_copy_code-43c2d050a0.min.js" type="text/javascript"></script> <script src="/https://g.csdnimg.cn/lib/cboxEditor/1.1.6/embed-editor.min.js" type="text/javascript"></script> <link rel="stylesheet" href="/https://g.csdnimg.cn/lib/cboxEditor/1.1.6/embed-editor.min.css"> <link rel="stylesheet" href="/https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/codesnippet/lib/highlight/styles/atom-one-dark.css"> <script src="/https://g.csdnimg.cn/user-accusation/1.0.6/user-accusation.js" type="text/javascript"></script> <script> // 全局声明 if (window.csdn === undefined) { window.csdn = {}; } var sideToolbarOpt = {} $(function() { $(document).on('click', "#toolReportBtnHideNormal,#toolReportBtnHide", function() { window.csdn.loginBox.key({ biz: 'blog', subBiz: 'other_service', cb: function() { window.csdn.feedback({ "type": 'blog', "rtype": 'article', "rid": articleId, "reportedName": username, "submitOptions": { "title": articleTitle, "contentUrl": articleDetailUrl }, "callback": function() { showToast({ text: "感谢您的举报，我们会尽快审核！", bottom: '10%', zindex: 9000, speed: 500, time: 1500 }) } }) } }) }); }) window.csdn.sideToolbar = { options: { ...sideToolbarOpt, theme: 'white', } } </script> <script src="/https://g.csdnimg.cn/baidu-search/1.0.12/baidu-search.js" type="text/javascript"></script> <script src="/https://csdnimg.cn/release/download/old_static/js/qrcode.js"></script> <script src="/https://g.csdnimg.cn/lib/qrcode/1.0.0/qrcode.min.js"></script> <script src="/https://g.csdnimg.cn/user-ordercart/3.0.1/user-ordercart.js" type="text/javascript"></script> <script src="/https://g.csdnimg.cn/user-ordertip/5.0.3/user-ordertip.js" type="text/javascript"></script> <script src="/https://g.csdnimg.cn/order-payment/4.0.5/order-payment.js" type="text/javascript"></script> <script src="/https://g.csdnimg.cn/order-payment/3.1.1-download-e-isolated/order-payment.js" type="text/javascript"></script> <script src="/https://csdnimg.cn/release/blogv2/dist/pc/js/common-48ed13f265.min.js" type="text/javascript"></script> <script src="/https://csdnimg.cn/release/blogv2/dist/pc/js/detail-7bc6425a77.min.js" type="text/javascript"></script> <script src="/https://csdnimg.cn/release/blogv2/dist/pc/js/column-efcae2ca36.min.js" type="text/javascript"></script> <script src="/https://g.csdnimg.cn/side-toolbar/3.6/side-toolbar.js" type="text/javascript"></script> <script src="/https://g.csdnimg.cn/copyright/1.0.4/copyright.js" type="text/javascript"></script> <script> $(".MathJax").remove(); if ($('div.markdown_views pre.prettyprint code.hljs').length > 0) { $('div.markdown_views')[0].className = 'markdown_views'; } </script> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [['$', '$'], ['\$', '\$']], displayMath: [['$$', '$$'], ['\\[', '\\]']], processEscapes: true, processClass: "mathjax", ignoreClass: "title-article|no-mathjax", preview: "none" }, // 优先使用 HTML-CSS 而非 NativeMML "HTML-CSS": { preferredFont: "STIX", // 使用 STIX 字体 availableFonts: ["STIX", "TeX"], webFont: "STIX-Web", scale: 100, // 放大 20% minScaleAdjust: 100, linebreaks: { automatic: true, width: "90% container" }, matchFontHeight: true, styles: { ".MathJax": { "font-weight": "500 !important" // 加粗 } } }, // 禁用 NativeMML（浏览器原生渲染质量不好） NativeMML: { scale: 100 }, // 设置优先级：HTML-CSS > SVG > NativeMML menuSettings: { renderer: "HTML-CSS" }, messageStyle: "none" }); MathJax.Hub.Queue(["Typeset", MathJax.Hub]); </script> <script src="/https://g.csdnimg.cn/static/mathjax-2.7.9/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> <script type="text/javascript" crossorigin src="/https://g.csdnimg.cn/common/csdn-login-box/csdn-login-box.js"></script></html>