JavaScript (15) 썸네일형 리스트형 [jQuery] size(), length 비교해보기 jQuery를 사용하다 보면 선택자(Selector)를 통해 DOM을 제어하는 일이 대부분이다. 그중에 선택된 객체들의 개수를 구하고 싶을 때가 있다. 그때 쓰이는 size()와 length를 알아보기로 했다. foo bar 간단한 예제로 size()와 length를 사용해봤다. 결과는 같았다. 무슨 차이가 있을까? jQuery 소스를 확인해보니 size 함수는 결국 length를 반환하는 것이다. trigger('click')이랑 click()의 차이처럼 함수로 한번 감싸서 속도의 차이가 있을 것 같다. 하지만 속도를 비교했을땐 거의 비슷하며 근소한 차이였다. 그래서 공식문서를 찾아봤다. The .size() method is functionally equivalent to the .length pro.. [jQuery] 선택자(selector) id, name, class 비교해보기 업무 하면서 input 태그를 사용하는 일이 많아졌다. 그러다 문득 1개의 input 태그를 id로 가져오는 것과 name으로 가져오는 것의 차이가 궁금했고 여러 개의 input을 가져올 때 name과 class도 비교해보고 싶었다. 우선 한 개의 태그를 기준으로 비교해봤다. console.time("time"); for(var i=0; i class > name 순으로 빠른 것을 확인했다. 단건 태그는 id로 진행해야겠고 부득이한 경우에는 name보다는 class를 활용하는 게 좋겠다. 그럼 여러 개의 태그는 어떨까? console.time("time"); for(var i=0; i [JavaScript] for in, for of 차이 알아보기 코드 리뷰할 때 for of에 대한 내용이 나와서 한번 정리해야겠다는 생각이 들었다. for in과 for of 등 반복문을 사람마다 다양하게 사용하는 것을 발견하였고 각자 업무에 따른 의도가 있을 것 같다. for in에 대한 공식 문서의 설명은 다음과 같다. for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.) for in은 객체에서 쓰이는 반복문으로 알고 있고 순서가 보장되지 않으며 key값으로 반복한다고 알고 있다. 설명을 봤을 때 알고 있는 내용이 포함되어있지만 "상속된 열거 가능한 속성"에 초점을 맞춰서 알아봐야겠다. var arr = [5, 6, 7]; for(var.. [jQuery] is(':checked'), prop('checked') 비교해보기 최근 개발업무 중에 체크박스 컨트롤하는 일이 많아졌다. 체크박스 제어는 단순하지만 깔끔하고 효율적인 소스를 고민하다 보니 은근히 어렵다! 소스를 보던 중 같은 기능을 다른 형태로 사용하는 걸 발견해서 알아보기로 했다. 오늘의 주제는 체크 여부를 확인 할 수 있는 is(':checked')와 prop('checked')이다. 간략하게 input 태그만 있는 예제를 사용해보았다. // 1개의 checkbox 체크 여부 $("#chkAll").is(":checked"); $("#chkAll").prop("checked"); // 여러개의 checkbox 체크 여부 $("input[name=chk]").is(":checked"); $("input[name=chk]").prop("checked"); id로 che.. [jQuery] $().each, $.each 차이 알아보기 제이쿼리로 DOM을 다룰 때.. 객체나 배열 등 반복이 필요할 때 주로 쓰는 each() 에 대해 알아봤다. 주의 깊게 봤던 부분은 $. each()와 $("selector").each() 두 가지 표현법이다. 하나만 쓰면 되지 왜 두 개일까.. 차이점을 찾아봤다! 우선 기본적인 사용법은 $("li").each(function(i, e) { // li 요소를 반복함 }); 제이쿼리의 selector로 요소를 가져와서 반복문을 처리한다. Type: Function( Integer index, Element element ) A function to execute for each matched element. 반복을 돌 때마다 받아 올 수 있는 파라미터는 index와 element이다. A B C $("li.. [jQuery] click(), trigger('click') 차이 알아보기 js소스를 보다가 또 헷갈리는 부분을 찾았다. 바로 클릭 이벤트..! $("#btn").on("click", function() { // click event }); $("#btn").click(); $("#btn").trigger("click"); id가 btn인 요소에 click 이벤트를 바인딩한 예제이다. click()과 trigger('click') 둘 다 바인딩된 click 이벤트를 수행한다. 도대체 다른 게 뭘까? click : Bind an event handler to the "click" JavaScript event, or trigger that event on an element. trigger : Execute all handlers and behaviors attached to t.. [jQuery] attr(), prop() 차이 알아보기 제이쿼리를 쓰면서 헷갈리는 점이 항상 있다. 버튼을 비활성화(disabled)하거나 체크박스를 선택(checked)하는 작업이 필요할 때..! // 버튼 비활성화 $("#btn").attr("disabled", true); $("#btn").prop("disabled", true); // 체크박스 선택 $("#chk").attr("checked", true); $("#chk").prop("checked", true); 둘 다 잘 되는데 뭘 써야 하는 걸까? 알아보기 전에 기본적인 사용법을 파악해보자! attr(attributeName) : 속성의 값을 가져온다. attr(attributeName, value) : 속성의 값을 설정한다. (value type : String or Number or null.. 이전 1 2 다음
