Coding Planet

1. html()메서드 html()은 요소에 작성된 내용을 얻어온다. 이때 태그가 포함된 형태로 가져온다 JavaScript의 innerHTML과 동일한 기능을 한다. html("내용"): 요소의 내용을 출력한다. 이 때 태그를 인식한다. 2. text()메서드 text()은 요소에 작성된 내용을 얻어온다. 이때 태그가 포함되지 않은 형태로 가져온다 JavaScript의 innerText과 동일한 기능을 한다. text("내용"): 요소의 내용을 출력한다. 이 때 태그를 인식하지 않는다. 3. val()메서드 value 속성 값을 얻어온다. JavaScript의 value와 동일한 기능을 ㅎ나다. val("내용") : value의 속성 값을 지정한다. 4. html()을 이용한 예제 버튼을 클릭하면 빨간..

1. is() 메소드란? 지정된 범위 내에 매개변수로 지정된 선택자와 일치하는 요소가 존재하는지 확인하는 메소드 존재하면 true, 없으면 false 반환 회사 개발팀마다 클린코드를 위해 사용하는 메서드가 상이, 확인할 것( has()도 많이 사용) 2. is() 메소드의 사용 is("CSS 선택자") 🎊코드확인하기 : h2 태그 이전에 있는 모든 형제 요소 중 p태그가 있는지 확인 더보기 div(parent) p span h2 h3 p 위p 1 2 3 4 5 테스트용 span 태그 테스트용 h2 태그

지금까지 배운 jQuery를 사용해서 사용자의 입력값에 따라 박스의 색이 변하는 transition-box를 구현해보자 단계별로 풀어보자 1. 입력값에 따라 박스 색이 변하는 기능 색상명을 입력하고 버튼을 누르면 박스색이 입력값에 따라 바뀐다. 🎊코드 확인하기 더보기 색 변경 2. 입력값에 따라 색이 변하는 여러개의 박스 색상명을 모두 입력하고 버튼을 누르면 모든 박스색이 한번에 바뀐다. 힌트! 배열을 사용할 것 🎊코드 확인하기 더보기 색변경 3. 입력값에 따라 색이 변하는 여러개의 박스2 색상명을 입력할때마다 박스색과 input 입력창의 색이 변한다 힌트! 이벤트 "keyup", input이 입력된 해당 박스만 색이 바뀌어야 한다: 이전 요소를 선택하는 prev() 사용하기 🎊코드 확인하기 더보기

1. 순회(탐색) 메서드란? ancestors(조상 메서드): 선택된 요소의 상위 요소들을 선택할 수 있는 메서드이다. 2. 조상 탐색 메서드 $('요소명').parent() - 선택된 요소의 바로 위 상위 요소 리턴 $('요소명').parents(["매개변수"]) - 선택된 요소의 모든 상위 요소 리턴, - 매개변수가 있으면 매개변수가 일치하는 부모만 리턴 $('요소명').parentsUntil(["매개변수"]) - 선택된 요소부터 매개변수 요소까지 범위의 요소 리턴 div(greate-grand parent) ul(grand parent) li (direct parent) span div(grand parent) p(direct parent) span 3. 자식, 후손 탐색 메서드 $("요소명").c..

1. attiribute와 property의 차이 attribute: type, name, class, id, value 등과 같이 속성값을 별도로 입력해야 하는 속성 property: checked, selected, readonly와 같이 별도로 속성값을 입력하지 않아도 되는 속성 2. prop() 메서드 prop("속성명"): 해당 속성이 요소에 존재하면 true, 아니면 false prop("속성명", true|false): 해당 속성을 checked 또는 selected 상태로 변경(true)/해체(false) 호텔의 무료 서비스를 선택할 수 있는 요소를 만들고 고객이 선택한 서비스를 alert창으로 보여준다. 무료 서비스 조식 포함 무료 주차 무료 인터넷 무료 취소 선택하기 😂Whyrano....

