Почему jQuery селектор "$ (" * "). Not" не работает?

Question

Я пытался написать эту функцию:

$( "button" ).click(function() {
$("*").not(".one").css("color", "blue");
$(".one").css("background-color", "blue");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Button</button>

<p>g7z8h7u9jiokp</p>
<div>fdklfjöalsdkfdksla</div>
<p class="one">should have a black font color after button click</p>
<p>djkflöadjsdfklfösadj dfnasdkl</p>
<div>fdklfjöalsdkfdksla</div>
<p>jiorpojiweopk w</p>
<span>ijokp 4rwerw</span>
<span class="one">should have a black font color after button click</span>
<p>ijokp 4rwerw</p>
<span>ijokp 4rwerw</span>

К сожалению, это не работает. Я хочу исключить синий цвет шрифта для всех элементов класса .one.

Как это можно исправить?

Answer 1

Код $("*").not(".one").css("color", "blue"); не изменит цвет шрифта тегов <p class="one">, но изменит цвет шрифта родительского тега, который будет каскадно распространяться на все <p class="one"> дочерние элементы, таким образом затрагивая их.

Попробуйте изменить код на $("p").not(".one").css("color", "blue");

Answer 2

В общем, вы никогда не должны использовать $("*"), поскольку он включает в себя все элементы dom на странице, включая теги html, head, style и script, и их изменение может привести к нежелательному поведению. в приложении. Кроме того, если ваша страница содержит много n-много элементов, то прохождение полного DOM также может занять некоторое время. Лучше всего использовать родительский контейнер, а затем вы можете использовать все дочерние элементы и его потомки, такие как:

$("body *")

Демо:

$("button").click(function() {
  $("body *").not(".one").css("color", "blue");
  $(".one").css({"background-color":"blue", "color": "white"});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Button</button>

<p>g7z8h7u9jiokp</p>
<div>fdklfjöalsdkfdksla</div>
<p class="one">should have a black font color after button click</p>
<p>djkflöadjsdfklfösadj dfnasdkl</p>
<div>fdklfjöalsdkfdksla</div>
<p>jiorpojiweopk w</p>
<span>ijokp 4rwerw</span>
<span class="one">should have a black font color after button click</span>
<p>ijokp 4rwerw</p>
<span>ijokp 4rwerw</span>

Answer 3

Установить цвет фона и цвет шрифта для ваших .one элементов:

$("button").click(function() {
  $("*").not(".one").css("color", "blue");
  $(".one").css({
    "background-color": "blue",
    "color": "black"
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Button</button>

<p>g7z8h7u9jiokp</p>
<div>fdklfjöalsdkfdksla</div>
<p class="one">should have a black font color after button click</p>
<p>djkflöadjsdfklfösadj dfnasdkl</p>
<div>fdklfjöalsdkfdksla</div>
<p>jiorpojiweopk w</p>
<span>ijokp 4rwerw</span>
<span class="one">should have a black font color after button click</span>
<p>ijokp 4rwerw</p>
<span>ijokp 4rwerw</span>

Answer 4

может быть, вы могли бы использовать этот фрагмент кода.

$( "button" ).click(function() {
    $("*").css("color", "blue");
    $(".one").css("color","black");
});

$( "button" ).click(function() {
	$("*").css("color", "blue");
  $(".one").css("color","black");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Button</button>

<p>g7z8h7u9jiokp</p>
<div>fdklfjöalsdkfdksla</div>
<p class="one">should have a black font color after button click</p>
<p>djkflöadjsdfklfösadj dfnasdkl</p>
<div>fdklfjöalsdkfdksla</div>
<p>jiorpojiweopk w</p>
<span>ijokp 4rwerw</span>
<span class="one">should have a black font color after button click</span>
<p>ijokp 4rwerw</p>