CSS选择器和jQuery选择器确实有很多相似之处,但也存在一些独有的用法和拓展。下面我将详细说明各种常见的选择器,并给出CSS和jQuery中的使用示例。
1 基本选择器
-
通用选择器
- CSS:
* { color: red; }
选择所有元素,并将它们的文字颜色设置为红色。 - jQuery:
$('*').css('color', 'red');
选择所有元素,并用jQuery改变文字颜色为红色。
- CSS:
-
元素/标签选择器
- CSS:
div { border: 1px solid black; }
选择所有div
元素,为它们添加黑色边框。 - jQuery:
$('div').hide();
选择所有div
元素,并隐藏它们。
- CSS:
-
类选择器
- CSS:
.menu { background-color: blue; }
选择所有具有menu
类的元素,设置背景色为蓝色。 - jQuery:
$('.menu').show();
选择所有具有menu
类的元素,并显示它们。
- CSS:
-
ID选择器
- CSS:
#header { font-size: 24px; }
选择ID为header
的元素,设置字体大小为24px。 - jQuery:
$('#header').slideUp();
选择ID为header
的元素,并以滑动方式隐藏它。
- CSS:
2 组合选择器
-
后代选择器
- CSS:
ul li { color: green; }
选择ul
内部的所有li
元素,并将文字颜色设置为绿色。 - jQuery:
$('ul li').fadeOut();
选择ul
内部的所有li
元素,并以淡出效果隐藏它们。
- CSS:
-
子选择器
- CSS:
div > p { margin-left: 20px; }
选择所有直接位于div
元素内部的p
元素,并设置左边距。 - jQuery:
$('div > p').fadeIn();
选择所有直接位于div
元素内部的p
元素,并以淡入效果显示它们。
- CSS:
-
相邻兄弟选择器
- CSS:
h1 + p { font-weight: bold; }
选择紧跟在h1
元素后的第一个p
元素,并加粗字体。 - jQuery:
$('h1 + p').remove();
选择紧跟在h1
元素后的第一个p
元素,并移除它。
- CSS:
-
通用兄弟选择器
- CSS:
h1 ~ p { color: purple; }
选择所有在h1
元素之后的p
元素,并设置文字颜色为紫色。 - jQuery:
$('h1 ~ p').toggle();
选择所有在h1
元素之后的p
元素,并切换它们的显示状态。
- CSS:
3 属性选择器
-
属性存在选择器
- CSS:
[href] { text-decoration: underline; }
选择所有具有href
属性的元素,并给文字添加下划线。 - jQuery:
$('[href]').css('font-style', 'italic');
选择所有具有href
属性的元素,并设置文字样式为斜体。
- CSS:
-
具体属性值选择器
- CSS:
[type="button"] { background-color: yellow; }
选择所有type
属性值为button
的元素,并设置背景色为黄色。 - jQuery:
$('[type="button"]').addClass('btn');
选择所有type
属性值为button
的元素,并给它们添加btn
类。
- CSS:
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提供了更多动态交互的可能性。