Developer Gonie

여러 함수들 1) .attr(속성, 값) 속성과 값을 추가 * attr() 함수를 이용한 속성, 값 추가를 여러개 할 때 더 가독성이 좋게 이런식으로도 여러개 나열도 가능 * 왼쪽항은 작은 따옴표가 있어도 되고 없어도 되나, 오른쪽 항은 무조건 있어야 함 .attr({ 'src' : './../images/im0.jpg', 'title' : '강아지 이미지' }) 2) .attr("속성") *파라미터의 개수로 다른 기능을 가지는 오버라이딩 된 함수* 속성에 대한 값을 반환 3) .removeAttr("제거할 속성명") 속성을 제거한다. 사용예시

형제, 부모관련 선택자 1) .siblings() 선택자로 지정것 앞, 뒤의 모든 형제들(자신제외) -> .prev()와 .next() 의 합집합 2) .parent() 선택자로 지정것의 바로 위 부모의 모든 자식들 3) .prev() 선택자로 지정것 바로 앞의 형제(자신제외) 4) .prevAll() 선택자로 지정것 앞의 모든 형제들(자신제외) 5) .next() 선택자로 지정것 뒤의 바로 다음 형제(자신제외) 6) .nextAll() 선택자로 지정것 뒤의 모든 형제들(자신제외) 적용예시

1) .parent() 특정 요소의 바로위 부모를 지정하는 선택자 2) parents() 특정 요소의 모든 조상을 지정하는 선택자(거의 전체 다 선택되는 특정때문에 쓸일이 있을까? 그래도 알아두자) 사용예시

1) .children() 특정 요소의 바로 아래 자식들 중에서 특정 조건에 부합하는 것들을 골라내기 위해 사용 2) .find() 특정 요소의 모든 자손들 중에서 원하는 것을 골라내기 위해 사용 사용예시

1) .filter() 선택자로 선택된 것들 중에서 한번 더 선택자를 주어 좀더 원하는 것을 수월하게 지정할 수 있다. 2) .not() filter가 선택하는 범위의 반대의 범위를 선택함 사용예시 * 속성의 값을 비교하는 filter 를 작성하는 추가적인 방법은 다음 링크를 참고하여 응용. https://ldgeao99-developer.tistory.com/351 .filter('.middle')// class 속성의 값이 'middle' 인것 필터링 .filter('#middle')// id 속성의 값이 'middle' 인것 필터링 .filter('div:odd') // div 태그들 중에서 홀수번째만 필터링 .filter('[id="third"]') // id가 third인것만 필러링 .filte..

사용예시 for(var i = 0; i < $('img').length-1; i++){ backSrc = $('img').eq(i+1).attr('src'); $('img').eq(i).attr('src', backSrc); }

* even, eq : index가 0부터 시작 * nth-child : index가 1부터 시작 * 선택자는 CSS에서 사용하던 분법을 그대로 사용할 수 있다. $('tr:nth-child(1)') 태그의 부모의 입장에서 첫번째 자식인데 인 것 + 모든 에 대해 적용 $('tr:first-child') 바로 위의 것과 같은 의미 $('tr:first') 태그의 부모의 입장에서 첫번째 자식인데 인 것 $('tr:nth-child(3n)') 태그의 부모의 입장에서 3의 배수번째 모든 자식인데 인 것 + 모든 tr에 대해 적용 3, 6, 9, 12,,, $('tr:nth-child(3n+1)') 태그의 부모의 입장에서 3의 배수 + 1 번째 모든 자식인데 인 것 + 모든 tr에 대해 적용 4, 7, 10, ..

* $( ) 내부에 선택자로 document랑 this를 사용할 때는 따옴표를 사용하지 않는다. 여러 함수들 1) .each(function(){ $(this). }) 선택자에 의해 지정된 모든 요소들( 문자 영역 )을 하나씩 꺼내서 $(this)로 접근할 수 있게 해준다. java에서의 확장 for문과 기능이 비슷하다. 배열에 대해서도 이를 적용할 수 있는데, 배열에 대해 사용할 때는 배열변수명에 ' ' 를 사용하지 말아야함 => $(배열변수명) 배열에 대해서 each 함수를 적용하면 자동으로 index, value를 인자쪽 변수로 전달해주며, index 만 전달받을 수도 있다. $(function(){ var fruits = ["apple", "banana", "orange"]; //변수나 배열을 작..

여러 함수들 1) .addClass() 지정한 요소들에 class 속성을 추가한다.(css 코드가 상단에 작성되어 있어야 css 적용까지 됨) ex) $('p').addClass('red') ex) $('p').addClass('red').addClass('under'); ex) $('p').addClass('red under'); // 나열해서 한번에 두 개 이상 추가하는 것도 가능 2) .removeClass() 지정한 요소들에서 해당 class 속성을 제거한다 ex) $('p').removeClass('red') ex) $('p').removeClass('red').addClass('under'); ex) $('p').removeClass('red under'); // 나열해서 한번에 두 개 이상 ..

* JQuery에서는 보통 $('객체로 만들 대상').메소드() 이런식의 문법이 사용되며, 아래의 코드가 정상적으로 실행되면 준비가 잘 된것이다. * 로드하는 부분과 라이브러리를 사용하는 코드 작성부를 따로 작성하고, 로드는 코드 작성부 전에 위치해야 오류가 나지 않는다. * document, this를 객체로 만들 대상으로 사용할 때는 ' ' 를 감싸지 않는다. * 아래의 방법1, 방법2 는 body 태그에 붙을 수 있는 onLoad속성, window.onload = function() {}보다 먼저 실행되며 body 태그에 붙을 수 있는 onLoad속성, window.onload = function() {} 에서 둘 중 하나만 사용할 수 있었던것과 달리 방법1, body 태그에 붙을 수 있는 onLo..

JQuery란? Javascript 언어로 만들어진 오픈소스 라이브러리로, Document Object Model(DOM) 요소들을 효율적으로 선택할 수 있으며 선택된 요소들에 대해 CSS를 적용하거나, 이벤트를 처리하거나, 애니매이션을 적용하거나, Ajax 를 사용할 수 있다. 그런데, 최근 추세를 보면 JQuery의 점유율이 점점 낮아지는 추세이다. 그 이유는 '가상DOM' 이라는 개념이 나왔기 때문인데, 트위터, 페이스북 같은 서비스들을 생각해보자. 스크롤바를 내릴 때 마다 수 많은 데이터가 추가되는데 이럴 때 마다 전체 DOM 요소들을 다시 그려낸다면 이를 처리해야 하는 브라우저에 부하가 걸릴 것이다. 언제나 그랬듯 효율적인 처리를 위해 나온 개념이 '가상DOM' 개념이고, 이는 메모리상에 가상D..