JavaScript/jQuery (9) 썸네일형 리스트형 [jQuery] data() 알아보기 jQuery 소스를 보다 보면 data()라는 함수가 자주 등장하거나 아예 없을 때도 있다. 제대로 쓰는 사람이 있고 아예 안 쓰는 사람이 있는 것 같다. 뭐길래 호불호가 갈리는걸까? 알아보자! Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements. 가장 기초적인 공식 홈페이지의 .data() 정의를 알아봤다. 대충 정리하면 요소에 임의 데이터를 저장하거나 데이터를 불러올 수 있다는 것이다. .data( key, value ) Description: Store arbitrary dat.. [jQuery] $(document).ready()와 $(window).load() 차이 알아보기 코드 리뷰에서 vue 소스를 보다가 화면 로딩에 대한 주제가 나왔었다. 가장 기본적인 부분이지만 정리하고 넘어가면 좋을 것 같다는 생각이 들었다. jQuery 할 때 가장 많이 보이는 $(document).ready()는 정확히 뭘까? $(document).ready(function() { // code }); .ready() 함수에 대한 공식 홈페이지의 설명이다. Specify a function to execute when the DOM is fully loaded. The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate.. [jQuery] find(), children() 비교해보기 jQuery 소스를 보다 보면 find()가 많이 쓰인다. find()는 범위를 넓게 검색하고 있다는 걸로 알고 있고 비효율적이라고 생각해 사용하지 않았다. 그래도 제대로 한번 알아보고자 비슷한 두 개의 함수 find()와 children()을 함께 비교해보기로 했다. a b c 가장 간단한 예제인 ul, li 태그로 비교해보기로 했다. 태그에 자식 요소 3개가 있고 요소마다 자식 요소가 한 개씩 있는 상태다. 우선 기준으로 을 찾아보기로 했다. 시작부터 find와 children이 다르게 동작한다. find는 태그 3개를 찾았고 children은 찾지 못했다. 그렇다면 좀 는 찾을 수 있을까? 태그를 찾은 결과는 같았다. find는 하위 요소를 전체 탐색하여 모두 찾을 수 있고 children은 한단계.. [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 [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.. 이전 1 2 다음
