목록Front-End/JQuery (6)
너와 나의 프로그래밍
[JQuery] 동적으로 생성된 Textarea에 자동 높이 이벤트 바인딩 IE8부터 Textarea의 높이값이 자동으로 증가되지 않아, 자바스크립트나 제이쿼리를 사용해 자동으로 높이를 늘리는 방식을 많이 사용하고 있다. 순수 CSS를 찾아보려고 노력해 봤지만 특별히 원하는 결과가 나오지 않았다. 기존 Textarea의 Element가 DOM에 있을 때의 자동으로 높이값을 주는 방식은 이미 구글에서도 자동으로 높이값을 늘릴 수 있는 방법이 나와있지만, 동적으로 Textarea가 생성됬을 때 자동으로 높이 값을 설정 할 수 있는 방법을 찾아 모두에게 소개하려고 한다. 먼저 예시를 위해 div 태그를 하나 생성 후 Button을 이용해 클릭 했을 시 Textarea를 생성하기 위해 기본적인 Dom을 생성한다..
예를들어 Element의 CSS를 'background-position : 50% 50%;'로 주었을 때를 가정. Chrome이나 Edge, FF는 background-position-x를 Jquery의 $(element).css('background-position-x'')함수로 값을 받아올 수 있지만, IE11에서는 이상하게도 받아올 수 없어, 순수 자바스크립트(element.style.backgroundPositionX)로 받아왔다. 사실 원인 파악이 가장 중요하지만 아직 원인 파악이 되질 않았다. IE나 Edge는 여러가지로 참 문제가 많은 것 같다.
HTML SelectBox에서 option객체의 순서를 바꾸는 문제는 정말 단골 질문중 하나다. 실제로 구글에 검색해보니 안나오면 이상할 정도로 많이 나온다. 보통 option을 정렬할 때 Selectbox 안 한 개의 option을 선택해서 위, 아래로 위치를 변경하는 기능을 많이 사용하나, 이번에는 option들의 객체가 많고, 다중 선택해서 option들의 위치(위, 아래)를 바꾸고 싶었다. 이 함수를 적용하기 전에 select객체에 'multiple' 속성을 넣는것을 잊지 말자. https://www.w3schools.com/tags/att_select_multiple.asp function up(){ var selected = $j('#'+selectboxId+' option:selected');
요즘 네이버 지식in을 통해 공부하고 있다. 질문자들이 올린 JS나 Jquey 질문등을 통하여 내가 해결해보며 답변자가 되보는 공부다. 그냥 일반적으로 책으로 공부하는것보다 뭔가 더 플러스가 되는 것 같다... 그래서 요번에 재밌는 질문을 가져왔다. Jquery 애니메이션을 활용하여 버튼을 누르면 늘어나고 다시 버튼을 누르면 원상태로 복귀되는 질문이였다. 기초적이고 간단할 지 모르겠지만, 실무에서 정말 많이 쓰이는게 아닌가 싶다. 또 이런식의 웹 페이지를 구현한 곳이 정말 많고 많이 접할 수 있다. (사실 jquery를 공부하면서 애니메이션은 깊게 공부하지 못해서 애니메이션을 처음 접하는 나에게도 정말 좋은 질문이였고 답변 또한 너무 고마웠다.) 질문 코드는 이러했다. = 버튼을 누르고 id가 block..
Ajax 관련 메서드 종류 풀이 load() 외부 콘텐츠를 가져올 때 사용 $.ajax() 데이터를 서버에 POST, GET 방식으로 전송이 가능하며, HTML, XML JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메서드 $.post() 데이터를 서버에 POST 방식으로 전송한 후 서버 측의 응답을 받을 때 사용 $.get() 데이터를 서버에 GET 방식으로 전송한 후 서버 측의 응답을 받을 때 사용 $.getJSON() 데이터를 서버에 GET 방식으로 전송한 후 서버 측의 응답을 JSON 형식으로 받을 때 사용 .getScript() Ajax를 이용하여 외부 자바스크립트를 불러올 때 사용 .ajaxStop(function(){ ... }) 비동기 방식으로 서버에 응답 요청이 완료되었을 때..
직접 선택자 종류 사용법 설명 전체 선택자 $("*") 모든 요소를 선택 아이디 선택자 $("#아이디 명") id 속성에 지정한 값을 가진 요소를 선택 클래스 선택자 $(".클래스 명") 클래스 속성에 지정한 값을 가진 요소를 선택 요소명 선택자 $("요소명") 지정한 요소명과 일치하는 요소들만 선택 그룹 선택자 $("선택1, 선택2, 선택3 ... 선택n") 선택1, 선택2 .... 선택n에 지정된 요소들을 한번에 선택 인접 관계 선택자 종류 사용법 설명 부모 요소 선택자 $("요소 선택").parent() 선택한 요소의 부모 요소를 선택 상위 요소 선택자 $("요소 선택").parents() 선택한 요소의 상위 요소를 모두 선택 하위 요소 선택자 $("요소 선택 하위 요소") 선택한 요소에 지정한 하..