ksmart_html_css_js/jQuery(10)
-
개발 환경 구축_ jQuery
- 웹 호환성, 애니메이션 효과 등 쉽게 구현할 수 있도록 만들어진 자바스크립트 라이브러리 - css 선택자를 활용하여, 객체 조작 가능 - 라이브러리이므로 외부 파일을 내 프로젝트(작업 페이지)에 삽입해야 함 네트워크 전송 방식 (삽입) - 제이쿼리 사이트에서 download 메뉴로 들어가 CDN 목록 복사해서 내 페이지에 삽입 - 간단한 테스트를 할 경우 사용 - 네트워크 차단된 프로젝트에서는 쓰일 수 없음. jQuery 개발 환경 구축 https://jquery.com/download/ 들어간 후 ctrl + s 저장 프로젝트 파일 -> WebContent -> resource -> js 내에 저장 사용방법 - 제이쿼리 함수 실행 시 제이쿼리 객체가 반환된다. - 제이쿼리 함수 실행 시 제이쿼리..
2022.01.31 -
선택자_jQuery
직접 선택자 - 제이쿼리 함수를 실행 시 인수에 css 선택자가 삽입 - id, class, 태그명, 속성, 속성명과 속성값, and, or - 가상선택자 안녕하세요. 안녕하세요. 안녕하세요. console.log($('.myCheck:checked')); 인접관계 선택자 - 검색된 객체에서 제이쿼리 메서드를 활용하여 상하관계의 객체를 검색 할 수 있다. parent - 검색된 객체의 한단계 상위 객체 선택 - $('선택자').parent(); 버튼 버튼 버튼 parents - 검색된 객체의 모든 상위 객체 선택 - 인수값이 있다면 인수에 해당되는 상위 객체만 반환 - $('선택자').parents(); - $('선택자').parents('상위 선택자'); //parents 상위 모든 객체 반환 $(fu..
2022.01.31 -
동적바인딩_jQuery
- 새로 추가된 html 요소에 이벤트가 반응 할 수 있도록 만드는 방법 제이쿼리 동적 바인딩 인수 -> 1.이벤트명, 2.선택자, 3.함수 $(document).on('click', '.add', function(){ console.log('클릭'); $ul01.append(liHtml); }); $(document).on('click','del',function(){ console.log('제거'); $(this).remove(); })
2022.01.27 -
요소, 속성, 객체 조작 메서드3_jQuery
속성 조작 메서드 - 하나의 객체가 가지고 있는 속성을 등록, 수정, 삭제 - html 속성, css(style), class 속성, 상태 속성 조작 - 선택한 객체가 배열이며, 배열의 원소가 여러개일 경우조작 및 행위에 관련된 메서드 실행 시 모든 원소가 영향을 받는다. - 부분적으로 조작이나 행위를 해야 할 경우 원소에 접근하여 조작 및 행위 메서드를 별도로 실행해야한다. attr, removeAttr - attr : 선택한 대상의 속성의 값을 가지고 오거나 속성을 추가 할 수 있다. - removeAttr : 선택한 대상의 속성을 제거 할 수 있다. 속성확인 속성삽입 속성제거 prop - 상태 속성 값을 가지고 오거나 변경한다. - checked, selected, hidden - $('선택자')...
2022.01.21 -
요소, 속성, 객체 조작 메서드2_jQuery
객체 조작(편집) 메서드 - append() -> 선택된 객체 하위 요소 제일 마지막 번쨰에 객체 삽입 - prepend() -> 선택된 객체 하위 요소 제일 첫번째에 객체 삽입 - append, prepend -> html 형태의 문자열을 인수로 삽입하거나, 객체를 삽입할 수 있다. - remove() -> 선택된 객체 제거 - clone() -> 선택된 객체 복제 append, prepend 마지막 요소에 삽입 첫번째 요소에 삽입 객체 생성 후 마지막 요소에 삽입 이동 ----------------------------------- clone, remove - $('선택자').clone() -> 선택된 대상 하위 요소 포함하여 복제 - $('선택자').clone(true) -> 선택된 대상 하위 요소..
2022.01.21 -
이벤트 관련 메서드 2_jQuery
- 여러 이벤트를 한번에 등록 할 수 있다. - 여러 대상에 이벤트를 한번에 등록 할 수 있다.
2022.01.21