7주차_예제 코드 모음

210215

 

 

 

jquery의 기본과 .css 메소드

 

 

jquery를 활용한 css 메소드 적용 예제

 

 

parents 메소드와 하위 선택자 사용

 

 

.css 메소드와 변수 선언 활용

 

 

prev, next, siblings, first, last, eq, even, odd, slice, children 메소드 / 지정자 lt, gt

// JSON : 자바스크립트 객체 표현(JavaScript Object Notation)
var obj = [
  //json 타입 객체
  {
    name: "김태연",
    city: "jeonju",
  },
  {
    name: "아이유",
    city: "seoul",
  },
  {
    name: "아이린",
    city: "daegu",
  },
];

$(obj).each(function (i, o) {
  // i : index / o : data
  console.log(i, ":", o);
});
// each 메소드
// 배열의 인덱스와 데이터를 순차적으로 모두 가져옴
// 배열 또는 객체의 데이터를 검사할 때 활용

each 메소드

console.log 결과값

let movie_list=[
  {
    title:'타짜',
    genre:'범죄, 케이퍼',
    running:130
  },
  {
    title:'신세계',
    genre:'누아르',
    running:140
  },
  {
    title:'아저씨',
    genre:'액션',
    running:150
  }
]

for (var i=0; i<movie_list.length; i++){
  document.write((i+1)+"번째 영화 : "+movie_list[i].title,"<br>");
  document.write("장르 : "+movie_list[i].genre,"<br>");
  document.write("러닝타임 : "+movie_list[i].running,"<br><br>");
}

json 객체 활용

 

 

html 메소드

---

210216

 

 

태그 이벤트 설정과 함수 선언 호출

 

 

.height

console.log 결과값

 

 

 

 

.on 이벤트

 

 

이벤트 객체와 .pageX, .pageY

 

 

on focus, blur와 this / on change, .val / 이벤트 객체 .keycode

---

210217

 

 

hide, show, toggle

 

 

slideUp/Down/Toggle

 

 

fadeIn/Out/Toggle

 

 

animate

---

210218

 

 

setTimeout, setInterval, clearInterval

 

 

setInterval, clearInterval을 활용한 초시계

 

 

Date 객체와 이를 활용한 오늘 날짜 표시

 

 

setInterval, Date 객체를 활용한 실시간 시계

---

210219

 

 

.attr

 

 

.text 활용

 

 

.index, .find

 

 

.addClass, .removeClass, .hasClass