본문 바로가기
반응형

개발 공부/JS, JQuery29

JQuery(제이쿼리) Method/ .remove() - 선택한 요소를 제거하는 메서드) JQuery(제이쿼리) Method/ .remove() - 선택한 요소를 제거하는 메서드) .remove() .remove()는 선택한 요소를 HTML 문서에서 제거한다. ​ 문법 .remove( [selector] ) 특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣는다. 예를 들어 $( 'p' ).remove( '.rm' ); 은 클래스 값으로 rm을 가진 p 요소를 제거한다. 다음과 같이 해도 결과는 같다. $( 'p.rm' ).remove(); 예제 버튼을 클릭하면 rm을 클래스 값으로 가지는 h1 요소를 제거한다. Click to Remove h1 Heading Lorem ipsum dolor. 결과) ​ ​ 참고 선택한 요소의 내용만 지울 때는 .empty()를 사용한다. 선택한 .. 2023. 11. 25.
JQuery(제이쿼리) Method /.val(), html(), text() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드 JQuery(제이쿼리) Method /.val(), html(), text() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드 .val() from의 선택 요소 텍스트 값을 설정 혹은 받아옴 ​.val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드 - val() : input, select,textarea 등의 form elements에서 값을 구한다. .val(value) : form elements에 값을 지정한다. - 값을 변경 할 때 : $(변경할 부분 선택).val(값); 값을 가져 올 때 : $(변경할 부분 선택).val(값); ex) $('input').val('helloworld); //input의 value 값에 helloworld라고 넣는다 $('input')... 2023. 11. 25.
JQuery(제이쿼리) 속성추가, 제거, jquery attr(), removeAttr() JQuery(제이쿼리) 속성추가, 제거, jquery attr(), removeAttr() 제이쿼리 속성추가, 제거, jquery attr(), removeAttr() - attr() 사용방법 jquery 의 attr() 메소드는 선택된 요소의 속성이나 값을 설정, 또는 리턴하는데 사용된다. 이 메소드가 그 속성값을 리턴할 때, 이것은 첫번째로 매치되는 요소의 값을 리턴한다. 이 메소드가 그 속성값을 설정할때, 이것은 매치되는 요소들의 하나 이상의 속성/값의 묶음으로 설정한다. 1. 속성값을 리턴 $(selector).attr(attribute) ​ 예) 이미지가 있을 때 이 요소의 width 속성값을 경고창에 띄우는 예이다. ​ 2. 속성과 값을 설정 $(selector).attr(attribute,v.. 2023. 11. 25.
JQuery(제이쿼리) 이벤트 사용시 $(this)의미와 활용 JQuery(제이쿼리) 이벤트 사용시 $(this)의미와 활용 $(this)는 일종의 변수, 선택자라고 볼 수 있다. 일반적으로 동일한 소스가 반복되는 네비게이션 메뉴, 탭, 아코디언메뉴, 리스트등에서 많이 활용. 활용 예) btn이라는 class를 동일하게 가진 버튼들이 존재할때 ​ 현재는 어느버튼을 눌러도 class가 같기 때문에 모든 버튼에 글씨가 변하는 것을 볼 수 있다. 이 this를 활용하여 타겟버튼만 변경되게 바꿔보면 button.click(function(){ $(this).val("눌렀어~"); }); 이 부분만 바꾸면 ​ 만약 이 방법을 안쓴다면 아래 예제소스와 같이 각 버튼마다 id를 별도로 줘야한다. 각각의 이벤트를 만들어주는 번거롭고 비효율적인 일을 할수도 있다. 그러니 이 $(t.. 2023. 11. 25.
Ajax 사용 - Ajax 메소드 $.ajax() $.get() $.post() .load() Ajax 사용 - Ajax 메소드 $.ajax() $.get() .load() Ajax 메소드 메소드 설명 $.ajax() 비동기식 Ajax를 이용하여 HTTP 요청을 전송함. $.get() 전달받은 주소로 GET 방식의 HTTP 요청을 전송함. $.post() 전달받은 주소로 POST 방식의 HTTP 요청을 전송함. $.getScript() 웹 페이지에 스크립트를 추가함. $.getJSON() 전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JSON 파일을 전송받음. .load() 서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치함. $.ajax() 메소드 jQuery는 Ajax와 관련된 다양하고 편리한 많은 메소드를 제공한다. 그중에서도 $.ajax() 메소.. 2023. 11. 24.
element 요소 조작 (append, prepend, before, after, parent) Element 요소 조작 (append, prepend, before, after, parent) 기존 요소의 내부에 추가 .append() 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다 .prepend() 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다 .appendTo() 선택된 요소를 해당 요소의 마지막에 추가한다. .prependTo() 선택된 요소를 해당 요소의 첫번째에 추가한다. ​ 기존 요소의 외부에 추가 .before() 선택한 요소의 바로 앞쪽에 새로운 요소나 콘텐츠를 추가한다. .after() 선택한 요소의 바로 뒤쪽에 새로운 요소나 콘텐츠를 추가한다. .insertBefore() 선택한 요소를 해당 요소의 앞쪽에 추가한다. .insertAfter() 선택한 요소를 해당.. 2023. 11. 24.
반응형

티스토리툴바