{"id":106,"date":"2012-12-26T13:05:45","date_gmt":"2012-12-26T05:05:45","guid":{"rendered":"https:\/\/blog.indeex.club\/?p=106"},"modified":"2020-06-20T22:57:08","modified_gmt":"2020-06-20T14:57:08","slug":"jquery-%e9%80%89%e6%8b%a9%e5%99%a8","status":"publish","type":"post","link":"https:\/\/blog.indeex.club\/index.php\/2012\/12\/26\/jquery-%e9%80%89%e6%8b%a9%e5%99%a8\/","title":{"rendered":"JQuery \u9009\u62e9\u5668"},"content":{"rendered":"

\u4e00\u3001\u57fa\u672c\u9009\u62e9\u5668<\/h3>\n

1. id\u9009\u62e9\u5668\uff08\u6307\u5b9aid\u5143\u7d20\uff09<\/h4>\n

\u5c06id=”one”\u7684\u5143\u7d20\u80cc\u666f\u8272\u8bbe\u7f6e\u4e3a\u9ed1\u8272\u3002\uff08id\u9009\u62e9\u5668\u8fd4\u5355\u4e2a\u5143\u7d20\uff09<\/p>\n

$(document).ready(function () {\n        $('#one').css('background', '#');\n});\n\n$(document).ready(function () {\n        $('#one').css('background', '#');\n    });\n<\/code><\/pre>\n
2. class\u9009\u62e9\u5668\uff08\u904d\u5386css\u7c7b\u5143\u7d20\uff09<\/h4>\n
\u5c06class=”cube”\u7684\u5143\u7d20\u80cc\u666f\u8272\u8bbe\u4e3a\u9ed1\u8272<\/p>\n
$(document).ready(function () {\n        $('.cube').css('background', '#');\n    });\n<\/code><\/pre>\n
3. element\u9009\u62e9\u5668\uff08\u904d\u5386html\u5143\u7d20\uff09<\/h4>\n
\u5c06p\u5143\u7d20\u7684\u6587\u5b57\u5927\u5c0f\u8bbe\u7f6e\u4e3a12px<\/p>\n
$(document).ready(function () {\n        $('p').css('font-size', '12px');\n    });\n<\/code><\/pre>\n
4. * \u9009\u62e9\u5668\uff08\u904d\u5386\u6240\u6709\u5143\u7d20\uff09<\/h4>\n
$(document).ready(function () {\n        \/\/ \u904d\u5386form\u4e0b\u7684\u6240\u6709\u5143\u7d20\uff0c\u5c06\u5b57\u4f53\u989c\u8272\u8bbe\u7f6e\u4e3a\u7ea2\u8272\n        $('form *').css('color', '#FF0');\n    });\n<\/code><\/pre>\n
5. \u5e76\u5217\u9009\u62e9\u5668<\/h4>\n
$(document).ready(function () {\n        \/\/ \u5c06p\u5143\u7d20\u548cdiv\u5143\u7d20\u7684margin\u8bbe\u4e3a0\n        $('p, div').css('margin', '0');\n    });\n<\/code><\/pre>\n
\u4e8c\u3001 \u5c42\u6b21\u9009\u62e9\u5668<\/h3>\n
1. parent > child\uff08\u76f4\u7cfb\u5b50\u5143\u7d20\uff09<\/h4>\n
$(document).ready(function () {\n        \/\/ \u9009\u53d6div\u4e0b\u7684\u7b2c\u4e00\u4ee3span\u5143\u7d20\uff0c\u5c06\u5b57\u4f53\u989c\u8272\u8bbe\u4e3a\u7ea2\u8272\n        $('div > span').css('color', '#FF0');\n    });\n<\/code><\/pre>\n
\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u53ea\u6709\u7b2c\u4e00\u4e2aspan\u4f1a\u53d8\u8272\uff0c\u7b2c\u4e8c\u4e2aspan\u4e0d\u5c5e\u4e8ediv\u7684\u4e00\u4ee3\u5b50\u5143\u7d20\uff0c\u989c\u8272\u4fdd\u6301\u4e0d\u53d8\u3002<\/p>\n
<div>\n        <span>123<\/span>\n        <p>\n            <span>456<\/span>\n        <\/p>\n<\/div>\n<\/code><\/pre>\n
2. prev + next\uff08\u4e0b\u4e00\u4e2a\u5144\u5f1f\u5143\u7d20\uff0c\u7b49\u540c\u4e8enext()\u65b9\u6cd5\uff09<\/h4>\n
$(document).ready(function () {\n    \/\/ \u9009\u53d6class\u4e3aitem\u7684\u4e0b\u4e00\u4e2adiv\u5144\u5f1f\u5143\u7d20\n    $('.item + div').css('color', '#FF0');\n    \/\/ \u7b49\u4ef7\u4ee3\u7801\n    \/\/$('.item').next('div').css('color', '#FF0');\n});\n<\/code><\/pre>\n
\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u53ea\u6709123\u548c789\u4f1a\u53d8\u8272<\/p>\n
<p class=\"item\"><\/p>\n<div>123<\/div>\n<div>456<\/div>\n<span class=\"item\"><\/span>\n<div>789<\/div>\n<\/code><\/pre>\n
3. prev ~ siblings\uff08prev\u5143\u7d20\u7684\u6240\u6709\u5144\u5f1f\u5143\u7d20\uff0c\u7b49\u540c\u4e8enextAll()\u65b9\u6cd5\uff09<\/h4>\n
$(document).ready(function () {\n    \/\/ \u9009\u53d6class\u4e3ainside\u4e4b\u540e\u7684\u6240\u6709div\u5144\u5f1f\u5143\u7d20\n    $('.inside ~ div').css('color', '#FF0');\n    \/\/ \u7b49\u4ef7\u4ee3\u7801\n    \/\/$('.inside').nextAll('div').css('color', '#FF0');\n});\n<\/code><\/pre>\n
\u4e0b\u9762\u7684\u4ee3\u7801\uff0cG2\u548cG4\u4f1a\u53d8\u8272<\/p>\n
<div class=\"inside\">G1<\/div>\n<div>G2<\/div>\n<span>G3<\/span>\n<div>G4<\/div>\n<\/code><\/pre>\n
\u4e09\u3001 \u8fc7\u6ee4\u9009\u62e9\u5668<\/h3>\n
1. \u57fa\u672c\u8fc7\u6ee4\u9009\u62e9\u5668<\/h4>\n
\u2014\u20141.1 :first\u548c:last\uff08\u53d6\u7b2c\u4e00\u4e2a\u5143\u7d20\u6216\u6700\u540e\u4e00\u4e2a\u5143\u7d20\uff09<\/p>\n
$(document).ready(function () {\n            $('span:first').css('color', '#FF0');\n            $('span:last').css('color', '#FF0');\n        });\n<\/code><\/pre>\n
\u4e0b\u9762\u7684\u4ee3\u7801\uff0cG1\uff08first\u5143\u7d20\uff09\u548cG3\uff08last\u5143\u7d20\uff09\u4f1a\u53d8\u8272<\/p>\n
<span>G1<\/span>\n<span>G2<\/span>\n<span>G3<\/span>\n<\/code><\/pre>\n
\u2014\u20141.2 :not\uff08\u53d6\u975e\u5143\u7d20\uff09<\/h4>\n
$(document).ready(function () {\n            $('div:not(.wrap)').css('color', '#FF0');\n        });\n<\/code><\/pre>\n
\u4e0b\u9762\u7684\u4ee3\u7801\uff0cG1\u4f1a\u53d8\u8272<\/p>\n
<div>G1<\/div>\n<div class=\"wrap\">G2<\/div>\n<\/code><\/pre>\n
\u4f46\u662f\uff0c\u8bf7\u6ce8\u610f\u4e0b\u9762\u7684\u4ee3\u7801\uff1a<\/p>\n
<div>\n    G1\n    <div class=\"wrap\">G2<\/div>\n<\/div>\n<\/code><\/pre>\n
\u5f53G1\u6240\u5728div\u548cG2\u6240\u5728div\u662f\u7236\u5b50\u5173\u7cfb\u65f6\uff0cG1\u548cG2\u90fd\u4f1a\u53d8\u8272\u3002<\/p>\n
\u2014\u20141.3 :even\u548c:odd\uff08\u53d6\u5076\u6570\u7d22\u5f15\u6216\u5947\u6570\u7d22\u5f15\u5143\u7d20\uff0c\u7d22\u5f15\u4ece0\u5f00\u59cb\uff0ceven\u8868\u793a\u5076\u6570\uff0codd\u8868\u793a\u5947\u6570\uff09<\/h4>\n
$(document).ready(function () {\n            $('tr:even').css('background', '#EEE'); \/\/ \u5076\u6570\u884c\u989c\u8272\n            $('tr:odd').css('background', '#DADADA'); \/\/ \u5947\u6570\u884c\u989c\u8272\n        });\n<\/code><\/pre>\n
A\u3001C\u884c\u989c\u8272#EEE\uff08\u7b2c\u4e00\u884c\u7684\u7d22\u5f15\u4e3a0\uff09\uff0cB\u3001D\u884c\u989c\u8272#DADADA<\/p>\n
<table width=\"200\" cellpadding=\"0\" cellspacing=\"0\">\n    <tbody>\n        <tr><td>A<\/td><\/tr>\n        <tr><td>B<\/td><\/tr>\n        <tr><td>C<\/td><\/tr>\n        <tr><td>D<\/td><\/tr>\n    <\/tbody>\n<\/table>\n<\/code><\/pre>\n
\u2014\u20141.4 :eq(x) \uff08\u53d6\u6307\u5b9a\u7d22\u5f15\u7684\u5143\u7d20\uff09<\/h4>\n
$(document).ready(function () {\n            $('tr:eq(2)').css('background', '#FF0');\n        });\n<\/code><\/pre>\n
\u66f4\u6539\u7b2c\u4e09\u884c\u7684\u80cc\u666f\u8272\uff0c\u5728\u4e0a\u9762\u7684\u4ee3\u7801\u4e2dC\u7684\u80cc\u666f\u4f1a\u53d8\u8272\u3002<\/p>\n
\u2014\u20141.5 :gt(x)\u548c:lt(x)\uff08\u53d6\u5927\u4e8ex\u7d22\u5f15\u6216\u5c0f\u4e8ex\u7d22\u5f15\u7684\u5143\u7d20\uff09<\/h4>\n
$(document).ready(function () {\n            $('ul li:gt(2)').css('color', '#FF0');\n            $('ul li:lt(2)').css('color', '#0FF');\n        });\n<\/code><\/pre>\n
L4\u548cL5\u4f1a\u662f\u7ea2\u8272\uff0cL1\u548cL2\u4f1a\u662f\u84dd\u8272\uff0cL3\u662f\u9ed8\u8ba4\u989c\u8272<\/p>\n
<ul>\n    <li>L1<\/li>\n    <li>L2<\/li>\n    <li>L3<\/li>\n    <li>L4<\/li>\n    <li>L5<\/li>\n<\/ul>\n<\/code><\/pre>\n
\u2014\u20141.6 :header\uff08\u53d6H1~H6\u6807\u9898\u5143\u7d20\uff09<\/h4>\n
$(document).ready(function () {\n            $(':header').css('background', '#EFEFEF');\n        });\n<\/code><\/pre>\n
\u4e0b\u9762\u7684\u4ee3\u7801\uff0cH1~H6\u7684\u80cc\u666f\u8272\u90fd\u4f1a\u53d8<\/p>\n
<h1>H1<\/h1>\n<h2>H2<\/h2>\n<h3>H3<\/h3>\n<h4>H4<\/h4>\n<h5>H5<\/h5>\n<h6>H6<\/h6>\n<\/code><\/pre>\n
2. \u5185\u5bb9\u8fc7\u6ee4\u9009\u62e9\u5668<\/h4>\n
\u2014\u20142.1 :contains(text)\uff08\u53d6\u5305\u542btext\u6587\u672c\u7684\u5143\u7d20\uff09<\/h4>\n
$(document).ready(function () {\n            \/\/ dd\u5143\u7d20\u4e2d\u5305\u542b\"jQuery\"\u6587\u672c\u7684\u4f1a\u53d8\u8272\n            $('dd:contains(\"jQuery\")').css('color', '#FF0');\n        });\n<\/code><\/pre>\n
\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u7b2c\u4e00\u4e2add\u4f1a\u53d8\u8272<\/p>\n
<dl>\n    <dt>\u6280\u672f<\/dt>\n    <dd>jQuery, .NET, CLR<\/dd>\n    <dt>SEO<\/dt>\n    <dd>\u5173\u952e\u5b57\u6392\u540d<\/dd>\n    <dt>\u5176\u4ed6<\/dt>\n    <dd><\/dd>\n<\/dl>\n<\/code><\/pre>\n
\u2014\u20142.2 :empty\uff08\u53d6\u4e0d\u5305\u542b\u5b50\u5143\u7d20\u6216\u6587\u672c\u4e3a\u7a7a\u7684\u5143\u7d20\uff09<\/h4>\n
$(document).ready(function () {\n            $('dd:empty').html('\u6ca1\u6709\u5185\u5bb9');\n});\n<\/code><\/pre>\n
\u4e0a\u9762\u7b2c\u4e09\u4e2add\u4f1a\u663e\u793a”\u6ca1\u6709\u5185\u5bb9”\u6587\u672c<\/p>\n
\u2014\u20142.3 :has(selector)\uff08\u53d6\u9009\u62e9\u5668\u5339\u914d\u7684\u5143\u7d20\uff09<\/h4>\n
$(document).ready(function () {\n            \/\/ \u4e3a\u5305\u542bspan\u5143\u7d20\u7684div\u6dfb\u52a0\u8fb9\u6846\n            $('div:has(span)').css('border', '1px solid #');\n        });\n<\/code><\/pre>\n
\u5373\u4f7fspan\u4e0d\u662fdiv\u7684\u76f4\u7cfb\u5b50\u5143\u7d20\uff0c\u4e5f\u4f1a\u751f\u6548<\/p>\n
<div>\n    <h2>\n        A\n        <span>B<\/span>\n    <\/h2>\n<\/div>\n<\/code><\/pre>\n
\u2014\u20142.4 :parent\uff08\u53d6\u5305\u542b\u5b50\u5143\u7d20\u6216\u6587\u672c\u7684\u5143\u7d20\uff09<\/h4>\n
$(document).ready(function () {\n            $('ol li:parent').css('border', '1px solid #');\n        });\n<\/code><\/pre>\n
\u4e0b\u9762\u7684\u4ee3\u7801\uff0cA\u548cD\u6240\u5728\u7684li\u4f1a\u6709\u8fb9\u6846<\/p>\n
<ol>\n    <li><\/li>\n    <li>A<\/li>\n    <li><\/li>\n    <li>D<\/li>\n<\/ol>\n<\/code><\/pre>\n
3. \u53ef\u89c1\u6027\u8fc7\u6ee4\u9009\u62e9\u5668<\/h4>\n
\u2014\u20143.1 :hidden\uff08\u53d6\u4e0d\u53ef\u89c1\u7684\u5143\u7d20\uff09<\/h4>\n
jQuery\u81f31.3.2\u4e4b\u540e\u7684:hidden\u9009\u62e9\u5668\u4ec5\u5339\u914ddisplay:none\u6216\u7684\u5143\u7d20\uff0c\u800c\u4e0d\u5339\u914dvisibility: hidden\u6216opacity:0\u7684\u5143\u7d20\u3002\u8fd9\u4e5f\u610f\u5473\u7740hidden\u53ea\u5339\u914d\u90a3\u4e9b\u201c\u9690\u85cf\u7684\u201d\u5e76\u4e14\u4e0d\u5360\u7a7a\u95f4\u7684\u5143\u7d20\uff0c\u50cfvisibility:hidden\u6216opactity:0\u7684\u5143\u7d20\u5360\u636e\u4e86\u7a7a\u95f4\uff0c\u4f1a\u88ab\u6392\u9664\u5728\u5916\u3002<\/p>\n
\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u5148\u5f39\u51fa”hello”\u5bf9\u8bdd\u6846\uff0c\u7136\u540ehid-1\u4f1a\u663e\u793a\uff0chid-2\u4ecd\u7136\u662f\u4e0d\u53ef\u89c1\u7684\u3002<\/p>\n
<html xmlns=\"http:\/\/www.w3.org\/1\/xhtml\" >\n<head runat=\"server\">\n    <title><\/title>\n    <style type=\"text\/css\">\n        div\n        {\n            margin: 10px;\n            width: 200px;\n            height: 40px;\n            border: 1px solid #FF0;\n            display:block;\n        }\n        .hid-1\n        {\n            display: none;\n        }\n        .hid-2\n        {\n            visibility: hidden;\n        }\n    <\/style>\n    <script type=\"text\/javascript\" src=\"js\/jquery.min.js\"><\/script>\n    <script type=\"text\/javascript\">\n        $(document).ready(function() {\n            $('div:hidden').show(500);\n            alert($('input:hidden').val());\n        });\n    <\/script>\n<\/head>\n<body>\n    <div class=\"hid-1\">display: none<\/div>\n    <div class=\"hid-2\">visibility: hidden<\/div>\n    <input type=\"hidden\" value=\"hello\"\/>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
\u2014\u20143.2 :visible\uff08\u53d6\u53ef\u89c1\u7684\u5143\u7d20\uff09<\/h4>\n
\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u6700\u540e\u4e00\u4e2adiv\u4f1a\u6709\u80cc\u666f\u8272<\/p>\n
<script type=\"text\/javascript\">\n    $(document).ready(function() {\n        $('div:visible').css('background', '#EEADBB');\n    });\n<\/script>\n<div class=\"hid-1\">display: none<\/div>\n<div class=\"hid-2\">visibility: hidden<\/div>\n<input type=\"hidden\" value=\"hello\"\/>\n<div>\n    jQuery\u9009\u62e9\u5668\n<\/div>\n<\/code><\/pre>\n
4. \u5c5e\u6027\u8fc7\u6ee4\u9009\u62e9\u5668<\/h4>\n
\u2014\u20144.1 [attribute]\uff08\u53d6\u62e5\u6709attribute\u5c5e\u6027\u7684\u5143\u7d20\uff09<\/h4>\n
\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u6700\u540e\u4e00\u4e2aa\u6807\u7b7e\u6ca1\u6709title\u5c5e\u6027\uff0c\u6240\u4ee5\u5b83\u4ecd\u7136\u4f1a\u5e26\u4e0b\u5212\u7ebf<\/p>\n
<script type=\"text\/javascript\">\n        $(document).ready(function() {\n            $('a[title]').css('text-decoration', 'none');\n       });\n    <\/script>       \n    <ul>\n        <li><a href=\"#\" title=\"DOM\u5bf9\u8c61\u548cjQuery\u5bf9\u8c61\" class=\"item\">DOM\u5bf9\u8c61\u548cjQuery\u5bf9\u8c61<\/a><\/li>\n        <li><a href=\"#\" title=\"jQuery\u9009\u62e9\u5668\" class=\"item-selected\">jQuery\u9009\u62e9\u5668<\/a><\/li>\n        <li><a href=\"#\" title=\"jQuery\u4e8b\u4ef6\" class=\"item\">jQuery\u4e8b\u4ef6<\/a><\/li>\n        <li><a href=\"#\" title=\"\u57fa\u4e8ejQuery\u7684\u63d2\u4ef6\u5f00\u53d1\" class=\"item\">\u57fa\u4e8ejQuery\u7684\u63d2\u4ef6\u5f00\u53d1<\/a><\/li>\n        <li><a href=\"#\" title=\"Wordpress & jQuery\" class=\"item\">Wordpress & jQuery<\/a><\/li>\n        <li><a href=\"#\" class=\"item\">\u5176\u4ed6<\/a><\/li>\n    <\/ul>\n<\/code><\/pre>\n
\u2014\u20144.2 [attribute = value]\u548c[attribute != value]\uff08\u53d6attribute\u5c5e\u6027\u503c\u7b49\u4e8evalue\u6216\u4e0d\u7b49\u4e8evalue\u7684\u5143\u7d20\uff09<\/h4>\n
\u5206\u522b\u4e3aclass=”item”\u548cclass!=item\u7684a\u6807\u7b7e\u6307\u5b9a\u6587\u5b57\u989c\u8272<\/p>\n","protected":false},"excerpt":{"rendered":"
\u4e00\u3001\u57fa\u672c\u9009\u62e9\u5668 1. id\u9009\u62e9\u5668\uff08\u6307\u5b9aid\u5143\u7d20\uff09 \u5c06id=”one”\u7684\u5143\u7d20\u80ccRead More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[4],"_links":{"self":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/106"}],"collection":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":1,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/106\/revisions"}],"predecessor-version":[{"id":109,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/106\/revisions\/109"}],"wp:attachment":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/media?parent=106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/categories?post=106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/tags?post=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}