[Jquery] 하위요소 선택, children
2022. 2. 17. 22:14
공부/JavaScript
jquery로 하위 요소를 선택하는 첫 번째 방법은 아래와 같다. $(document).ready(function(){ $("#wrap>h1").css("color","red") }) $(document).ready(function(){ $("#wrap h1").css("color","red") }) 위의 첫번째 코드는 한 칸 아래의 h1을 선택하고, 두 번째 코드는 하위에 있는 모든 h1을 선택한다. 두 번째 방법은 children을 사용하는 것인데 방법은 다음과 같다. $(document).ready(function(){ $("#wrap>section").children().css("color","red") }) 이렇게 하면 section의 모든 자식 요소들의 color를 red로 바꾼다.
[Jquery] ready, parent 메서드
2022. 2. 17. 22:09
공부/JavaScript
ready 메서드는 DOM TREE가 완성되면 콜백 함수가 실행된다. $(document).ready(function(){ document.getElementById("title").style.color="red" }) parent 메서드는 선택한 요소의 부모요소에 접근한다. $(document).ready(function(){ $("#li2").parent().css({ "border":"2px dashed blue" }) }) 위 코드는 li2의 부모요소에 접근하여 경계선을 파란색 점선으로 바꾼다.
[Jquery] css 선택자와 사용 방법
2022. 2. 17. 22:00
공부/JavaScript
Jquery를 사용하여 쉽게 css 속성을 부여하고 변경할 수 있다. function myFunc(){ $("#title").css("color","red") } 위 코드는 document.getElementById("title").style.color="red"와 같다. 즉, ID가 title인 요소를 선택하여 color를 red로 변경한다. function myFunc(){ $("#title").css("backgroundColor","blue") } 그렇다면 위 코드는 document.getElementById("title").style.backgroundColor="blue"와 같다. 또한 이렇게 따로따로 적을 필요 없이 아래처럼 하면 더 쉽게 여러가지 속성을 부여할 수 있다. function m..
[JS] 사용자 정의 객체
2022. 1. 30. 15:13
공부/JavaScript
자바스크립트에서는 내장된 객체를 사용하기도 하지만 사용자가 직접 객체를 정의할 수도 있다. var person={ name:'김철수', age:20, height:170, introduce:function(){ document.write("이름:"+this.name," ") document.write("나이:"+this.age," ") document.write("키:"+this.height," ") } } person.introduce()
[JS] 1차원 동적배열
2022. 1. 30. 15:10
공부/JavaScript
자바스크립트 배열은 단순 배열이 아닌 배열 객체이다. 길이도 자유자재로 변경이 가능하다. var score=new Array(0) var num=prompt("과목 갯수 입력") num = Number(num) var input = 0 var total = 0 for(i=1; i
[JS] openweathermap api 날씨 아이콘 표시
2022. 1. 24. 14:40
공부/JavaScript
https://openweathermap.org/ 의 api를 이용하여 날씨 아이콘을 표시하려고 한다. 일단 기본적인 지역과 날씨 정보는 가져왔는데 아이콘은 어떻게 가져오나 많이 알아봤다. 그래도 내가 원하는 답은 딱히 나오지 않았는데 아마도 너무 당연하고 쉬운 일이라 그렇지 않았나 싶다. 일단 아래처럼 openweather api 안에 있는 data.weather.icon 데이터를 가져와야 했다. const iconData = data.weather[0].icon; 그리고 아래처럼 html에 준비해둔 img 태그에 .src로 url을 지정해주는데, 이때 미리 가져왔던 ${iconData}를 넣어준다. const icon = document.querySelector("#weathericon img").s..
[JS] 중첩 반복문, for문 (while, for)
2022. 1. 19. 20:16
공부/JavaScript
중첩 반복문 중첩 반복문 while을 이용하여 구구단 전체 출력하기 var dan=2 var i=1 while(dan
[JS] break, continue
2022. 1. 19. 19:37
공부/HTML, CSS
break : 반복문 탈출 continue : 반복문의 처음으로 BREAK : for(let i=1; i
[JS] 객체 내부에 함수 넣기
2022. 1. 18. 00:55
공부/JavaScript
객체 내부에 함수를 어떻게 넣는지 알아내기 위해 구글링을 하며 열심히 공부한 결과 key:value 형식이라고 한다. function hello () { //내용 }; 그러니까 일반적인 함수는 위와 같은데, 이걸 객체 내에 그대로 넣게 되면 에러가 발생한다. 해결 방법은 되게 간단했는데 방법은 아래와 같다. const hello = { hi: function () { //내용 }, hola: function () { //내용 } }; 위와 같이 key:value로 작성한다. 즉, function hello는 hello: function으로 바꿔주면 된다. 그리고 함수와 함수 사이엔 무조건 콤마(,)로 구분해야 한다. 이거 찾느라 30분 버렸다. 그렇다면 이제 객체 외부에서 사용해야 하는데 방법은 간단했다..