본문 바로가기
728x90

JS/jQuery

JS/jQuery 2022. 5. 9. [jQuery] jQuery 예제 (회원 가입) jQuery로 회원가입 //정규식 const expNameText = /[가-힣]+$/; const expNameText = RegExp(/[가-힣]+$/); if(!expNameText.text($('#name').val())){ .... } 회원가입 아이디 : 비밀번호 : 비밀번호 확인 : 이름 : 휴대폰 번호 : 이메일 : 취미 : 드라이브 영화감상 쇼핑 게임 운동 주민등록번호 : - 생년월일 : 년 월 일 우편번호 : 주소 : 상세주소 : 참고항목 : function sendit() { //정규식 const expNameText = RegExp(/[가-힣]+$/); //이름 가-힣범위 +: 몇글자든 상관 없고 한글만 나오고 $:끝냄 const expHpText = RegExp(/^\d{3}-\d{..
JS/jQuery 2022. 5. 9. [jQuery] 이벤트 이벤트의 변화 - bind() -> live() -> delegate() -> on() 이벤트 - 1 이벤트 - 2 공부한 과목 HTML, CSS, JavaScript, jQuery
JS/jQuery 2022. 5. 9. [jQuery] 클래스 클래스의 설정 addClass() - 클래스를 추가 removeClass() - 클래스를 제거 toggleClass() - 클래스가 없으면 인수로 전달받은 클래스가 추가되고, 있으면 제거 hasClass() - 인수로 전달받은 값이 선택한 요소의 클래스 이름과 일치하는지 확인 클래스의 설정 jquery HTML CSS JavaScript
JS/jQuery 2022. 5. 9. [jQuery] attribute & property attribute와 property의 차이 //옛날 문법 attr() - 해당 요소의 명시된 속성의 속성값을 반환하거나 설정 prop() - 제이쿼리 1.6부터 정의된 메소드 - 선택한 요소 집합의 첫번째 요소의 지정된 프로퍼티 값을 반환하거나, 선택한 요소의 지정된 프로퍼티를 전달받은 곳으로 설정 attr와 prop차이 HTML CSS
JS/jQuery 2022. 5. 9. [jQuery] 박스 모델 메소드 박스모델 관련 메소드 width() - 가로 크기를 가져오거나 설정하는 메소드 height() - 세로 크기를 가져오거나 설정하는 메소드 innerWidth() - 요소의 가로크기 + 패딩의 가로크기를 합한 크기를 가져오거나 설정하는 메소드 innerHeight() - 요소의 세로크기 + 패딩의 세로크기를 합한 크기를 가져오거나 설정하는 메소드 outerWidth() - 요소의 가로크기 + 패딩의 가로크기 + 테두리의 가로크기를 합한 크기를 가져오거나 설정하는 메소드 outerHeight() - 요소의 세로크기 + 패딩의 세로크기 + 테두리의 세로크기를 합한 크기를 가져오거나 설정하는 메소드 outerWidth(true) - 요소의 가로크기 + 패딩의 가로크기 + 테두리의 가로크기 + 마진의 가로크기를 ..
JS/jQuery 2022. 5. 9. [jQuery] 요소의 탐색 조상 요소의 탐색 parent() - 선택한 요소의 부모요소를 선택 - 선택자를 인수로 전달하여 전달받은 선택자에 해당하는 부모 요소만을 선택할 수 있음 parents() - 선택한 요소의 조상요소를 모두 선택 - 선택자를 인수로 전달하여 전달받은 선택자에 해당하는 부모 요소만을 모두 선택할 수 있음 parentsUntil() - 선택한 요소의 조상 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택 - 선택자를 인수로 전달하지 않으면 parents() 메소드와 같이 선택한 요소의 조상 요소를 모두 선택 형제 요소의 탐색 siblings() - 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택 next() - 선택한 요소의 바로 다음에 위치한 형제 요..
JS/jQuery 2022. 5. 9. [jQuery] 요소 요소의 포함 wrap() - 선택한 요소를 포함하는(감싸는) 새로운 요소를 추가 wrapAll() - 선택한 모든 요소를 포함하는(감싸는) 새로운 요소를 추가 wrapInner() - 선택한 요소에 포함되는(안쪽) 새로운 요소를 추가 요소의 포함 첫번째 컨텐츠 두번째 컨텐츠 div 요소 추가 요소의 복사 clone() - 선택한 요소를 복사하여 새로운 요소를 생성(ctrl + c만 한 상태) - 기존의 HTML 요소를 복사하여 새로운 HTML 요소를 생성할 뿐이기 때문에 append(), appendTo() 메소드와 같이 사용해야 함 요소의 복사 첫번째 아이템 두번째 아이템 세번째 아이템 아이템 복사 요소의 대체 replaceAll() - 선택한 요소를 지정된 요소로 대체 - 이 메소드는 인수로 선택자나..
JS/jQuery 2022. 5. 9. [jQuery] jQuery로 DOM 다루기 요소의 추가 append() - 선택한 요소의 마지막에 새로운 요소나 컨텐츠를 추가 $('선택자').append('요소'); appendTo() - append() 메소드와 같지만 소스의 타겟의 위치가 서로 반대 $('요소').appendto('선택자'); prepend() - 선택한 요소의 처음에 새로운 요소나 컨텐츠를 추가 prependTo() - prepend() 메소드와 같지만 소스와 타겟의 위치가 서로 반대 요소의 추가 첫번째 아이템입니다. 두번째 아이템입니다. 세번째 아이템입니다. 아이템 추가1 아이템 추가2 기존 요소의 추가 before() - 선택한 요소의 바로 앞에 새로운 요소나 컨텐츠를 추가 insertBefore() - before() 메소드와 같지만 소스와 타겟의 위치가 서로 반대 ..
JS/jQuery 2022. 5. 9. [jQuery] 메소드 체이닝(method chaining) 메소드 체이닝(method chaining) - 여러 메소드가 연속적으로 호출되는 방식 add() - 특정 요소를 추가로 선택할 때 사용 children() - 매개변수로 전달된 요소를 하위 요소에서 찾아줌 - 매개변수를 전달하지 않으면 하위 요소의 모든 요소를 선택 addback() - 현재 선택한 요소와 함께 이전에 선택한 요소도 선택함 find() - 선택한 요소의 자손 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택 - 별표(*)를 인수로 전달하여 선택한 자손 요소를 모두 선택 end() - 현재 연속적인 명령(메소드 체이닝)을 종료하고 선택 집합의 이전 요소를 찾아 반환 is() - 인수로 전달된 요소가 존재하는지 여부(true, false)를 리턴 메소드 체이닝 내용 1-1 내용..
JS/jQuery 2022. 5. 9. [jQuery] jQuery 선택자, 메소드 선택자 함수가 적용되길 원하는 요소 및 속성 JavaScript vs JQuery 선택자 JavaScript JQuery document.getElementsByTagName("요소이름") $('요소이름') document.getElementsByClassName("클래스명") $('.클래스명') document.getElementsById("id명") $('#id명') 필터선택자 선택자명 설명 선택자명 설명 :eq(n) 선택한 요소 중에서 인덱스가 n인 요소를 선택함 :header 선택한 요소 중에서 h1부터 h6까지의 요소를 모두 선택함 :gt(n) 선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택함 :lang(언어) 선택한 요소 중에서 지정한 언어의 요소를 모두 선택함 :lt(n) 선택한 요..
JS/jQuery 2022. 5. 9. [jQuery] jQuery 제이쿼리(jQuery) - 오픈소스 기반의 자바스크립트 라이브러리 - 문서 객체 모델(DOM)와 이벤트 (Event)에 관한 처리를 쉽게 할 수 있음 - Ajax 응용 프로그램을 빠르게 개발 가능 - 크로스 브라우징(브라우저들 끼리 동일하게)을 위해 사용(예전에 ms는 웹 표준화에 동참 x) 제이쿼리 버전 1.X : 익스플로러 6, 7, 8 버전에서의 동작까지 모두 지원하는 버전 2.X : 버전1에서 지원하는 익스플로러 6, 7, 8 버전에 대한 지원을 중단한 버전 3.X : 제이쿼리 표준. 호환성을 유지한 간결하고 빠른 설계. 익스플로러 9 이상에서만 동작 제이쿼리 공식 사이트 http://jquery.com/ (jQuery 파일을 포함해서 개발할 때) - Download the compressed, ..

티스토리툴바