4일차: 1시간 안에 jQuery 실행

Feynman 기술은 어떤 과목을 가르치는 것이 당신을 더 잘하게 만든다고 말합니다. 이것이 제가 여기서 하려고 하는 것입니다. 이 게시물에서 실수를 본 경우 저를 수정할 수 있습니다.

jQuery를 통해 HTML 편집

지금까지 속성과 CSS 스타일을 편집했습니다. 이제 우리는 마침내 jQuery로 HTML 조작을 배우고 있습니다.

첫째, text() 및 html() 함수입니다.

$("#textblock1").text("🍰 ipsum dolor sit amet ice cream.");
$("#smol-text").html("<em>A wild Pokemon appears.</em>");

대상 요소 내부에 내용을 추가합니다. 차이점은 text()는 일반 텍스트만 허용하는 반면 html()는 HTML 태그를 렌더링할 수 있다는 것입니다(XSS에 대해 다소 안전하지 않음).

둘째, remove() , appendTo() 및 clone() 입니다.

<div id="food">
    <p id="joe">Mama</p>
</div>

<p id="dessert">Crepe, mousse, parfait, etc.</p>
<p id="people">kids 🙌</p>

<script>
    $("#joe").remove(); // remove JOE MAMA
    $("#dessert").appendTo("#food"); // Move dessert into food
    $("#people").clone().appendTo("#food"); // Put kids as foods
</script>

clone()는 실제로 복제하지 않고 실제로 작동하기 위해 주로 appendTo()와 함께 사용됩니다.

셋째, parent() 및 children() .

$("p").parent().css("background-color", "black");
$("body").children().css("color", "pink");

parent()는 직계 부모를 나타내고 children()는 모든 자식을 나타냅니다(힌트: 복수의 children).

놀라운 점은 클래스 또는 요소 유형의 특정 요소를 참조하는 방법입니다. 여기에서 (나에게 알려지지 않은) CSS 선택기를 사용할 수 있습니다. element:nth-child(n) 여기서 element는 클래스 또는 요소 유형이고 n는 숫자입니다(인덱스가 1개이므로 😉).

$("body:nth-child(3)").text("I'm number 3 lol");

또는 멋진 느낌이 들면 :odd 또는 :even를 사용하십시오.

$(".list:odd").css("background-color", "red");
$(".list:even").css("background-color", "blue");

이 카운트는 인덱스가 0이므로 기억해야 합니다.

후기

예이, 오늘 많은 일을 했어요 🥳. 참으로 생산적인 날입니다. 우리는 다음으로 짧은 SASS를 할 것입니다. 저는 이미 그것을 사용하고 있습니다. 그것을 통해 쟁기질 할 것입니다 (그리고 내일 약간의 React를 추가 할 수도 있습니다! 👀)

Github에서 저를 팔로우하세요!
또한 !