제이쿼리
제이쿼리
제이쿼리(jQuery) - 이미지 온, 오프하기
이미지 온, 오프하기 제이쿼리를 사용하여 이벤트시 이미지의 경로를 바꾸는 방법 - img의 attr(src)를 replace한다. 코드 $(function() { var obj = $('.tab img'); $('.tab img').on('click', function(){ $('.tab img').each(function(){ $(this).attr('src', $(this).attr('src').replace('_on.gif', '_off.gif')); }); $(this).attr('src', $(this).attr('src').replace('_off.gif', '_on.gif')); }); });
제이쿼리(jQuery) - 순차적으로 활성화 시키기
셋인터벌(setInterval) 유용하게 사용할 수 있는 제이쿼리 코드'셋인터벌'사용하여 순차적으로 활성화 시키기 스크린샷 관련코드 $(function(){ var idx = 0; setInterval(time, 1000); function time(){ var box = $('li'); box.removeClass('on'); box.eq(idx).addClass('on'); idx++; if(idx >= box.length) idx= 0; } }); 예제 See the Pen setInterval - 순차적 활성화 by mansu (@mansunii) on CodePen.
제이쿼리(jQuery) - 탭메뉴 (tabmenu)
기본 탭메뉴 실무에서 기본적으로 많이 사용되는 기본적인 탭메뉴 웹접근성시에는 마크업이 달라지므로 유의해서 사용해야 한다. 스크린샷 코드 $('.tab-menu a').on('click', function(){ var a = $(this); var idx = a.index(); var box = a.closest('.tab-area'); box.find('.hidden-area').removeClass('on'); box.find('.tab-menu a').removeClass('on'); box.find('.hidden-area:eq('+idx+')').addClass('on'); a.addClass('on'); return false; }); 예제 See the Pen Tab-Menu by mansu ..
제이쿼리(jQuery) - 이벤트 Event
제이쿼리 이벤트 기본코드 예시 $(element).명령어(function(event){ ▶ element 요소에 명령어 실행시 함수 동작 }); EVENT 제어 .on() 동적으로 생성된 DOM 객체들의 이벤트를 연결 $('a').on('click', function(event){...}); //a를 클릭 했을때 이벤트 .off() .on() 제거 .one() 선택된 이벤트를 지정 딱 한번만 이벤트가 실행 .trigger() 선택된 요소의 이벤트를 발생 .triggerHandler() trigger() 함수와 비슷하게 동작 - form submission에는 동작하지 않음 - 선택된 요소들중 가장 첫번째 요소만 영향을 미침 - 브라우저 기본동작, 버블링, live Events는 일어나지 않음 웹 브라우저..
제이쿼리(jQuery) - 효과 Effect
jQuery Effect .animate() 해당 객체의 CSS에 변화 효과 $('p').animate({CSS Map}, {options}); $('p).animate( {color:'white', font-size : 22px}, {duration : 400, easing : 'ease-in', complete : function(){....}} ); {queue:false} .delay() 해당 시간만큼 실행을 지연 $("div").slideDown().delay(5000).slideUp(); ▶ id div 요소를 슬라이드 다운 후 5초 후 슬라이드 업 .stop() 실행중인 애니메이션을 중지 $("div").stop(); ▶ div의 큐의 애니메이션을 멈춤 .show() 해당 요소를 보여줌 $(..
제이쿼리(jQuery) - 선택자 Selector
속성 [name] name속성이 있는 요소를 선택 [name="value"] [name2="value2"] name속성의 값이 value이고 name2 속성의 값이 value2 인 요소를 선택 [name="value"] name속성의 값이 value인 요소를 선택 [name!="value"] name속성의 값이 value가 아닌 요소를 선택 [name^="value"] name속성의 값이 value로 시작하는 요소를 선택 [name|="value"] name속성의 값이 value 이거나 value로 시작하는 요소를 선택 [name*="value"] name속성의 값에 value가 들어 있는 요소를 선택 [name~="value"] name속성의 값이 value를 포함하는, 쉼표로 구분된 문자열 요소를 선..
제이쿼리(jQuery) - 추출
.size() 선택한 요소 배열의 길이를 반환 - version deprecated: 1.8, removed: 3.0 - var num = $("div").size(); ▶ num은 div의 배열 크기를 숫자로 반환한다. .length 선택한 요소의 배열의 길이를 반환한다. - var num = $('div').length; ▶ num은 div의 배열 크기를 숫자로 반환한다 .offSet() 선택한 요소의 전체 문서 내(document)에서의 left, top 좌표를 구한다. - var offset = $('div:last').offset(); ▶ div 마지막 요소의 left, top 좌표 반환 offset.left / offset.top .position() 선택한 요소의 부모요소를 기준으로 left..
제이쿼리(jQuery) - 속성
속성 .addClass() 지정한 요소에 class 값을 추가 $("p").addClass("name"); ▶ class = "name" 추가 .hasClass() 지정한 요소에 class 유무를 확인 if($("p").hasClass("name")==true) ▶ class 가 "name"인지 확인 true/false .removeClass() 지정한 요소에 class 값을 제거 $("p").removeClass("name"); ▶ class = "name"을 제거 .attr() (1) 지정한 요소의 속성값을 입력 또는 변경 $("a").attr("href","http://www.google.co.kr"); ▶ a 요소의 href 값을 변경 $("#content").attr({id:'content01'..
제이쿼리(jQuery) - 제어(확장)
확장 $.noop() : 비어있는 함수 (function(){}) $.noConflict() : 다른 JavaScript 라이브러리와 함께 사용할때 $의 충돌을 막기위해 사용 $.sub() : 새로운 jQuery 함수를 정의할때, 네임스페이스의 충돌로 다른 개발자의 함수에 영향을 주지 않도록 캡슐화된 플러그인을 만들고자 할때 $.sub() 로 복사하여 사용 (function(){ var sub$ = jQuery.sub(); sub$.fn.myCustomMethod = function(){ ⠀⠀⠀return 'just for me'; }; sub$(document).ready(function(){ sub$('body').myCustomMethod() ▶ 'just for me' }); })(); typeo..
제이쿼리(jQuery) - 제어(변경, 변환)
변경, 변환 기본 .text() : 해당 요소에 text 요소를 삽입 또는 변경 .html() : 해당 요소에 html 요소를 삽입 또는 변경 .val() : 해당 요소의 value 값을 삽입 또는 변경 .replaceAll() 해당 요소들로 인자 요소를 대체 $('New heading').replaceAll($("div")); // div 요소를 New heading 요소로 변경한다. .replaceWith() 해당 요소들을 인자의 요소로 바꾼다. replaceAll() 과 선택, 인자(target)이 반대 $("div").replaceWith('New heading'); // New heading 요소로 div 요소를 변경 시킨다. 배열 .toArray() 선택한 요소 DOM 집합을 자바스크립트 배열..
제이쿼리(jQuery) - 제어(삽입,삭제)
삽입 형제의 위치에 삽입 .after() 지정한 요소 뒤에 내용 삽입 A.after(B) A뒤에 B를 추가 코드 $( ".inner" ).after( "Test" ); // class=inner 뒤에 Test 추가 .insertAfter() 지정한 내용을 요소 뒤에 삽입 A.insertAfter(B) B뒤에 A를 추가 코드 $( "Test" ).insertAfter( ".inner" ); // Test를 class=inner 뒤에 추가 같은결과 hello Test .before() 지정한 요소의 앞에 요소를 삽입 A.before(B) A 앞에 B를 추가 코드 $( ".inner" ).before( "Test" ); // class=inner 앞에 Test 추가 .insertBefore() 지정한 요소의 ..
제이쿼리(jQuery) - 제어(선택)
직접선택 .add() 기본 선택자에 요소를 추가 선택 $("p").add("div"); // p 요소와 div 요소를 선택 .not() 선택된 확장집합에서 인자에 해당하는 요소를 제외하고 선택 $("p").not(".green"); // p 요소의 확장집합에서 class가 green인 요소를 제외하고 선택 .end() jQuery 함수를 연쇄적으로(chain)으로 사용할 경우 앞쪽에 이미 선택되었던 요소로 돌아간다. $("ul.first") .find(".foo") .css("background-color","red") // ul의 첫번째 요소에서 class=foo를 찾아 배경 변경 .end() .find(".bar") .css("background-color","green"); // find를 호출하기..