본문 바로가기

👩🏻‍💻STUDY/jQuery

(9)

[jQuery] e.target / e.currentTarget / $(this) parent child 차이를 보기 위해 먼저 .parent 클릭! // jQuery $('.parent').on('click', function(e) { console.log('e.target', e.target); console.log('e.currentTarget', e.currentTarget); console.log('$(this)', $(this)); console.log('this', this); }); .child 클릭! // jQuery $('.parent').on('click', function(e) { console.log('e.target', e.target); console.log('e.currentTarget', e.currentTarget); console.log('$(this..

[jQuery] class 찾기 [jQuery] class 찾기 hasClass() is() length apple banana orange 1.hasClass() 선택자 태그에 해당 조건이 class 이여야 한다. 태그는 안되는 것 같다. // jQuery $('.wrap > div').each(function() { if($(this).hasClass('apple')) { // true $(this).css({color: 'red'}); } else { // false $(this).css({color: 'yellow'}); } }) 2.is() 특정 클래스를 포함하고 있는지, class외에 id, name 등도 사용가능하다. 클래스 이름 앞에 .을 찍어서 클래스 속성임을 명..

[jQuery] click(), focusin() 이벤트 충돌 [jQuery] click(), focusin() 이벤트 충돌 1 2 3 .btn을 클릭 시, .menu리스트가 나오는 방식이다. 이 때, .btn에 click이벤트와 focusin이벤트를 같이 걸어주면 충돌이 일어난다. // jQuery // 클릭이벤트 먼저 실행! $('.btn').on('click', function(e) { console.log(e.type); if($('.menu').css('display') === 'none') { $(this).next('ul').css({display: 'block'}); } else { $('.menu').css({display: 'none'}); } }).on('focusin', function(e) { console.log(e.type); $('.me..

[jQuery] :visible 조건 [jQuery] :visible 조건 Q. $('.box').is(':visible') 실행되지 않을까? 먼저 코드를 보자. click .box { display: block; width: 200px; height: 200px; background-color: green; /* 숨겨준다. */ opacity: 0; visibility: visible; } $('button').on('click', function() { if(!$('.box').is(':visible')) { // box visible. $('.box').css({opacity: 1, visibility: 'visible'}); } else { // box hidden. $('.box').css({opacity: 0, visibility..

[jQuery] 필터링메소드 first() last() eq() filter() not() has() is() map() slice() [jQuery] 필터링메소드 필터링 메소드 .first() .last() .eq() .filter() .not() .has() .is() .map() .slice() 출처 :: 필터링 메소드 .first() .last() .eq() .filter() .not() .is() 필터링(filtering)메소드 DOM트리에서 선택한 요소를 필터링하기 위한 메소드는 다음과 같다. 메소드 설명 .first() 선택한 요소 중에서 첫 번째 요소를 선택함. .last() 선택한 요소 중에서 마지막 요소를 선택함. .eq() 선택한 요소 중에서 전달받은 인덱스에 해당하는 요소를 선택함. .filter() 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 모두 선택_함. .not..

[jQuery] on() off() one() [jQuery] 이벤트 연결 및 처리 on(), off(), one() 출처 1. 이벤트의 연결(event binding) 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)함수를 작성해야 한다. 이렇게 작성된 이벤트 핸들러를 특정 요소에 연결하는 것을 이벤트바인딩(event binding)이라고 한다. jQuery는 이벤트바인딩을 위한 다양한 방법을 제공한다. [예제] :: id가 "btn"인 요소에 클릭(click) 이벤트 핸들러를 바인딩하는 다양한 방법이다. $('#btn').click(function(event) { /* 실행하고자 하는 jQuery 코드 */ }); $('#btn').bind('click', function(event) { /* 실행하고자 ..

[jQuery] queue() & dequeue() [jQuery] queue() & dequeue() 1. queue(), 대기열의 함수와 대기열 조작하기 출처 queue([queueName]) Return : Array 요소에 실행되고 있는 함수의 큐를 보여준다. queueName :: 큐명 문자열, 기본값은 fx이며, 기본 효과 큐를 의미한다. 무슨 함수들이 실행되고 있는지 보여준다. The queue is length is: 에는 div가 움직이는 갯수를 보여준다. ('span').text(n)만 하면 runIt()에서 움직이는 queue를 볼 수 있다. $div.slideUp('normal' , runIt)은 계속 반복하도록 도와준다. queue([queueName], newQueue) Return : jQuery 요소에 실행되고 있는 함수 큐를..

[jQuery] ready() load() 차이 [jQuery] .ready() .load() 차이 1. load() 서버에서 데이터를 가져오는 가장 간단한 방법. JavaScript이벤트를 "로드"하기 위해 이벤트 핸들러를 바인드 한다. 서버에서 데이터를 로드하고 리턴된 HTML에서 일치하는 요소를 배치한다. .load( url [,data][, complete]) , 반환값 : jQuery url :: 데이터를 받을 URL을 나타내는 문자열. data :: 선택적인 인자, URL로 요청보낼 때 같이 보낼 데이터로 자바스크립트 객체 또는 문자열. complete :: 요청이 완료되면 호출되어질 콜백함수. $('#result').load('ajax/test.html #container'); 이 메소드가 실행되면 ajax/test.html 컨텐츠를 검색..

이전 1 2 다음

티스토리툴바