jQuery选择display

Hey小伙伴们，今天咱们聊聊如何用jQuery来选择那些被设置为display的元素，是不是听起来有点小复杂？别担心，我会用最简单直白的方式，带你一步步搞定这个问题！

你得知道display属性是干啥的，这个属性决定了元素是否在页面上显示。display: none;就是让元素不显示，而display: block;或者display: inline;则是让元素显示出来，咱们的目标就是用jQuery来找到这些元素。

基础选择

如果你想要找到所有被设置为display: none;的元素，你可以用:hidden选择器，这个选择器非常智能，它会帮你选出所有不可见的元素。

$(':hidden').each(function() {
    console.log($(this).attr('id')); // 打印出每个隐藏元素的ID
});

这段代码会遍历所有隐藏的元素，并打印出它们的ID，是不是很方便？

有时候你可能只想选择特定类型的隐藏元素，比如隐藏的<div>或者隐藏的<span>，这时候，你可以在:hidden选择器后面加上具体的标签名。

$(':hidden div').each(function() {
    console.log($(this).text()); // 打印出每个隐藏的<div>元素的文本内容
});

这段代码只会选择隐藏的<div>元素，并打印出它们的文本内容。

如果你想要找到所有显示的元素，可以用:visible选择器，这个选择器会帮你选出所有可见的元素。

$(':visible').each(function() {
    console.log($(this).css('color')); // 打印出每个可见元素的颜色
});

这段代码会遍历所有可见的元素，并打印出它们的颜色。

你可能需要根据元素的其他属性来选择显示或隐藏的元素，这时候，你可以结合使用属性选择器，你想要选择所有class属性为hidden的隐藏元素，可以这样做：

$('.hidden:hidden').each(function() {
    console.log($(this).attr('class')); // 打印出每个class为hidden的隐藏元素的class属性
});

这段代码会选出所有class属性为hidden的隐藏元素，并打印出它们的class属性。

jQuery不仅可以用来选择元素，还可以用来改变元素的显示状态，你可以用.show()和.hide()方法来控制元素的显示和隐藏。

$('#myElement').show(); // 显示元素
$('#myElement').hide(); // 隐藏元素

这段代码会将ID为myElement的元素显示出来，然后再隐藏起来。

你可能需要根据一些条件来选择显示或隐藏的元素，这时候，你可以结合使用:visible和:hidden选择器，以及.filter()方法，你想要选择所有可见的<div>元素，但只选择那些class属性为visible的，可以这样做：

$('div:visible').filter('.visible').each(function() {
    console.log($(this).html()); // 打印出每个class为visible的可见<div>元素的HTML内容
});

这段代码会选出所有可见的<div>元素，然后再从这些元素中筛选出class属性为visible的，并打印出它们的HTML内容。

用jQuery选择显示或隐藏的元素其实很简单，关键是要:visible和:hidden这两个选择器，以及如何结合使用属性选择器和.filter()方法，了这些，你就可以轻松地选择和操作页面上的元素了。

希望这些小技巧能帮助你更好地理解和使用jQuery，如果你有任何问题，或者想要了解更多关于jQuery的技巧，随时欢迎交流哦！别忘了，实践是最好的学习方式，所以赶紧动手试试吧！