jQuery Tutorial
JQuery - MOME
JQuery 는 JavaScritp 라이브 러리
JQuery - 적게 쓰고 자바스크립트 효과를 낸다
"Try it Yourself" Examples in Each Chapter - 제이쿼리 실행
jQuery Introduction
- HTML
- CSS
- JavaScript
What is jQuery? - jQuery 기능
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities
Why jQuery?
jQuery Get Started - 실행방법
Adding jQuery to Your Web Pages
- Download the jQuery library from jQuery.com
- Include jQuery from a CDN, like Google
Downloading jQuery - 다운로드 방법
html 문서 내 <head>태그 안에 j-query src= 경로 작성
<head>
<script src="jquery-3.2.1.min.js">
</script>
</head>
기존
Do you wonder why we do not have type="text/javascript" inside the <script> tag?
text 사라진 이유??
html5 는 기본 디폴트 랭기지가 자바스크립트라서 text/javascript 없어도됨
참고 바람~
사용법 html <head> 태그에 주소 한줄 넣어주면 됨
jQuery CDN
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
MS
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
</head>
jQuery Syntax - 문법
jQuery Syntax
Basic syntax is: $(selector).action()
- A $ sign to define/access jQuery
- A (selector) to "query (or find)" HTML elements
- A jQuery action() to be performed on the element(s)
Examples:
$(selector).action() // 준비
// 액션
$(this).hide() - hides the current element. // html 엘리먼트 현재 선택자
$("p").hide() - hides all <p> elements. // html p 태그 선택
$(".test").hide() - hides all elements with class="test". // 클래스
$("#test").hide() - hides the element with id="test". // 아이디 지정
제이쿼리 준비
$(document).ready(function(){
// jQuery methods go here...
});
The Document Ready Event - 이벤트 준비
// jQuery methods go here...
});
jQuery Selectors
The element Selector - html 선택자 선택 방법
$("p") // html 태그 제어
<!DOCTYPE html> // doctype을 html 지정
<html>
<head> // 헤드 태그 사이에 cdn 로딩
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ // document 가 로딩되었는지 확인
$("button").click(function(){ // 버튼을 클릭했을때 펑션 작동
$("p").hide(); // btn 클릭했을때 p 태그가 히든 됨
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraphs</button>
</body>
</html>
The #id Selector - html id 선택자
$("#test")<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
The .class Selector - html class 선택자
More Examples of jQuery Selectors 방법
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | |
| $(this) | Selects the current HTML element | |
| $("p.intro") | Selects all <p> elements with class="intro" | |
| $("p:first") | Selects the first <p> element | |
| $("ul li:first") | Selects the first <li> element of the first <ul> | |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | |
| $("[href]") | Selects all elements with an href attribute | |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | |
| $("tr:even") | Selects all even <tr> elements | |
| $("tr:odd") | Selects all odd <tr> elements |
$("p:first") 처음 P태그만 선택한다.(여러가지 P태그중에 첫번째꺼만 선택)
$("ul li:first") ul에 li 중에 첫번째 한개만 선택한다.(ul 태그 안에 li태그중에 첫번째꺼만 선택) - 한개만
$("ul li:first-child") ul에서 첫번째 모두 li개수만큼 선택한다.(ul태그 안에 li태그 모두 선택) - li 모두
$("[href]") href 하이퍼 레퍼런스 모두 선택 href="http://www.w3school.com"
$("a[target='blank']") <p><a href="https://www.w3schools.com/html/" target="_blank">HTML Tutorial</a></p> 만 선택한다.
$("a[target!='blank']") != 부정연산자 target='blank 아닌것만 선택한다.
$(":button") 모든 버튼을 선택한다.
$("tr:even") tr태그 even 짝수 즉! 테이블 태그에서 짝수줄만 선택한다.
$("tr:odd") tr태그에서 odd 홀수 즉! 테이블 태그에서 홀수줄만 선택한다.
Functions In a Separate File 외부파일 불러오기
<head>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="my_jquery_functions.js">
</script>
</head>
제이쿼리 핵심 이벤트
j-Query Event Methods
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
jQuery Syntax For Event Methods
// action goes here!!
});
$(document).ready() // 제인쿼리 로딩 및 준비
click() 이벤트 사용법
$("p").click(function(){ // p태그 선택자 이벤트 클릭하면
$(this).hide(); // this = all 지금 hide 숨김
});
dblclick() 더블클릭 이벤트 사용법
$(this).hide(); // 더블클릭하는 선택자(객체) 그것을 this
});
alert("You entered p1!"); // mouseenter 마우스를 가져가면 alert("msg출력");
alert("Bye! You now leave p1!");// mouseleave 마우스를 때면 alert("msg출력");
});
alert("Mouse down over p1!"); // 마우스를 다운하면 alert 안에 msg 출력 ~
});
alert("Mouse up over p1!"); // 마우스를 업하면 alert 안에 msg 출력~
});
The on() Method
참고
https://www.w3schools.com/jquery/jquery_events.asp
제인쿼리 이벤트 레퍼런스 그때 그때 참고해서 사용하면됨
https://www.w3schools.com/jquery/jquery_ref_events.asp
'Front-End > J-Query' 카테고리의 다른 글
| jQuery Misc (0) | 2017.07.06 |
|---|---|
| jQuery AJAX (0) | 2017.07.06 |
| jQuery Traversing (0) | 2017.07.06 |
| jquery HTML (0) | 2017.07.06 |
| jQuery Effects (0) | 2017.07.06 |
