언어/javascript (19) 썸네일형 리스트형 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.. BOM A>BOM browser object medel 자바스트립트로 브라우저를 제어하기 위한 객체들 국제 표준이 없고 브라우저 마다 프로퍼티가 메소드의 차이가 있다. B>window 객체 1.window객체 윈도우나 탭 객체 브라우저 윈도우나 탭 윈도우마다 별도의 window 객체 생성 - 브라우저가 새 웹 페이지를 로드할때 - iframe 하나당 하나의 window 객체를 생성 - window.open(URL,윈도우 이름, 윈도우 속성)로 윈도우를 열때 객체 생성 - 접근은 window 혹은 window.self 혹은 self 로 한다. 2.메소드 a > window.open('URL',윈도우 이름, 윈도우 속성) - 이미 있는 윈도우 이름일 경우 이미 있는 페이지에 window가 open됨 b > 윈도우 .. 자바스크립트 - 이벤트 1 2 3 4 5 6 7 8 9 1. new image() 로 생성 var banana = new image(); banana.src = 'banana.png'; 2.DOM 객체 선택 후 var myimg = document.getElementById('myimg'); myimg.src = banana.src = 'banana.png'; Colored by Color Scripter cs A>이벤트 객체 -- 발생한 이벤트에 관련된 다양한 정보를 담은 객체. -- 이벤트가 처리되면 이벤트 객체 소멸. --이벤트 객체는 이벤트 리스너 함수의 첫번째 매개 변수에 전달됨 1. 이벤트 객체에 있는 정보 -- type = 현재 발생한 이벤트 종류 -- target = 이벤트 발생시킨 객체 -- currenTarg.. 자바 스크립트 - 객체 생성과 prototype A>객체 만들기 사용자가 만든 객체 사용 예시 1. new Object() 로 생성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function inquiry() { return this.balance; } function deposit(money){ this.balance += money; } function withdraw(money){ this.balance -=money; return money; } var account = new Object(); account.owner = 'name'; account.code = '111'; account.balacne = 20000; account.inquiry = unquiry; account.depos.. 이전 1 2 3 다음
