본문 바로가기
반응형

Library & Framework/jQuery13

[jQuery] isEmptyObject() - 객체에 값이 있는지, 비었는지 체크하기 객체의 빈값 여부를 찾는 방법은 다양할 수 있는데,그 중에서 jQeury에서 제공해주는 jQuery.isEmptyObject() 메서드에 대해 알아보고자 한다. ▷ 구문 - jQuery.isEmptyObject(object) - $.isEmptyObject(object) (둘이 같은 의미이다.) 예제를 통해 알아보도록 하자. ▷ 예제1) jQuery.isEmptyObject({}); //true jQuery.isEmptyObject({it : 'mine'}); //false $.isEmptyObject({}); //true $.isEmptyObject({it : 'mine'}); //false 참조 : https://api.jquery.com/jquery.isemptyobject/ jQuery.isEmp.. 2021. 7. 1.
[jQuery] 커서 현재 위치 확인하기 (ft. selectionStart, selectionEnd, setSelectionRange) jQeury 에서 제공해주고 있는 selection 시리즈 3종(selectionStart, selectionEnd, setSelectionRange) 에 대해 알아보자. 사실 이렇게 정리를 하면서도 드는 생각이 이 기능은 쓸일이 거의 없다고 생각된다. 진짜 특별한(?) 경우가 아닌 이상... 어쩌다 접하게 되어서 정리나 해두고자 한다. ▷ 구문 .selectionStart .selectionEnd .setSelectionRange(selectionStart, selectionEnd [, selectionDirection]); //selectionDirection: forward/backward (default : none) input type text 나 textarea 등 뭔가를 작성하는 곳에서 사용.. 2021. 5. 8.
[jQuery] dom 요소 복사하기 (ft. clone()) jQuery에 있는 .clone() 메서드를 사용하여 특정 dom 요소를 복사해보자. ▷ 구문 .clone( [withDataAndEvents ] ) //withDataAndEvents : true/false (default : false) 일반적인 구문은 위와 같으며 withDataAndEvents 매개변수를 boolean값으로 줄 수 있으며 빈값으로 쓸 경우 기본적으로 false로 들어가게된다. 좀 더 파고들자면 공홈에 아래와 같이 나와있다. 사실 그렇게 까지 깊게 파고들필요는 없어보이며 매개변수에 true/false를 제어할 수 있다는점과 true를 줄 경우 요소가 가지고 있는 이벤트까지 복사할 수 있는 정도로만 알고있으면 된다. 예제를 통해 가볍게 알아보자. (예제는 공식 jQeury API Do.. 2021. 3. 23.
[jQuery] 클래스 추가, 제거, 토글, 확인 하기 (ft. addClass, removeClass, toggleClass, hasClass) jQeury를 기반으로 특정 요소의 class를 추가, 제거, 토글, 확인 하는 방법에 대해 알아보자. 각각 제목에서 언급한 것 처럼 addClass, removeClass, toggleClass, hasClass 이다. ▷ html 이렇게 html 을 가지고 있다는 가정하에 예제 코드를 살펴보자. ▷ 예제1) addClass() - 클래스 추가 $('.mine').addClass('it'); // ▷ 예제2) removeClass() - 클래스 삭제 $('div').removeClass('mine'); // ▷ 예제3) toggleClass() - 클래스 토글 $('div').toggleClass('mine'); // $('div').toggleClass('mine'); // toggle에 대해 잘 모.. 2021. 1. 16.
[jQuery] radio / checkbox 제어하기(ft. 활성화/비활성화) input 태그의 text의 경우 readonly라는 속성을 가지고있어 쉽게 활성화/비활성화를 시킬수 있지만 radio/checkbox 같은 녀석들은 readonly 속성을 사용할 수 없다. 그래서 radio/checkbox의 활성화/비활성화 제어 방법에 대해 기록해 두고자 한다. 사실 찾아보면 다양한 방법들이 나올텐데 여기서는 readonly 대신 사용할 수 있는 disabled 라는 속성을 활용할 것이다. 코드를 통해 가볍게 접근해보자. ▷ 예제1) radio/checkbox 제어 $("input:checkbox[name=mineCheck]").attr("disabled", true); //비활성화 $("input:checkbox[name=mineCheck]").attr("disabled", fals.. 2021. 1. 10.
[jQuery] UI draggable options 적용하기 (ft. containment, handle) 앞서 draggable() 메서드를 통해 드래그 기능을 부여하는 게시글을 작성했었는데 [jQuery] 지정된 dom 요소 드래그 기능 부여하기 (ft. jQuery UI - .draggable()) [jQuery] 지정된 dom 요소 드래그 기능 부여하기 (ft. jQuery UI - .draggable()) - 지정된 dom 요소 드래그 기능 부여하기 - dom 요소를 제어할 때 드래그 기능을 사용해야 하는 경우가 생길수 있는데 최근에 자주 쓰게 되어서 정리해두고자 한다. jQuery UI 에서 제공하는 기능들이 mine-it-record.tistory.com draggable() 메서드에는 각종 options들이 존재하는데 그 중에서 내가 직접 써본 containment 옵션과 handle 옵션에 대.. 2020. 12. 15.
[jQuery] input text value 값 클릭/포커스 시 전체 선택하기 - input text value 값 클릭/포커스 시 전체 선택하기 - input type text 태그의 value 값을 전체 선택하는 방법에 대해 알아보자. 예제 코드를 통해 input tag가 focus 되는 순간 select 시켜주는거라 사실상 한줄이면 사용 가능하다. ▷예제1) function mine(){ $(event.target).select(); } 이미지로 보면 아래와 같은 일반 input tag에 value 값이 있고, 선택하게 되면 onfocus를 통해 메소드를 실행 후 $().select()가 실행되면서 아래와 같이 나온다. 2020. 11. 14.
[jQuery] 드래그 가능한 리스트 목록 만들기 (ft. jQuery UI - sortable) - 드래그 가능한 리스트 목록 만들기 - ~ 태그로 이루어진 리스트로 (꼭 이 구조가 아니여도 된다.) 드래그로 순서를 바꿀수 있는 목록을 만들어 보도록 하자. 드래그 기능은 jQeury UI에서 제공해주고 있는 sortable() 메서드를 사용할 것이다. 실제 코드를 봐보자. ▷ 드래그 가능한 리스트 만들기 코드 mine-it-record mine 1 mine 2 mine 3 mine 4 mine 5 위와 같이 구성을 해놓고 실행해보면 화면은 다음과 같다. 이제 위 코드에 대해 상세하게 알아보도록 하자. 위 예제는 jQeuryUI 홈페이지에서도 제공해주는 소스코드이다. https://jqueryui.com/sortable/ Sortable | jQuery UI Sortable Reorder elemen.. 2020. 10. 3.
[jQuery] 특정 DOM요소 앞뒤로 삽입하기 (ft. after()/before()& insertAfter()/insertBefore() ) - 특정 DOM요소 앞 뒤에 값 삽입하기 - 우선 제목에 나와있는 after(), insertAfter(), before(), insertBefore()에 대해 알아보자. 메소드 내용 after() 지정한 요소 뒤에 새로운 요소를 삽입 A.after(B) - A 뒤에 B를 추가 insertAfter() 지정한 요소 뒤에 새로운 요소를 삽입 A.insertAfter(B) - B 뒤에 A를 추가 before() 지정한 요소 앞에 새로운 요소를 삽입 A.before(B) - A 앞에 B를 추가 insertBefore() 지정한 요소 앞에 새로운 요소를 삽입 A.insertBefore(B) - B 앞에 A를 추가 이제 예제를 통해 접해보자. ▷예제1) $(".btnCtrl").click(function(){ v.. 2020. 10. 1.
반응형
TOP