JQuery选择器 一时失言乱红尘 2022-02-13 14:15 253阅读 0赞 ## JQuery选择器 ## 页面的任何操作都需要节点的支撑,开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专注业务逻辑的编写。 1、jQuery选择器之id选择器 Id选择器在JQuery中是最常用的一个选择器,通过$(“\#id”)获取元素。以下内容是在li标签中获取id(floWer),并给它绑定了点击事件(点击“小花”弹出提示框)。 ![在这里插入图片描述][2019042809235920.png] ![在这里插入图片描述][2019042809242590.png] ![在这里插入图片描述][20190428092432197.png] 注意:id是唯一的,每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id,将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的。 2、jQuery选择器之类选择器 类选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选。通过$(“.class”)获取元素。启动页面点击“艾斯利尔”,当弹出提示框内容为“艾斯利尔”时,则该元素获取成功。 ![在这里插入图片描述][2019042809273243.png] ![在这里插入图片描述][20190428092739309.png] ![在这里插入图片描述][20190428092746994.png] 3、jQuery选择器之元素选择器 元素选择器:根据给定(html)标记名称选择所有的元素。下面我们时获取html元素中的li标签,获取方法:$(“li”)。进入页面点击有li标签的元素,当弹出有“JavaScript”内容的提示框时,则该元素获取成功。 ![在这里插入图片描述][20190428092506547.png] ![在这里插入图片描述][20190428092510748.png] ![在这里插入图片描述][2019042809251636.png] 4、jQuery选择器之全选择器(*选择器) 通过$(“*”)选择全部元素,进入页面点击任何元素,当弹出有“jQuery”内容的提示框时,则该元素获取成功。 ![在这里插入图片描述][20190428092525809.png] ![在这里插入图片描述][20190428092530701.png] [2019042809235920.png]: /images/20220213/0b1c04ff365a4856b49e4bc123b429ed.png [2019042809242590.png]: /images/20220213/c2cd9edbb93f4726b9f4146e5e6e3709.png [20190428092432197.png]: /images/20220213/9e24ae0ab06b4e19837aa485daef0bf6.png [2019042809273243.png]: /images/20220213/19cdcfdcd4f74404b2513bea73747a0a.png [20190428092739309.png]: /images/20220213/675656b8b2b6404787c136da7d260986.png [20190428092746994.png]: /images/20220213/324b23eaa7da4662bcfa7c4de2b2da16.png [20190428092506547.png]: /images/20220213/b75a85b3a4f54e9eaea22fdf2d5a164a.png [20190428092510748.png]: /images/20220213/c4a83b8b05aa4107bc6b58e4fa058ecf.png [2019042809251636.png]: /images/20220213/f0016e683f3f40239f351cbbf22d8935.png [20190428092525809.png]: /images/20220213/9404044c2a0f4f99bf9416682ddb04d3.png [20190428092530701.png]: /images/20220213/24e909173ee84e928b91b95a3bd755ed.png
还没有评论,来说两句吧...