{"id":1182,"date":"2018-05-25T09:43:26","date_gmt":"2018-05-25T01:43:26","guid":{"rendered":"http:\/\/www.yusian.com\/blog\/?p=1182"},"modified":"2020-12-01T12:46:37","modified_gmt":"2020-12-01T04:46:37","slug":"jquery%e7%bb%bc%e5%90%88%e5%b0%8f%e4%ba%8b%e4%be%8b%e4%b9%8b%e7%ae%80%e5%8d%95%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86","status":"publish","type":"post","link":"https:\/\/www.yusian.com\/blog\/h5\/2018\/05\/25\/0943261182.html","title":{"rendered":"jQuery\u7efc\u5408\u5c0f\u4e8b\u4f8b\u4e4b\u7b80\u5355\u4e8b\u4ef6\u5904\u7406"},"content":{"rendered":"<p>1\u3001\u5148\u770b\u6548\u679c\u56fe\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.yusian.com\/blog\/wp-content\/uploads\/2018\/05\/\u5c4f\u5e55\u5feb\u7167-2018-05-24-\u4e0b\u53485.19.22-300x126.jpg\" alt=\"\" width=\"600\" height=\"252\" class=\"alignnone size-medium wp-image-1183\" srcset=\"https:\/\/www.yusian.com\/blog\/wp-content\/uploads\/2018\/05\/\u5c4f\u5e55\u5feb\u7167-2018-05-24-\u4e0b\u53485.19.22-300x126.jpg 300w, https:\/\/www.yusian.com\/blog\/wp-content\/uploads\/2018\/05\/\u5c4f\u5e55\u5feb\u7167-2018-05-24-\u4e0b\u53485.19.22.jpg 600w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.yusian.com\/blog\/wp-content\/uploads\/2018\/05\/\u5c4f\u5e55\u5feb\u7167-2018-05-24-\u4e0b\u53485.19.33-300x165.jpg\" alt=\"\" width=\"600\" height=\"330\" class=\"alignnone size-medium wp-image-1184\" srcset=\"https:\/\/www.yusian.com\/blog\/wp-content\/uploads\/2018\/05\/\u5c4f\u5e55\u5feb\u7167-2018-05-24-\u4e0b\u53485.19.33-300x165.jpg 300w, https:\/\/www.yusian.com\/blog\/wp-content\/uploads\/2018\/05\/\u5c4f\u5e55\u5feb\u7167-2018-05-24-\u4e0b\u53485.19.33.jpg 600w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>2\u3001\u6f14\u793a\u5730\u5740\uff1a<a href=\"http:\/\/www.yusian.com\/jquery\/jquery_demo1.html\" rel=\"noopener noreferrer\" target=\"_blank\">http:\/\/www.yusian.com\/jquery\/jquery_demo1.html<\/a><\/p>\n<p>3\u3001\u90e8\u5206\u4ee3\u7801\uff1a<\/p>\n<pre lang=\"html\" line=\"1\"><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\r\n    <script src=\"https:\/\/cdn.bootcss.com\/jquery\/3.3.1\/jquery.min.js\"><\/script>\r\n    <title>Document<\/title>\r\n    <style>\r\n        #list{\r\n            margin: 100px auto;\r\n        }\r\n        #list,\r\n        #confirm table{\r\n            border-collapse: collapse;\r\n        }\r\n        #list td,\r\n        #list th{\r\n            border:1px solid red;\r\n            text-align: center;\r\n            padding: 10px 20px;\r\n        }\r\n        #confirm {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: rgba(0,0,0,0.6);\r\n            display: none;\r\n        }\r\n        #confirm .content{\r\n            position: relative;\r\n            display: inline-block;\r\n            border: 1px solid #999;\r\n            padding: 10px;\r\n            left: 50%;\r\n            top: 50%;\r\n            transform: translate(-50%, -50%);\r\n            border-radius: 10px;\r\n            background: #eee;\r\n            box-shadow: 0 0 25px #fff;\r\n        }\r\n        .close{\r\n            position:absolute;\r\n            padding: 5px 10px;\r\n            text-decoration: none;\r\n            color: red;\r\n            right: 10px;\r\n            top: 0;\r\n        }\r\n        #confirm td,\r\n        #confirm th{\r\n            border-bottom: 1px solid red;\r\n            text-align: left;\r\n            padding: 10px 20px;\r\n        }\r\n        #confirm td{\r\n            width: 200px;\r\n        }\r\n    <\/style>\r\n    <script>\r\n        $(()=>{\r\n            \/\/ \u8868\u683c\u57fa\u7840\u6837\u5f0f\u5904\u7406\r\n            $('#list tr').hover(function(){\r\n                $(this).css('background', 'rgba(0,0,0,0.1)')\r\n            },function(){\r\n                $(this).css('background', 'white');\r\n            });\r\n            \/\/ \u67e5\u770b\u4e8b\u4ef6\r\n            $('.show').click(function(){\r\n                let array = [];\r\n                $(this).parent().siblings().each(function(index){\r\n                    let text = $(this).text();\r\n                    array.push(text);\r\n                });\r\n                $('#confirm').show().find('td').each(function(index){\r\n                    $(this).text(array[index]);\r\n                })\r\n            });\r\n            \/\/ \u5220\u9664\u4e8b\u4ef6\r\n            $('.delete').click(function(){\r\n                $(this).parents('tr').remove();\r\n            });\r\n            \/\/ \u4fee\u6539\u4e8b\u4ef6\r\n            $('.modify').click(function(){\r\n                alert('\u6682\u672a\u5b9e\u73b0');\r\n            });\r\n            \/\/ \u5173\u95ed\u4e8b\u4ef6\r\n            $('.close, #confirm').click(function(){\r\n                $('#confirm').hide();\r\n            });\r\n            $('#confirm .content').click(function(event){\r\n                event.stopPropagation();\r\n            });\r\n        })\r\n    <\/script>\r\n<\/head>\r\n<body>\r\n    <table id=\"list\">\r\n        <tr>\r\n            <th>\u59d3\u540d<\/th>\r\n            <th>\u6027\u522b<\/th>\r\n            <th>\u5e74\u9f84<\/th>\r\n            <th>\u90ae\u7bb1<\/th>\r\n            <th>\u64cd\u4f5c<\/th>\r\n        <\/tr>\r\n        <tr>\r\n            <td>Jack<\/td>\r\n            <td>man<\/td>\r\n            <td>23<\/td>\r\n            <td>jack@gmail.com<\/td>\r\n            <td><a href=\"javascript:\" class=\"show\">\u67e5\u770b<\/a> <a href=\"javascript:\" class=\"modify\">\u4fee\u6539<\/a> <a href=\"javascript:\" class=\"delete\">\u5220\u9664<\/a><\/td>\r\n        <\/tr>\r\n        <tr>\r\n            <td>Rose<\/td>\r\n            <td>female<\/td>\r\n            <td>18<\/td>\r\n            <td>rose@gmail.com<\/td>\r\n            <td><a href=\"javascript:\" class=\"show\">\u67e5\u770b<\/a> <a href=\"javascript:\" class=\"modify\">\u4fee\u6539<\/a> <a href=\"javascript:\" class=\"delete\">\u5220\u9664<\/a><\/td>\r\n        <\/tr>\r\n        <tr>\r\n            <td>Jim<\/td>\r\n            <td>man<\/td>\r\n            <td>25<\/td>\r\n            <td>jim@gmail.com<\/td>\r\n            <td><a href=\"javascript:\" class=\"show\">\u67e5\u770b<\/a> <a href=\"javascript:\" class=\"modify\">\u4fee\u6539<\/a> <a href=\"javascript:\" class=\"delete\">\u5220\u9664<\/a><\/td>\r\n        <\/tr>\r\n        <tr>\r\n            <td>Lucy<\/td>\r\n            <td>female<\/td>\r\n            <td>20<\/td>\r\n            <td>lucy@gmail.com<\/td>\r\n            <td><a href=\"javascript:\" class=\"show\">\u67e5\u770b<\/a> <a href=\"javascript:\" class=\"modify\">\u4fee\u6539<\/a> <a href=\"javascript:\" class=\"delete\">\u5220\u9664<\/a><\/td>\r\n        <\/tr>\r\n    <\/table>\r\n\r\n    <div id=\"confirm\">\r\n        <div class=\"content\">\r\n        <a href=\"javascript:\" class=\"close\">&times;<\/a>\r\n        <table>\r\n            <tr>\r\n                <th>\u59d3\u540d<\/th>\r\n                <td><\/td>\r\n            <\/tr>\r\n            <tr>\r\n                <th>\u6027\u522b<\/th>\r\n                <td><\/td>\r\n            <\/tr>\r\n            <tr>\r\n                <th>\u5e74\u9f84<\/th>\r\n                <td><\/td>\r\n            <\/tr>\r\n            <tr>\r\n                <th>\u90ae\u7bb1<\/th>\r\n                <td><\/td>\r\n            <\/tr>\r\n        <\/table>\r\n        <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>1\u3001\u5148\u770b\u6548\u679c\u56fe\uff1a 2\u3001\u6f14\u793a\u5730\u5740\uff1ahttp:\/\/www.yusian.com\/jquery\/jquery_demo1.html 3\u3001\u90e8\u5206\u4ee3\u7801\uff1a Document \u59d3\u540d \u6027\u522b \u5e74\u9f84 \u90ae\u7bb1 \u64cd\u4f5c Jack man 23 jack@gmail.com \u67e5\u770b \u4fee\u6539 \u5220\u9664 Rose female 18 rose@gmail.com \u67e5\u770b \u4fee\u6539 \u5220\u9664 Jim man 25 jim@gmail.com \u67e5\u770b \u4fee\u6539 \u5220\u9664 Lucy female 20 lucy@gmail.com \u67e5\u770b \u4fee\u6539 \u5220\u9664 &times; \u59d3\u540d \u6027\u522b \u5e74\u9f84 \u90ae\u7bb1<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,28],"tags":[66,73,82],"class_list":["post-1182","post","type-post","status-publish","format-standard","hentry","category-h5","category-javascript","tag-html5","tag-jquery","tag-82"],"_links":{"self":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/posts\/1182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/comments?post=1182"}],"version-history":[{"count":0,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/posts\/1182\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/media?parent=1182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/categories?post=1182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/tags?post=1182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}