jQuery2017. 8. 28. 11:12

jQuery 플러그인 만드는 방법을 포스팅 합니다. 저는 NEXTREE 에서 보고 배웠습니다. 알기 쉽고 간단하게 글을 쓰셔서 정말 감사합니다. NEXTREE http://www.nextree.co.kr/p9989/ 1) 플러그인을 만드는 이유 일관된 코드 스타일을 유지 jQuery의 기반 코드를 잘 활용 예제 1) 1 $(this).parents().find("input").val(); cs 셀렉터는 엘리먼트 확장 집합의 형태로 표현하고 있습니다. 그리고 jQuery 메소드와 메소드 체인을 셀렉터(확장 집합)에 적용합니다. 이런 코드 스타일은 jQuery를 적용한 스크립트에서 대표적으로 사용되는 스타일 입니다. 개발할 때 이러한 스타일을 반드시 고수해야 하는건 아닙니다. 이와 같은 다른 스타일로도 작성..

jQuery2016. 4. 24. 16:56

원본 링크.http://findfun.tistory.com/271 이 함수는 .bind('change', handler)을 줄여 놓은 것,.trigger('change') 로 change 이벤트를 발생 change 이벤트는 요소(element)의 값이 변경될 때 발생,원래, 이 이벤트는 , , 와 같은 폼 요소 전용,select, checkbox, radio 버튼들을 마우스로 선택하여 상태값을 바꾸는 즉시 이벤트가 발생하지만, 그 외의 다른 요소들은 값을 변경하고 포커스를 잃을 때 이벤트가 발생 예 제 select에서 선택한 값들을 div에 표시합니다. ctrl + click으로 다중 선택해보세요.1234567891011121314151617181920212223242526272829303132 chan..

jQuery2015. 6. 30. 23:57

요즘 작업을하다가 뭔가 스크립트가 이미지 보다 먼저 읽히는 그런 현상이 발생해서준비 과정을 바꿔봤다. 일단 이걸 보자.123$(document).ready(function(){});$(function(){});window.onload = function(){};cs자바스크립트 코딩에 있어 위와 같은 이벤트 핸들러에는페이지가 로딩 되었을 때 일어나길 바라는 이벤트 들이 작성된다. 1번과 2번은 제이쿼리를 쓴다면 정말 흔하게 많이 쓰인다.3번 같은 경우엔 DOM레벨 0방식의 자바스크립트 이다. 이 셋의 차이점은 이렇다. 1번과 2번의 경우에는 리소스와 상관없이 DOM만 생성되어도 호출이 된다.즉. 이미지와 같은 리소스를 요구하는 페이지일 경우 이미지의 로딩 완료와 상관없이 진행된다.12$(document)...

jQuery2015. 5. 13. 00:59

event.target- 이벤트가 시작된 DOM 요소 그럼 저 target 속성은- 이벤트에 등록된 요소나 또는 그 자식(후손?) 이 될 수 있다 그렇다는 소리는 123 cs 이러한 마크업에서'div' 를 클릭을 하였어도'span' 을 클릭했다고 나온다. 이벤트는 내가 이벤트를 건 대상에서부터 발생하는것이 아니라 target에서 부터 발생하다는 점을 잊지말자 http://jquery.com에 있는 예제를 작성해봤다. jacascript 탭을 확인해 보면분명 'body' 를 클릭한게 맞는거 같은데다른 요소들의 정보를 취득할 수 있었다. 이벤트가 정확히 어디에서 시작이 됐는지 찾을 수 있다.(가끔 로직을 짜다보면 분명히 맞게 쓴 경우가 있는데 작동이 안될 때가 있을 수 있다. 그럴땐 이런식으로 정확히 무엇을..

jQuery2015. 5. 8. 10:34

어떤 요소의 길이값을 가져와야 하는 경우가 있다.그럴경우 요소의width 값 만 가져오는경우,width, padding 값만 가져오는 경우,width, padding, border 값만 가져오는 경우,width, padding, border, margin 까지 다 가져오는 경우 그럴경우에 쓰는 메서드 들이다. 일단 그전에 박스 모델의 개념을 알아야 한다. .width() : 딱 요소의 크기 순수한 크기 만큼만..innerWidth() : 요소의 width 값과 padding 값을 더한 값..outerWidth() : 요소의 width 값과 padding 값과 border 값을 더한 값..outerWidth(true) : .outerWidth() 메서드에 parameter 로 true 를 넘겨줄 경우 요소..

