본문 바로가기

전체 글

 (69)
JS 연습문제 2 - 간이 계산기 ver.2 ▶ JS 연습문제 2 - 간이 계산기 ver.2첫 번째 값 : 두 번째 값 : +-*/%계산 결과 : See the Pen 24-12-25 js review-pr2 by Namu (@Namu-the-sans) on CodePen.
jQuery 연습문제 3 ( 색 변경 ) 색 변경 실습.area{ width: 100px; height: 100px; border: 1px solid black; box-sizing: border-box;}.inputColor{ box-sizing: border-box; width: 100px; padding: 0; margin : 0; outline: none;}.div2{ display: inline-block;}.box{ display: inline-block; }1) 색 변경 버튼(#btn1)을 클릭했을 때, 입력(#input1) 한 값으로 사각형(#box1) 배경색 변경색 변경$("#btn1").on("click", function(){ $("#box1").css("backgroundCo..
jQuery 연습문제 2 ( 동적으로 글자 수 세기 ) 동적으로 글자 수 세기동적으로 글자 수 세기 0/150 // 동적으로 글자 수 세기$("#input-content").on("input", function(){ // 1. 입력한 글자 수만큼 span 태그 값 변경 let length = $(this).val().length; $("span").text(length); // 2. #counter의 글자색 변경 // 글자 수가 0 ~ 130자 -> 검은색 // 131 ~ 149 -> 주황색 // 150 -> 빨간색 if(length See the Pen 24-12-25 jquery pr2 by Namu (@Namu-the-sans) on CodePen.
jQuery 연습문제 1 ( 특정 시간마다 일정 범위의 숫자 출력 ) 0.3초마다 숫자 0 ~ 9까지 출력하는 span 태그정지.area{ width: 200px; height: 40px; border: 1px solid black;}.text1{ color: red; cursor: pointer;}// 0.3초마다 0~9까지 출력하는 span 태그// 1. 필요한 변수 선언let count=0; // 0~9까지 증가하는 것을 세기 위한 변수let interval; // setInterval을 저장할 변수$(()=>{ interval = setInterval(function(){ // 0~9까지 출력할 span 태그 작성 if(count " + count++ + ""; $(".area").append(span);..
jQuery 메소드와 이벤트 2 ( input 태그 관련 이벤트 ) input 태그 관련 이벤트- focus : input 태그에 포커스가 맞춰졌을 때              ex) text인 경우 cursor가 깜빡거릴 때- blur : 포커스가 해제되었을 때- change : input 태그의 값이 변했을 때                 1) checkbox, radio, select (마우스 선택 요소) → 값이 변했을 때 change 이벤트 발생                 2) text 관련 요소 (키보드로 값이 변경하는 요소)                     → 포커스가 해제되었을 때 이전 값과 다를 경우 change 이벤트 발생- select : 선택한 요소 입력 영역 값에 블럭이 설정된 경우- input : 입력과 관련된 모든 이벤트focus / blu..
jQuery 메소드와 이벤트 1 ( html(), text(), val(), append(), prepend(), before(), after(), empty(), remove(), detach() ) html( ), text( ), val( )- html( ) : 요소에 작성된 내용을 얻어옴(태그 포함) == innerHTML- text( ) : 요소에 작성된 내용을 얻어옴(태그 포함 X) == innerText- val( ) : value 속성값을 얻어옴- html("내용") : 요소에 내용 출력 (태그 인식 O)- text("내용") : 요소에 내용 출력 (태그 인식 X)- val("내용") : value 속성값을 지정.cls1{ color: blue;}.sky{ background-color: skyblue;} 기존에 작성되어 있는 요소html() 메소드text() 메소드val() 메소드// html() 버튼$("#btn1").on("click", function(){ // ..
순회(탐색) 메소드 3 ( sideways 메소드, is("css선택자") ) sideways(옆으로, 옆에서) 메소드- 같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드- $("요소명").siblings( [ 매개변수 ] )   - 선택된 요소와 같은 레벨(형제)에 있는 모든 요소 리턴   - 매개변수가 있으면 같은 레벨에 있는 요소 중 매개변수와 일치하는 모든 요소 리턴- $("요소명").next( )   - 선택된 요소의 같은 레벨 중 선택된 요소 다음 한 개 요소 리턴- $("요소명").nextAll( )   - 선택된 요소의 같은 레벨 중 선택된 요소 다음의 모든 요소 리턴- $("요소명").nextUntil(매개변수)   - 선택된 요소의 같은 레벨 중 매개변수 이전까지의 모든 요소 리턴- $("요소명").prev( )   - 선택된 요소의 같은 레벨 중 선택된 요..
순회(탐색) 메소드 2 (descendants 메소드) descendants(자손, 후손) 메소드- 선택된 요소의 하위 요소들을 선택할 수 있는 메소드- $("요소명").children( [ 매개변수 ] )  - 선택된 요소의 모든 자식 객체 리턴  - 매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴- $("요소명").find(매개변수)  - 선택된 요소의 인자와 일치하는 모든 후손 객체 리턴 div (great-grand parent) ul (grand parent) li (direct parent) span div (grand parent) p (direct parent) span 테스트$(document).ready(func..

티스토리툴바