1. 파일 -> 기본 설정 -> 사용 코드 조각 구성 선택 2. 열려진 편집창에서 단축키를 사용하고자하는 언어선택 3. 언어선택 : 아래와 같이 코드 복사해서 붙여넣기 "console.log print": { "prefix": "cg", "body": ["console.log()"], "description": "Log output to console" } 4. 사용하기: 단축키를 입력하면 console.log()를 쓸 수 있다. ** 단축키를 직관적으로 cl로 설정하려고 했지만 class를 워낙 자주 쓰기 때문에 사용의 편리성을 위해 "prefix":"cg"로 설정했다. 사용자가 편한 단축키로 설정하면 된다~~~

jQuery의 선택자는 기본적으로 CSS 선택자와 동일하다. 여기서는 jQuery에서 선택자를 이용한 다양한 예시를 살펴보도록 하겠다. 더불어, JS에 대응되는 다양한 함수를 알아본다. 1. 태그 선택자 jQuery에서는 CSS와 동일한 형식으로 선택자를 사용 할 수 있다. 태그는 태그명을 그대로 사용하여 요소를 선택할 수 있다. 형식: $(".클래스명").css("스타일 속성", "스타일 값"); 두가지 클래스를 동시에 가지고 있는 요소를 선택하는 경우에는 클래스간 띄어쓰기를 하지 않고 바로 붙여쓴다 클래스 선택자 test1 test2 test3 test4 2. 아이디 선택자 형식: $("#아이디명") 아래 예시에서 on()은 자바스크립트에서 addEventListener()와 동일한 기능을 수행한다...

1. html 문서 해석 순서 html 문서는 항상 위에서 아래 순서로 해석된다. 만약 해당 코드의 함수가 실행코드보다 밑에 있다면 undefined에러가 발생한다. 즉 아래쪽에 작성되어 아직 해석이 안된 코드는 사용 할 수 없다. 아래와 같은 경우 2. window.onload() 함수 html(현재창)이 모두 로딩이 되었을 때라는 이벤트 리스너 일단 html 문서 내용을 모두 다 해석한 후 마지막에 onload 옆에 작성된 함수가 수행된다 즉, 화면에 필요한 모든 요소(css,js,image..)들이 웹 페이지 메모리에 모두 올려진 다음에 실행된다. *window.onload의 단점: 한 페이지 내에서 한번만 사용할 수 있다. 여러번 작성되면 마지막 내용이 수행된다. 아래 코드는 정상적으로 실행된다...

1. jQuery 란? 기존에 복잡했던 클라이언트 측 HTML 스크립팅을 간소화하기 위해 고안된 Javascript 라이브러리 적은양의 코드로 빠르고 풍부한 기능을 제공함 (*라이브러리(library): 프로그램, 프로그래밍 언어에 없는 추가적 기능 2. jQuery 라이브러리 연결 방법 -jQuery 공식주소: http://jquery.com/ -jQuery CDN 코드 제공 페이지: http://code.jquery.com/ 1) jQuery 라이브러리를 다운로드하여 external 방식으로 연결 2) CDN(content Delivery Network)를 이용하여 온라인 환경에서 페이지 로딩 시 다운로드하여 연결하는 방법 jQuery CDN 코드 제공 페이지: http://code. $jquery...

1. JS 객체란? 자바스크립트 객체는 {} key:vlaue가 모여 있는 Map 형식이다. 자바스크립트 객체 형식: { K: V, K:V, K:V } 객체내 Value에는 String, Number, Boolean, Array, Object, null, 함수까지 다양한 자료형이 올 수 있다. 객체의 key는 무조건!! String으로 저장된다. 자바스크립트 객체 모양의 문자열을 JSON(JavaScript Object Notation, 자바스크립트 객체 표기법)이라한다. JSON의 형식: "{ K:V, K:V, K:V }" 2. 자바 스크립트에서 객체를 생성하는 방법 1. {} 객체 리터럴 표기법으로 생성 2. 생성자 + new 생성자()를 이용한 생성 방법 : const stdList = []; //..