자바스크립트&제이쿼리 국비수업(그린컴퓨터학원) 내용 중 Jquery의 선택자와 Tag안의 text 제어에대해 정리해본다

Jquery의 선택자

Jquery의 선택자를 사용해보자😊

✨ 연습 1번

$(document).ready(function)(){
    $(".obj1").parent().css("border", "1px solid red");
    $(".obj1").parent().parent().css("background","gray");
    $("*").css("color","#fff");
    $(".obj3").children("li").css("letter-spacing","5px");
    $(".obj3").children("theObj1").css("color","aqua");
    $(".obj3 > li").css("font-style", "italic");
    $(".obj3 > li:nth-of-type(2)").css("text-decoration", "underline");

• $(".obj1").parent().parent().css("background","gray"); : obj1 class의 부모의 부모 > body tag 배경색을 회색으로 변경
• $("*").css("color","#fff"); : 모든 요소를 선택해서 글씨 색깔을 흰색으로 변경
• $(".obj3").children("li").css("letter-spacing","5px"); : obj3의 자식태그 중 li 태그 안의 text들 글자사이의 간격을 5px로 하겠다
• $(".obj3").children("theObj1").css("color","aqua"); : obj3의 자식태그 중 클래스가 theObj1인 태그 글씨 색깔 아쿠아로 하겠다
• $(".obj3 > li:nth-of-type(2)").css("text-decoration", "underline"); : obj3의 자식요소인 li 태그중 리스트 2번째 요소를 선택하여 밑줄을 긋겠다

✨ 연습 2번

$(".obj3 > li").eq(1).css({"background":"aqua","color":"black"});
$(".obj4").prev().css("text-decoration","underline");
$(".obj4").next().css("text-decoration","underline");
$(".obj4").siblings().css("color","aqua");
});

• $(".obj3 > li").eq(1).css({"background":"aqua","color":"black"}); : obj3의 자식태그 중 클래스가 li인 태그 중 2번째 리스트의 배경색 아쿠아, 글씨색 블랙으로 하겠다
  (eq(x) : 몇 번째인지, 0부터 시작)
• $(".obj4").prev().css("text-decoration","underline"); : obj4클래스의 이전 형제요소 선택자의 글자에 밑줄을 긋겠다
• $(".obj4").next().css("text-decoration","underline"); : obj4클래스의 다음 형제요소 선택자를 선택해서 글자에 밑줄을 긋겠다
• $(".obj4").siblings().css("color","aqua"); : obj4를 제외한 나머지 형제요소 전부 선택해서 글자 색깍을 아쿠아로 하겠다

Tag안의 text를 제어해보자

$(document).ready(function)(){
    $(".theTitle").html("<a href ='#'>HTML EDIT</a>");
    $(".obj1").text("<a href ='#'>리스트2</a>");
    var result = $(".obj1").next().text();

    $(".theTitle").text(result);
});

• $(".theTitle").html("HTML EDIT"); : theTitle클래스를 선택해서,.html() 메소드를 이용해 기존의 선택자의 텍스트를 지우고, 새롭게 텍스트를 넣어준다
• $(".obj1").text("리스트2"); : obj1클래스를 선택해서, .text() 메소드를 이용해 기존의 선택자의 텍스트를 지우고, 새롭게 텍스트를 넣어준다

  .html()과 .text()의 차이점
  .html() 안에는 테그를 삽입할 수 있다. .html("<a href ='#'>HTML EDIT</a>") .text() 안에는 테그를 삽입할 수 없고, 텍스트만 가능하다. 테그를 삽입하면 text로 출력된다.

• var result = $(".obj1").next().text(); : obj1클래스의 다음 형제 클레스의의 텍스트를 긁어서 변수에 할당한다
  (.text(); : 괄호 안에 text가 없으면 원래 있는 text를 모은다)
• $(".theTitle").text(result); : .theTitle 클래스 텍스트를 변수 result에 담겨져 있는 text로 바꾼다