JavaScript & JQuery25 [JQuery] 상위요소, 부모 요소 찾는 방법(parent, parents, closest) 제이쿼리를 통하여 부모 요소를 선택하는 방법은 대표적으로 세 가지 함수가 있습니다. parent() parents() closest() parent() parent 함수는 해당 요소의 바로 위에 존재하는 하나의 부모 요소를 반환합니다. 아래 예시와 같이, parent 함수를 이용하여 span 태그의 부모요소를 찾을 경우, p태그를 반환하게 됩니다. What is the parent elements? parents() 만약 하나가 아닌 모든 부모요소를 찾을경우에는 parents 함수를 사용합니다. 아래 예시와 같이, parents 함수를 이용하여 span 태그의 부모요소를 찾을 경우, p태그와 div 태그 모두를 반환하게 됩니다. What is the parent elements? closest() clo.. 2022. 12. 29. [JavaScript] 버튼에 강제 클릭 발생 시키기 - click() 자바스크립트를 통하여 강제로 클릭 이벤트를 발생시킬 수 있습니다. click 함수 자바스크립트의 click 함수는 사용자가 클릭을 하지 않아도 강제적으로 클릭 이벤트를 발생시키는 함수입니다. 아래와 같은 형태로 사용할수있습니다. element.click() 자세한 사용 예시는 아래 코드를 통해 확인해볼 수 있습니다. 페이지 진입 시, document.getElementById('btn_aaa').click(); 코드가 실행됩니다. 1) id의 값이 btn_aaa 인 버튼에 click함수를 걸어주게 됩니다. 2) click함수로 인하여 id의 값이 btn_aaa 인 버튼이 눌려지게 됩니다. 3) 해당 버튼이 onclick 이벤트로 가지고 있는 afterBtnClick 함수가 실행되게 되어 "btn_aaa .. 2022. 12. 29. [JQuery] 사용자 데이터, 커스텀 데이터(custom data - data-xx의 형태) 커스텀 데이터 HTML5에서는 해당 요소에 사용자가 임의로 지정한 속성값을 활용할 수 있습니다. 이를 커스텀 데이터 속성(custom data attributes)이라고 부르며, data- 뒤에 사용할 변수명을 입력한 뒤 사용할수있습니다. 커스텀 데이터 생성 아래와 같은 형태로 커스텀 데이터를 만들수있습니다. data-사용하고싶은 명칭 아래 코드와 같이 커스텀 데이터를 생성할 수 있습니다. data-player-1, data-player-2, data-player-3이라는 커스텀 데이터를 생성하여 각각의 값을 입력하였습니다. Son Kane Kulusevski 커스텀 데이터 추출 아래와 같이 jQuery를 통하여 커스텀 데이터의 값을 추출할 수 있습니다. 선택자.data(커스텀 데이터 명); $('li'.. 2022. 12. 23. [JQuery] 속성 추가, 제거(attr, removeAttr) attr() - 속성을 가져오거나 추가 attr()은 선택된 요소의 속성의 값을 가져오거나 속성을 추가하는 데 사용되며, 아래와 같은 형태로 사용할 수 있습니다. 1. 속성 값 가져오기 $(선택자).attr( 선택요소 ); 아래의 실제 코드를 통하여, 자세한 사용 예시를 알아볼 수 있습니다. 기본정보 test1이라는 id값을 가지고 있는 div영역을 클릭하면, test1이 가지고있는 class속성의 값인 detail123을 가져와 alert형식으로 알려주게 됩니다. 2. 속성 값 변경하기 $(선택자).attr( 선택요소, 변경할 값 ); 아래의 코드는 test1이라는 id값을 가지고 있는 div영역을 클릭하면, test1이 가지고있는 class속성의 값을 detail123에서 detail456으로 변경합.. 2022. 12. 23. [JQuery] find를 이용하여 하위 요소 class 찾기 find 메소드 find 메소드는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 사용 예시 아래 코드와 같이, aaa라는 id값을 가지고 있는 요소에서 find메소드를 사용하여 class_123이라는 클래스의 value값을 구할 수 있습니다. 또한, find로 찾은 하위 요소에 다양한 속성을 추가할 수 있습니다. 주의할 점 find() 메소드는 하위 요소를 모두 찾기 때문에, 하위 요소의 개수가 많다면 찾는 속도가 오래 걸려 페이지 로딩이 느려질 수 있습니다. 2022. 12. 15. [AJAX] ajax를 이용해 배열 형태로 보내기 비동기로 데이터를 전송할 경우 ajax를 사용하는데, ajax를 사용할때 배열의 형태 데이터를 전송하는 방법입니다. JSON 형태로 전달 아래의 예시와 같이, Ajax를 사용하여 Controller에 파라미터 전송 시 JSON 형태로 전달합니다. { "player": "son", "goal": 30 } 여러 개의 데이터를 배열 형식으로 전달 만약 처리해야 될 데이터가 여러개라면 배열 형식으로 데이터를 전달할 수 있습니다. 아래와 같이 ajax에서 배열 형태의 json 데이터를 controller에 전송할 수 있습니다. //배열 선언 var playerArray = []; //배열에 들어갈 데이터1 var player1 = { "player" : "son", "goal" : 30 } //배열에 들어갈 데이.. 2022. 10. 7. [JavaScript]카카오톡 인앱 브라우저 닫기(안드로이드, IOS) 카카오톡 인앱 브라우저 닫기 버튼이 동작하는 방식이 안드로이드, IOS에 따라 다릅니다. 아래와 같이 사용할 수 있습니다. 사용 방법 안드로이드 kakaotalk://inappbrowser/close IOS kakaoweb://closeBrowser 사용 예시 코드 function ClosePage(){ var _ua = window.navigator.userAgent || window.navigator.vgjendor || window.opera; //alert(_ua.toLocaleLowerCase().indexOf("kakaotalk")) if (_ua.toLocaleLowerCase().indexOf("kakaotalk") > -1) { //alert("1") window.location.href.. 2022. 8. 17. [JavaScript]Input type number의 maxlength 적용(slice 메서드) HTML에서 input 태그의 타입 중 하나인 number 타입을 사용할 때 maxlength 속성을 이용하여 입력 가능한 숫자의 수를 정하려고 하지만, 적용이 잘 되지 않았습니다. 검색을 해보니 input type='number'의 경우 maxlength가 작동되지 않는 사례를 발견할 수 있었고, 해결방법 또한 알 수 있었습니다. 해결 방안 바로 JavaScript를 이용하여 입력 글자의 수를 조절할 수 있습니다. 아래는 number 타입의 input 태그입니다. maxlength는 8로 설정하였지만 그 이상 입력되는 게 문제입니다. 이럴 경우 JavaScript를 사용하여 해결할 수 있는데, 아래와 같이 input 태그에 oninput을 할 경우 연결할 메서드를 선언 합니다. 코드 분석 타입이 "nu.. 2022. 5. 20. [JavaScript]Split 함수(문자열을 잘라 배열로 변환) JavaScript의 Split함수는 문자열을 일정한 구분자로 자르는 메소드입니다. 구분자로 잘라진 문자열들은 배열에 담아 사용하게 됩니다. Split함수 Split함수는 다음과 같은 형식으로 사용합니다. string.split(separator, limit); 위 형식과 같이 'Split함수'는 문자, 문자열을 'separator'라는 구분자를 기준으로 잘라 'limit' 크기 이하의 배열에 저장하여 리턴하게 됩니다. 여기에서 'separator'라는 구분자는 필수값은 아니지만, 입력하지 않으면 문자열 전체를 배열에 담아 리턴하게 됩니다. 그렇기 때문에, 문자열을 잘라줄 구분자를 명시합니다. 'limit'은 최대 분할 개수를 나타내며, 필수 값이 아닙니다. Split함수의 사용 예제 1. 파라미터를 입.. 2022. 4. 28. 이전 1 2 3 다음 반응형
