Binary World

* animate 함수 포멧- animate(params, speed, callback)- params: 애니메이션을 할 속성들(JavaScript Object) * 애니메이션 함수들- hide(speed, callback), fadeOut(speed, callback), slideUp()- show(speed, callback), fadeIn(speed, callback), slideDown()- toggle(speed, callback), fadeToggle(spped, callback), slideToggle() 123456789101112131415161718192021222324252627282930313233343536373839404142jQuery#panel { border: 1px sol..

- 홀수줄은 hotpink , 짝수줄은 aqua로 출력- '컬렉션'.each(handler);- handler: 컬렉션의 모든 원소들에 대해서 적용할 기능(동작) 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253jQuery.hot { background-color: hotpink;}.cold{ background-color: aqua;}jQuery each() 함수 Java HTML CSS JavaScript jQuery Toggle Style $(document).ready(function() { // '컬렉션'.each(handler); // handler: 컬렉션의 모든 원소..

1234567891011121314151617181920212223242526272829303132jQuery jQuery CSS 변경 방법jQuery CSS $(document).ready(function(){ // jQuery를 사용한 CSS 변경 // css('property', value)l // css({prop1: val1, prop2: val2, ...}); $('p').click(function() { $(this).css({ font: '200% serif', backgroundColor: 'lightgreen', border: '1px solid grey', textAlign: 'center' }); });}); Colored by Color Scriptercs 1234567891011..

* 대부분의 jQuery 함수들은 매개변수의 개수에 따라서 getter와 setter로 사용 가능 - html(): HTML 요소 내부의 html 코드를 리턴 - html('문자열'): HTML 요소 내부에 html 코드를 씀(setter) - text(): HTML 요소 내부의 텍스트(문자열)을 리턴 - text('문자열'): HTML 요소 내부에 텍스트(문자열)을 씀 - attr('attr 이름'): 속성(attribute)의 값을 리턴 - attr('attr 이름', 'attr 값'): 속성(attr)의 값을 설정 - css('css 프로퍼티 이름'): CSS 프로퍼티 값을 리턴 - css('css 프로퍼티 이름', 'value'): CSS 프로퍼티에 값을 설정 - val(): input 상자에 입..

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657jQueryp { border: 1px solid grey; width: 200px; height: 200px; background-color: lightgreen; font-size: 200%; text-align: center;} $(document).ready(function() { // $('selector').event(function() {}); // 하나의 HTML 요소에 여러개의 event handler를 등록 // $('selector').on({ // event1: function() {}, // ev..

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869jQuery jQuery Eventhover // $(document).ready(function() {});$(function() { // mouseover, mouseenter: // 마우스가 해당 영역 위로 올라갔을 때 $('#bulb').mouseover(function() { console.log($(this).attr('src')); $(this).attr('src', 'images/bulb_on.gif'); }); // mouseout, mouseleave: // ..

- jQuery의 기본 문장 : $('selector').action();- $('selector'): HTML 요소를 찾음. CSS 선택자(태그, 클래스, 아이디);- action(): 해당 HTML 요소에 행해질 동작(기능) 123456789101112131415161718192021222324252627282930313233343536373839404142434445jQuery jQuery 기본 문법모두 숨기기클래스 숨기기아이디 숨기기 단락 1단락 2, 클래스 c1단락 3, 클래스 c1단락 4, 아이디 p1 // jQuery의 기본 문장 : $('selector').action();// $('selector'): HTML 요소를 찾음. CSS 선택자(태그, 클래스, 아이디);// action(): ..

* jQuery 라이브러리를 포함시키는 방법 1. http://jquery.com/download/ 페이지에서 jQuery 라이브러리를 다운로드-> WebContent/js 폴더에 복사-> --> // document가 다 등록된 후에 실행이 되기 때문에// 스크립트를 head에서 선언해도 상관없음$(document).ready(function() { $('h2').click(function() { $(this).hide(); });}); jQuery 사용하기클릭하세요! 그럼 제가 사라집니다.Another h2 tag Colored by Color Scriptercs