127.0.0.1:9200<br>URL: http://127.0.0.1:9200/likecs_art_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [match] => Array
                (
                    [text] => Array
                        (
                            [query] => 从零开始学 Web 之 jQuery（二）获取和操作元素的属性
                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [text] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [size] => 8
    [from] => 0
)
</pre>RESPONSE:<pre>string(9394) "{"took":70,"timed_out":false,"_shards":{"total":1,"successful":1,"skipped":0,"failed":0},"hits":{"total":{"value":10000,"relation":"gte"},"max_score":62.619125,"hits":[{"_index":"likecs_art_db","_type":"_doc","_id":"24059","_score":62.619125,"_source":{"id":"24059","text":"\u4ece\u96f6\u5f00\u59cb\u5b66 Web \u4e4b jQuery\uff08\u4e8c\uff09\u83b7\u53d6\u548c\u64cd\u4f5c\u5143\u7d20\u7684\u5c5e\u6027","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"lvonve","tagsname":null,"tagsid":"","catesname":"","catesid":"","createtime":"1639051033"},"highlight":{"text":["#em#从#/em##em#零#/em##em#开#/em##em#始#/em##em#学#/em# #em#Web#/em# #em#之#/em# #em#jQuery#/em#（#em#二#/em#）#em#获#/em##em#取#/em##em#和#/em##em#操#/em##em#作#/em##em#元#/em##em#素#/em##em#的#/em##em#属#/em##em#性#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"24634","_score":47.208336,"_source":{"id":"24634","text":"\u4ece\u96f6\u5f00\u59cb\u5b66 Web \u4e4b jQuery\uff08\u4e94\uff09\u64cd\u4f5c\u5143\u7d20\u5176\u4ed6\u5c5e\u6027\uff0c\u4e3a\u5143\u7d20\u7ed1\u5b9a\u4e8b\u4ef6","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"lvonve","tagsname":"jQuery","tagsid":"[\"1090\"]","catesname":"Web","catesid":"[\"496\"]","createtime":"1531207729"},"highlight":{"text":["#em#从#/em##em#零#/em##em#开#/em##em#始#/em##em#学#/em# #em#Web#/em# #em#之#/em# #em#jQuery#/em#（五）#em#操#/em##em#作#/em##em#元#/em##em#素#/em#其他#em#属#/em##em#性#/em#，为#em#元#/em##em#素#/em#绑定事件"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"21670","_score":45.424107,"_source":{"id":"21670","text":"\u4ece\u96f6\u5f00\u59cb\u5b66 Web \u4e4b DOM\uff08\u4e8c\uff09\u5bf9\u6837\u5f0f\u7684\u64cd\u4f5c\uff0c\u83b7\u53d6\u5143\u7d20\u7684\u65b9\u5f0f","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"lvonve","tagsname":"DOM","tagsid":"[\"1084\"]","catesname":"Web","catesid":"[\"496\"]","createtime":"1528973664"},"highlight":{"text":["#em#从#/em##em#零#/em##em#开#/em##em#始#/em##em#学#/em# #em#Web#/em# #em#之#/em# DOM（#em#二#/em#）对样式#em#的#/em##em#操#/em##em#作#/em#，#em#获#/em##em#取#/em##em#元#/em##em#素#/em##em#的#/em#方式"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"203371778","_score":43.97623,"_source":{"id":"203371778","text":"\u4ece\u96f6\u5f00\u59cb\u5b66\u4e60jQuery (\u56db) \u4f7f\u7528jQuery\u64cd\u4f5c\u5143\u7d20\u7684\u5c5e\u6027\u4e0e\u6837\u5f0f","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1631248438"},"highlight":{"text":["#em#从#/em##em#零#/em##em#开#/em##em#始#/em##em#学#/em#习#em#jQuery#/em# (四) 使用#em#jQuery#/em##em#操#/em##em#作#/em##em#元#/em##em#素#/em##em#的#/em##em#属#/em##em#性#/em#与样式"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"26710","_score":41.729527,"_source":{"id":"26710","text":"\u4ece\u96f6\u5f00\u59cb\u5b66 Web \u4e4b HTML5\uff08\u4e8c\uff09\u8868\u5355\uff0c\u591a\u5a92\u4f53\u65b0\u589e\u5185\u5bb9\uff0c\u65b0\u589e\u83b7\u53d6\u64cd\u4f5c\u5143\u7d20\uff0c\u81ea\u5b9a\u4e49\u5c5e\u6027","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"lvonve","tagsname":"html5","tagsid":"[\"377\"]","catesname":"Web","catesid":"[\"496\"]","createtime":"1532515982"},"highlight":{"text":["#em#从#/em##em#零#/em##em#开#/em##em#始#/em##em#学#/em# #em#Web#/em# #em#之#/em# HTML5（#em#二#/em#）表单，多媒体新增内容，新增#em#获#/em##em#取#/em##em#操#/em##em#作#/em##em#元#/em##em#素#/em#，自定义#em#属#/em##em#性#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"947325","_score":40.62554,"_source":{"id":"947325","text":"jQuery\u83b7\u53d6\u548c\u64cd\u4f5c\u5143\u7d20\u7684\u5c5e\u6027\u548cCSS\u6837\u5f0f - liangjunquan","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"liangjq","tagsname":"","tagsid":"","catesname":"","catesid":"","createtime":"1639043330"},"highlight":{"text":["#em#jQuery#/em##em#获#/em##em#取#/em##em#和#/em##em#操#/em##em#作#/em##em#元#/em##em#素#/em##em#的#/em##em#属#/em##em#性#/em##em#和#/em#CSS样式 - liangjunquan"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"24263","_score":39.48874,"_source":{"id":"24263","text":"\u4ece\u96f6\u5f00\u59cb\u5b66 Web \u4e4b jQuery\uff08\u4e09\uff09\u5143\u7d20\u64cd\u4f5c\uff0c\u94fe\u5f0f\u7f16\u7a0b\uff0c\u52a8\u753b\u65b9\u6cd5","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"lvonve","tagsname":"jQuery","tagsid":"[\"1090\"]","catesname":"Web","catesid":"[\"496\"]","createtime":"1530948343"},"highlight":{"text":["#em#从#/em##em#零#/em##em#开#/em##em#始#/em##em#学#/em# #em#Web#/em# #em#之#/em# #em#jQuery#/em#（三）#em#元#/em##em#素#/em##em#操#/em##em#作#/em#，链式编程，动画方法"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"24510","_score":39.1346,"_source":{"id":"24510","text":"\u4ece\u96f6\u5f00\u59cb\u5b66 Web \u4e4b jQuery\uff08\u56db\uff09\u5143\u7d20\u7684\u521b\u5efa\u6dfb\u52a0\u4e0e\u5220\u9664\uff0c\u81ea\u5b9a\u4e49\u5c5e\u6027","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"lvonve","tagsname":"jQuery","tagsid":"[\"1090\"]","catesname":"Web","catesid":"[\"496\"]","createtime":"1531134151"},"highlight":{"text":["#em#从#/em##em#零#/em##em#开#/em##em#始#/em##em#学#/em# #em#Web#/em# #em#之#/em# #em#jQuery#/em#（四）#em#元#/em##em#素#/em##em#的#/em#创建添加与删除，自定义#em#属#/em##em#性#/em#"]}}]}}"
</pre>127.0.0.1:9200<br>URL: http://127.0.0.1:9200/likecs_art_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [match] => Array
                (
                    [text] => Array
                        (
                            [query] => 从零开始学 Web 之 jQuery（二）获取和操作元素的属性
                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [text] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [size] => 8
    [from] => 8
)
</pre>RESPONSE:<pre>string(7928) "{"took":66,"timed_out":false,"_shards":{"total":1,"successful":1,"skipped":0,"failed":0},"hits":{"total":{"value":10000,"relation":"gte"},"max_score":62.619125,"hits":[{"_index":"likecs_art_db","_type":"_doc","_id":"672046","_score":37.35496,"_source":{"id":"672046","text":"jQuery\u64cd\u4f5c\u5143\u7d20\u7684class\u5c5e\u6027","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"qlqwjy","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1640971732"},"highlight":{"text":["#em#jQuery#/em##em#操#/em##em#作#/em##em#元#/em##em#素#/em##em#的#/em#class#em#属#/em##em#性#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"947326","_score":37.35496,"_source":{"id":"947326","text":"JQuery\u64cd\u4f5c\u5143\u7d20\u7684style\u5c5e\u6027","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"tv151579","tagsname":null,"tagsid":"","catesname":"","catesid":"","createtime":"1639043332"},"highlight":{"text":["#em#JQuery#/em##em#操#/em##em#作#/em##em#元#/em##em#素#/em##em#的#/em#style#em#属#/em##em#性#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"870627","_score":36.789707,"_source":{"id":"870627","text":"jQuery\u6355\u83b7-\u83b7\u53d6DOM\u5143\u7d20\u5185\u5bb9\u548c\u5c5e\u6027","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"mwxz","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1638084782"},"highlight":{"text":["#em#jQuery#/em#捕#em#获#/em#-#em#获#/em##em#取#/em#DOM#em#元#/em##em#素#/em#内容#em#和#/em##em#属#/em##em#性#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"885166","_score":36.02215,"_source":{"id":"885166","text":"\u7528JQuery\u64cd\u4f5c\u5143\u7d20\u7684style\u5c5e\u6027","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"telwanggs","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1639907331"},"highlight":{"text":["用#em#JQuery#/em##em#操#/em##em#作#/em##em#元#/em##em#素#/em##em#的#/em#style#em#属#/em##em#性#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"672073","_score":35.92699,"_source":{"id":"672073","text":"jquery\u83b7\u53d6\u3001\u6539\u53d8\u5143\u7d20\u5c5e\u6027\u503c","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"panmy","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1635802161"},"highlight":{"text":["#em#jquery#/em##em#获#/em##em#取#/em#、改变#em#元#/em##em#素#/em##em#属#/em##em#性#/em#值"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"881775","_score":35.92699,"_source":{"id":"881775","text":"jquery\u83b7\u53d6\u3001\u6539\u53d8\u5143\u7d20\u5c5e\u6027\u503c","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"ios9","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1638187003"},"highlight":{"text":["#em#jquery#/em##em#获#/em##em#取#/em#、改变#em#元#/em##em#素#/em##em#属#/em##em#性#/em#值"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"3576","_score":35.71241,"_source":{"id":"3576","text":"\u83b7\u53d6\u4f2a\u5143\u7d20\u7684\u5c5e\u6027\u548c\u6539\u53d8\u4f2a\u5143\u7d20\u7684\u5c5e\u6027","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"ranyonsue","tagsname":"JS|HTML\/CSS","tagsid":"[\"159\",\"2472\"]","catesname":"HTML\/CSS|JS","catesid":"[\"883\",\"352\"]","createtime":"1513841155"},"highlight":{"text":["#em#获#/em##em#取#/em#伪#em#元#/em##em#素#/em##em#的#/em##em#属#/em##em#性#/em##em#和#/em#改变伪#em#元#/em##em#素#/em##em#的#/em##em#属#/em##em#性#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"772937","_score":35.658573,"_source":{"id":"772937","text":"jQuery\u57fa\u7840\u4e4b\u83b7\u53d6\u548c\u8bbe\u7f6e\u6807\u7b7e\u5143\u7d20\u5c5e\u6027","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"chao666","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1636759309"},"highlight":{"text":["#em#jQuery#/em#基础#em#之#/em##em#获#/em##em#取#/em##em#和#/em#设置标签#em#元#/em##em#素#/em##em#属#/em##em#性#/em#"]}}]}}"
</pre>127.0.0.1:9200<br>URL: http://192.168.101.128/searchcore/index.php/cihere_cn_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [match] => Array
                (
                    [title] => Array
                        (
                            [query] => 从零开始学 Web 之 jQuery（二）获取和操作元素的属性
                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [title] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [from] => 0
)
</pre>RESPONSE:<pre>bool(false)
</pre>127.0.0.1:9200<br>URL: http://127.0.0.1:9200/likecs_down_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [bool] => Array
                (
                    [must] => Array
                        (
                            [0] => Array
                                (
                                    [match] => Array
                                        (
                                            [title] => Array
                                                (
                                                    [query] => 从零开始学 Web 之 jQuery（二）获取和操作元素的属性
                                                )

                                        )

                                )

                        )

                    [must_not] => Array
                        (
                            [0] => Array
                                (
                                    [term] => Array
                                        (
                                            [cate1] => 电子书籍
                                        )

                                )

                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [title] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [size] => 5
    [from] => 0
)
</pre>RESPONSE:<pre>string(3056) "{"took":14,"timed_out":false,"_shards":{"total":1,"successful":1,"skipped":0,"failed":0},"hits":{"total":{"value":10000,"relation":"gte"},"max_score":30.173265,"hits":[{"_index":"likecs_down_db","_type":"_doc","_id":"56675","_score":30.173265,"_source":{"id":"56675","title":"C# \u83b7\u53d6\u548c\u8bbe\u7f6e\u6587\u4ef6\u5c5e\u6027\u7684\u6e90\u4ee3\u7801","spidertime":"1623062820","contenttime":"1674273570","tag":"\u6587\u4ef6\u5c5e\u6027","cate1":"\u6e90\u7801\u4e0b\u8f7d","cate2":"\u5176\u5b83\u6e90\u7801","attr1":"12KB"},"highlight":{"title":["C# #em#获#/em##em#取#/em##em#和#/em#设置文件#em#属#/em##em#性#/em##em#的#/em#源代码"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"59542","_score":28.307129,"_source":{"id":"59542","title":"\u4ece\u96f6\u5f00\u59cb\u5b66\u4e60GitHub\u7cfb\u5217 PDF\u7248","spidertime":"1623066941","contenttime":"1670044352","pageimage":"https:\/\/img.jbzj.com\/file_images\/article\/201808\/2018824163303208.jpg?2018724163338","tag":"GitHub|\u5b66\u4e60GitHub","cate1":"\u7535\u5b50\u4e66\u7c4d","cate2":"\u6570\u636e\u5e93XML","cate3":"\u6570\u636e\u5e93\u5176\u5b83","attr1":"8.64MB"},"highlight":{"title":["#em#从#/em##em#零#/em##em#开#/em##em#始#/em##em#学#/em#习GitHub系列 PDF版"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"71877","_score":28.045197,"_source":{"id":"71877","title":"\u6027\u80fd\u6d4b\u8bd5\u4ece\u96f6\u5f00\u59cb\u2015\u2015LoadRunner\u5165\u95e8 2.68MB","spidertime":"1623127685","contenttime":"1677366237","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/litimg\/160906\/14242A93032.png","tag":"\u6027\u80fd\u6d4b\u8bd5|LoadRunner\u5165\u95e8|loadrunner","cate1":"\u7535\u5b50\u4e66\u7c4d","cate2":"\u7535\u8111\u6280\u672f","attr1":"2.68MB"},"highlight":{"title":["#em#性#/em#能测试#em#从#/em##em#零#/em##em#开#/em##em#始#/em#――LoadRunner入门 2.68MB"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"36852","_score":28.045197,"_source":{"id":"36852","title":"\u6027\u80fd\u6d4b\u8bd5\u4ece\u96f6\u5f00\u59cb\u2015\u2015LoadRunner\u5165\u95e8 2.68MB","spidertime":"1622962058","contenttime":"1622962058","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/litimg\/160906\/14242A93032.png","tag":"\u6027\u80fd\u6d4b\u8bd5|LoadRunner\u5165\u95e8|loadrunner","cate1":"\u7535\u5b50\u4e66\u7c4d","cate2":"\u7535\u8111\u6280\u672f","attr1":"2.68MB"},"highlight":{"title":["#em#性#/em#能测试#em#从#/em##em#零#/em##em#开#/em##em#始#/em#――LoadRunner入门 2.68MB"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"58100","_score":27.105345,"_source":{"id":"58100","title":"\u4ece\u96f6\u5f00\u59cb\u5b66\u4e60\u6b63\u5219\u8868\u8fbe\u5f0f(delphi)","spidertime":"1623064934","contenttime":"1673583596","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/litimg\/140125\/22151513464.gif","tag":"\u6b63\u5219\u8868\u8fbe\u5f0f","cate1":"\u7535\u5b50\u4e66\u7c4d","cate2":"\u6b63\u5219\u8868\u8fbe\u5f0f","attr1":"1.08KB"},"highlight":{"title":["#em#从#/em##em#零#/em##em#开#/em##em#始#/em##em#学#/em#习正则表达式(delphi)"]}}]}}"
</pre><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="zh-CN" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <title>从零开始学 Web 之 jQuery（二）获取和操作元素的属性 - 爱码网</title>
     
<meta name="keywords" content="从零开始学 Web 之 jQuery（二）获取和操作元素的属性" />
<meta name="description" content="目录ECharts异步加载ECharts
数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。
chart.setOption({
    color: [" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/statics/css/base.css?v=2.7" />
<script src="/statics/js/detail.min.js?v=2.2"></script>   
<script>
   $(document).ready(function () { 
		$("img").error(function () {
			$(this).hide();
		}); 
	}); 
</script>
</head>
<body class="home-template dtpg">
<nav class="main-nav clearfix">
    <div class="inner">
        <ul class="nav">
            <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/" title="爱码网">首页</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/1.html" title="前端技术">前端技术</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/9.html" title="编程语言">编程语言</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/31.html" title="人工智能">人工智能</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/41.html" title="运维知识">运维知识</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/52.html" title="资源下载">资源下载</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/68.html" title="常用小工具">常用小工具</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/72.html" title="技术问答">技术问答</a></li>
                    </ul>            
	 
    </div>
</nav><div class="site-wrapper">
 
    <header style="height: auto;padding: 10px 0px;" class="main-header">
        <div style="max-width:910px" class="main-header-content inner">
                        <h1 class="page-title"><a href="/show-24059.html" title="从零开始学 Web 之 jQuery（二）获取和操作元素的属性">从零开始学 Web 之 jQuery（二）获取和操作元素的属性</a></h1>
            
        </div>

    </header>
    <main class="content" role="main">
	

        <div class="leftbox">
    <article class="post tag-uifont tag-webview">
        <header class="post-header">
            <footer class="tc"> lvonve 
                <time class="post-date" datetime="2021-12-09">2021-12-09</time>
            </footer>
        </header>
        <section class="post-content">
            <div class="contentbef">  
                  
                              </div>

            
                                    
    <!--done-->
    <div id="topics">
        <div class="post">
            
            
            <div class="postBody">
                <div id="likecs_post_body" class="blogpost-body cnblogs-markdown">
<blockquote>
<p>大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......</p>
<ul>
<li>github：<a href="https://github.com/Daotin/Web" target="_blank" rel="nofollow">https://github.com/Daotin/Web</a>
</li>
<li>微信公众号：<a href="https://github.com/Daotin/pic/raw/master/wx.jpg" target="_blank" rel="nofollow">Web前端之巅</a>
</li>
<li>博客园：<a href="/default/index/url?u=aHR0cDovL3d3dy5jbmJsb2dzLmNvbS9sdm9udmUv" target="_blank" rel="noopener">http://www.cnblogs.com/lvonve/</a>
</li>
<li>CSDN：<a href="https://blog.csdn.net/lvonve/" target="_blank" rel="nofollow">https://blog.csdn.net/lvonve/</a>
</li>
</ul>
<p>在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！</p>
</blockquote>
<p><img src="/default/index/img?u=aHR0cHM6Ly9naXRodWIuY29tL0Rhb3Rpbi9waWMvcmF3L21hc3Rlci9mZ3gucG5n" alt="" loading="lazy"></p>
<h2 id="一jquery获取和操作元素属性">一、jQuery获取和操作元素属性</h2>
<p>DOM中有很多方式获取元素，比如通过id，通过标签名，通过类名，通过name的值，通过选择器等方式。</p>
<p><strong>在 jQuery 中就只有一种方式：<code>$("选择器")</code></strong></p>
<h3 id="1id-选择器">1、id 选择器</h3>
<p><strong>语法：</strong> <code> $("#id选择器的值")</code></p>
<pre><code class="language-js">$(function () {// 页面加载
  $("#btn").click(function () {
    console.log($(this).val());
    $(this).val("改变按钮");
    // this.value = "改变按钮";
  });
});
</code></pre>
<blockquote>
<p>注意：this 是DOM对象。</p>
<p>this.value = "改变按钮"; // 是DOM的写法，没问题。</p>
<p><strong>PS：jQuery 中使用 <code>jQuery对象.val("内容")</code> 来设置表单标签的 value 属性。</strong></p>
</blockquote>
<h3 id="2标签选择器">2、标签选择器</h3>
<p><strong>语法：</strong> <code>$("标签名")</code></p>
<pre><code class="language-js">$(function () {// 页面加载
  $("#btn").click(function () {
    $("p").text("桃花依旧笑春风");
  });
});
</code></pre>
<blockquote>
<p><strong>1、jQuery 中的 <code>.text()</code> ，如果括号中没有值的话，是获取文本内容；如果有值的话，就是设置文本内容。</strong></p>
<p>2、 $("p") 是获取所有的 p 标签，然后全部设置文本内容，我们并没有循环设置，但是全部的 p 标签的文本内容都改变了，这是 jQuery 内部自动循环了，这就是隐式迭代。</p>
</blockquote>
<h3 id="3类选择器">3、类选择器</h3>
<p><strong>语法：</strong><code>$(".类型选择器")</code>  ，注意前面的点。</p>
<pre><code class="language-js">$(function () { // 页面加载
  $("#btn").click(function () {
    $(".cls").css("border", "1px solid red");
  });
});
</code></pre>
<blockquote>
<p>点击按钮设置应用了 cls 类选择器的标签的边框样式。</p>
<p><strong>PS：jQuery中使用 <code>jQuery对象.css("属性":"值");</code>  的方式设置标签的样式。</strong></p>
</blockquote>
<h3 id="4并集选择器">4、并集选择器</h3>
<p><strong>语法：</strong><code>$("div,p,span")</code>，中间使用逗号隔开。</p>
<blockquote>
<p>如果上面的 div 有 id 选择器 dv；span 有类选择器 cls；</p>
<p>上面的写法也可以这样写： <code>$("#dv, p, .cls")</code></p>
</blockquote>
<h3 id="5交集选择器">5、交集选择器</h3>
<p><strong>语法：</strong><code>$("div.cls")</code></p>
<blockquote>
<p>标签名 + 类样式的方式。</p>
</blockquote>
<p><strong>小总结：jQuery中的一些方法</strong></p>
<pre><code class="language-js">val(); // 获取或设置表单标签中的 value 值。
css(); // 设置元素的 css 样式属性值。
text(); // 获取或设置标签的文本内容----相当于DOM中的innerText
html(); // 获取或设置标签的html内容----相当于DOM中的innerHTML
</code></pre>
<h3 id="6后代层次选择器">6、后代（层次）选择器</h3>
<p><strong>语法：</strong><code>$("div ul span")</code></p>
<blockquote>
<p>选择 div 下面所有 ul 下的所有的 span 标签，不包括 div 下面的 span，必须在 ul 里面。</p>
</blockquote>
<h3 id="7子代选择器">7、子代选择器</h3>
<p><strong>语法：</strong><code>$("div&gt;span")</code></p>
<blockquote>
<p>选择 div 的直接下一代的所有span，不能隔代。</p>
</blockquote>
<h3 id="8兄弟选择器">8、兄弟选择器</h3>
<p><strong>语法：</strong><code>$("div~span")</code></p>
<blockquote>
<p>选择的是 div <strong>后面</strong>的所有兄弟标签为 span 的标签。</p>
</blockquote>
<h3 id="9直接兄弟选择器">9、直接兄弟选择器</h3>
<p><strong>语法：</strong><code>$("div+span")</code></p>
<blockquote>
<p>选择的是div <strong>后面</strong>的直接兄弟标签，如果这个直接兄弟为 span 标签则选中，如果为其他标签则不选中。</p>
</blockquote>
<h3 id="91案例各行变色">9.1、案例：各行变色</h3>
<pre><code class="language-html">// body 主要内容
&lt;input type="button" value="按钮" id="btn"&gt;
&lt;div&gt;
    &lt;ul&gt;
        &lt;li&gt;1&lt;/li&gt;
        &lt;li&gt;2&lt;/li&gt;
        &lt;li&gt;3&lt;/li&gt;
        &lt;li&gt;4&lt;/li&gt;
        &lt;li&gt;5&lt;/li&gt;
        &lt;li&gt;6&lt;/li&gt;
        &lt;li&gt;7&lt;/li&gt;
        &lt;li&gt;8&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

// jQuery 代码
$(function () {
  $("#btn").click(function () {
    $("div li:odd").css("backgroundColor", "red");
    $("div li:even").css("backgroundColor", "yellow");
  });
});
</code></pre>
<blockquote>
<p><code>:odd</code> 选择第奇数个 li 标签。</p>
<p><code>：even</code> 选择第偶数个 li 标签。</p>
</blockquote>
<h3 id="92案例下拉菜单">9.2、案例：下拉菜单</h3>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;style&gt;
        * {
            margin: 0 ;
            padding: 0;
        }
        li{
            list-style-type: none;
        }
        a {
            text-decoration: none;
        }
        #dv&gt;ul&gt;li {
            float: left;
            margin: 0 10px;
            width: 50px;
            height: 20px;
            background-color: pink;
        }

        #dv&gt;ul&gt;li ul {
            display: none;
        }

        #dv&gt;ul&gt;li li {
            background-color: #ff486b;
        }

    &lt;/style&gt;

    &lt;script src="jquery-1.12.4.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(function () {
            // 鼠标进入
            $("#dv&gt;ul&gt;li").mouseenter(function () {
                $(this).children("ul").stop().show(200);
            });
            // 鼠标离开
            $("#dv&gt;ul&gt;li").mouseleave(function () {
                $(this).children("ul").stop().hide(200);
            });
        });
    &lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;!--&lt;input type="button" value="按钮" id="btn"&gt;--&gt;
&lt;div id="dv"&gt;
    &lt;ul&gt;
        &lt;li&gt;
            &lt;a href="javascript:void(0);"&gt;周杰伦&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;1&lt;/li&gt;
                &lt;li&gt;2&lt;/li&gt;
                &lt;li&gt;3&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;a href="javascript:void(0);"&gt;林俊杰&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;1&lt;/li&gt;
                &lt;li&gt;2&lt;/li&gt;
                &lt;li&gt;3&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;a href="javascript:void(0);"&gt;陈奕迅&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;1&lt;/li&gt;
                &lt;li&gt;2&lt;/li&gt;
                &lt;li&gt;3&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<blockquote>
<p>1、jQuery中鼠标进入事件是：<code>mouseenter</code>；鼠标离开事件是：<code>mouseleave</code></p>
<p>2、css 中的 <code>display:none|block</code> 对应的隐藏和显示在 jQuery 中可以使用方法：show() 和  hide();</p>
<p>3、show 和 hide 方法中可以添加参数，数字表示毫秒。表示的显示和隐藏的动画效果。</p>
<p>4、stop 方法表示在显示和隐藏之前先清除之前的动画效果，防止鼠标操作过快，动画的显示跟不上操作。</p>
</blockquote>
<h3 id="10过滤选择器">10、过滤选择器</h3>
<p>这类选择器都带有冒号。</p>
<pre><code class="language-js">:eq(index) // 选择一个给定索引值的元素
:odd       // 选择索引为奇数的元素
:even      // 选择索引为偶数的元素
</code></pre>
<p>用法：</p>
<pre><code class="language-js">$("li:eq(2)") // 匹配li元素中，索引为2的元素
$("li:odd") // 匹配li元素中，索引为奇数的元素
$("li:even") // 匹配li元素中，索引为偶数的元素
</code></pre>
<h3 id="101案例淘宝精品展示">10.1、案例：淘宝精品展示</h3>
<p>效果：鼠标进入标签，标签的背景颜色改变，并且切换到对应的图片显示。</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        #dv {
            margin-left: 500px;
            margin-top: 200px;
        }
        .ul1 li, .ul3 li {
            width: 50px;
            height: 30px;
            /*background-color: #24bcff;*/
            border: 1px solid red;
            text-align: center;
            margin-top: -1px;
        }

        a {
            text-decoration: none;
        }
        ul {
            float: left;
        }

        img {
            width: 200px;
            height: 93px;
        }
        .ul2 {
            width: 200px;
            height: 93px;
            overflow: hidden;
        }
        .ul2 li {
            float: left;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="dv"&gt;
    &lt;ul class="ul1"&gt;
        &lt;li&gt;&lt;a href="javascript:void(0);"&gt;img1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="javascript:void(0);"&gt;img2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="javascript:void(0);"&gt;img3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class="ul2"&gt;
        &lt;li&gt;&lt;img src="images/img1.jpg"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="images/img2.jpg"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="images/img3.jpg"&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;


&lt;script src="common.js"&gt;&lt;/script&gt;
&lt;script src="jquery-1.12.4.min.js"&gt;&lt;/script&gt;
&lt;script&gt;

    $(function () {

        // 左li 鼠标进入
        $(".ul1&gt;li").mouseenter(function () {
            $(this).css("backgroundColor", "purple");
            // console.log($(this).index());

            // 隐藏所有的图片
            $(".ul2&gt;li").hide();
            // 显示丢应的图片
            $(".ul2&gt;li:eq("+ $(this).index() +")").show();
        });

        // 左li 鼠标离开
        $(".ul1&gt;li").mouseleave(function () {
            $(this).css("backgroundColor", "");
        });
    });
    
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<blockquote>
<p>1、<code>$(this).index()</code> 可以获取当前 li 的索引。</p>
<p>2、<code> :eq()</code>  选择器：匹配一个给定索引值的元素。</p>
<p>3、<code>.hide()</code> 隐藏一个元素； <code>.show()</code> 显示一个元素。</p>
</blockquote>
<h3 id="11筛选选择器">11、筛选选择器</h3>
<table>
<thead><tr>
<th style="text-align: left">名称</th>
<th>用法</th>
<th>描述</th>
</tr></thead>
<tbody>
<tr>
<td style="text-align: left">children(选择器)</td>
<td>$("ul").children("li");</td>
<td>（子类选择器）相当于$("ul&gt;li")</td>
</tr>
<tr>
<td style="text-align: left">find(选择器)</td>
<td>$("ul").find("li");</td>
<td>（后代选择器）相当于$("ul li")</td>
</tr>
<tr>
<td style="text-align: left">eq(index)</td>
<td>$("li").eq(2)</td>
<td>相当于 $("li:eq(2)");</td>
</tr>
<tr>
<td style="text-align: left">parent()</td>
<td>$("#first").parent();</td>
<td>查找父亲</td>
</tr>
<tr>
<td style="text-align: left">next()</td>
<td>$("li").next("li");</td>
<td>查找下一个兄弟节点</td>
</tr>
<tr>
<td style="text-align: left">prev()</td>
<td>$("li").prev("li");</td>
<td>查找上一个兄弟节点</td>
</tr>
<tr>
<td style="text-align: left">nextAll()</td>
<td>$("li").nextAll("li");</td>
<td>查找后面所有的兄弟节点</td>
</tr>
<tr>
<td style="text-align: left">prevAll()</td>
<td>$("li").prevAll("li");</td>
<td>查找上面所有的兄弟节点</td>
</tr>
<tr>
<td style="text-align: left">siblings(选择器)</td>
<td>$("#first").siblings("li");</td>
<td>查找除自身之外的所有兄弟节点</td>
</tr>
</tbody>
</table>
<blockquote>
<p>当 next， prev 系列的方法，如果没写参数，则查找所有的兄弟节点；如果有参数，则查找所有兄弟节点中的指定元素。</p>
</blockquote>
<p><img src="/default/index/img?u=aHR0cHM6Ly9naXRodWIuY29tL0Rhb3Rpbi9waWMvcmF3L21hc3Rlci9mZ3gucG5n" alt="" loading="lazy"></p>

</div>


            </div>
            
        </div>
	    
	    
    </div>
<!--end: topics 文章、评论容器-->
 
                    
            
                <div style="margin-top: 10px;">
                  </div> 
        </section>
	 
        <footer class="post-footer">
            <section class="author">
                                <p>分类：</p> 
                                                                <p>技术点：</p>
                                            </section>
        </footer>
        <p class="mt10">相关文章：</p>
        <div style="width: 100%;" class="contentcard">
      
            <div style="width: 100%;height: auto;" class="carditem litem clearfix"> 
                    <ul style="padding-left: 0rem;" class="cardcont">
                                                    <li>
                                <a  title="jQuery操作元素的class属性" href='/show-672046.html' target="_blank"></a> 
                                <span>2022-01-01</span>
                            </li>
                                                        <li>
                                <a  title="JQuery操作元素的style属性" href='/show-947326.html' target="_blank"></a> 
                                <span>2021-12-09</span>
                            </li>
                                                        <li>
                                <a  title="jQuery捕获-获取DOM元素内容和属性" href='/show-870627.html' target="_blank"></a> 
                                <span>2021-11-28</span>
                            </li>
                                                        <li>
                                <a  title="用JQuery操作元素的style属性" href='/show-885166.html' target="_blank"></a> 
                                <span>2021-12-19</span>
                            </li>
                                                        <li>
                                <a  title="jquery获取、改变元素属性值" href='/show-672073.html' target="_blank"></a> 
                                <span>2021-11-02</span>
                            </li>
                                                        <li>
                                <a  title="获取伪元素的属性和改变伪元素的属性" href='/show-3576.html' target="_blank"></a> 
                                <span>2017-12-21</span>
                            </li>
                                                        <li>
                                <a  title="jQuery基础之获取和设置标签元素属性" href='/show-772937.html' target="_blank"></a> 
                                <span>2021-11-13</span>
                            </li>
                                                </ul>
               </div>   
         </div>
    </article>

  

</div>

<div class="rigthbox contentcard mt10">
 
          <div style="height: auto;" class="carditem litem">
    <div class="cardtit">猜你喜欢 </div>
        <ul class="cardcont">
                                 <li>
                    <a title="从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件" href="/show-24634.html" target="_blank"></a> 
                    <span>2018-07-10</span>
                </li>
                                     <li>
                    <a title="从零开始学 Web 之 DOM（二）对样式的操作，获取元素的方式" href="/show-21670.html" target="_blank"></a> 
                    <span>2018-06-14</span>
                </li>
                                     <li>
                    <a title="从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式" href="/show-203371778.html" target="_blank"></a> 
                    <span>2021-09-10</span>
                </li>
                                     <li>
                    <a title="从零开始学 Web 之 HTML5（二）表单，多媒体新增内容，新增获取操作元素，自定义属性" href="/show-26710.html" target="_blank"></a> 
                    <span>2018-07-25</span>
                </li>
                                     <li>
                    <a title="jQuery获取和操作元素的属性和CSS样式 - liangjunquan" href="/show-947325.html" target="_blank"></a> 
                    <span>2021-12-09</span>
                </li>
                                     <li>
                    <a title="从零开始学 Web 之 jQuery（三）元素操作，链式编程，动画方法" href="/show-24263.html" target="_blank"></a> 
                    <span>2018-07-07</span>
                </li>
                                     <li>
                    <a title="从零开始学 Web 之 jQuery（四）元素的创建添加与删除，自定义属性" href="/show-24510.html" target="_blank"></a> 
                    <span>2018-07-09</span>
                </li>
                            </ul>
   </div> 

<div style="height: auto;" class="carditem litem">
    <div class="cardtit">相关资源 </div>
        <ul class="cardcont">
              
                                         <li>
                        <a title="C# 获取和设置文件属性的源代码下载" href="/down-56675.html" target="_blank">下载</a> 
                        <span>2023-01-21</span>
                    </li>
                                             <li>
                        <a title="从零开始学习GitHub系列 PDF版下载" href="/down-59542.html" target="_blank">下载</a> 
                        <span>2022-12-03</span>
                    </li>
                                             <li>
                        <a title="性能测试从零开始――LoadRunner入门 2.68MB下载" href="/down-71877.html" target="_blank">下载</a> 
                        <span>2023-02-26</span>
                    </li>
                                             <li>
                        <a title="从零开始学习正则表达式(delphi)下载" href="/down-58100.html" target="_blank">下载</a> 
                        <span>2023-01-13</span>
                    </li>
                                </ul>
   </div>
   
    <div style="height: auto;" class="carditem litem">
     <div class="cardtit">相似解决方案 </div>
         <ul class="cardcont">
                          </ul>
    </div>
  
   <div style="height: auto;background-color: #ddd;text-align: center;" class="carditem litem">
    <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5446233687289962" data-ad-slot="2607637140"  data-ad-format="auto"  data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div> 
   <div  style="height: auto;" class="carditem litem mt20">
    <div class="cardtit">热门标签  </div>
    <div class="tagbox">
                    <a target="_blank" title="Java" href="/default/index/tags?cid=164&cname=Java" >Java</a>
                        <a target="_blank" title="Python" href="/default/index/tags?cid=367&cname=Python" >Python</a>
                        <a target="_blank" title="linux" href="/default/index/tags?cid=274&cname=linux" >linux</a>
                        <a target="_blank" title="javascript" href="/default/index/tags?cid=169&cname=javascript" >javascript</a>
                        <a target="_blank" title="Mysql" href="/default/index/tags?cid=237&cname=Mysql" >Mysql</a>
                        <a target="_blank" title="C#" href="/default/index/tags?cid=187&cname=C%23" >C#</a>
                        <a target="_blank" title="Docker" href="/default/index/tags?cid=243&cname=Docker" >Docker</a>
                        <a target="_blank" title="算法" href="/default/index/tags?cid=344&cname=%E7%AE%97%E6%B3%95" >算法</a>
                        <a target="_blank" title="前端" href="/default/index/tags?cid=160&cname=%E5%89%8D%E7%AB%AF" >前端</a>
                        <a target="_blank" title="SpringBoot" href="/default/index/tags?cid=168&cname=SpringBoot" >SpringBoot</a>
                        <a target="_blank" title="Redis" href="/default/index/tags?cid=227&cname=Redis" >Redis</a>
                        <a target="_blank" title="Vue" href="/default/index/tags?cid=236&cname=Vue" >Vue</a>
                        <a target="_blank" title="spring" href="/default/index/tags?cid=696&cname=spring" >spring</a>
                        <a target="_blank" title="设计模式" href="/default/index/tags?cid=632&cname=%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F" >设计模式</a>
                        <a target="_blank" title=".net core" href="/default/index/tags?cid=381&cname=.net+core" >.net core</a>
                        <a target="_blank" title=".net" href="/default/index/tags?cid=300&cname=.net" >.net</a>
                        <a target="_blank" title="kubernetes" href="/default/index/tags?cid=2179&cname=kubernetes" >kubernetes</a>
                        <a target="_blank" title="c++" href="/default/index/tags?cid=312&cname=c%2B%2B" >c++</a>
                        <a target="_blank" title="数据库" href="/default/index/tags?cid=284&cname=%E6%95%B0%E6%8D%AE%E5%BA%93" >数据库</a>
                        <a target="_blank" title="数据结构" href="/default/index/tags?cid=247&cname=%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84" >数据结构</a>
                        <a target="_blank" title="大数据" href="/default/index/tags?cid=888&cname=%E5%A4%A7%E6%95%B0%E6%8D%AE" >大数据</a>
                        <a target="_blank" title="js" href="/default/index/tags?cid=159&cname=js" >js</a>
                        <a target="_blank" title="机器学习" href="/default/index/tags?cid=171&cname=%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0" >机器学习</a>
                        <a target="_blank" title="微服务" href="/default/index/tags?cid=832&cname=%E5%BE%AE%E6%9C%8D%E5%8A%A1" >微服务</a>
                        <a target="_blank" title="Android" href="/default/index/tags?cid=282&cname=Android" >Android</a>
                        <a target="_blank" title="Go" href="/default/index/tags?cid=839&cname=Go" >Go</a>
                        <a target="_blank" title="程序员" href="/default/index/tags?cid=327&cname=%E7%A8%8B%E5%BA%8F%E5%91%98" >程序员</a>
                        <a target="_blank" title="面试" href="/default/index/tags?cid=637&cname=%E9%9D%A2%E8%AF%95" >面试</a>
                        <a target="_blank" title="JVM" href="/default/index/tags?cid=727&cname=JVM" >JVM</a>
                        <a target="_blank" title="ASP.net core" href="/default/index/tags?cid=179&cname=ASP.net+core" >ASP.net core</a>
                        <a target="_blank" title="云原生" href="/default/index/tags?cid=22056&cname=%E4%BA%91%E5%8E%9F%E7%94%9F" >云原生</a>
                        <a target="_blank" title="人工智能" href="/default/index/tags?cid=270&cname=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD" >人工智能</a>
                        <a target="_blank" title="后端" href="/default/index/tags?cid=1089&cname=%E5%90%8E%E7%AB%AF" >后端</a>
                        <a target="_blank" title="PHP" href="/default/index/tags?cid=281&cname=PHP" >PHP</a>
                        <a target="_blank" title="git" href="/default/index/tags?cid=226&cname=git" >git</a>
                        <a target="_blank" title="CSS" href="/default/index/tags?cid=817&cname=CSS" >CSS</a>
                        <a target="_blank" title="golang" href="/default/index/tags?cid=409&cname=golang" >golang</a>
                        <a target="_blank" title="k8s" href="/default/index/tags?cid=5067&cname=k8s" >k8s</a>
                        <a target="_blank" title="Nginx" href="/default/index/tags?cid=373&cname=Nginx" >Nginx</a>
                        <a target="_blank" title="Django" href="/default/index/tags?cid=634&cname=Django" >Django</a>
                        <a target="_blank" title="mybatis" href="/default/index/tags?cid=720&cname=mybatis" >mybatis</a>
                        <a target="_blank" title="深度学习" href="/default/index/tags?cid=345&cname=%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0" >深度学习</a>
                        <a target="_blank" title="多线程" href="/default/index/tags?cid=986&cname=%E5%A4%9A%E7%BA%BF%E7%A8%8B" >多线程</a>
                        <a target="_blank" title="React" href="/default/index/tags?cid=560&cname=React" >React</a>
                        <a target="_blank" title="架构" href="/default/index/tags?cid=2070&cname=%E6%9E%B6%E6%9E%84" >架构</a>
                        <a target="_blank" title="devops" href="/default/index/tags?cid=2662&cname=devops" >devops</a>
                        <a target="_blank" title="爬虫" href="/default/index/tags?cid=905&cname=%E7%88%AC%E8%99%AB" >爬虫</a>
                        <a target="_blank" title="云计算" href="/default/index/tags?cid=361&cname=%E4%BA%91%E8%AE%A1%E7%AE%97" >云计算</a>
                        <a target="_blank" title="Spring Boot" href="/default/index/tags?cid=201&cname=Spring+Boot" >Spring Boot</a>
                        <a target="_blank" title="LeetCode" href="/default/index/tags?cid=342&cname=LeetCode" >LeetCode</a>
                </div>
       
   </div>
   
        <div id="rightadbox" style="height: 300px;background-color: #ddd;text-align: center;" class="carditem litem">
            <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5446233687289962" data-ad-slot="2607637140"  data-ad-format="auto"  data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
        </div> 
</div>
<div class="clearfix"></div>
</main>
    
<div class="yllinks alink"></div>
 

<footer class="site-footer clearfix">
<section class="copyright">By &copy; 2026 <a href="/" title="www.likecs.com">likecs</a> 版权所有,<br/>本站所有数据收集于网络如有侵犯到您的权益请联系 进行下架处理1。 </section>
<section class="poweredby">  <a target="_blank" href="https://beian.miit.gov.cn/">粤ICP备22038628号</a>Powered By  WordPress </section>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({id: "Je3PjbvUssp6BbvY",ck: "Je3PjbvUssp6BbvY"})</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?2eb031e42d29b7c1a1f16948d2ae2a9f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</footer>  
</div>
<script>
    $(function(){
                    $(".post-content").append('<p style="padding: 20px;color: #cacaca;">原文链接：https://www.cnblogs.com/lvonve/p/9270007.html</p>')  
            }) 
</script> 
</body>
</html>