웹프로그래밍/jQuery 14

jQuery-반복문, 배열

반복문 var arr=new Array("꼴카콘","감자칩","뇨쿠르트"); for( var 변수=초기값; 조건식;증/감값)실행동작;} do{실행동작;}while(조건);조건이 맞을 때 까지 실행 배열 자바스크립트에서는 배열로 객체로 인식하여 처리하고 동일타입의 여러 요소들을 일목요연하게 처리하기위한 방법으로 배열사용합니다. var 배열명 = new array();var 배열명 = new Array(배열요소);var 배열명 = [배열요소]; 배열 객체관련 속성과 메소드 종류 설명 length 배열의 총 개수 Reverse() 배열의 순서를 역순으로 바꾼 후 변환 Sort() 배열의 값을 순서대로 정렬 Join(구분자) 배열의 요소들을 구분자로 구분하여 하나의 문자열로 만든 후 반환 배열 관련 메소드eac..

jQuery 함수

jQuery 함수 생성한 함수는 불러다 재사용할 수 있으므로 반복작업을 줄일 수 있습니다. 이제까지 사용해 왔던 function() 입니다.이제까지 배워왔던함수는 익명의 함수 입니다. 익명의 함수란?익명의 함수 – jquery에서 기본적으로 우리가 지금껏 써왔던 이 함수는 이름이 특징되지 않아서 우리가 다른 작업에서 이와 똑같은 동작을 수행할경우 이 함수를 사용할 수 없게됩니다. 그래서, 함수명을 명시적으로 지정해주면 해당 함수를 호출하여 재사용할 수 있게 됩니다. 함수의 선언방법function 함수명([인수]){실행할 코드} 함수의 호출방법1$(document).ready(function(){function test(){$(".a").append(" 당일 조리한 메뉴입니다.");}$("button")...

jQuery의 이벤트 처리

jQuery의 이벤트 처리 이벤트 처리기(event handler), 매핑, Listher 이라고도 불리는 과정입니다. 사용자의 어떤 동작에 의해서 발생하는 사건을 처리하는 것을 의미합니다.사용자가 마우스를 클릭하거나, 마우스를 대상에 올려두거나, 키보드를 입력할때 처리하는 과정이라고 생각하쉬면 이해하기 쉬울 것 입니다. 메소드 기능 bind( ‘이벤트명’,’개체명’,함수명) 요소에 이벤트를 등록하는 작업. unbind( 이벤트명, 함수명 ) 요소에서 지정된 이벤트와 매핑된 모든 처리기들을 제거 one( 이벤트명,개체명,함수명 ) 요소에 오직 한번만 실행되는 이벤트 처리기를 바인딩 trigger( 이벤트명,개체명) 요소의 특정 이벤트를 트리거한다. 올래 이제까지 이벤트 제어는 아래와 같이 했을 겁니다.$..

jQuery의 필터제어

제어 메소드 메소드 기능 eq(인덱스) 요소집합 중 index에 해당하는 요소만을 탐색하여 표시 Not(표현식) 요소집합 중 표현식과 일치하지 않는 요소만을 탐색하여 표시 Is(표현식) 요소집합 중 표현식을 만족하는 요소가 있으면 “true”, 요소가 없으면 “false”값을 반환 First( ) 요소집합 중 첫 번째 요소만 표시 Last( ) 요소집합 중 마지막 요소만 표시 Slice(인덱스1,인덱스2) 요소집합 중 인덱스1~인덱스2 사이에 있는 요소만 표시 Filter(표현식) 지정된 표현식과 일치하는 요소를 조회 Example 내가 좋아하는 것!내가 싫어하는 것음료 추가하기 과자쪼코파이코칼콘냥파링아이스크림보썩뽜누구봐우주컵메롱바음료 replacewidth() 선택한 요소를 다른 요소로 쉽게 치환 메소..

jQuery-탐색관련 메소드

탐색메소드 알아보기 메소드 기능 parent() 선택한 요소 바로 위에 있는 요소를 선택 Children() 선택한 요소 아래에 있는 요소를 선택 Siblings([표현식]) 선택한 요소의 모든 형제자매 요소 선택 (표현식) 기술시 해당 표현식에 만족하는 형제자매요소만 선택 Prev( ) 선택한 요소 위치한 왼쪽(이전)에 있는 요소를 선택 Next() 선택한 요소 위치한 오른쪽(이후)에 있는 요소를 선택 Example 아래의 예제의 dom 구조는 이와 같습니다. dom구조를 숙지하고 살펴보면 이해하기가 더 쉽습니다. 고양이 강아지 다람쥐

jQuery의 변수

jQuery의 변수 값을 임시로 저장하기 위해서 다른 언어처럼 jquery도 변수를 사용합니다 변수 선언방법은 자바스크립트와 같으나 각가의 DOM 엘리먼트를 저장할때는 약간 다릅니다. ※변수(variable)프로그램 실행시 처리대상이 되는 값이나 처리된 결과를 기억시킬 임시 저장 공간을 의미 일반변수 선언방법var a=0;a=Math.random()*100;//0~99까지의 랜덤값을 계산하여 a변수에 저장한다. 요소변수 저장벙법$a=$("div").siblings('input:text');//p의 같은 계층 중 input type의 text요소들을 a에 저장시킨다. Exameple 고양이고양이는 야옹하고 울지요 강아지강아지는 낑낑하고 울지요 다람쥐다람쥐는 찍찍하고 울까나?

jQuery-DOM요소 제어하기

DOM에 대한 기본적 이해 앞서 기술했듯이 DOM은 동적인 웹 페이지를 제작하는 것을 목적으로 개발하였습니다.이를 위하여 HTML 페이지와 XML 페이지 처리를 위한 DOM API를 제공하고 있습니다.DOM은 요소(ELEMENT)의 추가,변경, 삭제를 통해 HTML 페이지 구조를 제어할 수 있음. DOM을 제어하는데 주로 사용하는 메소드 메소드 기능 Html( ) 선택된 요소의 html 내용을 가져옴= .InnerHtml Text( ) 선택요소의 html태그 제외한 내용을 표시 Val( ) Input태그의 value속성 값을 표시 Append(값) 선택요소 내용 뒤에 값을 추가 appendTo(선택자) 선택요소를 선택자로 선택된 요소의 내용 뒤에 추가 Prepend(값) 선택요소 내용 앞에 값을 추가 p..

jQuery의 메소드

메소드란? 객체 : 김숙희메소드 : 행동 김숙희야 밥해라밥해라 -> 메소드 김숙희야 밥해라밥해라 -> 메소드 이런식으로 객체는 주체 메소드는 동적인 행동이라 생각하면 쉽습니다.프로그래밍 언어로 생각해 보자면 $(#name).css(border:0px solid #000000);$(#name) 은 객체.css(border:0px solid #000000);은 메소드입니다. jQuery는 동적으로 제공하기 위하여 DOM API구조를 만들었습니다.즉 body, head와 같은 태그들을 객체화 했다고 생각하면 됩니다. html 요소의 속성 관련 메소드 요소의 color 속성을 제어할 수 있는 attr메소드를 먼저 알아보겠습니다.속성 값을 지정할 수도 있고 그 값을 나타낼 수 있습니다. 선택된 요소의 속성값을 조..

jQuery-선택자1

jQuery의 개요 자바스크립트에서 html 요솔를 선택하기 위해서는 소스가 복잡해지는 문제점이 있었습니다.Css와 같이 스타일을 지정하고 이를 활용하여 jquery에서 작업 요소들에 대해 필요한 동작을 행할 수 있습니다. 기본적인 jQuery 사용방법입니다.Html 에서의 ID지정방식예)그런저런 내용~ CSS의 지정한 ID활용방식예) #test{스타일속성:값;} jQuery의 지정한 ID 활용방식예) $(“#test”) 1. 기본 선택자(basic selector) 1-1 범용(Universal) 선택자 html페이지내 모든 html요소를 선택(head, body, script.. 등등) 1-2. 명시적 선택자특정한 html 태그 요소에 대해서 선택(p, div .. 등등) 1-3. 복수 선택자 htm..

jQuery의 개념 및 기초예제

jQuery 개념잡기 jquery는 dom계층 이용하여 각 요소에 접근이 가능합니다. ※ DOM 계층의 개념을 간략히 설명하자면 html안에 (head, body)body안에 (div, nav, table...)head 안에(title, meta..)이런식으로 한 태그안에 속해있는 태그를 도식화 한것을 DOM이라고 합니다. jQuery의 작동원리 1. jQuery 라이브러리는 Css와 같은 요소를 선택합니다.ex) $("span") 2. jQuery페이지에 잇는 span요소를 모두 요청합니다. 3. DOM에서 span 요소를 반환합니다.\ 4. jQuery가 해당요소에 대해 동작을 수행합니다. 5. DOM의 속성을 변경합니다. 6. 실행결과를 표시합니다. jQuery의 기초문법 1. jQuery 기본선언..