국비수업12(Jquery의 선택자, Tag안의 text 제어)
12303 단어 국비수업(제이쿼리)JavaScriptTILJavaScript
자바스크립트&제이쿼리 국비수업(그린컴퓨터학원) 내용 중 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로 바꾼다
Author And Source
이 문제에 관하여(국비수업12(Jquery의 선택자, Tag안의 text 제어)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yeonbee/국비수업12Jquery의-선택자-Tag안의-text-제어저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)