본문 바로가기

분류 전체보기407

프론트엔드5-7. jquery 이벤트 처리하기(onxx)와 hover [이벤트 종류]: 더 많지만 생략,,, onclick, onmouseover, onmouseenter, onmouseout, onmouseleave onchange, onload, onresize, onfocus, onsubmit, onscroll onkeyup, onkeydown, onkeypressm onkeyrelease ondblclick, onreset, onblur, hover 1. HTML 파일 jQuery 이벤트 처리 jQuery 이벤트 처리 jQuery 이벤트 처리 jQuery 이벤트 처리 1.-1 이벤트 처리방법: 선택자와 이벤트 종류(on xx), 이벤트 발생시 실행할 함수 1. 사용자가 h1 태그를 아무거나 한 개만 클릭해도 글자색상이 파란색으로 변한다. 2. h1 태그를 아무거나 .. 2022. 2. 16.
프론트엔드5-6. jquery 요소의 조작(수치 함수 메서드) 1. HTML 파일 수치 조작 메서드 1234567 2. js파일 $(()=>{ $("div:eq(2)").append("수치함수"); }); 3. 폭과 높이를 구하는 함수 1. width( ): 폭을 구하는 함수 / height( ): 높이를 구하는 함수 $(()=>{ let width = $("div").eq(1).width(); let height = $("div:eq(1)").height(); $("div:eq(1)").append("width="+width+", height="+height+""); }); 2. innerWidth(), innerHeight() outerWidth(), outerHeigth() innerWidth(), innerHeight() -> padding을 포함한 폭과 높.. 2022. 2. 16.
프론트엔드5-5. jquery 요소의 조작3(addClass,removeClass,hasClass,toggleClass) 1. HTML 파일 1. addClass( ) jquery에서 스타일시트 클래스를 추가하거나 할 수 있다. 1. CSS 파일 2-1. js파일 $(()=>{ $("img").addClass("c1"); }); 2-2. js파일 $(()=>{ $("img").addClass("c2"); }); 2-3. js파일 $(()=>{ $("img:even").addClass("c3"); // 인덱스기준 짝수번째에 }); 2. removeClass( ) jquery에서 스타일시트 클래스를 삭제할 수 있다. $(()=>{ $("img:odd").removeClass("c2"); // 인덱스기준 홀수번째에 }); 3. toggleClass( ) 클래스가 있으면 지우고, 없으면 추가한다. $(()=>{ $("img").t.. 2022. 2. 16.
프론트엔드5-4. jquery 요소의 조작2(wrap, each, map) 1. 객체 감싸기: wrap( ), wrapAll( ), wrapInner( ), unwrap( ) wrap( ) : 선택자를 특정 태그로 각각 감싼다. wrapAll( ) : 선택자를 특정 태그로 한 번에 감싼다. wrapInner( ) : 선택자의 하위를 특정 태그로 감싼다.(선택한 요소 안을 감싸는 새로운 요소를 추가한다.) unwrap( ) : 선택자의 부모 객체를 삭제한다. 1. HTML 파일 객체조작메서드111 객체조작메서드222 객체조작메서드333 객체조작메서드444 객체 조작 메서드 AAA 객체 조작 메서드 BBB 객체 조작 메서드 CCC 객체 조작 메서드 DDD 1. wrap( ) js파일: id c1을 태그로 감싼다. $(function(){ $(".c1").wrap(""); }); 2.. 2022. 2. 16.
프론트엔드5-3. jquery 요소의 조작1(추가, 삭제, 변경, 복사) 1. 특정 객체의 내용을 변경하거나 가져오기: html( ) text( ) html( ) text( ) 객체에 html 태그를 추가하거나 객체를 가져올 수 있다. 객체내의 내용을 문자로 추가하거나 얻어올 수 있다. 1. html 파일 객체조작 객체조작2 2. js파일 // html( ) // 선택자 객체에 테그를 추가하는 기능(set) $("#obj").html("네이버로 이동하기") // 선택자 내의 태그를 얻어오기(get) let tag = $("#obj").html(); console.log(tag); // text( ) // 선택자 객체에 테그를 추가하는 기능(set) $("#obj2").text("text를 객체에 추가하기"); // 선택자 내의 태그를 얻어오기(get) let tag2 = $(.. 2022. 2. 16.
프론트엔드5-2. jquery의 선택자-2 1. HTML 파일 html/css javascript jquery bootstrap react vue jsp ajax spring 위치선택자 2. 위치선택자 $("#menu>li:first").css("color","orange"); // first = first-of-type $("#menu>li:last").css("color","skyblue"); // last = last-of-type 더보기 $("#menu>li:even").css("background-color","beige"); // 짝수번째 인덱스 0,1,2,3,4,5.. $("#menu>li:odd").css("background-color", "pink"); // 홀수번째 인덱스 더보기 $("#menu>li:nth-last-of-ty.. 2022. 2. 15.

티스토리툴바