전체 글(120)
-
jQuery 04
jQuery객체명.val() - 사용자가 입력한 값을 가져온다. jQuery객체명.val("새로운 값") - 새로운 값으로 설정한다. 코드분석 10번줄 - input 태그의 "김사장"이 input 변수에 저장된다. 11번줄 - 콘솔로 저장된 "김사장"이 출력된다. 12번줄 - input 객체에 "박회장"을 설정한다. 13번줄 - 새로 설정된 데이터가 input 변수에 저장된다 14번줄 - 콘솔에 "박회장"이 출력된다. jQuery객체명.attr("속성"); -> 속성의 값을 가져온다. jQuery객체명.attr("속성", "새로운 데이터"); -> 속성의 값을 새로운 데이터로 설정한다. attr() vs val() jQuery click 이벤트 , DOM click 이벤트 jQuery객체명.click()..
2023.09.20 -
jQuery 03
선택자 $("태그명:even") - 0부터 짝수번째 요소만 선택되어 css가 적용된다 $("태그명:odd") - 1부터 홀수번째 요소만 선택되어 css가 적용된다 jQuery로 slice 함수로 지정된 요소만 css 적용하기 DOM으로 함수로 지정된 요소만 css 적용하기 - jQuery처럼 만들어진 함수를 사용하지 않고 함수를 만들어 시작 인덱스, 끝 인덱스를 선언해서 시작 인덱스부터 끝 인덱스까지 요소를 불러온다 jQuery객체명.width() - 선택된 객체의 width 를 불러온다 = getAttribute("속성"); jQuery객체명.width('value') - 선택된 객체의 width에 'value'로 지정할 수 있다. = setAttribute("속성", "데이터"); 코드분석 setIn..
2023.09.20 -
jQuery 02
*("상위요소 > 하위요소") - 상위요소에서 가장 가까운 하위요소가 한 개만 선택되어 css가 적용된다. *("상위요소 하위요소") - 하위요소가 태그인 경우, 상위요소 아래에 있는 모든 하위요소가 선택되어 css 적용된다. jQuery객체명.children() - jQuery 객체의 모든 하위 요소를 불러온다. 아래 코드에서 section 태그 하위요소 , 가 선택되어 css가 적용되었다. jQuery객체명.prev() - 객체의 형제요소중 이전 요소를 불러온다. jQuery객체명.next() - 객체의 형제요소중 다음 요소를 불러온다. 객체명.nextUntil("아이디") -> nextUntil()로 지정된 요소는 제외되고 선택된 객체에서 다음요소를 불러온다 (왼쪽 코드) 객체명.prevUntil(..
2023.09.20 -
jQuery 01 - 직접선택자(Selector) , 문서 객체 구조와 관계, jQuery로 글자 바꾸기
jQuery [Selector] - 직접 선택자 인접 관계 선택자 문서 객체 구조와 관계 $(".gc").closest(".parent"); -> $(".gc").parent(); -> jQuery 참조 링크 jQuery01_css(color) css()로 html 태그의 글자색 바꾸 실행화면 - 글자 색깔이 바꼈다 (document).ready가 빠지면 두 번째 구문(노란색)이 된다. 이벤트 처리하기 위해 "on함수"를 사용한다 jQuery로 글자바꾸고 글자 색깔 바꾸기 -> 클릭이벤트 생성하기 -> 클릭하면 상자의 글자내용이 '변경됨!'으로 바뀐다 -> 클릭하면 글자의 색깔이 빨강으로 바뀐다 - css()
2023.09.19 -
JAVASCRIPT 19
버튼 클릭해서 이벤트 넣을 때 document.createElement('태그명 or 아이디명'); 없이 html 태그를 생성할 때 String 변수에 태그를 추가해서 클릭했을 때 String 변수를 브라우저 화면에 표시할 수 있다 document.createElement('태그명 or 아이디명')로 태그를 생성하여 브라우저에 표시. span.textContent - span 태그 안에 넣을 텍스트내용자바스크립트에서 img 요소를 획득하여 width, height 지정 - 18, 19줄 할 일 목록 - 완료 버튼 클릭했을 때 색깔이 변하게 하기 - 삭제 버튼을 클릭했을 때 해당 목록 삭제되기 실행결과 To Do List 버튼 클릭 이벤트 생성하고 추가했을 때 목록이 추가 노드트리 BODY 아래에 "#te..
2023.09.18 -
JAVASCRIPT 15
input 태그의 속성을 checkbox로 지정한다. 버튼을 클릭하면 input 태그의 value 속성이 콘솔에 찍힌다. 내 코드 - addEventListener()로 구현 버튼을 클릭했을 때 입력란에 '최부장'이 '김대리'로 바뀌게 하기 input check 박스에 'checked' 된 속성만 콘솔에 출력하기 일본,중국, 타이완 같은 국가를 체크하면 가격이 더해진 합계가 출력 toLocaleString() - 숫자마자 콤마가 찍힌다. 다음에 input에 클래스명을 써서 클래스끼리 묶어서 myChk 변수에 요소를 가져와서 값을 가져와 합계를 구하자. 총합을 구하는 totalPrice가 let nation 뒤에 오면 초기화가 되지 않아고 3개 항목에서 체크하고 클릭하고 나서 클릭 전에 더해진 가격부터 체..
2023.09.15