jQuery 는 DOM과 관련된 처리, 일관된 이벤트 연결, 애니메이션(시각적효과), AJAX Application 개발 등을 손쉽게 할 수 있는 강력한 기능을 가진 일종의 자바스크립트 라이브러리다. 즉, jQuery는 크로스브라우징(모든 브라우저에서 동작하는) 클라이언트 사이드의 자바스크립트 라이브러리이다.
jQuery는 사용법이 간단하고, 코딩이 직관적이며, 성능도 뛰어나다.
DOM(Document Object Model)은 웹문서에서 HTML의 문서 요소를 제어하기 위한 문법적인 구조로 W3C에서는 DOM의 표준 규격을 제시했다.
- DOM은 document(문서), object(객체), model(모델)을 의미하는 용어로서 문서는 HTML을 의미한다.
- 객체는 자바스크립트에서 HTML문서전체에 존재하는 요소들을 객체로 인식한다는 의미이다.
- 이 객체는 DOM형식에 있어 노드(node)라는 개념으로 전환되며 element, text, attribute등의 노드가 존재하게 된다
- Text node
. HTML 웹 문서의 실제 내용을 의미하게 된다.
. TEXT node는 반드시 element node 안에 포함되어 있어야 한다.
그러나 TEXT node가 element node 를 포함하거나 attribute node를 소유할 수는 없다.
- Attribute node
. 모든 attribute node는 <html> 태그 내에 포함 된다.
. attribute node는 (속성,값)의 한쌍으로 표현된다.
. attribute node는 element node 안에 포함되며, element node 를 포함 시킬 수 없다
- javascript코드는 노드에 접근하기 위해 getElementById, getElementByTagName등의 메소드를 이용한다.
. getElementById : 특정 아이디를 가지고 있는 태그에 접근한다.
. getElementByTagName : 특정 태그에 접근한다
. getAttribute : 원하는 태그의 속성을 가져온다
. setAttribute : 원하는 태그의 속성의 값을 설정한다.
jQuery 에는 자바스크립트에서 볼 수 없는 다양한 애니메이션 효과의 구현을 위한 기능적인 함수들이 많이 추가되어 있다.
var h1 = document.getElementById("hello");
를 jQuery 로 하면
var h1 = $("#hello");
로 간단해진다.
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
$("#셀렉터") = document.getelementbyid("셀렉터") |
jQuery 를 사용하는 방법은
1. 라이브러리 파일을 다운로드 받아서 직접 연결하여 사용하는 방법
2. CDN을 이용하는 방법
http://code.jquery.com/jquery-latest.js 를 사용하면 가장 최신 버전으로 자동 연결된다.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
구글 CDN 이용 방법
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
$(selector).action(function() { 소스코드} ); // 내가 원하는 다른 명령을 넣어 함수를 고치고 싶을 때
$(document).ready(function() {
$("#myclick").click(function() {
$("myclick").html("눌렀어요");
});
});
브라우저에서 방문객이 취하는 모든 동작을 이벤트라고 한다.
이벤트가 발생했을 때 자바스크립트/jQuery 실행문을 실행하는 것을 이벤트 핸들러라고 한다.
이벤트는 마우스 이벤트, 키보드 이벤트, 기타 이벤트로 구분할 수 있다.
선택자에 document 가 오면 html 문서 전체가 선택된다.
자바스크립트 또는 jQuery 의 위치가 <head> </head> 사이에 위치한다.
jQuery 는 인터프리터 언어이기 때문에 jQuery가 먼저 실행되고 난 후 <body> 영역에 문서 객체가 로딩된다.
이렇게 되면 선택자가 먼저 실행되어 문서 객체를 선택할 수 없다.
<body> 객체 영역에 문서 객체가 먼저 로딩된 후 jQuery 선택자가 선택되게 하려고 $(document).ready(function(){ 코드 } 또는 간략하게 $(function(){ 코드} 방법을 사용한다.
id 선택자가 #myclick 인 a 엘리먼트가 사용자에 의해 클릭되었을 때 실행된다.
클릭이 되면 $("myclick").html("눌렀어요"); 를 통해서 a 엘리먼트의 내용을 "눌렀어요"로 바꾸게 된다.
.attr()은 attribute 정보를 가져오고,
.prop()는 property 정보를 가져온다.
attrubute는 HTML Element 의 속성들을 의미하며
property는 자바스크립트의 프로퍼티를 의미한다.
$("#menu li") 는 #menu 안에 있는 모든(child & descendant) li를 가리키고
$("#menu > li") 는 #menu 바로 아래의 li만 가리킨다. 즉 $("parent > child") 관계에 해당되는 li 가 5개라면 5개가 해당되고 자손(descendant) 요소는 해당되지 않는다.
※ $("기준요소 > 자식요소") ← 선택한 기준 요소를 기준으로 자식(child) 관계에 지정한 요소만 선택한다.
$("기준요소 하위요소") ← 선택한 기준요소를 기준으로 자식(child), 자손(descendant) 해당되는 요소를 선택한다.
$("div + p").css("background-color", "#82fcc1");
의미 : div 태그와 동등한 위치에 있는 p 태그 중에서 div 바로 다음에 나오는 태그만 배경색을 변경하라.
$("div ~ p").css("background-color", "#82defc");
의미 : div 태그와 동등한 위치에 있는 p 태그 중에서 div 태그 이후에 나오는 모든 태그의 배경색을 변경하라.
div 태그 이전에 나오는 p 태그는 해당되지 않는다.
div 태그의 child, descendant 태그는 해당되지 않는다.
$("[attribute]") : [attribute(속성)] selector는 각 selector의 특정 속성을 선택한다.
- [attribute=value] : 특정 속성과 값을 가진 각 element를 선택한다.
- [attribute!=value] : 특정 속성과 속성 값을 안 가진 element를 선택한다.
- [attribute$=value] : 특정 문자값으로 끝나는 selector를 선택한다.
- [attribute|=value] : 특정문자로 시작하는 속성과 속성 값을 설정한다.
- [attribute^=value] : 특정 속성이 특정 속성 값으로 시작하는 값을 갖는 selector을 설정한다.
- [attribute~=value] : 특정 속성이 특정 속성 값을 포함하는 selector를 설정한다.
- [attribute*=value] : 특정 속성이 특정 값의 일부분(문자열)을 포함하는 selector를 선택한다.
$("셀렉터").html() |
셀렉터 태그내에 존재하는 자식태그을 통째(html + text)로 읽어올때 |
$("셀렉터").text() |
셀렉터 태그내에 존재하는 자식태그들 중에 문자열(text)만 출력하고자 할때 |
$("셀렉터").val() |
INPUT 태그에 정의된 value 속성의 값을 확인하고자 할때 |
$("태그[속성명=속성값]") |
<input type="checkbox" value="1" /> var checkbox_val = $("input[type=checkbox]").val(); |
<input type="text" id="txt" value="2" /> | |
| $(":input태그의type명") | <input type="checkbox" value="1" /> var checkbox_val = $(":checkbox").val(); |
<input type="text" value="2" /> | |
<li> 태그 안에 있는 <a> 태그의 href 속성 값이 "http"로 시작하는 <a> 태그를 선택
$("li a[href^='http']").css({color:"#f90"});
<li> 태그 안에 있는 <a> 태그의 href 속성 값이 "com/"으로 끝나는 <a> 태그를 선택
$("li a[href$='com/']").css({color:"#f90"});
<li> 태그 안에 있는 <a> 태그의 href 속성 값이 "5"가 포함되어 있는 <a> 태그를 선택
$("[href*='5']").css({color:"#f90"});
<img> 태그의 src 속성이 "images/sample1.jpg"와 일치하지 않는 이미지 태그를 선택
$("img[src='images/sample1.jpg']").css({border:"1px solid #f90"});
$("img[src!='images/sample1.jpg']").css({border:"1px solid #f90"});
<li> 태그 안에 있는 <a> 태그의 class 속성이 있는 모든 태그를 선택
$("li a[class]").css({color:"#f90"});
기본 필터 선택자 : filter 선택자에 사용되는 형식은 filter 선택자 앞에 :(클론)을 붙여 표현한다. - $("li:eq(6)").css({"background-color":"#666", color:"#fff"}); // li 항목 중에서 index가 6인 <li> 태그 선택 - $("li:gt(6)").css({"background-color":"#666", color:"#fff"}); // index가 6 뒤에 있는<li> 태그 모두 선택 - $("li:lt(6)").css({"background-color":"#666", color:"#fff"}); // index가 6 앞에 있는 <li> 태그들을 모두 선택 - $("li:first, li:last").css({"background-color":"#666", color:"#fff"}); // <li> 태그 중 처음과 마지막 노드 선택 - $("li:not(:eq(6))").css({"background-color":"#666", color:"#fff"}); // <li> 태그 중 index가 6인 것을 제외한 나머지를 선택 |
보다 상세한 Selector 속성은 https://www.w3schools.com/jquery/jquery_ref_selectors.asp 참조
// 스크롤 따라다니는 박스 div jquery
var currentPosition = parseInt($("#sidebox").css("top"));
$(window).scroll(function() {
var position = $(window).scrollTop();
$("#sidebox").stop().animate({"top":position+currentPosition+"px"},1000);
});
// 롤오버(rollover) 이미지
<script type="text/javascript">
$(function() {
$("img[src='images/aaa.jpg']").hover(function() {
$(this).attr("src", "images/aaa_on.jpg"); // 변경할 이미지
}, function() {
$(this).attr("src", "images/aaa.jpg"); // 원래 이미지
});
$("img[src='images/bbb.jpg']").hover(function() {
$(this).attr("src", "images/bbb_on.jpg");
}, function() {
$(this).attr("src", "images/bbb.jpg");
});
});
</script>
<script type="text/javascript">
$(function() {
// :eq(n)은 특정 셀렉터가 여러개의 복수 요소를 지정할 경우
$("#box > input:eq(0)").click(function() { //첫 번째 input 버튼을 누른 경우
$("#box > div").toggle(300); // slideToggle(300); fadeToggle(300);
});
$("#box > input:eq(1)").click(function() {
$("#box > div").show(200); // slideDown(200); fadeIn(200);
});
$("#box > input:eq(2)").click(function() {
$("#box > div").hide(200); // slideUp(200); fadeOut(200);
});
});
</script>
도움될 사이트 : http://hellogk.tistory.com/
'Web 프로그램 > js, jQuery' 카테고리의 다른 글
| [자바스크립트] getElementsByName 사용하여 체크박스 checked 구하기 (0) | 2015.05.28 |
|---|---|
| 자바스크립트 Select API (0) | 2015.04.10 |
| 이클립스를 사용하여 HTML5, JSP 코드 연습 (0) | 2015.03.27 |
| 자바스크립트 비교 연산자 및 논리연산자 (0) | 2015.03.25 |
| 자바스크립트 기초 2 (0) | 2015.03.22 |
Link2Me