키보드와 하루

1. filter - 역할 조건 메서드로 특정 조건에서 조건에 만족하는 요소를 추출해 새로운 배열을 만듬 2. filter - 예제 ◈ 코드 12345678910111213$(document).ready(function () { var array = [1,2,3,4,5 array = array.filter(function(ele){ return ele

1. stopPropagation() - 역할 객체 내에서 이벤트 전달을 제거 2. stopPropagation() - 예제1 (사용하지 않을 경우) ◈ 코드 1234567891011121314151617181920212223 $(document).ready(function () { $('h1').click(function(event) { $(this).css('background-color','yellow'); //event.stopPropagation(); }); $('div').click(function(){ $(this).css('background-color','blue'); }); }); test1 test2 ◈ 결과화면 - 처음화면 - h1 태그 영역을 클릭 했을 떄 ◈ 설명 위 그림에서 보..

1. off(),one() - 역할두 개의 실행 결과는 같음 한번만 실행을 하고 더 이상 이벤트를 실행하지 않음 하지만, 명백한 차이점 off() - 이벤트를 제거 one() - 이벤트를 한 번만 실행 2. off() - 예제◈ 코드 12345678910111213141516171819 $(document).ready(function () { $('h1').click(function(){ $(this).css('color','blue'); alert("h1이 파란색으로 변함"); $(this).off(); });}); test1 test2 ◈ 결과화면 ◈ 설명 off()가 존재하지 않을 경우 alert 창이 누를 때마다 나오겠지만 off() 가 존재함으로 위와 같은 alert 창은 한번만 나오게 됩니다 ..

1. hover() - 역할객체에 마우스가 올라왔을 때, 즉 rollover 되었을 때와 마우스가 객체로부터 떠났을 때, 즉 leave가 되었을 때 발생하는 이벤트 2. hover() - 예제◈ 코드 1234567891011121314151617 $(document).ready(function () { $('h1').hover(function(){ $(this).css('color','blue'); }, function() { $(this).css('color','red'); });}); test1 test2 ◈ 결과화면 - 아무 작업도 하지 않은 처음 화면 - 마우스를 올렸을 때 - 마우스를 떠났을 때

1. clone() - 역할객체를 복제하는 역할 2. clone() - 예제◈ 코드 12345678910111213 $(document).ready(function () { $('h1').after($('h2').clone());}); test1 test2 ◈ 결과 ◈ 결과코드 12345 test1 test2 test2 ◈ 설명 화면에 있는 h2 태그를 복제하여 h1 다음에 붙이는 것으로 위와 같은 결과가 나타납니다

1. after() ,before() - 역할 $(앞).after(뒤) - 뒤에 있는 것을 앞의 뒷부분에 추가 $(앞).before(뒤) - 뒤에 있는 것을 앞의 앞부분에 추가 2. after() - 예제 ◈ 코드 12345678910111213 $(document).ready(function () { $('h1').after('test3');}); test1 test2 ◈ 결과화면 ◈ 결과코드 12345 test1 test3 test2 ◈ 설명 test3 이라는 것을 h1 뒤에 붙이는 것으로 위와 같은 결과 화면 표시합니다 3. before() - 예제 ◈ 코드 12345678910111213 $(document).ready(function () { $('h1').before('test3');}); t..

1. append() ,prepend() - 역할$(앞).append(뒤) - 뒤에 있는 것을 앞의 뒷부분에 추가 $(앞).prepend(뒤) - 뒤에 있는 것을 앞의 앞부분에 추가 2. append() - 예제◈ 코드 12345678910111213 $(document).ready(function () { $('h1').append('test3');}); test1 test2 ◈ 결과화면 ◈ 결과코드 1234 test1test3 test2 ◈ 설명 위의 예제를 사용하면 test1 문구 뒤에 붙이고자 하는 내용이 들어가 버립니다 after 함수와 비교하면 좋은 예제입니다 3. prepend() - 예제◈ 코드 12345678910111213 $(document).ready(function () { $('..

1. remove() ,empty() - 역할remove() - 문서 객체 제거 empty() - 문서 객체 비움 2. remove() - 예제◈ 코드 12345678910111213141516 $(document).ready(function () { $('h1').last().remove();}); test1 test2 test3 ◈ 결과화면 ◈ 설명 태그 중에서 마지막 객체를 제거하는 것이므로 test3 를 제거합니다 3. empty() - 예제◈ 코드 123456789101112131415161718192021 $(document).ready(function () { $('#div1').empty();}); test1 test2 test3 test4 test5 test6 ◈ 결과화면 ◈ 설명 ID ..

1. 객체 추가html() 태그를 활용한 문서 객체 내부 추가 2. 객체 추가 - 예제1◈ 코드 12345678910111213 $(document).ready(function () { $('div').html('test1');}); ◈ 결과 ◈ 결과코드 1234 test1 test1 3. 객체추가 - 예제2◈ 코드 12345678910 $(document).ready(function () { $('div').html(function(index){ return 'test'+index+''; });}); ◈ 결과 ◈ 결과코드 1234 test0 test1 4. 객체추가 - 예제3◈ 코드 123456789101112131415 $(document).ready(function () { $('div').html..

1. html() ,text() - 역할객체에서 글자와 관련된 기능을 수행 ◈ 차이점 html() - html 태그를 인식 text() - html 태그를 인식하지 않음 2. html() - 예제◈ 코드 1234567891011121314 $(document).ready(function () { alert($('h1').html());}); test-1 test-2 test-3 ◈ 결과화면 ◈ 설명 결과 화면을 보게 되면 첫번째 h1 태그에 해당하는 값을 alert창으로 표현합니다 3. text() - 예제◈ 코드 1234567891011121314 $(document).ready(function () { alert($('h1').text());}); test-1 test-2 test-3 ◈ 결과 ◈ 설..