jQuery
jQuery is a JavaScript Library.
참고 사이트
jQuery 공식사이트: https://jquery.com/
jQuery 다운로드:
공부할 사이트:
테스터
jQuery Selector Tester: http://www.w3schools.com/jquery/trysel.asp
준비과정:
1. 에디터 설치
2. 웹브라우저 설치
3. jQuery 다운로드
적용방법:
1. jQuery 파일 준비
방법: jQuery 다운로드 or CDN 사용
*참고:
jQuery의 버젼 선택
v1.x와 v2.x의 차이 : v2.x는 브라우저의 이전 버젼들을 지원하지 않는다.
compressed와 uncompressed둘다 써도 되지만, development 버전
선택
2. jQuery 파일 적용
방법: project에
다운로드한 .js파일 붙여넣기 or .html 파일에 CDN라인 추가
1. .js 파일 연결
e.g.
<head>
<script
src="my_jquery_functions.js"></script>
</head>
2. .html 파일의 <head> or <body>에 직접
<script></script> 사이에 CDN삽입
e.g.
<head or body>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head or /body>
적용 확인하기:
e.g. 잘 연결되었는지, 버전은 무엇인지에 대한 코드
<script>
function printOut{document.write("잘 연결되었습니다.");document.write("jQuery버젼 :" + $(). jquery );}
</script>
<body onload="writeIt()">
jQuery 사용방법:
jQuery는 CSS selector, HTML DOM으로 접근하여, 스타일, 사이즈, 위치, 값등을 변경한다.
CSS3 selectors:
(http://www.w3schools.com/cssref/css_selectors.asp)
HTML DOM Events:
(http://www.w3schools.com/jsref/dom_obj_event.asp)
jQuery의 기본 syntax:
$(selector).action()
- $: jQuery 쓰겠다는 선언 (jQuery 라고 써도됨)
- (selector): jQuery 적용할 HTML 요소 선택
- .action(): 요소에 적용할 jQuery 동작
jQuery의 Selectors (참고: http://api.jquery.com/category/selectors/)
- jQuery Selectors는
HTML의 요소를 선택하는 역할을 하는데,
return 값은
배열 (jQuery object)로 반환된다.
주의사항
meta characters
(!"#$%&'()*+,./:;<=>?@[\]^`{|}~ )가 있으면,
selector를 쓸때는 \\를
삽입한다.
e.g.
id="one.element"; -> $("#one\\.element");
jQuery의 조작방법
selectors 선택자 (css
문법과
동일함)
1. 기본 선택자
사용방법: $(selector)
$("*") : 모든 HTML 요소를 선택해라
$(this) : 현재 HTML요소를 선택해라
$(".class") : 클래스 이름이 class 인 요소를 선택해라
$("#id") : 아이디 이름이 Id인 요소를 선택해라
$("element")
$("p")
: <p>태그를 가진 요소들을 선택해라
$(“p.myClass”):
<p>태그 안에 class=”myClass”
인 요소를 선택해라
$("p,
span") : 여러 요소들을 한번에 선택도 가능
2. 계층 선택자
사용방법: $(" ")
$(parent descendant)
$("div
p") : <div>를 조상으로 가진 <p>를 선택해라 (부모가 아닌 조상)
$("parent > child")
$("div.firstDiv
> p") : 클래스 이름이
firstDiv인 <div>를 부모로가진
<p>를 선택해라
$("prev + next")
$("div
+ p") : 첫번째
<div>의 바로 아래의 요소인 <p>를 선택해라
$("prev ~ siblings")
$("div
~ p") : <div>와 같은 계층에 있는 <p>를 모두 선택해라
3. 속성&속성값을 이용한 선택자
사용방법: $("[속성=속성값]")
$("[attribute=value]")
: 속성이 attr=vlaue 인 요소를
선택해라
$("input[value=0]")
: 속성값이 0인 input 요소를 모두 선택해라
$("[attr*=value]) : 속성값을 가진 속성이 있는 요소를 모두 선택해라
$("p[class*=aClass]") : 클래스이름이 aClass인
<p>요소를 모두 선택해라
$("[attr^=value]") :
$("img[src^='images\\/']")
: src속성이 images\로 시작하는 <img>태그를 모두 선택해라
$("[attr!=value]")
$("input[value!='text']")
: 속성값이 text와 같지 않은 input태그를 선택해라
$("[attr]")
$("p[id]") : <p id=” ”>와 같이 id속성을 가진 모든 <p>를 선택해라
$(“p[class=a]”) : <p class=”a”>와 같이 class이름이 a인
<p>를 모두 선택해라
$("[attr][attr2$=value]")
$("p[id][class$=oneQue]") : id와 class 둘중에 한곳이라도 이름이 oneQue 인, <p>를 모두 선택해라
필터 (selector의 추가기능)
1. 내용 필터
사용방법: $(":내용")
$(":contains(value)")
$("div:contains('this
is')") : this is라는 텍스트가 있는 div를 선택해라
$(":empty") : 내용물이 없는 요소들을 모두 선택해라
$(":parent") : 내용물이 있는 요소들을 모두 선택해라
$(“:has”)
$(“div:has(p[class=”head”])”): div태그중 <p class=”head”>를 포함하고
있는것을 선택해라
2. 폼 필터
사용방법: $(": ")
$(":checked")
$("input:checked")
: <input>요소중 checked
상태인것을 선택해라
$(":selected")
$("option:selected")
: <option>요소중
selected 상태인것을 선택해라
$(":focus"): 현재 선택된 요소를 선택해라
$(":enabled")
$(":disabled")
3.visibility 필터
사용방법: $(": ")
$(":visible")
$("p:visible")
: 보이는 모든 <p> 선택
$(":hidden")
$("p:hidden")
: 숨어있는 모든 <p> 선택 (<p style="display:none"></p>)
4. 순서 필터
사용방법: $(": ")
è
여러
<p>가 있으면, 자동으로 index[0]~순서로
index가 지정됨
$(":first") : 첫번째 선택
$(":last") : 마지막것 선택
$(":even") : 짝수 번째 선택
$(":odd") : 홀수 번째 선택
$(":eq(index)") : 지정 index번째 선택
$(":gt(index)") : 지정 index 보다 큰
index에 있는 요소들 선택
$(":lt(index)") : 지정 index 보다 작은
index에 있는 요소들 선택
$(":not(selector)")
5. 계층 필터
사용방법: $(" ")
$(:first-child”)
: 첫번째 자식 선택
$(:last-of-type”)
: 마지막 요소 선택
$(“nth-child(숫자)”): 숫자번째 자식 선택 *시작은 1부터:
$(“nth-child(숫자n)”): 숫자 승번째 자식 선택
$(“div p:nth-child(2n)”): div 아래 2번째, 4번째, 6번째 자식<p> 선택
6. 기타
$(":animated")
체이닝 기법
$(selector).action();
$(selector).action1().action2().action3()
한번에 여러 action을
취하게 해줌
DOM element Manipulation (DOM element 조작방법)
종류:
속성 조작방법: 선택한
요소의 속성을 조작
- .html(),
.text(), .css, .attr(), .addClass, .removeClass, .hasClass, .prop(), .val()
수치 조작방법 선택한 요소의 넓이, 높이와 같은 수치 조작
- .height(), .width(), .innerHeight(),
innerWidth(), .outerHeight(), .outerWidth(), .position(), .offset()
객체편집 조작방법: 객체
생성, 복제, 삭제
- .before(), .after(), .append(),
.appendTo(), .preppend(), .prepeendTo(), .empty(), .remove(), .clone()
선택
.each() : 선택한 요소들이 순서대로 선택됨 (루프/반복문에서 유용하게 쓰임)
e.g.
$(“#page p”).each(function(index, element){
$(element).css(“font-size”,”10pt”);
font-size += 1;
});
선택한 곳에 폰트사이즈를
1씩 높여라
생성
.html() : 선택한 부분에 .html 코드를 수정/보기 가능
e.g. alert($(“#page”).html());
아이디 page를 가진 요소의 .html코드를 메세지창에 띄움
e.g. $(“#page”).html(“<p>This is
page</p>”);
.text(): 텍스트 삽입
e.g. $(“#page p”).text(“changed all
<p>”);
.html()과 .text() 차이:
.text()는 <p>를 태그가 아닌, 텍스트로
인지한다.
삽입
.append(“텍스트”) : 텍스트가 해당 요소 태그안에 맨 뒤에 붙는다.
e.g.
$(“#page p”).append(“NEW!!”);
결과: <p id=”page”>This is a sentenceNEW!!</p>
.prepend(“텍스트”): 텍스트가 해당 요소 태그안에 맨 앞에 붙는다.
e.g.
$(“#page p”).prepend (“NEW!!”);
결과: <p id=”page”> NEW!!This
is a sentence</p>
(“텍스트”).appendTo(“위치”): 텍스트가 지정 위치 태그안에 맨 뒤에 붙는다.
e.g.
$(“NEW!!”).appendTo(“p:first”);
결과: <p>This is a sentenceNEW!!</p>
<p>This is another</p>
(“텍스트”).prependTo(“위치”): 텍스트가 지정 위치 태그안에 맨 앞에 붙는다.
.append()와 .appendTo() 차이: .appendTo는 위치가 뒤에 온다.
.before(“텍스트”): 텍스트가 해당 요소 태그 앞에 붙는다.
e.g.
$(“#page p”).append(“NEW!!”);
결과: NEW!!<p
id=”page”>This is a sentence</p>
.after(“텍스트”): 텍스트가 해당 요소 태그 뒤에 붙는다.
(“텍스트”).insertBefore(“위치”): 텍스트가 지정 위치 태그안에 앞에 붙는다.
(“텍스트”).insertAfter(“위치”): 텍스트가 지정 위치 태그안에 뒤에 붙는다.
.wrap(): 선택 요소에 각각에 지정 태그를 삽입
e.g.
$(“#page p”).wrap(“<div stype=’color:blue’ />”);
.wrapAll(): 선택 요소를 한번에 묶어서 지정 태그를 삽입
e.g.
$(“#page p”).wrapAll(“<div stype=’color:blue’ />”);
삭제
.empty() : 해당 부분 모두 삭제
e.g.$(“page
p”).empty();
.remove(); :해당 요소 삭제 (코드도 모두 삭제)
e.g.$(“page p.a, #page p.b”).remove;
.detach(); :해당 요소 삭제 하지만, 이벤트핸들러로 수정 가능 (코드는 살아있음)
e.g.$(“page p.a, #page p.b”).remove;
수정
.replace(“위치”); 해당 위치에 텍스트 수정
e.g.
$(“<div>replaced</div>”).replaceAll(“#page p[id]”);
#page안에 id를 가진 <p>들의 텍스트를 replaced로 변경해라
.replaceWith():
.replace();와 같지만 앞에 위치가 오며,
function 도 사용가능
e.g.
$(“#page p[id]”).replaceWith(“<div>replaced</div>”);
CSS Manipulation (CSS 조작방법)
모든 브라우저에서 같이 적용되도록 함
.css(속성이름)
.css(속성이름, 값)
e.g. $(“page p”).css(“font-size”, “15pt”);
.css(속성들)
e.g.
$(“page p”).css({
“font-size”: “15pt”,
“color”: “red”;
});
.css(속성이름, 콜백함수)
.hasClass(클래스이름)
.addClass(클래스이름)
e.g.
$(“#page p”).addClass(“pClass”);
id값이 page인곳에 <p>에 css의
pClass인 값을 add해라
.pClass { color: blue;}
.removeClass(클래스이름)
toggleClass(클래스이름)
위치 (Position) – 브라우져 마다 다른 기본값을 가짐
.height();
.width();
.innerHeight():
.outerHeight():
.outerWidth();
.offset();
.position();
Data (데이터)
데이터 저장
.data(key, value) or
.data(obj)
데이터 검색/찾기
.data(key) or .data()
데이터 삭제
.removedata(string지정가능/생략가능)
----------------------------------------------------------------
Event & Event Handler (이벤트와 이벤트핸들러)
Event: 웹사이트를 방문한 방문자의 모든 동작 (클릭, 마우스 오버, 마우스 리브 등등..)
Event handler: 이벤트가
발생했을때, 실행되는 코드
이벤트 적용방법:
$(“적용대상”).이벤트종류(이벤트
핸들러);
Event handler attachment (여러 이벤트를 한번에 사용할때 쓰는것)
.on(이벤트들, 선택자, 데이터, 핸들러(함수))
e.g. $(“#exDiv”).on(“mouseover mouseleave”, 지정메소드);
.off(이벤트들, 선택자, 데이터, 핸들러(함수))
이벤트 종류:
브라우저 이벤트 -
.error(), .resize(), .scroll()
도큐먼트 로딩 -
.load(), .ready(), .unload()
폼 이벤트 - .blur(),
.change(), .focus(), .focusin(), .focusout(), .select(), .submit()
키보드 이벤트 - .keydown(),
.keypress(), .keyup()
마우스 이벤트 –
.click(), .dbclick(). .hover(), .toggle(), .contextmenu(), .mousedown(),.
.mouseenter(), .mouseleave(), .mousemove(), .movseout(), .mouseover(),
.mouseup()
.hover() = .mouseover 과 .mouseleave를 한번에 작성한것
e.g.
$(“document”).ready(function(){실행문..});
문서객체가 모두 로딩되었으면,
실행문을 실행해라.
이벤트 오브젝트 (브라우져별로 다른것도 있음)
----------------------------------------------------------------
jQuery Effect (제이쿼리 이펙트)
댓글 없음:
댓글 쓰기