揭秘CSS选择器与jQuery选择器的异同点

发表时间: 2024-05-18 20:19

CSS选择器和jQuery选择器确实有很多相似之处，但也存在一些独有的用法和拓展。下面我将详细说明各种常见的选择器，并给出CSS和jQuery中的使用示例。

1 基本选择器

通用选择器

CSS: * { color: red; } 选择所有元素，并将它们的文字颜色设置为红色。
jQuery: $('*').css('color', 'red'); 选择所有元素，并用jQuery改变文字颜色为红色。

元素/标签选择器

CSS: div { border: 1px solid black; } 选择所有div元素，为它们添加黑色边框。
jQuery: $('div').hide(); 选择所有div元素，并隐藏它们。

类选择器

CSS: .menu { background-color: blue; } 选择所有具有menu类的元素，设置背景色为蓝色。
jQuery: $('.menu').show(); 选择所有具有menu类的元素，并显示它们。

ID选择器

CSS: #header { font-size: 24px; } 选择ID为header的元素，设置字体大小为24px。
jQuery: $('#header').slideUp(); 选择ID为header的元素，并以滑动方式隐藏它。

2 组合选择器

后代选择器

CSS: ul li { color: green; } 选择ul内部的所有li元素，并将文字颜色设置为绿色。
jQuery: $('ul li').fadeOut(); 选择ul内部的所有li元素，并以淡出效果隐藏它们。

子选择器

CSS: div > p { margin-left: 20px; } 选择所有直接位于div元素内部的p元素，并设置左边距。
jQuery: $('div > p').fadeIn(); 选择所有直接位于div元素内部的p元素，并以淡入效果显示它们。

相邻兄弟选择器

CSS: h1 + p { font-weight: bold; } 选择紧跟在h1元素后的第一个p元素，并加粗字体。
jQuery: $('h1 + p').remove(); 选择紧跟在h1元素后的第一个p元素，并移除它。

通用兄弟选择器

CSS: h1 ~ p { color: purple; } 选择所有在h1元素之后的p元素，并设置文字颜色为紫色。
jQuery: $('h1 ~ p').toggle(); 选择所有在h1元素之后的p元素，并切换它们的显示状态。

3 属性选择器

属性存在选择器

CSS: [href] { text-decoration: underline; } 选择所有具有href属性的元素，并给文字添加下划线。
jQuery: $('[href]').css('font-style', 'italic'); 选择所有具有href属性的元素，并设置文字样式为斜体。

具体属性值选择器

CSS: [type="button"] { background-color: yellow; } 选择所有type属性值为button的元素，并设置背景色为黄色。
jQuery: $('[type="button"]').addClass('btn'); 选择所有type属性值为button的元素，并给它们添加btn类。

4 伪类选择器

4.1 动态伪类和状态伪类（CSS）与定位过滤器（jQuery）

CSS 动态伪类和状态伪类

:hover：当用户鼠标悬停在元素上时应用样式。例如：a:hover { color: red; } 使链接在悬停时变红。
:active：当元素被用户激活（例如通过点击）时应用样式。例如：button:active { color: blue; } 在按钮被点击时改变颜色。
:checked：选择所有被选中的输入元素（如复选框或单选按钮）。例如：input:checked { border: 2px solid blue; } 为所有选中的输入元素添加蓝色边框。

jQuery 定位过滤器

:first、:last、:eq(index)、:lt(index)、:gt(index) 等，用于根据元素在其同级元素中的位置来选择元素。例如：$('li:first').css('font-weight', 'bold'); 使第一个li元素加粗。$('li:eq(3)').css('color', 'red'); 使第四个li元素的文本颜色变为红色。

4.2 结构伪类（CSS）与子元素选择器（jQuery）

CSS 结构伪类

:first-child、:last-child、:nth-child(n) 等，用于选择元素基于其在父元素中的位置。例如：div:first-child { color: red; } 选择作为其父元素第一个子元素的所有div元素，并设置文本颜色为红色。p:nth-child(odd) { background-color: grey; } 为父元素中所有奇数位置的p元素设置灰色背景。

jQuery 子元素选择器

:first-child、:last-child、:nth-child(n) 也可在jQuery中使用，功能与CSS中类似，但更常用于执行DOM操作。例如：$('div:first-child').hide(); 隐藏所有作为其父元素第一个子元素的div元素。

4.3 否定伪类（CSS）与内容过滤器（jQuery）

CSS 否定伪类

:not(selector)：选择不符合特定选择器条件的元素。例如：div:not(.example) { color: green; } 为所有不包含example类的div元素设置文本颜色为绿色。

jQuery 内容过滤器

:contains(text)：选择包含指定文本的元素。例如：div:contains('Hello') { font-weight: bold; } 使包含"Hello"的所有div元素字体加粗。

4.4 可见过滤器（jQuery）

jQuery 可见过滤器

:visible 和 :hidden：选择可见或隐藏的元素。这在CSS中没有直接对应的伪类。例如：$('div:hidden').show(); 显示所有当前隐藏的div元素。$('div:visible').css('color', 'blue'); 将所有可见的div元素的文本颜色设置为蓝色。

5 总结

CSS选择器主要用于设置元素的样式，而jQuery选择器则用于操作DOM，如改变元素的可见性、添加类或样式、绑定事件等。两者的语法虽相似，但用途和环境有所不同，jQuery提供了更多动态交互的可能性。