언어 (37) 썸네일형 리스트형 jQuery6 --이벤트(event) A> bind('이벤트', 기능) 형태1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 //1. 객체를 만들고 그 안에 이벤트: 기능 형태로 bind $(function(){ $('img').bind({ mouseout : function(){ $("img").attr("src", "../images/but1.gif"); }, mouseover : function(){ $("img").attr("src", "../images/but2.gif"); }, click : function(){ alert("클릭"); } }); }); //2 click 이벤트와 function(event)를 바인딩 $(function(){ $('img').bind('click',.. jQuery5 --이펙트(effect) A> hide() : 숨긴다. hide(속도, 기능) : 속도 만큼의 속도로 숨겨짐 show() : 보이게 한다. show(속도,기능) :속도만큼의 속도로 보여줌, B> fadeIn(속도) : 서서히 보이게 한다. fadeOut(속도) : 서서히 없어지게 한다. fadeToggle(속도) : 안보이면 보이게, 보이면 안보이게 한다. 서서히 fadeTo( 속도,투명도): 투명도까지 변화시킨다. C> slideDown(속도): 슬라이드 되어 내려간다. slidUp(속도): 슬라이드 되어 올라간다. slideToggle(속도) : 슬라이드 되 있으면 올리고, 올려져 있으면 내린다. D> animate({방향: 거리}) -- 예시 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .. jQuery4 --DOM 조작하기 A> append('내용'[,내용]) --선택한 엘리먼트의 마지막에 자식 엘리먼트로 추가 $(내용).appendTo('대상(선택자 혹은 태그)') --선택한 엘리먼트를 선택한 위치에 자식 엘리먼트로 추가 B> prepend(새로운 엘리먼트) --인자로 전달된 새로운 엘리먼트를 가장 처음의 자식 엘리먼트로 추가 $(내용).prependTo(' 대상(선택자 혹은 태그) ') --인자로 전달된 새로운 엘리먼트를 가장 처음의 자식 엘리먼트로 추가 C> $(내용).insertafter( 대상 ) --대상 뒷 부분에 요소를 삽입 한다. $(대상).after($(내용)) -- 대상 뒷 부분에 요소를 삽입 한다. D> $(내용).insertbefore( 대상 ) -- 특정 대상 앞부분에 요소 삽입 $(대상).befor.. jQuery3 --DOM 탐색 A> add(셀렉터 혹은 엘리멘트 혹은 htmlString) --새로운 엘리먼트 추가 (= 새로운 태그 추가) 1 2 3 4 5 6 7 $(function() { $("button").click(function() { $("div").addClass('redBorder') .add("p") .addClass('yellow'); }); }); Colored by Color Scripter cs 이때 yellow 라는 클래스는 div 와 p 태그에 다 추가가 되지만 redBorder 는 div에만 적용이 된다. B> filter(조건) 선택된 엘리먼트 중에서 조건에 맞는 엘리먼트 찾기 1 2 3 4 5 $(function() { $("div").css("background", "yellow") .filter.. jQuery3 --attribute 다루기 A> attr -- 어트리뷰트 가져오기 , 수정하기 --여기서 요소란 alt, value 같은 property들 attr('요소') -- 요소의 값 가져오기 attr('요소','바꿀 값') --요소의 값을 '바꿀 값'으로 수정 attr('요소','객체') --요소의 값을 객체를 읽어서 반영 attr('요소',function() ) --요소의 값을 function을 통해 반영 --예시 1 2 3 $("img").attr("src", function() { return "../images/" + this.title; }); Colored by Color Scripter cs 2라인의 this는 img태그를 가리킨다. --어트리뷰트 제거하기는 removeAttr 로 한다. B> addClass --class .. jQuery2 - 필터( filter) A> 필터 형태 1.기본 형태 $(#아이디:속성) --예시1 $('#formButton:button') 2.체크박스에서 활용 $('input[name="이름값"]:checkbox:checked') --이름값을 가진 input 중 체크된 체크박스 체크된 값 가져오기 1 2 3 4 5 6 7 8 9 10 11 12 13 $(document).ready(function(){ $('#selectBtn:button').click(function(){ var checkedList = ''; var checkedConsole = ''; $('input[name="hobby"]:checkbox:checked').each(function(){ checkedList += $(this).prev().text() + '\t'.. jquery1 --기본 선택자 A> jquery 기본 1.특징 다른 스크립트 보다 jquery 부터 로드를 해야한다. jQuery() 또는 $() 로 jQuery 함수를 로드한다. $ -- jQuery 의 별칭이다. 선택자가 존재하며 따옴표로 묶는다. 2.종류 $(document).ready() -- 브라우저에 html 이 로드되고 이미지가 로드 되기 전에 호출되는 이벤트 핸들러 --예시 1 2 3 4 5 function testfn{ $('span').addClass('redtext'); } $(docuement).ready(testfn); cs 단 한번만 호출되는 함수일 경우에는 익명함수로 구현 1 2 3 4 5 $(docuement).ready(function(){ $('span').addClass('redtext'); }); .. javascipt - 웹 워커(web worker) A> 웹 워커 1. 정의 백그라운드 태스크를 만드는 기능이다. 자바의 스레드와 비슷하다. 백그라운드 태스크를 워커 태스크라고도 한다. 워커 태스크는 윈도우와 사용자 인터페이스 에선 사용 불가 2.특징 동일 도메인 원칙(=same domain) 자바 스크립트 파일은 웹 페이지와 동일한 웹 페이지에 저장한다. 로컬 컴퓨터의 웹 페이지에서는 작동이 안된다. == UI 를 사용할 수 없다. 워커 객체를 생성하고 워커 태스크에 실행할 기능을 정의한다. 워커 객체는 워커 태스크를 제어한다. B> 메소드 Worker() --워커 객체를 만드는 생성자 --예시) var taskWorker = new Worker('task.js'); postMessage() -- 워커 태스크에 메세지 전송, -- 워커 태스크에서는 me.. 이전 1 2 3 4 5 다음