jQuery2015. 5. 5. 15:39

.attr() 는 HTML 의 속성을 취급.prop() 는 javascript 의 property를 취급 무엇이 다른걸까? 두개의 메서드는 취급하는 정보가 다르다. 이 두개의 메소드는 취급하는 정보가 다르다..attr()는HTML의 속석(attribute)을、 .prop()는 JavaScript의 프로파티(property)를 취급하는 메소드 이다.여기에서 혼란하기 십상인것이 속성과 프로파티는 「같지만 다른것」이라는 것이다.간단한 예로 링크의 URL 이다. 똑같이 a 태그의 href 속성을 읽어온 것인데완전 다른결과가 나온다.사실은 「속성」이란것은 HTML으로서 기록되어있는 속성의 내용입니다. 물론 당신이 href="http://…"라고 적었을경우는 그대로 취득할 수 있다.한편「property」라고 하는 ..

jQuery2015. 5. 4. 02:38

제이쿼리의 .each() 메서드는 일반적인 반복함수이다.우선, each를 이해하기 위해서는 index 할당에 대하여 이해해야 한다.각 브라우저의 HTML트리를 보면 알겠지만, 코드에 맞게 트리형식의 구조를 띄고 있다.각 리스트 index라는 값을 차례대로 할당받게 되는데,1$(this).index()cs등의 방법으로 확인이 가능하다. each 는 기본적으로 반복문 형태의 메소드 집합이며, 트리구조에 맞게 할당된 index를 가지고 제어한다고 보면 된다.12345 가나다라 마바사아 자차카타cs 123$('li').each(function(){ // 반복문 조건자 선택 부분 (특징은 노드 갯수만큼 알아서 반복!) $(this).css('color','red'); //반복문 내의 처리 부분});Colored ..

jQuery2015. 4. 28. 20:27

간단하게 콜백함수를 알아보려 한다. 콜백함수는 : 값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있다. 값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다출처 : http://opentutorials.org/module/532/6508 알아두어야 할것.함수도 객체다. 다시말해 일종의 값이다. 자바스크립트의 함수가 다른 언어의 함수와 다른점은 함수가 값이 될수 있다는 것이다.반드시 기억해 두어야 한다. 간단한 예제를 보도록 하자123456789101112131415161718192021222324252627282930 Document p{ width:100px; height:100px; background-color: red; text-a..

jQuery2015. 4. 28. 18:29

add 메서드는 선택 요소를 확장하는 메서드이다. 그 전에 이런걸 어떻게 쓸 수 있는지 예제를 한번 보자 여기서 h1 요소와 h2 요소에 동일하게 background-color 을 yellow 로 적용시켜 주고 싶다. 스크립트 코드를 보게 되면1$("h1").css("background-color","yellow");cs 이런식으로 되어 있을 텐데 만약 h2 에다가도 동일하게 주려면1234$("h1").css("background-color","yellow");$("h2").css("background-color","yellow");// 또는$("h1, h2").css("background-color","yellow");cs다양한 방법이 있다. 보통 두가지를 선택하거나. 선택자를 두번씩 넣어준다거나 방법..

jQuery2015. 4. 17. 11:09

jQuery 에서 기본으로 제공하는 라이브러리 외에 모바일을 위한 라이브러리가 따로 존재한다.그 메서드 중에서 swipeleft 와 swiperight 는 선택된 요소를 손으로 휙 밀었을때 사용이 된다. 제이쿼리 모바일의 예제를 보도록 하자 저 녹색 바를 좌측으로 밀면미리 만들어둔 클래스 swipeleft 가 들어가게 되어 녹색바가 하늘색으로 변경되는걸 확인할 수 있다. 반대로 오른쪽 으로 밀었을 경우엔 swipeleft 라는 클래스를 빼버리는 제이쿼리를 넣어 보도록 해보자. .......12345function removeBox(event){ $(event.target).removeClass("swipeleft");} $( "div.box" ).on( "swiperight", removeBox);cs