each() 함수란? $("태그").each(function( index, item ){ }) 선택한 태그를 모두 가져와서, 태그의 갯수만큼 반복하여 function내부를 실행한다 주의할 점은 forEach() 반복문과 매개변수의 위치가 반대이다 ※ 1. each(function(){}) : 매개변수가 없을 때 유관순 이순신 홍길동 김유신 2. 매개변수가 하나일때 _ index 두가지 방법으로 사용가능하다 이때 index는 가져온 모든태그(배열)의 순서(index)이다 1. $.each("첫번째매개변수로 배열", function(){}) 2. $("배열에 each호출").each(function(index) {}) 유관순 이순신 홍길동 김유신 3. 매개변수가 두개일때 _ index, item $("태그"..

1. html() vs text() 함수 차이점 태그, 또는 아이디, 클래스명으로 접근하여 html내부의 내용을 조작할 수 있는 함수 html(), text() 함수를 알아보자 (javascript 의 innderHTML과 비슷하다) ※ 값을 받아올때 _ 같은 종류의 태그가 여러개 일 경우 html() : 맨처음 태그 하나만 가져온다 text() : 선택한 모든 태그를 가져온다 홍길동 이순신 유관순 강감찬 html() text() ※ html() 함수를 사용해서, 모든 태그를 가져오는 방법 = 반복문 또는 each()함수사용 홍길동 이순신 유관순 강감찬 ※ 값을 HTML내부로 입력할 때 _ html(), text() 차이점 1. html() - data에 담긴 태그를 인식하여, 호출한 태그에 이미지를 출..

body에 작성된 태그가 (h1) 여러개 존재할때 같은 태그를 불러와서 각자 속성을 부여하는 방법 h1태그가 4개 작성되어있고, 2,4번째 태그에 css속성을 부여해보자 유관순 이순신 홍길동 김유신 h1_list 배열에 h1태그를 모두 담는다 $("h1") : h1태그가 하나면 태그하나를, 여러개면 배열로 반환된다 for 반복문을 배열의 index로 접근하여 조건문을 만들고, css속성을 적용시킨다 css속성을 적용시키는 방법 2가지 각자 적용 css속성을 객체화해서 적용 .css("속성명", "속성값") vs .css("속성명") 차이점 .css() 함수를 호출할 때, 매개변수를 하나 또는 두개를 받을 수 있다 두가지 경우에 실행되는 결과가 아래와 같이 다르다 1. 매개변수가 두개일때 ( .css("속..

each() 함수란? $("태그").each(function( index, item ){ }) 선택한 태그를 모두 가져와서, 태그의 갯수만큼 반복하여 function내부를 실행한다 주의할 점은 forEach() 반복문과 매개변수의 위치가 반대이다 ※ images 폴더에 ball1~4.jpg 이미지 파일이 있다 이 이미지 파일을 사용해서, img태그에 적용시켜보는 연습 1. 모든 img태그에 같은 이미지 src속성을 부여하기 2. 1~4 넘버링 되어있는 파일명을 사용해, each() 함수로 접근해서 각각 다른 이미지 적용하기 img태그를 하나씩 가져오는 each()함수를 사용하는데, img파일의 인덱스 (0부터)를 사용해서 이미지파일에 넘버링되어있는 것에 (+1을 해야한다) 템플릿스트링을 사용해서 부여한다..

※ ul태그에 li태그 추가, 수정, 삭제하기 등록, 수정, 삭제 버튼이 있다 등록버튼을 누르면 : input text창에 작성한 입력값이 li태그를 생성해서 ul태그에 추가한다 수정버튼을 누르면 : input text창에 작성하여 등록된 li의 값이 수정된다 단, 수정 버튼을 누르려면 등록을 1개이상하고, 수정할 li목록을 선택해야한다 선택한 li를 나타내기 위해 css스타일을 설정하고 class를 추가하여 변경한다 삭제버튼을 누르면 : 등록되어 목록에 표시된 li값을 선택하고, 삭제 버튼을 누르면 목록에서 삭제된다 좋아하는 음식을 추가하세요 ※ 위와 같은 방법으로, table에 추가, 삭제, 수정하는 연습 이름 : 국어 : 영어 : 수학 : 이름 국어 영어 수학 총점 평균

◎ 배열의 수만큼 반복하는 함수 each() 배열에 태그를 넣으면, 태그 하나하나가 배열의 요소로 들어간다 두가지 방법으로 사용할 수 있다 //1. $.each("첫번째매개변수로 배열", function(){}) - each함수를 호출하고 첫번째 매개변수에 배열을 넣고, 콜백함수를 호출한다 //2. $("배열에 each호출").each(function(index) {}) - 배열에 each함수를 호출하여 사용한다 유관순 이순신 홍길동 김유신 배열을 넣으면 배열의 요소 하나하나가 들어간다 객체의 배열을 가지고 each()함수 사용해보기

JQuery란? Element를 선택하고, 선택한 Element들을 효과적으로 제어할 수 있는 자바스크립트의 라이브러리이다 JQuery 사용하는 이유 DOM 사용을 용이하게 한다 나중에 만들어지는 태그를 쉽게 생성, 수정, 삭제할 수 있다 이벤트 연결을 간단하게 할 수 있다 시각적인 효과를 쉽게 부여할 수 있다 AJax통신을 용이하게 한다 사용하는 방법 파일을 다운로드해서 사용 JQuery홈페이지에서 다운로드클릭 URL을 복사하여, script src에 주소를 넣는다 ※ 태그의 이름으로 Node를 선택하여 css속성을 부여해보기 $("태그명") 홍길동 서울시 마포구 서교동 이순신 경기도 남양주시 별내동 유관순 울산 북구 천곡동 ※ 태그의 이름으로 Node를 선택하여 각각의 태그마다 다른 css속성을 부여..

◎ 마우스 이벤트 ※ mouse 이벤트의 속성들을 확인해볼 수 있는 코드 ※ 마우스를 클릭한 곳으로 이미지를 이동하기 ◎ 키보드 이벤트 ※ key event의 속성들을 찾아볼 수 있는 코드 ※ 키보드 이벤트 사용 : 키를 누를때마다 이미지를 움직이게 만든다 아무 키나 누르면 기본위치에서 우측으로 10px씩 이미지가 움직이게 만들어보자 앞으로 추가할 내용 방향키에 맞게 움직이는 이미지 이곳에 추가내용 추가하기 ◎ 기본이벤트 ※ 예) a 태그를 클릭하면 href 속성에 입력한 위치로 이동 기본 이벤트를 막아야 할 경우 예) 회원가입에서 버튼을 누르면, 우선 사용자가 정확하게 이름과 주민등록번호를 입력했는지 확인하고 이동해야 함 이러한 경우에 사용하는 기본이벤트를 사용해보자 다음으로 이동 원래라면 a태그의 h..

※ querySelectorAll을 사용해서, css배경을 그라데이션으로 표현해보기 ◎ 여러방법으로 css속성 변경하기 ※ 1. 직접 css속성에 접근해서, img 태그 적용 대상이 되는 노드를 찾아서 '.'연산자를 통해 직접 css속성에 접근할 수 있다 ※ 2. setAttribute() 함수를 사용해서, css속성 변경 ※ 3. JQuery로 css변경 JQuery에서 attr()함수를 사용해서 css속성을 설정할 수있다 1. 속성마다 매번 호출하는 방법 2. 각 속성과 값을 객체형태로 넣어, 한번 호출하는 방법 ▽▼▼ 3가지 방법 모두 같은 결과 ▼▼▽ ※ 버튼을 누를때마다, 해당 이미지가 출력되게 해보기 방법 1. 버튼을 누를때마다 이미지의 src속성 부여 (버튼 4가지 모두 생성) 축구공 축구화..

※ DOM이란? html 을 작성하면 javascript가 html 하나하나를 객체로 관리한다 html head title script body 태그들,, 위처럼 계층형으로 관리한다 Document Object Model : DOM 넓은 의미 : 웹 브라우저가 HTML 페이지를 인식하는 방법 좁은 의미 : document 객체와 관련된 객체의 집합을 나타냄 문서 객체 : HTML 태그를 자바스크립트에서 사용할 수 있는 객체로 만듬 문서 객체를 조작한다는 말은 태그를 조작한다는 말과 같음 노드 : 각 요소 요소 노드 : h1 태그와 script 태그처럼 요소를 생성하는 노드 텍스트 노드 : 화면에 출력되는 문자열인 Lorem ipsum dolor amet 등 ※ 웹페이지 생성순서 script를 작성할 때는..