키보드와 하루

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 ◈ 결과 ◈ 설..

1. css() - 역할 스타일과 연관된 모든 것을 알아내거나 작업을 수행 2. css() - 스타일 검사 예제 ◈ 코드 1234567891011121314151617181920212223242526.t1{ color:blue;}.t2{ color:red;}.t3{ color:green;} $(document).ready(function () { alert($('h1').css('color'));}); test-1 test-2 test-3 ◈ 결과 ◈ 설명 class 로 설정된 color의 값을 css() 를 이용하여 alert창을 찍어보면 위와 같은 결과가 나옵니다 같은 태그가 존재할 경우에는 제일 처음 발견된 태그의 css() 값을 alert 창에 나타납니다 3. css() - 스타일 추가 예제1 ◈..

1. attr() - 역할속성과 연관된 모든 것을 알아내거나 작업을 수행 2. attr() - 속성 확인 예제◈ 코드 1234567891011121314151617 $(document).ready(function () { alert($('font').attr('size')); }); 테스트1 테스트2 테스트3 ◈ 결과화면 ◈ 설명 태그 안에 size라는 속성 값을 alert으로 확인합니다 여러개의 태그가 존재할 경우에는 제일 처음으로 확인된 값을 alert으로 나타냅니다 만약 다른 것을 보고 싶을 경우에는 eq() , first() ... 등 객체 선택 함수를 사용합니다 3. attr() - 속성 추가 예제1◈ 코드 1234567891011121314151617 $(document).ready(funct..

1. add() - 역할현재 선택한 문서의 객체 범위를 추가 2. add() - 예제◈ 코드 12345678910111213141516 $(document).ready(function () { $('h1').css('color','blue').add('h2').css('background','yellow'); }); test1-1 test2-1 test1-2 test2-2 test3-1 ◈ 결과화면 ◈ 설명 스크립트 내용을 보게 된다면 add() 사용함 으로써 h1,h2 태그 둘다 배경색으로 노란색이 나타나게 됩니다 add() 는 객체 선택 범위를 추가적으로 확장시키는 개념으로 이해하면 됩니다

1. eq(),first(),last() - 역할eq() - 특정 위치에 존재하는 객체 선택 first() - 첫번째 위치에 존재하는 객체 선택 last() - 마지막 위치에 존재하는 객체 선택 2. eq() - 예제1◈ 코드 123456789101112131415 $(document).ready(function () { $('h4').eq(1).css('color','blue');}); 테스트 - 1 테스트 - 2 테스트 - 3 테스트 - 4 ◈ 결과화면 3. eq() - 예제2◈ 코드 123456789101112131415 $(document).ready(function () { $('h4').eq(-1).css('color','blue');}); 테스트 - 1 테스트 - 2 테스트 - 3 테스트 -..

1. filter() - 역할 일반적인 형태가 아닌 다양한 형태로 객체를 선택하고자 할 경우 2. filter() - 예제1 ◈ 코드 1234567891011121314151617181920 $(document).ready(function () { $('h4:odd').css({ color:'blue' });}); 테스트 - 1 테스트 - 2 테스트 - 3 테스트 - 4 테스트 - 5 테스트 - 6 테스트 - 7 ◈ 결과화면 ◈ 설명 :odd 필터를 통해서 h3에서 짝수번째에 위치한 객체를 파란색으로 바꿔주고 있습니다 만약 홀수 번째의 위치를 바꾸고자 할 경우에는 :even 필터링을 사용합니다 3. filter() - 예제2 ◈ 코드 12345678910111213141516171819202122 $(d..