20.12.17-19일차

💛Add

새 콘텐츠를 추가하는데 사용
🎄 append()
끝에 내용을 삽입
$("p").append("Some appended text.");

🎄 prepend()
시작 부분에 내용을 삽입
$("p").prepend("Some prepended text.");

🎄 before()
$("img").before("Some text before");
🎄 after()
$("img").after("Some text after");
동일 레벨을 가지고 있음 (부모 자식 x)

💛Remove

🎄 remove()
선택한 태그와 그 자식을 제거
$("#div1").remove();

🎄 empty()
선택한 태그의 자식을 제거
$("#div1").empty();

💛 CSS Class

• addClass() - 선택한 태그에 하나 이상의 클래스를 추가
• removeClass() - 선택한 태그에서 하나 이상의 클래스를 제거
• toggleClass() - 선택한 태그에서 클래스 추가/제거 전환함
• css() - 스타일 속성을 설정하거나 반환

$("button").click(function(){
  $("h1, h2, p").addClass("blue");
  $("div").addClass("important");
});

-->addClass("blue") blue 앞에 (.) 찍지 않는다.
addClass에 이미 class를 나타냄

💛Traversing

• div 태그는 ul의 부모이며, 그 안에 있는 모든 태그의 조상이다

💛Ancestor(조상)

🎄 parent()
선택한 태그의 부모를 반환

$(document).ready(function(){
  $("span").parent();
});
-->"span"태그의 부모를 반환

🎄 parents()
선택한 태그의 모든 조상을 반환(부모포함)

$(document).ready(function(){
  $("span").parents();
});

->선택적 매개변수를 사용하여 조상검색을 필터링 할 수 있음
$(document).ready(function(){
  $("span").parents("ul");
});
-> span의 조상 중 ul만

🎄 parentsUntil()
주어진 두 인수 사이의 모든 부모를 반환

$(document).ready(function(){
  $("span").parentsUntil("div");
});
->span과 div 사이의 태그 반환

💛Descendant(자손)

🎄 children()
선택한 태그의 직계 자식을 반환

$(document).ready(function(){
  $("div").children();
});
-> div의 자식 반환. 후손들x

🎄 find()

$(document).ready(function(){
  $("div").find("span");
});
-> div 태그의 자손 span을 반환

💛Siblings(형제)

🎄 siblings()
선택한 태그의 모든 형제 반환

$(document).ready(function(){
  $("h2").siblings();
});

🎄 next()
( <-> prev() )
선택한 태그의 다음 형제 반환

$(document).ready(function(){
  $("h2").next();
});
->h2의 다음 형제 반환

🎄 nextAll()
( <-> prevAll() )
선택한 태그의 다음 형제 모두 반환

$(document).ready(function(){
  $("h2").nextAll();
});

🎄 nextUntil()
( <-> prevUntil)

$(document).ready(function(){
  $("h2").nextUntil("h6");
});
->h2와 h6 사이의 모든 형제 반환

💛Filtering

🎄 first()
지정된 태그의 첫번째 태그 반환

$(document).ready(function(){
  $("div").first();
});
-> 첫번째 div 태그를 반환

🎄 last()
지정된 태그의 마지막 태그 반환

$(document).ready(function(){
  $("div").last();
});

🎄 eq()
선택한 태그의 특정 인덱스 번호가 있는 태그 반환

$(document).ready(function(){
  $("p").eq(1);
});
-> 인덱스번호는 0부터 시작
-> 두번째 p태그 반환

🎄 filter()
기준을 지정할 수 있음. 기준과 일치하지 않는 태그는 선택 항목에서 제거되고 일치하는 태그 반환.

$(document).ready(function(){
  $("p").filter(".intro");
});

🎄 not()
기준과 일치하지 않는 모든 요소를 반환
(filter()와 반대)

$(document).ready(function(){
  $("p").not(".intro");
});
->intro가 없는 모든 태그 반환

💛noConflict()

w3schools - jquery noConflict()